@medusajs/dashboard 2.10.4-preview-20250923150206 → 2.10.4-preview-20250923180156

package/dist/{user-detail-VIVFFLOW.mjs → user-detail-ZIWKV6QD.mjs}

@@ -1,6 +1,6 @@
 import {
   SingleColumnPage
-} from "./chunk-2RQLKDBF.mjs";
+} from "./chunk-GIZFNLKK.mjs";
 import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
@@ -9,8 +9,9 @@ import {
 } from "./chunk-LPEUYMRK.mjs";
 import {
   ActionMenu
-} from "./chunk-3NJTXRIY.mjs";
+} from "./chunk-OZPB6JBL.mjs";
 import "./chunk-OC7BQLYI.mjs";
+import "./chunk-S4DMV3ZT.mjs";
 import {
   useDeleteUser,
   useUser

package/dist/{user-invite-W26LOOW7.mjs → user-invite-KUH4AI2L.mjs}

@@ -5,9 +5,9 @@ import "./chunk-LQTHYS2Z.mjs";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-7VJK6HNE.mjs";
+} from "./chunk-EYL2JACT.mjs";
 import "./chunk-YEDAFXMB.mjs";
-import "./chunk-AOFGTNG6.mjs";
+import "./chunk-HQKGZADC.mjs";
 import "./chunk-EMIHDNB7.mjs";
 import "./chunk-Z26G6WFJ.mjs";
 import "./chunk-M3VFKDXJ.mjs";
@@ -25,8 +25,9 @@ import {
 import "./chunk-LPEUYMRK.mjs";
 import {
   ActionMenu
-} from "./chunk-3NJTXRIY.mjs";
+} from "./chunk-OZPB6JBL.mjs";
 import "./chunk-OC7BQLYI.mjs";
+import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-67ORSRVT.mjs";
 import {
   Form

package/dist/{user-list-3YFYZFSK.mjs → user-list-TPBPZ7KJ.mjs}

@@ -1,6 +1,6 @@
 import {
   SingleColumnPage
-} from "./chunk-2RQLKDBF.mjs";
+} from "./chunk-GIZFNLKK.mjs";
 import {
   useDataTableDateColumns
 } from "./chunk-2D44OO7A.mjs";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-Q33G337Z.mjs";
 import {
   DataTable
-} from "./chunk-UNM3LPTG.mjs";
+} from "./chunk-OQPVQGSH.mjs";
 import {
   useQueryParams
 } from "./chunk-C76H5USB.mjs";
@@ -18,8 +18,9 @@ import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
 import "./chunk-RM6NY572.mjs";
-import "./chunk-3NJTXRIY.mjs";
+import "./chunk-OZPB6JBL.mjs";
 import "./chunk-OC7BQLYI.mjs";
