trycourier · SoheilHasankhani · Jan 16, 2024 · Jan 16, 2024
diff --git a/packages/client-api/package.json b/packages/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-api",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "",
   "main": "dist/index.js",
   "private": true,

diff --git a/packages/client-graphql/package.json b/packages/client-graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-graphql",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/components",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "private": true,
   "description": "Beautiful, easy React toast notifications",
   "author": "Courier <support@courier.com>",
@@ -18,11 +18,11 @@
   "license": "MIT",
   "dependencies": {
     "@trycourier/courier": "^1.3.0",
-    "@trycourier/react-brand-designer": "^4.8.0",
-    "@trycourier/react-inbox": "^4.8.0",
-    "@trycourier/react-preferences": "^4.8.0",
-    "@trycourier/react-provider": "^4.8.0",
-    "@trycourier/react-toast": "^4.8.0",
+    "@trycourier/react-brand-designer": "^4.8.1",
+    "@trycourier/react-inbox": "^4.8.1",
+    "@trycourier/react-preferences": "^4.8.1",
+    "@trycourier/react-provider": "^4.8.1",
+    "@trycourier/react-toast": "^4.8.1",
     "babel-loader": "^8.0.6",
     "babel-preset-preact": "^2.0.0",
     "camel-case": "^4.1.2",

diff --git a/packages/react-brand-designer/package.json b/packages/react-brand-designer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-brand-designer",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "Embeddable brand designer for multi-channel notifications",
   "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme",
   "license": "ISC",
@@ -29,7 +29,7 @@
     "url": "https://github.com/trycourier/courier-react/issues"
   },
   "dependencies": {
-    "@trycourier/react-elements": "^4.8.0",
+    "@trycourier/react-elements": "^4.8.1",
     "rimraf": "^3.0.2"
   },
   "devDependencies": {

diff --git a/packages/react-elements/package.json b/packages/react-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-elements",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "Shareable components for each Courier package",
   "author": "Drew Youngwerth <drew@youngwerth.com>",
   "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme",

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,7 +20,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^4.8.0",
+    "@trycourier/client-graphql": "^4.8.1",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },

diff --git a/packages/react-inbox-next/package.json b/packages/react-inbox-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox-next",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "",
   "private": true,
   "main": "dist/index.js",

