@medusajs/dashboard 2.10.4-preview-20250928000328 → 2.10.4-snapshot-20250922062130

package/src/routes/orders/order-allocate-items/components/order-create-fulfillment-form/order-allocate-items-form.tsx

@@ -20,7 +20,6 @@ import { queryClient } from "../../../../../lib/query-client"
 import { AllocateItemsSchema } from "./constants"
 import { OrderAllocateItemsItem } from "./order-allocate-items-item"
 import { checkInventoryKit } from "./utils"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type OrderAllocateItemsFormProps = {
   order: AdminOrder
@@ -29,7 +28,7 @@ type OrderAllocateItemsFormProps = {
 export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const [disableSubmit, setDisableSubmit] = useState(false)
   const [filterTerm, setFilterTerm] = useState("")
 
@@ -232,11 +231,7 @@ export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
                             </div>
                             <div className="flex-1">
                               <Form.Control>
-                                <Select
-                                  dir={direction}
-                                  onValueChange={onChange}
-                                  {...field}
-                                >
+                                <Select onValueChange={onChange} {...field}>
                                   <Select.Trigger
                                     className="bg-ui-bg-base"
                                     ref={ref}

package/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx

@@ -1028,8 +1028,7 @@ export const ClaimCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            dir="ltr"
-                            className="mt-[2px] rtl:rotate-180"
+                            className="mt-[2px]"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-create-form.tsx

@@ -179,8 +179,7 @@ export const OrderEditCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            dir="ltr"
-                            className="mt-[2px] rtl:rotate-180"
+                            className="mt-[2px]"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx

@@ -509,8 +509,7 @@ export const ExchangeCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            dir="ltr"
-                            className="mt-[2px] rtl:rotate-180"
+                            className="mt-[2px]"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-form.tsx

@@ -26,7 +26,6 @@ import { getReservationsLimitCount } from "../../../../../lib/orders"
 import { sdk } from "../../../../../lib/client"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { Combobox } from "../../../../../components/inputs/combobox"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type OrderCreateFulfillmentFormProps = {
   order: AdminOrder
@@ -39,7 +38,7 @@ export function OrderCreateFulfillmentForm({
 }: OrderCreateFulfillmentFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const { mutateAsync: createOrderFulfillment, isPending: isMutating } =
     useCreateOrderFulfillment(order.id)
 
@@ -289,7 +288,6 @@ export function OrderCreateFulfillmentForm({
                             <div className="flex-1">
                               <Form.Control>
                                 <Select
-                                  dir={direction}
                                   onValueChange={onChange}
                                   {...field}
                                   disabled={!selectedLocationId}
@@ -392,8 +390,6 @@ export function OrderCreateFulfillmentForm({
                             <Form.Control>
                               <Form.Control>
                                 <Switch
-                                  dir="ltr"
-                                  className="rtl:rotate-180"
                                   checked={!!value}
                                   onCheckedChange={onChange}
                                   {...field}

package/src/routes/orders/order-create-refund/components/create-refund-form/create-refund-form.tsx

@@ -17,13 +17,12 @@ import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import { useRefundPayment, useRefundReasons } from "../../../../../hooks/api"
+import { useRefundPayment } from "../../../../../hooks/api"
 import { currencies } from "../../../../../lib/data/currencies"
 import { formatCurrency } from "../../../../../lib/format-currency"
 import { formatProvider } from "../../../../../lib/format-provider"
 import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
 import { getPaymentsFromOrder } from "../../../../../lib/orders"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateRefundFormProps = {
   order: HttpTypes.AdminOrder
@@ -35,13 +34,11 @@ const CreateRefundSchema = zod.object({
     float: zod.number().or(zod.null()),
   }),
   note: zod.string().optional(),
-  refund_reason_id: zod.string().optional(),
 })
 
 export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const { refund_reasons } = useRefundReasons()
 
   const [searchParams] = useSearchParams()
   const [paymentId, setPaymentId] = useState<string | undefined>(
@@ -56,7 +53,6 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
     [order.currency_code]
   )
 
-  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof CreateRefundSchema>>({
     defaultValues: {
       amount: {
@@ -64,7 +60,6 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
         float: paymentAmount,
       },
       note: "",
-      refund_reason_id: "",
     },
     resolver: zodResolver(CreateRefundSchema),
   })
@@ -93,7 +88,6 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
       {
         amount: data.amount.float!,
         note: data.note,
-        refund_reason_id: data.refund_reason_id,
       },
       {
         onSuccess: () => {
@@ -124,7 +118,6 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
         <RouteDrawer.Body className="flex-1 overflow-auto">
           <div className="flex flex-col gap-y-4">
             <Select
-              dir={direction}
               value={paymentId}
               onValueChange={(value) => {
                 setPaymentId(value)
@@ -212,40 +205,6 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
               }}
             />
 
-            <Form.Field
-              control={form.control}
-              name="refund_reason_id"
-              render={({ field }) => {
-                return (
-                  <Form.Item>
-                    <Form.Label>{t("fields.refundReason")}</Form.Label>
-
-                    <Form.Control>
-                      <Select
-                        dir={direction}
-                        value={field.value}
-                        onValueChange={field.onChange}
-                      >
-                        <Select.Trigger>
-                          <Select.Value />
-                        </Select.Trigger>
-
-                        <Select.Content>
-                          {refund_reasons?.map((reason) => (
-                            <Select.Item key={reason.id} value={reason.id}>
-                              {reason.label}
-                            </Select.Item>
-                          ))}
-                        </Select.Content>
-                      </Select>
-                    </Form.Control>
-
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
-
             <Form.Field
               control={form.control}
               name={`note`}

package/src/routes/orders/order-create-return/components/return-create-form/return-create-form.tsx

@@ -726,8 +726,7 @@ export const ReturnCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            dir="ltr"
-                            className="mt-[2px] rtl:rotate-180"
+                            className="mt-[2px]"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx

@@ -136,8 +136,6 @@ export function OrderCreateShipmentForm({
                             <Form.Control>
                               <Form.Control>
                                 <Switch
-                                  dir="ltr"
-                                  className="rtl:rotate-180"
                                   checked={!!value}
                                   onCheckedChange={onChange}
                                   {...field}

package/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx

@@ -1,4 +1,4 @@
-import { Button, Text, Tooltip, clx, toast, usePrompt } from "@medusajs/ui"
+import { Button, Text, Tooltip, clx, usePrompt } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 
 import { PropsWithChildren, ReactNode, useMemo, useState } from "react"
@@ -785,9 +785,7 @@ const ReturnBody = ({
       return
     }
 
-    await cancelReturnRequest().catch((error) => {
-      toast.error(error.message)
-    })
+    await cancelReturnRequest()
   }
 
   const numberOfItems = orderReturn.items.reduce((acc, item) => {
@@ -844,9 +842,7 @@ const ClaimBody = ({
       return
     }
 
-    await cancelClaim().catch((error) => {
-      toast.error(error.message)
-    })
+    await cancelClaim()
   }
 
   const outboundItems = (claim.additional_items || []).reduce(
@@ -920,9 +916,7 @@ const ExchangeBody = ({
       return
     }
 
-    await cancelExchange().catch((error) => {
-      toast.error(error.message)
-    })
+    await cancelExchange()
   }
 
   const outboundItems = (exchange.additional_items || []).reduce(
@@ -1021,9 +1015,7 @@ const TransferOrderRequestBody = ({
       return
     }
 
-    await cancelTransfer().catch((error) => {
-      toast.error(error.message)
-    })
+    await cancelTransfer()
   }
 
   /**

package/src/routes/orders/order-receive-return/components/order-receive-return-form/order-receive-return-form.tsx

@@ -345,8 +345,7 @@ export function OrderReceiveReturnForm({
                     <div className="flex items-center gap-3">
                       <Form.Control>
                         <Switch
-                          dir="ltr"
-                          className="mt-1 self-start rtl:rotate-180"
+                          className="mt-1 self-start"
                           checked={!!value}
                           onCheckedChange={onChange}
                           {...field}

package/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-create-form.tsx

@@ -25,7 +25,6 @@ import {
   PricingProductsFields,
   PricingProductsSchema,
 } from "./schema"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAIL = "detail",
@@ -59,7 +58,7 @@ export const PriceListCreateForm = ({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<PricingCreateSchemaType>({
     defaultValues: {
       type: "sale",
@@ -250,7 +249,6 @@ export const PriceListCreateForm = ({
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
-        dir={direction}
         value={tab}
         onValueChange={(tab) => handleChangeTab(tab as Tab)}
         className="flex h-full flex-col overflow-hidden"

package/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx

@@ -23,7 +23,6 @@ import type {
   PricingCreateSchemaType,
   PricingCustomerGroupsArrayType,
 } from "./schema"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type PriceListDetailsFormProps = {
   form: UseFormReturn<PricingCreateSchemaType>
@@ -31,7 +30,7 @@ type PriceListDetailsFormProps = {
 
 export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
+
   const { fields, remove, append } = useFieldArray({
     control: form.control,
     name: "rules.customer_group_id",
@@ -79,7 +78,6 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
                   </div>
                   <Form.Control>
                     <RadioGroup
-                      dir={direction}
                       onValueChange={onChange}
                       {...rest}
                       className="grid grid-cols-1 gap-4 md:grid-cols-2"
@@ -135,11 +133,7 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
                       {t("priceLists.fields.status.label")}
                     </Form.Label>
                     <Form.Control>
-                      <Select
-                        dir={direction}
-                        {...field}
-                        onValueChange={onChange}
-                      >
+                      <Select {...field} onValueChange={onChange}>
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/routes/price-lists/price-list-edit/components/price-list-edit-form/edit-price-list-form.tsx

@@ -16,7 +16,6 @@ import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdatePriceList } from "../../../../../hooks/api/price-lists"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 import { PriceListStatus, PriceListType } from "../../../common/constants"
 
 type PriceListEditFormProps = {
@@ -33,7 +32,7 @@ const PriceListEditSchema = z.object({
 export const PriceListEditForm = ({ priceList }: PriceListEditFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<z.infer<typeof PriceListEditSchema>>({
     defaultValues: {
       type: priceList.type as PriceListType,
@@ -81,11 +80,7 @@ export const PriceListEditForm = ({ priceList }: PriceListEditFormProps) => {
                     <Form.Hint>{t("priceLists.fields.type.hint")}</Form.Hint>
                   </div>
                   <Form.Control>
-                    <RadioGroup
-                      dir={direction}
-                      {...field}
-                      onValueChange={onChange}
-                    >
+                    <RadioGroup {...field} onValueChange={onChange}>
                       <RadioGroup.ChoiceBox
                         value={PriceListType.SALE}
                         label={t("priceLists.fields.type.options.sale.label")}
@@ -135,11 +130,7 @@ export const PriceListEditForm = ({ priceList }: PriceListEditFormProps) => {
                       {t("priceLists.fields.status.label")}
                     </Form.Label>
                     <Form.Control>
-                      <Select
-                          dir={direction}
-                        {...field}
-                        onValueChange={onChange}
-                      >
+                      <Select {...field} onValueChange={onChange}>
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-form.tsx

@@ -21,7 +21,6 @@ import {
   PriceListPricesAddProductsIdsFields,
   PriceListPricesAddSchema,
 } from "./schema"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type PriceListPricesAddFormProps = {
   priceList: HttpTypes.AdminPriceList
@@ -55,7 +54,7 @@ export const PriceListPricesAddForm = ({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<PriceListPricesAddSchema>({
     defaultValues: {
       products: {},
@@ -91,13 +90,10 @@ export const PriceListPricesAddForm = ({
   ) => {
     form.clearErrors(fields)
 
-    const values = fields.reduce(
-      (acc, key) => {
-        acc[key] = form.getValues(key)
-        return acc
-      },
-      {} as Record<string, unknown>
-    )
+    const values = fields.reduce((acc, key) => {
+      acc[key] = form.getValues(key)
+      return acc
+    }, {} as Record<string, unknown>)
 
     const validationResult = schema.safeParse(values)
 
@@ -200,7 +196,6 @@ export const PriceListPricesAddForm = ({
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
-        dir={direction}
         value={tab}
         onValueChange={(tab) => handleChangeTab(tab as Tab)}
         className="flex h-full flex-col overflow-hidden"

package/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx

@@ -269,9 +269,7 @@ export const ProductEditVariantForm = ({
                         </Form.Label>
                         <Form.Control>
                           <Switch
-                            dir="ltr"
                             checked={value}
-                            className="rtl:rotate-180"
                             onCheckedChange={(checked) => onChange(!!checked)}
                             {...field}
                           />
@@ -299,8 +297,6 @@ export const ProductEditVariantForm = ({
                         </Form.Label>
                         <Form.Control>
                           <Switch
-                            dir="ltr"
-                            className="rtl:rotate-180"
                             checked={value}
                             onCheckedChange={(checked) => onChange(!!checked)}
                             {...field}

package/src/routes/products/common/components/category-combobox/category-combobox.tsx

@@ -277,14 +277,14 @@ export const CategoryCombobox = forwardRef<
                 e.preventDefault()
                 onChange([])
               }}
-              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 flex h-[28px] items-center rounded-[4px] border py-[3px] ps-1.5 pe-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 left-0.5 top-0.5 flex h-[28px] items-center rounded-[4px] border py-[3px] pl-1.5 pr-1 outline-none"
             >
               <span className="tabular-nums">{value.length}</span>
               <XMarkMini className="text-ui-fg-muted" />
             </button>
           )}
           {showSelected && (
-            <div className="pointer-events-none absolute inset-y-0 start-[calc(var(--tag-width)+8px)] flex size-full items-center">
+            <div className="pointer-events-none absolute inset-y-0 left-[calc(var(--tag-width)+8px)] flex size-full items-center">
               <Text size="small" leading="compact">
                 {t("general.selected")}
               </Text>
@@ -297,13 +297,13 @@ export const CategoryCombobox = forwardRef<
               onSearchValueChange(e.target.value)
             }}
             className={clx(
-              "txt-compact-small size-full cursor-pointer appearance-none bg-transparent pe-8 outline-none",
+              "txt-compact-small size-full cursor-pointer appearance-none bg-transparent pr-8 outline-none",
               "hover:bg-ui-bg-field-hover",
               "focus:cursor-text",
               "placeholder:text-ui-fg-muted",
               {
-                "ps-2": !showTag,
-                "ps-[calc(var(--tag-width)+8px)]": showTag,
+                "pl-2": !showTag,
+                "pl-[calc(var(--tag-width)+8px)]": showTag,
               }
             )}
             {...props}
@@ -311,7 +311,7 @@ export const CategoryCombobox = forwardRef<
           <button
             type="button"
             onClick={() => handleOpenChange(true)}
-            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"
+            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"
           >
             <TrianglesMini className="text-ui-fg-muted" />
           </button>
@@ -321,11 +321,11 @@ export const CategoryCombobox = forwardRef<
         sideOffset={4}
         role="listbox"
         className={clx(
-          "shadow-elevation-flyout bg-ui-bg-base -start-2 z-50 w-[var(--radix-popper-anchor-width)] rounded-[8px]",
+          "shadow-elevation-flyout bg-ui-bg-base -left-2 z-50 w-[var(--radix-popper-anchor-width)] rounded-[8px]",
           "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=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2"
+          "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"
         )}
         onInteractOutside={(e) => {
           e.preventDefault()
@@ -346,7 +346,7 @@ export const CategoryCombobox = forwardRef<
                 data-active={focusedIndex === 0}
                 role="button"
                 className={clx(
-                  "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-start outline-none",
+                  "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-left outline-none",
                   "data-[active=true]:bg-ui-bg-field-hover"
                 )}
                 type="button"
@@ -386,7 +386,7 @@ export const CategoryCombobox = forwardRef<
                   type="button"
                   role="option"
                   className={clx(
-                    "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-start outline-none",
+                    "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-left outline-none",
                     "data-[active=true]:bg-ui-bg-field-hover"
                   )}
                   onClick={handleSelect(option)}
@@ -418,7 +418,7 @@ export const CategoryCombobox = forwardRef<
                     onClick={handleLevelDown(option)}
                     tabIndex={-1}
                   >
-                    <TriangleRightMini className="rtl:rotate-180" />
+                    <TriangleRightMini />
                   </button>
                 )}
               </div>

package/src/routes/products/product-create/components/product-create-form/product-create-form.tsx

@@ -21,7 +21,6 @@ import { ProductCreateDetailsForm } from "../product-create-details-form"
 import { ProductCreateInventoryKitForm } from "../product-create-inventory-kit-form"
 import { ProductCreateOrganizeForm } from "../product-create-organize-form"
 import { ProductCreateVariantsForm } from "../product-create-variants-form"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAILS = "details",
@@ -59,7 +58,7 @@ export const ProductCreateForm = ({
   const { handleSuccess } = useRouteModal()
   const { getFormConfigs } = useExtension()
   const configs = getFormConfigs("product", "create")
-  const direction = useDocumentDirection()
+
   const form = useExtendableForm({
     defaultValues: {
       ...PRODUCT_CREATE_FORM_DEFAULTS,
@@ -245,7 +244,6 @@ export const ProductCreateForm = ({
         className="flex h-full flex-col"
       >
         <ProgressTabs
-          dir={direction}
           value={tab}
           onValueChange={async (tab) => {
             const valid = await form.trigger()

package/src/routes/products/product-create-variant/components/create-product-variant-form/create-product-variant-form.tsx

@@ -26,7 +26,6 @@ import {
 import DetailsTab from "./details-tab"
 import InventoryKitTab from "./inventory-kit-tab"
 import PricingTab from "./pricing-tab"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAIL = "detail",
@@ -51,7 +50,7 @@ export const CreateProductVariantForm = ({
 }: CreateProductVariantFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const [tab, setTab] = useState<Tab>(Tab.DETAIL)
   const [tabState, setTabState] = useState<TabState>(initialTabState)
 
@@ -76,13 +75,10 @@ export const CreateProductVariantForm = ({
       return {}
     }
 
-    return regions.reduce(
-      (acc, reg) => {
-        acc[reg.id] = reg.currency_code
-        return acc
-      },
-      {} as Record<string, string>
-    )
+    return regions.reduce((acc, reg) => {
+      acc[reg.id] = reg.currency_code
+      return acc
+    }, {} as Record<string, string>)
   }, [regions])
 
   const isManageInventoryEnabled = useWatch({
@@ -261,7 +257,6 @@ export const CreateProductVariantForm = ({
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
-        dir={direction}
         value={tab}
         onValueChange={(tab) => handleChangeTab(tab as Tab)}
         className="flex h-full flex-col overflow-hidden"

package/src/routes/products/product-create-variant/components/create-product-variant-form/details-tab.tsx

@@ -99,8 +99,7 @@ function DetailsTab({ form, product }: DetailsTabProps) {
                   <div className="bg-ui-bg-component shadow-elevation-card-rest flex gap-x-3 rounded-lg p-4">
                     <Form.Control>
                       <Switch
-                        dir="ltr"
-                        className="mt-[2px] rtl:rotate-180"
+                        className="mt-[2px]"
                         checked={value}
                         onCheckedChange={(checked) => onChange(!!checked)}
                         {...field}
@@ -131,8 +130,6 @@ function DetailsTab({ form, product }: DetailsTabProps) {
                   <div className="bg-ui-bg-component shadow-elevation-card-rest flex gap-x-3 rounded-lg p-4">
                     <Form.Control>
                       <Switch
-                        dir="ltr"
-                        className="rtl:rotate-180"
                         checked={value}
                         onCheckedChange={(checked) => onChange(!!checked)}
                         {...field}
@@ -162,8 +159,6 @@ function DetailsTab({ form, product }: DetailsTabProps) {
                   <div className="bg-ui-bg-component shadow-elevation-card-rest flex gap-x-3 rounded-lg p-4">
                     <Form.Control>
                       <Switch
-                        dir="ltr"
-                        className="rtl:rotate-180"
                         checked={value}
                         onCheckedChange={(checked) => onChange(!!checked)}
                         {...field}