+import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-67ORSRVT.mjs";
 import {
   useUsers

package/dist/{user-metadata-ZURLDLGC.mjs → user-metadata-F6KRFYDW.mjs}

@@ -1,7 +1,7 @@
 import "./chunk-XRTVFYCW.mjs";
 import {
   MetadataForm
-} from "./chunk-S2UEWRDA.mjs";
+} from "./chunk-IL5IMREK.mjs";
 import "./chunk-IUCDCPJU.mjs";
 import "./chunk-6HTZNHPT.mjs";
 import {
@@ -9,9 +9,11 @@ import {
 } from "./chunk-4TC5YS65.mjs";
 import "./chunk-LPEUYMRK.mjs";
 import "./chunk-OC7BQLYI.mjs";
+import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-OBQI23QM.mjs";
-import "./chunk-OGHQ6VJI.mjs";
+import "./chunk-BSBCIU6C.mjs";
 import "./chunk-KOSCMAIC.mjs";
+import "./chunk-5U3FFMC7.mjs";
 import "./chunk-X6DSNTTX.mjs";
 import "./chunk-I6E6CALJ.mjs";
 import "./chunk-4RG7UJCT.mjs";

package/dist/{workflow-execution-detail-4R6AFFHV.mjs → workflow-execution-detail-JRJZATNU.mjs}

@@ -10,15 +10,19 @@ import {
 import {
   JsonViewSection,
   SingleColumnPage
-} from "./chunk-2RQLKDBF.mjs";
+} from "./chunk-GIZFNLKK.mjs";
 import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
 import {
   SingleColumnPageSkeleton
 } from "./chunk-LPEUYMRK.mjs";
-import "./chunk-OGHQ6VJI.mjs";
+import {
+  useDocumentDirection
+} from "./chunk-S4DMV3ZT.mjs";
+import "./chunk-BSBCIU6C.mjs";
 import "./chunk-KOSCMAIC.mjs";
+import "./chunk-5U3FFMC7.mjs";
 import "./chunk-X6DSNTTX.mjs";
 import "./chunk-I6E6CALJ.mjs";
 import "./chunk-4RG7UJCT.mjs";
@@ -493,6 +497,7 @@ var Canvas = ({
 }) => {
   const [zoom, setZoom] = useState2(1);
   const [isDragging, setIsDragging] = useState2(false);
+  const direction = useDocumentDirection();
   const scale = useMotionValue(defaultState.scale);
   const x = useMotionValue(defaultState.x);
   const y = useMotionValue(defaultState.y);
@@ -588,7 +593,7 @@ var Canvas = ({
             children: /* @__PURE__ */ jsx5(PlusMini, {})
           }
         ),
-        /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsxs3(DropdownMenu, { dir: direction, children: [
           /* @__PURE__ */ jsx5(DropdownMenu.Trigger, { className: "disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed flex w-[50px] items-center justify-center border-r p-1 outline-none", children: /* @__PURE__ */ jsxs3(
             Text3,
             {

package/dist/{workflow-execution-list-5J3DQQRD.mjs → workflow-execution-list-5WL4L464.mjs}

@@ -9,15 +9,15 @@ import "./chunk-LQTHYS2Z.mjs";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-7VJK6HNE.mjs";
+} from "./chunk-EYL2JACT.mjs";
 import "./chunk-YEDAFXMB.mjs";
-import "./chunk-AOFGTNG6.mjs";
+import "./chunk-HQKGZADC.mjs";
 import "./chunk-EMIHDNB7.mjs";
 import "./chunk-Z26G6WFJ.mjs";
 import "./chunk-M3VFKDXJ.mjs";
 import {
   SingleColumnPage
-} from "./chunk-2RQLKDBF.mjs";
+} from "./chunk-GIZFNLKK.mjs";
 import {
   useQueryParams
 } from "./chunk-C76H5USB.mjs";
@@ -26,6 +26,7 @@ import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
 import "./chunk-LPEUYMRK.mjs";
+import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-67ORSRVT.mjs";
 import {
   useWorkflowExecutions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "2.10.4-preview-20250923150206",
+  "version": "2.10.4-preview-20250923180156",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "vite",
@@ -45,10 +45,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "2.10.4-preview-20250923150206",
-    "@medusajs/icons": "2.10.4-preview-20250923150206",
-    "@medusajs/js-sdk": "2.10.4-preview-20250923150206",
-    "@medusajs/ui": "4.0.24-preview-20250923150206",
+    "@medusajs/admin-shared": "2.10.4-preview-20250923180156",
+    "@medusajs/icons": "2.10.4-preview-20250923180156",
+    "@medusajs/js-sdk": "2.10.4-preview-20250923180156",
+    "@medusajs/ui": "4.0.24-preview-20250923180156",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -78,10 +78,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "2.10.4-preview-20250923150206",
-    "@medusajs/admin-vite-plugin": "2.10.4-preview-20250923150206",
-    "@medusajs/types": "2.10.4-preview-20250923150206",
-    "@medusajs/ui-preset": "2.10.4-preview-20250923150206",
+    "@medusajs/admin-shared": "2.10.4-preview-20250923180156",
+    "@medusajs/admin-vite-plugin": "2.10.4-preview-20250923180156",
+    "@medusajs/types": "2.10.4-preview-20250923180156",
+    "@medusajs/ui-preset": "2.10.4-preview-20250923180156",
     "@types/node": "^20.11.15",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",

package/src/components/common/action-menu/action-menu.tsx

@@ -4,6 +4,7 @@ import { EllipsisHorizontal } from "@medusajs/icons"
 import { PropsWithChildren, ReactNode } from "react"
 import { Link } from "react-router-dom"
 import { ConditionalTooltip } from "../conditional-tooltip"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export type Action = {
   icon: ReactNode
@@ -38,6 +39,7 @@ export const ActionMenu = ({
   variant = "transparent",
   children,
 }: ActionMenuProps) => {
+  const direction = useDocumentDirection()
   const inner = children ?? (
     <IconButton size="small" variant={variant}>
       <EllipsisHorizontal />
@@ -45,7 +47,7 @@ export const ActionMenu = ({
   )
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>{inner}</DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {groups.map((group, index) => {

package/src/components/common/json-view-section/json-view-section.tsx

@@ -46,7 +46,10 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
             <ArrowUpRightOnBox />
           </IconButton>
         </Drawer.Trigger>
-        <Drawer.Content className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
+        <Drawer.Content
+          dir="ltr"
+          className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]"
+        >
           <div className="bg-ui-code-bg-base flex items-center justify-between px-6 py-4">
             <div className="flex items-center gap-x-4">
               <Drawer.Title asChild>

package/src/components/common/sidebar-link/sidebar-link.tsx

@@ -37,7 +37,7 @@ export const SidebarLink = ({
               </Text>
             </div>
             <div className="flex size-7 items-center justify-center">
-              <TriangleRightMini className="text-ui-fg-muted" />
+              <TriangleRightMini className="text-ui-fg-muted rtl:rotate-180" />
             </div>
           </div>
         </div>

package/src/components/common/switch-box/switch-box.tsx

@@ -50,6 +50,8 @@ export const SwitchBox = <
             <div className="bg-ui-bg-component shadow-elevation-card-rest flex items-start gap-x-3 rounded-lg p-3">
               <Form.Control>
                 <Switch
+                  className="rtl:rotate-180"
+                  dir="ltr"
                   {...field}
                   checked={value}
                   onCheckedChange={(e) => {

package/src/components/data-grid/components/data-grid-root.tsx

@@ -29,6 +29,7 @@ import { FieldValues, UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
 import { useCommandHistory } from "../../../hooks/use-command-history"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 import { ConditionalTooltip } from "../../common/conditional-tooltip"
 import { DataGridContext } from "../context"
 import {
@@ -50,7 +51,7 @@ import { isCellMatch, isSpecialFocusKey } from "../utils"
 import { DataGridKeyboardShortcutModal } from "./data-grid-keyboard-shortcut-modal"
 export interface DataGridRootProps<
   TData,
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 > {
   data?: TData[]
   columns: ColumnDef<TData>[]
@@ -96,7 +97,7 @@ const getCommonPinningStyles = <TData,>(
 
 export const DataGridRoot = <
   TData,
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 >({
   data = [],
   columns,
@@ -700,6 +701,7 @@ const DataGridHeader = ({
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
   const [columnsOpen, setColumnsOpen] = useState(false)
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   // Since all columns are checked by default, we can check if any column is unchecked
   const hasChanged = columnOptions.some((column) => !column.checked)
@@ -716,7 +718,11 @@ const DataGridHeader = ({
   return (
     <div className="bg-ui-bg-base flex items-center justify-between border-b p-4">
       <div className="flex items-center gap-x-2">
-        <DropdownMenu open={columnsOpen} onOpenChange={handleColumnsOpenChange}>
+        <DropdownMenu
+          dir={direction}
+          open={columnsOpen}
+          onOpenChange={handleColumnsOpenChange}
+        >
           <ConditionalTooltip
             showTooltip={isDisabled}
             content={t("dataGrid.columns.disabled")}

package/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx

@@ -106,9 +106,10 @@ const OuterComponent = ({
     >
       <div className="absolute inset-y-0 left-4 z-[3] flex w-fit items-center justify-center">
         <Switch
+          dir="ltr"
           ref={buttonRef}
           size="small"
-          className="shrink-0"
+          className="shrink-0 rtl:rotate-180"
           checked={localValue.checked}
           disabled={localValue.disabledToggle}
           onCheckedChange={handleCheckedChange}

package/src/components/filtering/filter-group/filter-group.tsx

@@ -1,6 +1,7 @@
 import { Button, DropdownMenu } from "@medusajs/ui"
 import { ReactNode } from "react"
 import { useSearchParams } from "react-router-dom"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type FilterGroupProps = {
   filters: {
@@ -37,8 +38,11 @@ type AddFilterMenuProps = {
 }
 
 const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
+  const direction = useDocumentDirection()
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      dir={direction}
+    >
       <DropdownMenu.Trigger asChild>
         <Button variant="secondary" size="small">
           Add filter

package/src/components/filtering/order-by/order-by.tsx

@@ -4,6 +4,8 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
+
 type OrderByProps = {
   keys: string[]
 }
@@ -56,6 +58,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }>(initState(searchParams))
 
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   const handleDirChange = (dir: string) => {
     setState((prev) => ({
@@ -99,7 +102,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>
         <IconButton size="small">
           <ArrowUpDown />

package/src/components/forms/address-form/address-form.tsx

@@ -7,6 +7,7 @@ import { Control } from "react-hook-form"
 import { AddressSchema } from "../../../lib/schemas"
 import { Form } from "../../common/form"
 import { CountrySelect } from "../../inputs/country-select"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type AddressFieldValues = z.infer<typeof AddressSchema>
 
@@ -22,7 +23,7 @@ export const AddressForm = ({
   layout,
 }: AddressFormProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   const style = clx("gap-4", {
     "flex flex-col": layout === "stack",
     "grid grid-cols-2": layout === "grid",
@@ -182,7 +183,11 @@ export const AddressForm = ({
                   <Form.Label>{t("fields.country")}</Form.Label>
                   <Form.Control>
                     {countries ? (
-                      <Select {...field} onValueChange={onChange}>
+                      <Select
+                        dir={direction}
+                        {...field}
+                        onValueChange={onChange}
+                      >
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/components/forms/metadata-form/metadata-form.tsx

@@ -25,6 +25,7 @@ import { Form } from "../../common/form"
 import { Skeleton } from "../../common/skeleton"
 import { RouteDrawer, useRouteModal } from "../../modals"
 import { KeyboundForm } from "../../utilities/keybound-form"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type MetaDataSubmitHook<TRes> = (
   params: { metadata?: Record<string, any> | null },
@@ -77,7 +78,7 @@ const InnerForm = <TRes,>({
 }: Omit<MetadataFormProps<TRes>, "isPending">) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const hasUneditableRows = getHasUneditableRows(metadata)
 
   const form = useForm<z.infer<typeof MetadataSchema>>({
@@ -215,10 +216,12 @@ const InnerForm = <TRes,>({
                         }}
                       />
                     </div>
-                    <DropdownMenu>
+                    <DropdownMenu
+                      dir={direction}
+                    >
                       <DropdownMenu.Trigger
                         className={clx(
-                          "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
+                          "invisible absolute inset-y-0 -end-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
                           {
                             hidden: isDisabled,
                           }

package/src/components/inputs/combobox/combobox.tsx

@@ -251,7 +251,7 @@ const ComboboxImpl = <T extends Value = string>(
               e.preventDefault()
               handleValueChange(isArrayValue ? ([] as unknown as T) : undefined)
             }}
-            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute left-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pl-1.5 pr-1 outline-none"
+            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] ps-1.5 pe-1 outline-none"
           >
             <span className="tabular-nums">{selectedValues.length}</span>
             <XMarkMini className="text-ui-fg-muted" />
@@ -263,8 +263,8 @@ const ComboboxImpl = <T extends Value = string>(
               className={clx(
                 "pointer-events-none absolute inset-y-0 flex size-full items-center",
                 {
-                  "left-[calc(var(--tag-width)+8px)]": showTag,
-                  "left-2": !showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
                 }
               )}
             >
@@ -278,8 +278,8 @@ const ComboboxImpl = <T extends Value = string>(
               className={clx(
                 "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
                 {
-                  "left-[calc(var(--tag-width)+8px)]": showTag,
-                  "left-2": !showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
                 }
               )}
             >
@@ -293,12 +293,12 @@ const ComboboxImpl = <T extends Value = string>(
             ref={comboboxRef}
             onFocus={() => setOpen(true)}
             className={clx(
-              "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pl-2 pr-8 outline-none focus:cursor-text",
+              "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent ps-2 pe-8 outline-none focus:cursor-text",
               "hover:bg-ui-bg-field-hover",
               {
                 "opacity-0": hideInput,
-                "pl-2": !showTag,
-                "pl-[calc(var(--tag-width)+8px)]": showTag,
+                "ps-2": !showTag,
+                "ps-[calc(var(--tag-width)+8px)]": showTag,
               }
             )}
             placeholder={hidePlaceholder ? undefined : placeholder}
@@ -312,7 +312,7 @@ const ComboboxImpl = <T extends Value = string>(
               e.preventDefault()
               handleValueChange(undefined)
             }}
-            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute right-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
+            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute end-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
           >
             <XMarkMini className="text-ui-fg-muted" />
           </button>
@@ -323,7 +323,7 @@ const ComboboxImpl = <T extends Value = string>(
               <button
                 {...props}
                 type="button"
-                className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute right-0 flex size-8 items-center justify-center rounded-r outline-none"
+                className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none"
               >
                 <TrianglesMini />
               </button>
@@ -341,7 +341,7 @@ const ComboboxImpl = <T extends Value = string>(
           "max-h-[200px] overflow-y-auto",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2"
         )}
         style={{
           pointerEvents: open ? "auto" : "none",

package/src/components/inputs/country-select/country-select.tsx

@@ -33,7 +33,7 @@ export const CountrySelect = forwardRef<
       <div className="relative">
         <TrianglesMini
           className={clx(
-            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
+            "text-ui-fg-muted transition-fg pointer-events-none absolute end-2 top-1/2 -translate-y-1/2",
             {
               "text-ui-fg-disabled": disabled,
             }

package/src/components/inputs/province-select/province-select.tsx

@@ -76,7 +76,7 @@ export const ProvinceSelect = forwardRef<
       <div className="relative">
         <TrianglesMini
           className={clx(
-            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
+            "text-ui-fg-muted transition-fg pointer-events-none absolute end-2 top-1/2 -translate-y-1/2",
             {
               "text-ui-fg-disabled": disabled,
             }

package/src/components/layout/main-layout/main-layout.tsx

@@ -29,6 +29,7 @@ import { queryClient } from "../../../lib/query-client"
 import { useExtension } from "../../../providers/extension-provider"
 import { useSearch } from "../../../providers/search-provider"
 import { UserMenu } from "../user-menu"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export const MainLayout = () => {
   return (
@@ -94,7 +95,7 @@ const Logout = () => {
 const Header = () => {
   const { t } = useTranslation()
   const { store, isPending, isError, error } = useStore()
-
+  const direction = useDocumentDirection()
   const name = store?.name
   const fallback = store?.name?.slice(0, 1).toUpperCase()
 
@@ -106,11 +107,12 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-      <DropdownMenu>
+    <DropdownMenu
+          dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
-            "bg-ui-bg-subtle transition-fg grid w-full grid-cols-[24px_1fr_15px] items-center gap-x-3 rounded-md p-0.5 pr-2 outline-none",
+            "bg-ui-bg-subtle transition-fg grid w-full grid-cols-[24px_1fr_15px] items-center gap-x-3 rounded-md p-0.5 pe-2 outline-none",
             "hover:bg-ui-bg-subtle-hover",
             "data-[state=open]:bg-ui-bg-subtle-hover",
             "focus-visible:shadow-borders-focus"
@@ -121,7 +123,7 @@ const Header = () => {
           ) : (
             <Skeleton className="h-6 w-6 rounded-md" />
           )}
-          <div className="block overflow-hidden text-left">
+          <div className="block overflow-hidden text-start">
             {name ? (
               <Text
                 size="small"
@@ -267,7 +269,7 @@ const Searchbar = () => {
         )}
       >
         <MagnifyingGlass />
-        <div className="flex-1 text-left">
+        <div className="flex-1 text-start">
           <Text size="small" leading="compact" weight="plus">
             {t("app.search.label")}
           </Text>

package/src/components/layout/settings-layout/settings-layout.tsx

@@ -43,6 +43,10 @@ const useSettingRoutes = (): INavItem[] => {
         label: t("returnReasons.domain"),
         to: "/settings/return-reasons",
       },
+      {
+        label: t("refundReasons.domain"),
+        to: "/settings/refund-reasons",
+      },
       {
         label: t("salesChannels.domain"),
         to: "/settings/sales-channels",

package/src/components/layout/shell/shell.tsx

@@ -156,7 +156,7 @@ const Breadcrumbs = () => {
             )}
             {!isLast && (
               <span className="mx-2">
-                <TriangleRightMini />
+                <TriangleRightMini className="rtl:rotate-180" />
               </span>
             )}
           </li>
@@ -177,7 +177,7 @@ const ToggleSidebar = () => {
         onClick={() => toggle("desktop")}
         size="small"
       >
-        <SidebarLeft className="text-ui-fg-muted" />
+        <SidebarLeft className="text-ui-fg-muted rtl:rotate-180" />
       </IconButton>
       <IconButton
         className="hidden max-lg:flex"
@@ -185,7 +185,7 @@ const ToggleSidebar = () => {
         onClick={() => toggle("mobile")}
         size="small"
       >
-        <SidebarLeft className="text-ui-fg-muted" />
+        <SidebarLeft className="text-ui-fg-muted rtl:rotate-180" />
       </IconButton>
     </div>
   )
@@ -210,7 +210,7 @@ const DesktopSidebarContainer = ({ children }: PropsWithChildren) => {
 
   return (
     <div
-      className={clx("hidden h-screen w-[220px] border-r", {
+      className={clx("hidden h-screen w-[220px] border-e", {
         "lg:flex": desktop,
       })}
     >
@@ -234,8 +234,8 @@ const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
         />
         <RadixDialog.Content
           className={clx(
-            "bg-ui-bg-subtle shadow-elevation-modal fixed inset-y-2 left-2 flex w-full max-w-[304px] flex-col overflow-hidden rounded-lg border-r",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2 duration-200"
+            "bg-ui-bg-subtle shadow-elevation-modal fixed inset-y-2 start-2 flex w-full max-w-[304px] flex-col overflow-hidden rounded-lg border-r",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-start-1/2 data-[state=open]:slide-in-from-start-1/2 duration-200"
           )}
         >
           <div className="p-3">