diff --git a/packages/react-inbox/package.json b/packages/react-inbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,10 +20,10 @@
   "dependencies": {
     "@fontsource/poppins": "^4.5.9",
     "@tippyjs/react": "^4.2.3",
-    "@trycourier/client-graphql": "^4.8.0",
-    "@trycourier/react-elements": "^4.8.0",
-    "@trycourier/react-hooks": "^4.8.0",
-    "@trycourier/react-preferences": "^4.8.0",
+    "@trycourier/client-graphql": "^4.8.1",
+    "@trycourier/react-elements": "^4.8.1",
+    "@trycourier/react-hooks": "^4.8.1",
+    "@trycourier/react-preferences": "^4.8.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.19.0",
     "deep-extend": "^0.6.0",

diff --git a/packages/react-inbox/src/components/Inbox/index.tsx b/packages/react-inbox/src/components/Inbox/index.tsx
@@ -41,13 +41,15 @@ const UnreadIndicator = styled.div<{ showUnreadMessageCount?: boolean }>(
             borderRadius: 17,
             padding: "0 4px",
             height: 16,
-            left: 12,
+            left: theme.rtl ? undefined : 12,
+            right: theme.rtl ? 12 : undefined,
             textAlign: "center",
             minWidth: 8,
           }
         : {
             top: -2,
-            right: 0,
+            right: theme.rtl ? undefined : 0,
+            left: theme.rtl ? 0 : undefined,
             borderRadius: "100%",
             padding: 5,
           },

diff --git a/packages/react-inbox/src/components/Messages2.0/Header.tsx b/packages/react-inbox/src/components/Messages2.0/Header.tsx
@@ -95,7 +95,8 @@ const DropdownOptionButton = styled.button<{
 
     svg: {
       marginTop: "1px",
-      marginLeft: "3px",
+      marginLeft: theme.rtl ? undefined : "3px",
+      marginRight: theme.rtl ? "3px" : undefined,
       ...(showDropdown
         ? {
             transform: "rotate(180deg)",
@@ -155,7 +156,8 @@ const HeadingDropdownOptions = styled.div(({ theme }) => {
     {
       position: "absolute",
       top: "42px",
-      left: 0,
+      left: theme.rtl ? undefined : 0,
+      right: theme.rtl ? 0 : undefined,
       background: "white",
       width: "100%",
       zIndex: 2,

diff --git a/packages/react-inbox/src/components/Messages2.0/Message.tsx b/packages/react-inbox/src/components/Messages2.0/Message.tsx
@@ -34,7 +34,8 @@ const UnreadIndicator = styled.div<{ read?: IInboxMessagePreview["read"] }>(
         width: 2,
         background: primaryColor,
         position: "absolute",
-        left: "1px",
+        left: theme.rtl ? undefined : "1px",
+        right: theme.rtl ? "1px" : undefined,
         top: "1px",
         bottom: "1px",
       },
@@ -86,9 +87,9 @@ const MessageContainer = styled.div(({ theme }) => {
 });
 
 const Contents = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({
-  marginRight: "auto",
-  textAlign: "left",
-  marginLeft: hasIcon ? 12 : 0,
+  marginRight: theme.rtl ? (hasIcon ? 12 : 0) : "auto",
+  marginLeft: theme.rtl ? "auto" : hasIcon ? 12 : 0,
+  textAlign: theme.rtl ? "right" : "left",
   ...theme.message?.contents,
 }));
 
@@ -101,12 +102,14 @@ const Pinned = styled.div<{ color?: string }>(({ theme, color }) =>
       alignItems: "center",
       color: color ?? "rgb(115, 129, 155)",
       svg: {
-        paddingRight: "3px",
+        paddingRight: theme.rtl ? undefined : "3px",
+        paddingLeft: theme.rtl ? "3px" : undefined,
       },
 
       img: {
         width: "18px",
-        paddingRight: "3px",
+        paddingRight: theme.rtl ? undefined : "3px",
+        paddingLeft: theme.rtl ? "3px" : undefined,
       },
     },
     theme?.message?.pinned

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/index.tsx b/packages/react-inbox/src/components/Messages2.0/actions/index.tsx
@@ -61,32 +61,34 @@ const MobileActions = styled.div(({ theme }) =>
 );
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Styled = styled.div((_props) => {
+const Styled = styled.div(({ theme }) => {
   return {
     display: "flex",
     height: 24,
     alignItems: "center",
     position: "absolute",
-    right: 12,
+    right: theme.rtl ? undefined : 12,
+    left: theme.rtl ? 12 : undefined,
 
     ".close": {
-      marginRight: -6,
-      marginLeft: 6,
+      marginRight: theme.rtl ? 6 : -6,
+      marginLeft: theme.rtl ? -6 : 6,
       marginTop: -3,
     },
 
     "> div": {
       opacity: 0,
       top: 4,
-      right: 0,
+      right: theme.rtl ? undefined : 0,
+      left: theme.rtl ? 0 : undefined,
       position: "absolute",
       visibility: "hidden",
       transition: "opacity 200ms ease-in-out",
 
       "&:not(.hidden)": {
         opacity: 1,
         visibility: "visible",
-        textAlign: "right",
+        textAlign: theme.rtl ? "left" : "right",
       },
     },
 
@@ -224,7 +226,6 @@ const MessageActions: React.FunctionComponent<{
           tabIndex={0}
           title={created}
           aria-label={`created ${readableTimeAgo}`}
-          style={{ textAlign: "right" }}
         >
           {archived ? `Archived: ${formattedTime}` : formattedTime}
         </TimeAgo>

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/styles.ts b/packages/react-inbox/src/components/Messages2.0/actions/styles.ts
@@ -11,7 +11,8 @@ export const getStyles = (theme: InboxTheme) => {
     background: "transparent",
     borderRadius: "6px",
     padding: 0,
-    marginLeft: "6px",
+    marginLeft: theme.rtl ? undefined : "6px",
+    marginRight: theme.rtl ? "6px" : undefined,
     height: "24px",
     width: "24px",
     transition: "background 200ms ease-in-out",

diff --git a/packages/react-inbox/src/components/Messages2.0/index.tsx b/packages/react-inbox/src/components/Messages2.0/index.tsx
@@ -30,7 +30,8 @@ const ResponsiveContainer = styled.div<{ isMobile?: boolean }>(
               },
               position: "fixed",
               top: 0,
-              left: 0,
+              left: theme.rtl ? undefined : 0,
+              right: theme.rtl ? 0 : undefined,
               width: "100vw",
               height: "100vh",
             }
@@ -52,7 +53,8 @@ const DismissInbox = styled.button(({ theme }) =>
       borderRadius: "50%",
       position: "absolute",
       top: 6,
-      right: 8,
+      right: theme.rtl ? undefined : 8,
+      left: theme.rtl ? 8 : undefined,
       cursor: "pointer",
       width: 42,
       height: 42,
@@ -110,9 +112,11 @@ export const Footer = styled.div(({ theme }) =>
       letterSpacing: "0.1rem",
       height: 36,
       justifyContent: "center",
-      paddingRight: 18,
+      paddingRight: theme.rtl ? undefined : 18,
+      paddingLeft: theme.rtl ? 18 : undefined,
       svg: {
-        marginLeft: -3,
+        marginLeft: theme.rtl ? undefined : -3,
+        marginRight: theme.rtl ? -3 : undefined,
         marginTop: -4,
       },
 
@@ -156,7 +160,8 @@ const ScrollTop = styled.button<{ text: string }>(({ theme, text }) => {
         marginTop: "-10px",
         content: `'${text}'`,
         position: "absolute",
-        left: "50%",
+        left: theme.rtl ? undefined : "50%",
+        right: theme.rtl ? "50%" : undefined,
         transform: "translateX(-50%)",
         padding: "2px 8px",
         display: "inline-block",

diff --git a/packages/react-inbox/src/components/Messages2.0/styled.tsx b/packages/react-inbox/src/components/Messages2.0/styled.tsx
@@ -33,9 +33,9 @@ export const Container = styled.div(({ theme }) =>
 );
 
 export const Contents = styled.div(({ theme }) => ({
-  marginRight: "auto",
-  marginLeft: 15,
-  textAlign: "left",
+  marginRight: theme.rtl ? 15 : "auto",
+  marginLeft: theme.rtl ? "auto" : 15,
+  textAlign: theme.rtl ? "right" : "left",
   ...theme.message?.contents,
 }));
 
@@ -46,7 +46,7 @@ export const Title = styled.div<{ read?: string }>(({ theme, read }) =>
       fontStyle: "normal",
       fontWeight: "600",
       lineHeight: "16px",
-      textAlign: "left",
+      textAlign: theme.rtl ? "right" : "left",
       display: "-webkit-box",
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -67,7 +67,7 @@ export const TextElement = styled.div(({ theme }) =>
       maxWidth: 250,
       fontWeight: "400",
       lineHeight: "16px",
-      textAlign: "left",
+      textAlign: theme.rtl ? "right" : "left",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "pre-line",
@@ -101,7 +101,8 @@ export const ActionElement = styled.button<{
       padding: "0 16px",
       cursor: "pointer",
       border: `1px solid ${primary ? "transparent" : "rgba(28, 39, 58, 1)"}`,
-      marginRight: "12px",
+      marginRight: theme.rtl ? undefined : "12px",
+      marginLeft: theme.rtl ? "12px" : undefined,
       marginTop: "6px",
       transition: "all 100ms ease-in",
       "&:hover": {
@@ -127,6 +128,7 @@ export const TimeAgo = styled.div(({ theme }) =>
       maxWidth: "90px",
       textOverflow: "ellipsis",
       overflow: "hidden",
+      textAlign: theme.rtl ? "left" : "right",
     },
     theme.message?.timeAgo
   )
@@ -166,7 +168,8 @@ export const UnreadIndicator = styled.div(({ theme }) =>
       backgroundColor: theme?.brand?.colors?.primary ?? "#9121c2",
       borderRadius: "50%",
       position: "absolute",
-      left: "13px",
+      left: theme.rtl ? undefined : "13px",
+      right: theme.rtl ? "13px" : undefined,
     },
     theme?.message?.unreadIndicator
   )
@@ -204,7 +207,8 @@ export const ResponsiveContainer = styled.div<{ isMobile?: boolean }>(
           ? {
               position: "fixed",
               top: 0,
-              left: 0,
+              left: theme.rtl ? undefined : 0,
+              right: theme.rtl ? 0 : undefined,
               width: "100vw",
               height: "100vh",
             }
@@ -272,10 +276,12 @@ export const Footer = styled.div(({ theme }) =>
       fontWeight: "700",
       height: 45,
       justifyContent: "center",
-      paddingRight: 18,
+      paddingRight: theme.rtl ? undefined : 18,
+      paddingLeft: theme.rtl ? 18 : undefined,
       svg: {
         marginTop: 2,
-        marginLeft: -1,
+        marginLeft: theme.rtl ? undefined : -1,
+        marginRight: theme.rtl ? -1 : undefined,
       },
 
       a: {
@@ -293,9 +299,11 @@ export const Line = styled.div(({ theme }) => ({
   flex: 1,
   opacity: "0.18",
   ":first-child": {
-    marginRight: "15px",
+    marginRight: theme.rtl ? undefined : "15px",
+    marginLeft: theme.rtl ? "15px" : undefined,
   },
   ":last-child": {
-    marginLeft: "15px",
+    marginRight: theme.rtl ? "15px" : undefined,
+    marginLeft: theme.rtl ? undefined : "15px",
   },
 }));