fix(admin-ui): Lint all UI files (#3459)

packages/admin-ui/ui/src/domain/collections/details/index.tsx

@@ -107,15 +107,15 @@ const CollectionDetails = () => {
 
   return (
     <>
-      <div className="flex flex-col !pb-xlarge">
+      <div className="!pb-xlarge flex flex-col">
         <BackButton
           className="mb-xsmall"
           path="/a/products?view=collections"
           label="Back to Collections"
         />
-        <div className="rounded-rounded py-large px-xlarge border border-grey-20 bg-grey-0 mb-large">
+        <div className="rounded-rounded py-large px-xlarge border-grey-20 bg-grey-0 mb-large border">
           {isLoading || !collection ? (
-            <div className="flex items-center w-full h-12">
+            <div className="flex h-12 w-full items-center">
               <Spinner variant="secondary" size="large" />
             </div>
           ) : (
@@ -147,7 +147,7 @@ const CollectionDetails = () => {
                 </p>
               </div>
               {collection.metadata && (
-                <div className="mt-large flex flex-col gap-y-base">
+                <div className="mt-large gap-y-base flex flex-col">
                   <h3 className="inter-base-semibold">Metadata</h3>
                   <div>
                     <JSONView data={collection.metadata} />

packages/admin-ui/ui/src/domain/customers/details/edit.tsx

@@ -1,6 +1,6 @@
 import { Customer } from "@medusajs/medusa"
 import { useAdminUpdateCustomer } from "medusa-react"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import LockIcon from "../../../components/fundamentals/icons/lock-icon"
@@ -73,7 +73,7 @@ const EditCustomerModal = ({
         </Modal.Header>
         <Modal.Content>
           <div className="inter-base-semibold text-grey-90 mb-4">General</div>
-          <div className="w-full flex mb-4 space-x-2">
+          <div className="mb-4 flex w-full space-x-2">
             <InputField
               label="First Name"
               {...register("first_name")}
@@ -108,7 +108,7 @@ const EditCustomerModal = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end">
+          <div className="flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"

packages/admin-ui/ui/src/domain/customers/groups/context/customer-group-context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useState } from "react"
+import { createContext, PropsWithChildren, useState } from "react"
 
 import { CustomerGroup } from "@medusajs/medusa"
 import {

packages/admin-ui/ui/src/domain/customers/groups/customer-group-modal.tsx

@@ -3,7 +3,7 @@ import {
   AdminPostCustomerGroupsReq,
   CustomerGroup,
 } from "@medusajs/medusa"
-import React, { useState } from "react"
+import { useState } from "react"
 import { useForm } from "react-hook-form"
 
 import Button from "../../../components/fundamentals/button"
@@ -87,10 +87,10 @@ function CustomerGroupModal(props: CustomerGroupModalProps) {
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex w-full h-8 justify-end">
+          <div className="flex h-8 w-full justify-end">
             <Button
               variant="ghost"
-              className="mr-2 w-32 text-small justify-center"
+              className="text-small mr-2 w-32 justify-center"
               size="large"
               onClick={handleClose}
             >
@@ -98,7 +98,7 @@ function CustomerGroupModal(props: CustomerGroupModalProps) {
             </Button>
             <Button
               size="medium"
-              className="w-32 text-small justify-center"
+              className="text-small w-32 justify-center"
               variant="primary"
               onClick={handleFromSubmit(onSubmit)}
             >

packages/admin-ui/ui/src/domain/customers/groups/details.tsx

@@ -37,7 +37,7 @@ const defaultQueryProps = {
  */
 function CustomersListPlaceholder() {
   return (
-    <div className="h-full flex center justify-center items-center min-h-[756px]">
+    <div className="center flex h-full min-h-[756px] items-center justify-center">
       <span className="text-xs text-gray-400">
         No customers in this group yet
       </span>
@@ -127,7 +127,7 @@ function CustomerGroupCustomersList(props: CustomerGroupCustomersListProps) {
     <BodyCard
       title="Customers"
       actionables={actions}
-      className="w-full my-4 min-h-[756px]"
+      className="my-4 min-h-[756px] w-full"
     >
       {showCustomersModal && (
         <EditCustomersTable

packages/admin-ui/ui/src/domain/customers/groups/index.tsx

@@ -28,8 +28,8 @@ function Index() {
   ]
 
   return (
-    <div className="flex flex-col grow h-full">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full grow flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           actionables={actions}
           customHeader={<CustomersPageTableHeader activeView="groups" />}

packages/admin-ui/ui/src/domain/discounts/details/conditions/add-condition/conditions-provider.tsx

@@ -1,6 +1,6 @@
 import { Discount } from "@medusajs/medusa"
 import { useAdminUpdateDiscount } from "medusa-react"
-import React, {
+import {
   createContext,
   ReactNode,
   useContext,

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/add-collections.tsx

@@ -1,5 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
@@ -53,7 +53,7 @@ const AddCollectionConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/collections-conditions-table.tsx

@@ -1,5 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -17,11 +17,8 @@ const ProductCollectionsConditionsTable = () => {
 
   const [selectedResources, setSelectedResources] = useState<string[]>([])
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingCollections,

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/add-customer-groups.tsx

@@ -1,5 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -53,7 +53,7 @@ const AddCustomerGroupsConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/customer-groups-conditions-table.tsx

@@ -1,5 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -15,11 +15,8 @@ import ExistingConditionTableActions from "../../condition-table-actions"
 const CustomerGroupsConditionsTable = () => {
   const params = useQueryFilters(defaultQueryProps)
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingCustomerGroups,

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/add-types.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
@@ -55,7 +55,7 @@ const AddTypesConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/type-conditions-table.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -15,11 +15,8 @@ import ExistingConditionTableActions from "../../condition-table-actions"
 const ProductTypesConditionsTable = () => {
   const params = useQueryFilters(defaultQueryProps)
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingTypes,

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/products/add-products.tsx

@@ -1,10 +1,9 @@
 import { useAdminProducts } from "medusa-react"
-import React, { useContext, useEffect, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
-import { useDebounce } from "../../../../../../../hooks/use-debounce"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
 import { defaultQueryProps } from "../../../../..//new/discount-form/condition-tables/shared/common"
 import {
@@ -51,7 +50,7 @@ const AddProductConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/add-tags.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
@@ -51,7 +51,7 @@ const AddTagsConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/tags-conditions-table.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -15,11 +15,8 @@ import ExistingConditionTableActions from "../../condition-table-actions"
 const ProductTagsConditionsTable = () => {
   const params = useQueryFilters(defaultQueryProps)
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingTags,

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/condition-table-actions.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { useContext } from "react"
 import Button from "../../../../../components/fundamentals/button"
 import PlusIcon from "../../../../../components/fundamentals/icons/plus-icon"
@@ -32,18 +31,18 @@ const ExistingConditionTableActions = ({
   const { push } = useContext(LayeredModalContext)
 
   return (
-    <div className="flex space-x-xsmall h-[34px] overflow-hidden">
+    <div className="space-x-xsmall flex h-[34px] overflow-hidden">
       <div className={clsx("transition-all duration-200", classes)}>
-        <div className="divide-x flex items-center h-[34px] mb-2">
-          <span className="mr-3 inter-small-regular text-grey-50">
+        <div className="mb-2 flex h-[34px] items-center divide-x">
+          <span className="inter-small-regular text-grey-50 mr-3">
             {numberOfSelectedRows} selected
           </span>
-          <div className="flex space-x-xsmall pl-3">
+          <div className="space-x-xsmall flex pl-3">
             <Button
               onClick={onDeselect}
               size="small"
               variant="ghost"
-              className="border border-grey-20"
+              className="border-grey-20 border"
             >
               Deselect
             </Button>
@@ -51,17 +50,17 @@ const ExistingConditionTableActions = ({
               onClick={onRemove}
               size="small"
               variant="ghost"
-              className="border border-grey-20 text-rose-50"
+              className="border-grey-20 border text-rose-50"
             >
               Remove
             </Button>
           </div>
         </div>
-        <div className="flex justify-end h-[34px]">
+        <div className="flex h-[34px] justify-end">
           <Button
             size="small"
             variant="ghost"
-            className="border border-grey-20"
+            className="border-grey-20 border"
             onClick={() => push(addConditionsModalScreen)}
           >
             <PlusIcon size={20} /> Add

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
 import LayeredModal, {
@@ -54,7 +54,7 @@ const EditConditionsModal = ({ open, condition, discount, onClose }: Props) => {
           </Modal.Header>
           {renderModalContext()}
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full">
+            <div className="flex w-full items-center justify-end">
               <Button
                 variant="primary"
                 size="small"

packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-provider.tsx

@@ -3,7 +3,7 @@ import {
   useAdminAddDiscountConditionResourceBatch,
   useAdminDeleteDiscountConditionResourceBatch,
 } from "medusa-react"
-import React, { createContext, ReactNode, useContext } from "react"
+import { createContext, ReactNode, useContext } from "react"
 import { LayeredModalContext } from "../../../../../components/molecules/modal/layered-modal"
 import useNotification from "../../../../../hooks/use-notification"
 
@@ -42,10 +42,8 @@ export const EditConditionProvider = ({
     condition.id
   )
 
-  const removeConditionResourceBatch = useAdminDeleteDiscountConditionResourceBatch(
-    discount.id,
-    condition.id
-  )
+  const removeConditionResourceBatch =
+    useAdminDeleteDiscountConditionResourceBatch(discount.id, condition.id)
 
   const addConditionResources = (
     resourcesToAdd: string[],

packages/admin-ui/ui/src/domain/discounts/details/conditions/index.tsx

@@ -17,11 +17,8 @@ const DiscountDetailsConditions: React.FC<DiscountDetailsConditionsProps> = ({
 }) => {
   const [show, setShow] = useState(false)
 
-  const {
-    conditions,
-    selectedCondition,
-    deSelectCondition,
-  } = useDiscountConditions(discount)
+  const { conditions, selectedCondition, deSelectCondition } =
+    useDiscountConditions(discount)
 
   return (
     <ConditionsProvider discount={discount}>
@@ -44,7 +41,7 @@ const DiscountDetailsConditions: React.FC<DiscountDetailsConditionsProps> = ({
                 conditions?.length / 2
               )}, minmax(0, 1fr))`,
             }}
-            className="grid grid-cols-2 grid-flow-col gap-y-base gap-x-xlarge"
+            className="gap-y-base gap-x-xlarge grid grid-flow-col grid-cols-2"
           >
             {conditions.map((condition, i) => (
               <NumberedItem
@@ -57,7 +54,7 @@ const DiscountDetailsConditions: React.FC<DiscountDetailsConditionsProps> = ({
             ))}
           </div>
         ) : (
-          <div className="flex flex-col justify-center items-center flex-1 gap-y-small">
+          <div className="gap-y-small flex flex-1 flex-col items-center justify-center">
             <span className="inter-base-regular text-grey-50">
               This discount has no conditions
             </span>

packages/admin-ui/ui/src/domain/discounts/details/conditions/use-discount-conditions.tsx

@@ -4,7 +4,7 @@ import {
   useAdminDiscountRemoveCondition,
   useAdminGetDiscountCondition,
 } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import EditIcon from "../../../../components/fundamentals/icons/edit-icon"
 import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
 import { ActionType } from "../../../../components/molecules/actionables"

packages/admin-ui/ui/src/domain/discounts/details/configurations/edit-configurations.tsx

@@ -69,7 +69,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
         </Modal.Header>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Modal.Content>
-            <div className="flex flex-col gap-y-xlarge">
+            <div className="gap-y-xlarge flex flex-col">
               <Controller
                 name="starts_at"
                 defaultValue={discount.starts_at}
@@ -88,7 +88,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
                       title="Discount has a start date?"
                       description="Schedule the discount to activate in the future."
                     >
-                      <div className="flex gap-x-xsmall items-center">
+                      <div className="gap-x-xsmall flex items-center">
                         <DatePicker
                           date={value!}
                           label="Start date"
@@ -125,7 +125,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
                       title="Discount has an expiry date?"
                       description="Schedule the discount to deactivate in the future."
                     >
-                      <div className="flex gap-x-xsmall items-center">
+                      <div className="gap-x-xsmall flex items-center">
                         <DatePicker
                           date={value!}
                           label="Expiry date"
@@ -202,7 +202,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="gap-x-xsmall flex items-center justify-end w-full">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="ghost"
                 size="small"

packages/admin-ui/ui/src/domain/discounts/details/configurations/index.tsx

@@ -34,7 +34,7 @@ const Configurations: React.FC<ConfigurationsProps> = ({ discount }) => {
               configurations.length / 2
             )}, minmax(0, 1fr))`,
           }}
-          className="grid grid-cols-2 grid-flow-col gap-y-base gap-x-xlarge"
+          className="gap-y-base gap-x-xlarge grid grid-flow-col grid-cols-2"
         >
           {configurations.map((setting, i) => (
             <NumberedItem

packages/admin-ui/ui/src/domain/discounts/details/configurations/use-discount-configurations.tsx

@@ -2,7 +2,7 @@ import { Discount } from "@medusajs/medusa"
 import { parse } from "iso8601-duration"
 import { useAdminUpdateDiscount } from "medusa-react"
 import moment from "moment"
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
 import ClockIcon from "../../../../components/fundamentals/icons/clock-icon"
 import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
 import { ActionType } from "../../../../components/molecules/actionables"
@@ -17,9 +17,9 @@ type displaySetting = {
 }
 
 const DisplaySettingsDateDescription = ({ date }: { date: Date }) => (
-  <div className="flex text-grey-50 inter-small-regular ">
+  <div className="text-grey-50 inter-small-regular flex ">
     {moment.utc(date).format("ddd, DD MMM YYYY")}
-    <span className="flex items-center ml-3">
+    <span className="ml-3 flex items-center">
       <ClockIcon size={16} />
       <span className="ml-2.5">{moment.utc(date).format("UTC HH:mm")}</span>
     </span>

packages/admin-ui/ui/src/domain/discounts/details/general/edit-general.tsx

@@ -119,7 +119,7 @@ const EditGeneral: React.FC<EditGeneralProps> = ({ discount, onClose }) => {
                 )
               }}
             />
-            <div className="flex gap-x-base gap-y-base my-base">
+            <div className="gap-x-base gap-y-base my-base flex">
               <InputField
                 label="Code"
                 className="flex-1"
@@ -178,7 +178,7 @@ const EditGeneral: React.FC<EditGeneralProps> = ({ discount, onClose }) => {
               )}
             </div>
 
-            <div className="text-grey-50 inter-small-regular flex flex-col mb-6">
+            <div className="text-grey-50 inter-small-regular mb-6 flex flex-col">
               <span>
                 The code your customers will enter during checkout. This will
                 appear on your customer’s invoice.
@@ -196,7 +196,7 @@ const EditGeneral: React.FC<EditGeneralProps> = ({ discount, onClose }) => {
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="gap-x-xsmall flex items-center justify-end w-full">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="ghost"
                 size="small"

packages/admin-ui/ui/src/domain/discounts/details/general/index.tsx

@@ -88,7 +88,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
         forceDropdown
         className="min-h-[200px]"
         status={
-          <div className="flex items-center gap-x-2xsmall">
+          <div className="gap-x-2xsmall flex items-center">
             {discount.is_dynamic && (
               <span>
                 <Badge variant="default">
@@ -108,13 +108,13 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
         }
       >
         <div className="flex">
-          <div className="border-l border-grey-20 pl-6">
+          <div className="border-grey-20 border-l pl-6">
             {getPromotionDescription(discount)}
             <span className="inter-small-regular text-grey-50">
               Discount Amount
             </span>
           </div>
-          <div className="border-l border-grey-20 pl-6 ml-12">
+          <div className="border-grey-20 ml-12 border-l pl-6">
             <h2 className="inter-xlarge-regular text-grey-90">
               {discount.regions.length.toLocaleString("en-US")}
             </h2>
@@ -122,7 +122,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
               Valid Regions
             </span>
           </div>
-          <div className="border-l border-grey-20 pl-6 ml-12">
+          <div className="border-grey-20 ml-12 border-l pl-6">
             <h2 className="inter-xlarge-regular text-grey-90">
               {discount.usage_count.toLocaleString("en-US")}
             </h2>

packages/admin-ui/ui/src/domain/discounts/details/index.tsx

@@ -56,7 +56,7 @@ const Edit = () => {
         previousRoute="/a/discounts"
       />
       {isLoading || !discount ? (
-        <div className="h-full flex items-center justify-center">
+        <div className="flex h-full items-center justify-center">
           <Spinner variant="secondary" />
         </div>
       ) : (

packages/admin-ui/ui/src/domain/discounts/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { Route, Routes } from "react-router-dom"
 import Fade from "../../components/atoms/fade-wrapper"
 import PlusIcon from "../../components/fundamentals/icons/plus-icon"
@@ -22,8 +22,8 @@ const DiscountIndex = () => {
   ]
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           actionables={actionables}
           customHeader={<TableViewHeader views={["discounts"]} />}

packages/admin-ui/ui/src/domain/discounts/new/discount-form/add-conditions-modal.tsx

@@ -47,10 +47,10 @@ const AddConditionsModal = ({
 
   return (
     <LayeredModal context={layeredModalContext} handleClose={onClose}>
-      <Modal.Body className="h-[calc(100vh-134px)] flex flex-col">
+      <Modal.Body className="flex h-[calc(100vh-134px)] flex-col">
         <Modal.Header handleClose={onClose}>
           <span className="inter-xlarge-semibold">Add Conditions</span>
-          <span className="font-semibold text-grey-90 mt-6 flex items-center gap-1">
+          <span className="text-grey-90 mt-6 flex items-center gap-1 font-semibold">
             Choose a condition type{" "}
             <IconTooltip content="You can only add one of each type of condition" />
           </span>
@@ -60,7 +60,7 @@ const AddConditionsModal = ({
           {items.length ? (
             items.map((t) => <ConditionTypeItem key={t.value} {...t} />)
           ) : (
-            <div className="flex flex-col items-center justify-center flex-1 h-full">
+            <div className="flex h-full flex-1 flex-col items-center justify-center">
               <span className="inter-base-regular text-grey-40">
                 Can't add anymore conditions
               </span>
@@ -69,10 +69,10 @@ const AddConditionsModal = ({
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex w-full h-8 justify-end">
+          <div className="flex h-8 w-full justify-end">
             <Button
               variant="ghost"
-              className="mr-2 w-32 text-small justify-center"
+              className="text-small mr-2 w-32 justify-center"
               size="small"
               onClick={onClose}
             >
@@ -86,7 +86,7 @@ const AddConditionsModal = ({
                 onClose()
               }}
               size="small"
-              className="w-32 text-small justify-center"
+              className="text-small w-32 justify-center"
               variant="primary"
             >
               Save
@@ -104,7 +104,7 @@ const ConditionTypeItem: React.FC<ConditionItem> = (props) => {
   return (
     <button
       onClick={onClick}
-      className="rounded-lg border border-1 p-4 mb-2 cursor-pointer hover:bg-grey-5 transition-all w-full flex items-center justify-between"
+      className="border-1 hover:bg-grey-5 mb-2 flex w-full cursor-pointer items-center justify-between rounded-lg border p-4 transition-all"
     >
       <div className="flex flex-col items-start">
         <div className="font-semibold ">{label}</div>

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/add-condition-footer.tsx

@@ -26,7 +26,7 @@ const AddConditionFooter: React.FC<AddConditionFooterProps> = ({
   const { updateCondition } = useDiscountForm()
 
   return (
-    <div className="w-full flex justify-end gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full justify-end">
       <Button
         variant="ghost"
         size="small"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/collections.tsx

@@ -1,5 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/customer-groups.tsx

@@ -1,5 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/tags.tsx

@@ -1,6 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/types.tsx

@@ -1,6 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/collections.tsx

@@ -1,6 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useEffect, useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/customer-groups.tsx

@@ -1,6 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/details-condition-footer.tsx

@@ -26,7 +26,7 @@ const DetailsConditionFooter: React.FC<AddConditionFooterProps> = ({
   const { updateCondition, updateAndSave } = useConditions()
 
   return (
-    <div className="w-full flex justify-end gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full justify-end">
       <Button variant="ghost" size="small" onClick={onClose}>
         Cancel
       </Button>

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/products.tsx

@@ -1,6 +1,5 @@
 import { useAdminProducts } from "medusa-react"
-import React, { useEffect, useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/tags.tsx

@@ -1,6 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/types.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/collections.tsx

@@ -1,6 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/customer-groups.tsx

@@ -1,6 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/edit-condition-footer.tsx

@@ -23,7 +23,7 @@ const EditConditionFooter: React.FC<EditConditionFooterProps> = ({
 }) => {
   const { updateCondition } = useDiscountForm()
   return (
-    <div className="flex items-center justify-end w-full gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full items-center justify-end">
       <Button variant="secondary" size="small" onClick={onClose}>
         Cancel
       </Button>

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/products.tsx

@@ -1,6 +1,6 @@
 import { Product } from "@medusajs/medusa"
 import { useAdminProducts } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/tags.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Spinner from "../../../../../../components/atoms/spinner"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/types.tsx

@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/collection.tsx

@@ -1,5 +1,5 @@
 import { ProductCollection } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -42,7 +42,7 @@ export const useCollectionColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[546px]">
+          <div className="flex min-w-[546px] items-center gap-1">
             Title <SortingIcon size={16} />
           </div>
         ),
@@ -53,7 +53,7 @@ export const useCollectionColumns = () => {
       },
       {
         Header: () => (
-          <div className="flex justify-end items-center gap-1">
+          <div className="flex items-center justify-end gap-1">
             Products <SortingIcon size={16} />
           </div>
         ),

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/condition-operator.tsx

@@ -15,7 +15,7 @@ const ConditionOperator: React.FC<ConditionOperatorProps> = ({
     <RadioGroup.Root
       value={value}
       onValueChange={onChange}
-      className="grid grid-cols-2 gap-base mb-4"
+      className="gap-base mb-4 grid grid-cols-2"
     >
       <RadioGroup.Item
         className="w-full"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/groups.tsx

@@ -1,5 +1,5 @@
 import { CustomerGroup } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -42,7 +42,7 @@ export const useGroupColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[540px]">
+          <div className="flex min-w-[540px] items-center gap-1">
             Title <SortingIcon size={16} />
           </div>
         ),
@@ -50,7 +50,7 @@ export const useGroupColumns = () => {
       },
       {
         Header: () => (
-          <div className="flex justify-end items-center gap-1">
+          <div className="flex items-center justify-end gap-1">
             Members <SortingIcon size={16} />
           </div>
         ),

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/products.tsx

@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import ImagePlaceholder from "../../../../../../components/fundamentals/image-placeholder"
@@ -58,7 +58,7 @@ export const useProductColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[443px]">
+          <div className="flex min-w-[443px] items-center gap-1">
             Title <SortingIcon size={16} />
           </div>
         ),
@@ -66,11 +66,11 @@ export const useProductColumns = () => {
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
                 {original.thumbnail ? (
                   <img
                     src={original.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
@@ -101,7 +101,7 @@ export const useProductColumns = () => {
       },
       {
         Header: () => (
-          <div className="flex justify-end items-center gap-1">
+          <div className="flex items-center justify-end gap-1">
             Variants <SortingIcon size={16} />
           </div>
         ),

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/tags.tsx

@@ -1,5 +1,4 @@
 import { ProductTag } from "@medusajs/medusa"
-import React from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -15,7 +14,7 @@ export const TagColumns: Column<ProductTag>[] = [
     Cell: ({ row: { original } }) => {
       return (
         <div className="w-[220px]">
-          <span className="bg-grey-10 px-2 py-0.5 rounded-rounded">
+          <span className="bg-grey-10 rounded-rounded px-2 py-0.5">
             #{original.value}
           </span>
         </div>

packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/types.tsx

@@ -1,5 +1,5 @@
 import { ProductType } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -42,7 +42,7 @@ export const useTypesColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[626px]">
+          <div className="flex min-w-[626px] items-center gap-1">
             Type <SortingIcon size={16} />
           </div>
         ),

packages/admin-ui/ui/src/domain/discounts/new/discount-form/index.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useWatch } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 import Button from "../../../../components/fundamentals/button"
@@ -21,7 +20,6 @@ type DiscountFormProps = {
   closeForm?: () => void
 }
 
-
 const DiscountForm = ({ closeForm }: DiscountFormProps) => {
   const navigate = useNavigate()
   const notification = useNotification()
@@ -67,12 +65,12 @@ const DiscountForm = ({ closeForm }: DiscountFormProps) => {
   return (
     <FocusModal>
       <FocusModal.Header>
-        <div className="medium:w-8/12 w-full px-8 flex justify-between">
+        <div className="medium:w-8/12 flex w-full justify-between px-8">
           <Button
             size="small"
             variant="ghost"
             onClick={closeForm}
-            className="border rounded-rounded w-8 h-8"
+            className="rounded-rounded h-8 w-8 border"
           >
             <CrossIcon size={20} />
           </Button>
@@ -81,7 +79,7 @@ const DiscountForm = ({ closeForm }: DiscountFormProps) => {
               onClick={handleSubmit(submitGhost)}
               size="small"
               variant="ghost"
-              className="border rounded-rounded"
+              className="rounded-rounded border"
             >
               Save as draft
             </Button>
@@ -97,11 +95,11 @@ const DiscountForm = ({ closeForm }: DiscountFormProps) => {
         </div>
       </FocusModal.Header>
       <FocusModal.Main>
-        <div className="flex justify-center mb-[25%]">
-          <div className="max-w-[700px] w-full pt-16">
+        <div className="mb-[25%] flex justify-center">
+          <div className="w-full max-w-[700px] pt-16">
             <h1 className="inter-xlarge-semibold">Create new discount</h1>
             <Accordion
-              className="pt-7 text-grey-90"
+              className="text-grey-90 pt-7"
               defaultValue={["promotion-type"]}
               type="multiple"
             >

packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/condition-item.tsx

@@ -162,20 +162,20 @@ const ConditionItem = <Type extends DiscountConditionType>({
 
   return (
     <div>
-      <div className="p-base border rounded-rounded flex gap-base justify-between items-center">
-        <div className="flex overflow-hidden gap-base w-full">
+      <div className="p-base rounded-rounded gap-base flex items-center justify-between border">
+        <div className="gap-base flex w-full overflow-hidden">
           <div>
             <Badge
-              className="inter-base-semibold flex justify-center items-center w-[40px] h-[40px]"
+              className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
               variant="default"
             >
               §{index + 1}
             </Badge>
           </div>
-          <div className="truncate flex flex-col justify-center flex-1 w-full">
+          <div className="flex w-full flex-1 flex-col justify-center truncate">
             <div className="inter-small-semibold">{getTitle(type)}</div>
-            <div className="w-full flex items-center inter-small-regular gap-x-xsmall flex-1">
-              <div className="gap-x-2xsmall text-grey-50 flex items-center w-full inter-small-regular flex-1">
+            <div className="inter-small-regular gap-x-xsmall flex w-full flex-1 items-center">
+              <div className="gap-x-2xsmall text-grey-50 inter-small-regular flex w-full flex-1 items-center">
                 {visibleItems.map((item, i) => {
                   return (
                     <span key={i}>

packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/index.tsx

@@ -47,7 +47,7 @@ const DiscountNewConditions: React.FC<DiscountNewConditionsProps> = ({
 
   return (
     <div className="pt-5">
-      <div className="flex flex-col gap-y-small">
+      <div className="gap-y-small flex flex-col">
         {filteredConditions.map((values, i) => (
           <ConditionItem
             index={i}
@@ -65,7 +65,7 @@ const DiscountNewConditions: React.FC<DiscountNewConditionsProps> = ({
           size="small"
           variant="ghost"
           onClick={() => setShowConditionsModal(true)}
-          className="mt-4 p-2 w-full rounded-rounded border"
+          className="rounded-rounded mt-4 w-full border p-2"
         >
           <PlusIcon size={18} />
           <span>Add Condition</span>

packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/configuration.tsx

@@ -63,7 +63,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
   return (
     <div className="flex flex-col">
       <Accordion
-        className="pt-7 text-grey-90"
+        className="text-grey-90 pt-7"
         type="multiple"
         value={openItems || []}
         onValueChange={(values) => {
@@ -88,7 +88,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
             >
               <div
                 className={clsx(
-                  "flex items-center gap-xsmall",
+                  "gap-xsmall flex items-center",
                   marginTransition,
                   {
                     "mt-4": openItems.indexOf("starts_at") > -1,
@@ -98,7 +98,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
                 <Controller
                   name="starts_at"
                   control={control}
-                  render={({ field: { value, onChange } }) => {
+                  render={({ field: { value, onChange } }) => {
                     const date = value || new Date()
                     return (
                       <>
@@ -132,7 +132,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
             >
               <div
                 className={clsx(
-                  "flex items-center gap-xsmall",
+                  "gap-xsmall flex items-center",
                   marginTransition,
                   {
                     "mt-4": openItems.indexOf("ends_at") > -1,
@@ -142,7 +142,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
                 <Controller
                   name="ends_at"
                   control={control}
-                  render={({ field: { value, onChange } }) => {
+                  render={({ field: { value, onChange } }) => {
                     const date =
                       value ||
                       new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
@@ -182,7 +182,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
                 })}
               >
                 <InputField
-                  {...register("usage_limit",{ valueAsNumber: true })}
+                  {...register("usage_limit", { valueAsNumber: true })}
                   label="Number of redemptions"
                   type="number"
                   placeholder="5"

packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-allocation.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { Controller } from "react-hook-form"
 import RadioGroup from "../../../../../components/organisms/radio-group"
 import { AllocationType } from "../../../types"
@@ -18,7 +17,7 @@ const DiscountAllocation = () => {
           <RadioGroup.Root
             value={value}
             onValueChange={onChange}
-            className={clsx("flex items-center gap-base mt-base px-1")}
+            className={clsx("gap-base mt-base flex items-center px-1")}
           >
             <RadioGroup.Item
               value={AllocationType.TOTAL}

packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-type.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { Controller, useWatch } from "react-hook-form"
 import RadioGroup from "../../../../../components/organisms/radio-group"
 import { DiscountRuleType } from "../../../types"
@@ -23,7 +22,7 @@ const DiscountType = () => {
           <RadioGroup.Root
             value={value}
             onValueChange={onChange}
-            className={clsx("flex items-center gap-base mt-base px-1")}
+            className={clsx("gap-base mt-base flex items-center px-1")}
           >
             <RadioGroup.Item
               value={DiscountRuleType.PERCENTAGE}

packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/general.tsx

@@ -80,7 +80,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
               )
             }}
           />
-          <div className="flex gap-x-base gap-y-base my-base">
+          <div className="gap-x-base gap-y-base my-base flex">
             <InputField
               label="Code"
               className="flex-1"
@@ -139,7 +139,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
             )}
           </div>
 
-          <div className="text-grey-50 inter-small-regular flex flex-col mb-6">
+          <div className="text-grey-50 inter-small-regular mb-6 flex flex-col">
             <span>
               The code your customers will enter during checkout. This will
               appear on your customer’s invoice.

packages/admin-ui/ui/src/domain/discounts/new/discount-form/use-condition-modal-items.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react"
+import { useContext, useMemo } from "react"
 import { LayeredModalContext } from "../../../../components/molecules/modal/layered-modal"
 import { DiscountConditionType } from "../../types"
 import AddCollectionConditionSelector from "./condition-tables/add-condition-tables/collections"

packages/admin-ui/ui/src/domain/gift-cards/custom-giftcard.tsx

@@ -78,7 +78,7 @@ const CustomGiftcard: React.FC<CustomGiftcardProps> = ({ onDismiss }) => {
         <Modal.Content>
           <div className="flex flex-col">
             <span className="inter-base-semibold">Value</span>
-            <div className="flex gap-x-2xsmall mt-4">
+            <div className="gap-x-2xsmall mt-4 flex">
               <div className="w-[267px]">
                 <Select
                   label={"Region"}
@@ -116,7 +116,7 @@ const CustomGiftcard: React.FC<CustomGiftcardProps> = ({ onDismiss }) => {
           </div>
           <div className="mt-8">
             <span className="inter-base-semibold">Receiver</span>
-            <div className="grid grid-cols-1 gap-y-xsmall mt-4">
+            <div className="gap-y-xsmall mt-4 grid grid-cols-1">
               <InputField
                 label={"Email"}
                 required
@@ -134,7 +134,7 @@ const CustomGiftcard: React.FC<CustomGiftcardProps> = ({ onDismiss }) => {
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex w-full justify-end gap-x-xsmall">
+          <div className="gap-x-xsmall flex w-full justify-end">
             <Button
               variant="ghost"
               onClick={onDismiss}

packages/admin-ui/ui/src/domain/gift-cards/details/edit-gift-card-modal.tsx

@@ -1,5 +1,5 @@
 import { AdminPostGiftCardsGiftCardReq, Region } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Controller, useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import Modal from "../../../components/molecules/modal"
@@ -81,7 +81,7 @@ const EditGiftCardModal = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex justify-end">
+            <div className="flex w-full justify-end">
               <Button
                 variant="ghost"
                 size="small"

packages/admin-ui/ui/src/domain/gift-cards/details/index.tsx

@@ -82,7 +82,7 @@ const GiftCardDetails = () => {
         previousRoute="/a/gift-cards"
       />
       {isLoading || !giftCard ? (
-        <div className="w-full bg-grey-0 border border-grey-20 rounded-rounded py-xlarge flex items-center justify-center">
+        <div className="bg-grey-0 border-grey-20 rounded-rounded py-xlarge flex w-full items-center justify-center border">
           <Spinner size={"large"} variant={"secondary"} />
         </div>
       ) : (
@@ -104,7 +104,7 @@ const GiftCardDetails = () => {
             actionables={actions}
           >
             <div className="flex justify-between">
-              <div className="flex mt-6 space-x-6 divide-x">
+              <div className="mt-6 flex space-x-6 divide-x">
                 <div className="flex flex-col">
                   <div className="inter-smaller-regular text-grey-50 mb-1">
                     Original amount

packages/admin-ui/ui/src/domain/gift-cards/details/update-balance-modal.tsx

@@ -1,6 +1,5 @@
 import { AdminPostGiftCardsGiftCardReq, GiftCard } from "@medusajs/medusa"
 import clsx from "clsx"
-import React from "react"
 import { Controller, useForm, useWatch } from "react-hook-form"
 import Tooltip from "../../../components/atoms/tooltip"
 import Button from "../../../components/fundamentals/button"
@@ -45,7 +44,7 @@ const UpdateBalanceModal = ({
             <span className="inter-xlarge-semibold">Update Balance</span>
             <span
               className={clsx(
-                "inter-small-regular text-rose-50 mt-2xsmall transition-display delay-75",
+                "inter-small-regular mt-2xsmall transition-display text-rose-50 delay-75",
                 {
                   hidden: !(balance > giftCard.value),
                 }
@@ -80,7 +79,7 @@ const UpdateBalanceModal = ({
             </CurrencyInput.Root>
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex justify-end">
+            <div className="flex w-full justify-end">
               <Button
                 variant="ghost"
                 size="small"

packages/admin-ui/ui/src/domain/gift-cards/manage/denomination-table.tsx

@@ -90,7 +90,7 @@ const DenominationTable: React.FC<DenominationTableProps> = ({
   }
 
   return (
-    <div className="w-full h-full overflow-y-auto">
+    <div className="h-full w-full overflow-y-auto">
       <Table>
         <Table.Head>
           <Table.HeadRow>

packages/admin-ui/ui/src/domain/gift-cards/manage/index.tsx

@@ -1,5 +1,5 @@
 import { useAdminProducts } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
 import Spinner from "../../../components/atoms/spinner"
 import Toaster from "../../../components/declarative-toaster"
@@ -28,7 +28,7 @@ const ManageGiftCard = () => {
 
   if (!giftCard) {
     return (
-      <div className="w-full h-screen flex items-center justify-center">
+      <div className="flex h-screen w-full items-center justify-center">
         <Spinner variant="secondary" size="large" />
       </div>
     )
@@ -39,7 +39,7 @@ const ManageGiftCard = () => {
       giftCard={giftCardToFormValuesMapper(giftCard)}
       giftCardId={giftCard.id}
     >
-      <div className="flex flex-col gap-y-large pb-xlarge">
+      <div className="gap-y-large pb-xlarge flex flex-col">
         <Information giftCard={giftCard} />
         <Denominations giftCard={giftCard} />
         <Images />

packages/admin-ui/ui/src/domain/gift-cards/manage/sections/images.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller, useFieldArray } from "react-hook-form"
 import FileUploadField from "../../../../components/atoms/file-upload-field"
 import BodyCard from "../../../../components/organisms/body-card"

packages/admin-ui/ui/src/domain/gift-cards/manage/sections/information.tsx

@@ -116,7 +116,7 @@ const Information: React.FC<InformationProps> = ({ giftCard }) => {
       ]}
     >
       <div className="flex flex-col space-y-6">
-        <div className="grid grid-cols-2 gap-large">
+        <div className="gap-large grid grid-cols-2">
           <Input
             label="Name"
             placeholder="Add name"
@@ -154,7 +154,7 @@ const Information: React.FC<InformationProps> = ({ giftCard }) => {
             forceMount: true,
           }}
         >
-          <div className="grid grid-cols-2 gap-large">
+          <div className="gap-large grid grid-cols-2">
             <Input
               label="Handle"
               placeholder="Product handle"

packages/admin-ui/ui/src/domain/gift-cards/new.tsx

@@ -3,7 +3,6 @@ import {
   useAdminProducts,
   useAdminStore,
 } from "medusa-react"
-import React from "react"
 import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 import FileUploadField from "../../components/atoms/file-upload-field"
@@ -146,7 +145,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
             <div className="mb-base">
               <h3 className="inter-base-semibold">Gift Card Details</h3>
             </div>
-            <div className="flex flex-col gap-y-base">
+            <div className="gap-y-base flex flex-col">
               <InputField
                 label={"Name"}
                 required
@@ -161,13 +160,13 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
             </div>
             <div className="mt-xlarge">
               <h3 className="inter-base-semibold">Thumbnail</h3>
-              <div className="h-[80px] mt-base">
+              <div className="mt-base h-[80px]">
                 {thumbnail ? (
                   <div className="flex items-center gap-x-6">
                     <img
                       src={thumbnail.url}
                       alt=""
-                      className="w-20 h-20 rounded-base object-cover object-center"
+                      className="rounded-base h-20 w-20 object-cover object-center"
                     />
                     <div className="flex flex-col gap-y-1">
                       <span className="inter-small-regular">
@@ -175,7 +174,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
                       </span>
                       <div>
                         <button
-                          className="text-rose-50 inter-small-semibold"
+                          className="inter-small-semibold text-rose-50"
                           type="button"
                           onClick={() => setValue("thumbnail", null)}
                         >
@@ -202,12 +201,12 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
               <h3 className="inter-base-semibold mb-base">
                 Denominations<span className="text-rose-50">*</span>
               </h3>
-              <div className="flex flex-col gap-y-xsmall">
+              <div className="gap-y-xsmall flex flex-col">
                 {fields.map((denomination, index) => {
                   return (
                     <div
                       key={denomination.id}
-                      className="flex items-end gap-x-base last:mb-large"
+                      className="gap-x-base last:mb-large flex items-end"
                     >
                       <CurrencyInput.Root
                         currentCurrency={store?.default_currency_code}
@@ -236,7 +235,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
                       <Button
                         variant="ghost"
                         size="large"
-                        className="w-10 h-10 text-grey-40"
+                        className="text-grey-40 h-10 w-10"
                         type="button"
                         onClick={() => remove(index)}
                       >
@@ -263,7 +262,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full">
+            <div className="flex w-full items-center justify-end">
               <Button
                 type="submit"
                 variant="ghost"

packages/admin-ui/ui/src/domain/gift-cards/overview.tsx

@@ -4,7 +4,7 @@ import {
   useAdminStore,
   useAdminUpdateProduct,
 } from "medusa-react"
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import PageDescription from "../../components/atoms/page-description"
 import Spinner from "../../components/atoms/spinner"
@@ -79,7 +79,7 @@ const Overview = () => {
 
   return (
     <>
-      <div className="flex flex-col grow h-full pb-xlarge">
+      <div className="pb-xlarge flex h-full grow flex-col">
         <PageDescription
           title="Gift Cards"
           subtitle="Manage the Gift Cards of your Medusa store"
@@ -107,7 +107,7 @@ const Overview = () => {
                 </BannerCard>
               )}
             </div>
-            <div className="w-full flex flex-col grow">
+            <div className="flex w-full grow flex-col">
               <BodyCard
                 title="History"
                 subtitle="See the history of purchased Gift Cards"
@@ -119,7 +119,7 @@ const Overview = () => {
             </div>
           </>
         ) : (
-          <div className="w-full flex items-center justify-center h-44 rounded-rounded border border-grey-20">
+          <div className="rounded-rounded border-grey-20 flex h-44 w-full items-center justify-center border">
             <Spinner variant="secondary" size="large" />
           </div>
         )}

packages/admin-ui/ui/src/domain/inventory/filter-dropdown.tsx

@@ -70,15 +70,15 @@ const ProductsFilter = ({
               "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex items-center h-6 px-2 border rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
-              <div className="flex items-center ml-1 rounded text-grey-40">
+              <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
                   {numberOfFilters ? numberOfFilters : "0"}
                 </span>
               </div>
             </div>
-            <div className="flex items-center p-1 border rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>

packages/admin-ui/ui/src/domain/inventory/inventory/index.tsx

@@ -4,8 +4,8 @@ import InventoryPageTableHeader from "../header"
 
 const InventoryView = () => {
   return (
-    <div className="flex flex-col h-full grow">
-      <div className="flex flex-col w-full grow">
+    <div className="flex h-full grow flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           customHeader={<InventoryPageTableHeader activeView="inventory" />}
           className="h-fit"

packages/admin-ui/ui/src/domain/inventory/locations/components/general-form/index.tsx

@@ -18,7 +18,7 @@ const GeneralForm = ({ form }: Props) => {
   } = form
   return (
     <div>
-      <div className="grid grid-cols-2 gap-x-large mb-small">
+      <div className="gap-x-large mb-small grid grid-cols-2">
         <InputField
           label="Location name"
           placeholder="Flagship store, warehouse"

packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-form/index.tsx

@@ -47,7 +47,7 @@ const SalesChannelsForm = ({
           Add sales channels
         </Button>
       ) : (
-        <div className="flex items-center justify-between w-full">
+        <div className="flex w-full items-center justify-between">
           <SalesChannelsList
             salesChannels={location?.sales_channels || fields}
             showMax={1}

packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-section/index.tsx

@@ -9,7 +9,7 @@ const SalesChannelsSection = ({
 }) => {
   return (
     <div className="py-base">
-      <div className="flex items-center justify-between w-full">
+      <div className="flex w-full items-center justify-between">
         {!location.sales_channels?.length ? (
           <span className="inter-base-regular text-grey-40">
             Not connected to any sales channels yet

packages/admin-ui/ui/src/domain/inventory/locations/edit/index.tsx

@@ -64,7 +64,7 @@ const LocationEditModal = ({ onClose, location }: LocationEditModalProps) => {
         </Modal.Header>
         <Modal.Content>
           <form className="w-full">
-            <div className="flex flex-col mt-xlarge gap-y-xlarge">
+            <div className="mt-xlarge gap-y-xlarge flex flex-col">
               <GeneralForm form={nestedForm(form, "general")} />
               <AddressForm form={nestedForm(form, "address")} />
             </div>
@@ -72,7 +72,7 @@ const LocationEditModal = ({ onClose, location }: LocationEditModalProps) => {
         </Modal.Content>
       </Modal.Body>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-2">
+        <div className="flex w-full justify-end space-x-2">
           <Button
             size="small"
             variant="secondary"

packages/admin-ui/ui/src/domain/inventory/locations/index.tsx

@@ -29,15 +29,15 @@ const Locations = () => {
 
   return (
     <>
-      <div className="flex flex-col h-full grow">
-        <div className="flex flex-col w-full grow">
+      <div className="flex h-full grow flex-col">
+        <div className="flex w-full grow flex-col">
           <BodyCard
             customHeader={<InventoryPageTableHeader activeView="locations" />}
-            className="min-h-[85px] h-[85px]"
+            className="h-[85px] min-h-[85px]"
             customActionable={Actions}
           />
           {isLoading ? (
-            <div className="flex items-center justify-center w-full h-full">
+            <div className="flex h-full w-full items-center justify-center">
               <Spinner variant="secondary" />
             </div>
           ) : (

packages/admin-ui/ui/src/domain/orders/components/items-to-receive-form/items-to-receive-form.tsx

@@ -61,7 +61,7 @@ export const ItemsToReceiveForm = ({ form, order }: Props) => {
   })
 
   return (
-    <div className="flex flex-col gap-y-xsmall">
+    <div className="gap-y-xsmall flex flex-col">
       <h2 className="inter-base-semibold">Items to receive</h2>
 
       <ItemsToReceiveTable instance={tableInstance} />

packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/add-return-reason-screen.tsx

@@ -73,7 +73,7 @@ const AddReasonScreen = ({
   return (
     <>
       <Modal.Content>
-        <div className="flex flex-col gap-y-base">
+        <div className="gap-y-base flex flex-col">
           <h2 className="inter-base-semibold">Reason for Return</h2>
           <Controller
             control={control}
@@ -98,7 +98,7 @@ const AddReasonScreen = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full items-center justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button size="small" variant="secondary" onClick={pop} type="button">
             Cancel
           </Button>

packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/index.tsx

@@ -41,7 +41,7 @@ const AddReturnReason = ({ row, form, isClaim = false }: Props) => {
   }
 
   return (
-    <div className="grid w-full grid-cols-[74px,1fr,1fr] pb-small">
+    <div className="pb-small grid w-full grid-cols-[74px,1fr,1fr]">
       <span />
       <div className="flex items-center">
         <p className="inter-small-semibold">{reasonDetails?.reason?.label}</p>

packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/add-additional-items-screen.tsx

@@ -160,7 +160,7 @@ const AddAdditionalItemsScreen = ({
         <TablePagination table={table} count={count} className="mt-11" />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full items-center justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Go back
           </Button>

packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/use-add-additional-items-columns.tsx

@@ -77,7 +77,7 @@ export const useAddAdditionalItemsColumns = (order: Order) => {
           >
             <p className="select-none">Title</p>
             <div
-              className="flex h-large w-large items-center justify-center"
+              className="h-large w-large flex items-center justify-center"
               onClick={getToggleSortingHandler()}
             >
               <SortingIcon size={16} isSorted={getIsSorted()} />
@@ -96,7 +96,7 @@ export const useAddAdditionalItemsColumns = (order: Order) => {
           return (
             <div
               className={clsx(
-                "inter-small-regular flex items-center gap-base py-xsmall",
+                "inter-small-regular gap-base py-xsmall flex items-center",
                 {
                   "opacity-50": !isSelectable,
                 }
@@ -157,7 +157,7 @@ export const useAddAdditionalItemsColumns = (order: Order) => {
                   content="The price has been overridden in a price list, that is applicable to this order."
                   side="top"
                 >
-                  <p className="cursor-default text-grey-40 line-through">
+                  <p className="text-grey-40 cursor-default line-through">
                     {formatAmountWithSymbol({
                       amount: original_price_incl_tax || 0,
                       currency: order.currency_code,

packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/index.tsx

@@ -63,7 +63,7 @@ const ItemsToSendForm = ({ form, order }: Props) => {
   return (
     <div
       className={clsx({
-        "flex flex-col gap-y-base": fields.length > 0,
+        "gap-y-base flex flex-col": fields.length > 0,
         "flex items-center justify-between": !fields.length,
       })}
     >

packages/admin-ui/ui/src/domain/orders/components/refund-amount-form/index.tsx

@@ -41,7 +41,7 @@ const RefundAmountForm = ({ form, initialValue = 0, order }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-[40px_1fr] justify-end gap-x-xsmall">
+    <div className="gap-x-xsmall grid grid-cols-[40px_1fr] justify-end">
       <div className="flex flex-shrink justify-end">
         {refundAmount !== undefined ? (
           <Button

packages/admin-ui/ui/src/domain/orders/components/rma-summaries/summary-shipping-line.tsx

@@ -16,8 +16,8 @@ export const SummaryShippingLine = ({
 }: ShippingLineProps) => {
   return (
     <div className="flex items-center justify-between">
-      <div className="flex items-center gap-x-base">
-        <div className=" w-[30px] h-10 rounded-rounded flex items-center justify-center text-grey-50">
+      <div className="gap-x-base flex items-center">
+        <div className=" rounded-rounded text-grey-50 flex h-10 w-[30px] items-center justify-center">
           <CornerDownRightIcon size={16} />
         </div>
         <div className="inter-small-regular">

packages/admin-ui/ui/src/domain/orders/components/shipping-address-form/shipping-address-form-modal.tsx

@@ -75,7 +75,7 @@ const ShippingAddressFormScreen = ({ form, order }: Props) => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full items-center justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button
             variant="secondary"
             size="small"

packages/admin-ui/ui/src/domain/orders/components/shipping-form/index.tsx

@@ -108,7 +108,7 @@ const ShippingForm = ({
   }
 
   return (
-    <div className="flex flex-col gap-y-base">
+    <div className="gap-y-base flex flex-col">
       <div className="flex flex-col">
         <h2 className="inter-base-semibold">
           Shipping for {isReturn ? "return" : "replacement"} items
@@ -140,7 +140,7 @@ const ShippingForm = ({
         <div className="flex w-full items-center justify-end">
           {selectedOptionPrice !== undefined ? (
             <div className="flex w-full items-center justify-end">
-              <div className="grid grid-cols-[1fr_40px] gap-x-xsmall">
+              <div className="gap-x-xsmall grid grid-cols-[1fr_40px]">
                 <Controller
                   control={control}
                   name={path("price")}

packages/admin-ui/ui/src/domain/orders/components/table-quantity-selector.tsx

@@ -54,7 +54,7 @@ const TableQuantitySelector = <
   return (
     <div className="flex items-center justify-end">
       {quantityFlag ? (
-        <div className="inter-small-regular grid grid-cols-3 gap-x-2xsmall text-grey-50">
+        <div className="inter-small-regular gap-x-2xsmall text-grey-50 grid grid-cols-3">
           <Button
             variant="ghost"
             size="small"

packages/admin-ui/ui/src/domain/orders/details/address-modal.tsx

@@ -105,10 +105,10 @@ const AddressModal = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex justify-end w-full h-8">
+            <div className="flex h-8 w-full justify-end">
               <Button
                 variant="ghost"
-                className="justify-center w-32 mr-2 text-small"
+                className="text-small mr-2 w-32 justify-center"
                 size="large"
                 onClick={handleClose}
                 type="button"
@@ -117,7 +117,7 @@ const AddressModal = ({
               </Button>
               <Button
                 size="large"
-                className="justify-center w-32 text-small"
+                className="text-small w-32 justify-center"
                 variant="primary"
                 type="submit"
                 loading={submitting}

packages/admin-ui/ui/src/domain/orders/details/claim/register-claim-menu.tsx

@@ -227,7 +227,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
         </Modal.Header>
         <form onSubmit={onSubmit} data-testid="register-claim-form">
           <Modal.Content>
-            <div className="flex flex-col gap-y-xlarge">
+            <div className="gap-y-xlarge flex flex-col">
               <ItemsToReturnForm
                 form={nestedForm(form, "return_items")}
                 order={order}
@@ -266,7 +266,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
                 form={nestedForm(form, "notification")}
                 type="claim"
               />
-              <div className="flex items-center justify-end gap-x-xsmall">
+              <div className="gap-x-xsmall flex items-center justify-end">
                 <Button
                   variant="secondary"
                   size="small"

packages/admin-ui/ui/src/domain/orders/details/email-modal.tsx

@@ -54,7 +54,7 @@ const EmailModal: React.FC<EmailModalProps> = ({
           </Modal.Header>
           <Modal.Content>
             <div className="space-y-4">
-              <div className="flex mt-4 space-x-4">
+              <div className="mt-4 flex space-x-4">
                 <Input
                   label="Email"
                   {...register("email")}
@@ -64,10 +64,10 @@ const EmailModal: React.FC<EmailModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-end">
+            <div className="flex h-8 w-full justify-end">
               <Button
                 variant="ghost"
-                className="mr-2 w-32 text-small justify-center"
+                className="text-small mr-2 w-32 justify-center"
                 size="large"
                 type="button"
                 onClick={handleClose}
@@ -76,7 +76,7 @@ const EmailModal: React.FC<EmailModalProps> = ({
               </Button>
               <Button
                 size="large"
-                className="w-32 text-small justify-center"
+                className="text-small w-32 justify-center"
                 variant="primary"
                 loading={isLoading}
                 disabled={isLoading}

packages/admin-ui/ui/src/domain/orders/details/mark-shipped/index.tsx

@@ -164,7 +164,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
                 ))}
               </div>
             </div>
-            <div className="flex w-full justify-end mt-4">
+            <div className="mt-4 flex w-full justify-end">
               <Button
                 size="small"
                 onClick={() => appendTracking({ value: undefined })}
@@ -176,13 +176,13 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-between">
+            <div className="flex h-8 w-full justify-between">
               <div
-                className="items-center h-full flex cursor-pointer"
+                className="flex h-full cursor-pointer items-center"
                 onClick={() => setNoNotis(!noNotis)}
               >
                 <div
-                  className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+                  className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                     !noNotis && "bg-violet-60"
                   }`}
                 >
@@ -197,7 +197,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
                   checked={!noNotis}
                   type="checkbox"
                 />
-                <span className="ml-3 flex items-center text-grey-90 gap-x-xsmall">
+                <span className="text-grey-90 gap-x-xsmall ml-3 flex items-center">
                   Send notifications
                   <IconTooltip content="" />
                 </span>
@@ -205,7 +205,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
               <div className="flex">
                 <Button
                   variant="ghost"
-                  className="mr-2 w-32 text-small justify-center"
+                  className="text-small mr-2 w-32 justify-center"
                   size="large"
                   onClick={handleCancel}
                   type="button"
@@ -214,7 +214,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
                 </Button>
                 <Button
                   size="large"
-                  className="w-32 text-small justify-center"
+                  className="text-small w-32 justify-center"
                   variant="primary"
                   type="submit"
                   loading={isSubmitting}

packages/admin-ui/ui/src/domain/orders/details/order-line/edit.tsx

@@ -167,9 +167,9 @@ const OrderEditLine = ({
       open={isLocked ? undefined : false}
       content="This line item is part of a fulfillment and cannot be edited. Cancel the fulfillment to edit the line item."
     >
-      <div className="flex justify-between mb-1 h-[64px] py-2 mx-[-5px] px-[5px] hover:bg-grey-5 rounded-rounded">
-        <div className="flex space-x-4 justify-center flex-grow-1">
-          <div className="flex h-[48px] w-[36px] rounded-rounded overflow-hidden">
+      <div className="hover:bg-grey-5 rounded-rounded mx-[-5px] mb-1 flex h-[64px] justify-between py-2 px-[5px]">
+        <div className="flex-grow-1 flex justify-center space-x-4">
+          <div className="rounded-rounded flex h-[48px] w-[36px] overflow-hidden">
             {item.thumbnail ? (
               <img src={item.thumbnail} className="object-cover" />
             ) : (
@@ -177,10 +177,10 @@ const OrderEditLine = ({
             )}
           </div>
           <div className="flex flex-col justify-center">
-            <div className="flex gap-2 items-center max-w-[310px]">
+            <div className="flex max-w-[310px] items-center gap-2">
               <span
                 className={clsx(
-                  "font-semibold text-grey-900 flex-shrink-0 flex-grow",
+                  "text-grey-900 flex-shrink-0 flex-grow font-semibold",
                   {
                     "text-gray-400": isLocked,
                   }
@@ -191,7 +191,7 @@ const OrderEditLine = ({
               {item?.variant?.options && (
                 <span
                   className={clsx(
-                    "text-gray-400 flex gap-3 flex-shrink-1 truncate",
+                    "flex-shrink-1 flex gap-3 truncate text-gray-400",
                     {
                       "text-gray-400": isLocked,
                     }
@@ -203,13 +203,13 @@ const OrderEditLine = ({
             </div>
             <div className="flex items-center">
               {isNew && (
-                <div className="text-small text-blue-500 bg-blue-10 h-[24px] w-[42px] mr-2 flex-shrink-0 flex items-center justify-center rounded-rounded">
+                <div className="text-small bg-blue-10 rounded-rounded mr-2 flex h-[24px] w-[42px] flex-shrink-0 items-center justify-center text-blue-500">
                   New
                 </div>
               )}
 
               {isModified && (
-                <div className="text-small text-orange-500 bg-orange-10 h-[24px] w-[68px] mr-2 flex-shrink-0 flex items-center justify-center rounded-rounded">
+                <div className="text-small bg-orange-10 rounded-rounded mr-2 flex h-[24px] w-[68px] flex-shrink-0 items-center justify-center text-orange-500">
                   Modified
                 </div>
               )}
@@ -220,7 +220,7 @@ const OrderEditLine = ({
                     value={item.variant?.sku}
                     displayValue={
                       <span
-                        className={clsx("text-gray-500 flex gap-3", {
+                        className={clsx("flex gap-3 text-gray-500", {
                           "text-gray-400": isLocked,
                         })}
                       >
@@ -234,9 +234,9 @@ const OrderEditLine = ({
             </div>
           </div>
         </div>
-        <div className="flex items-center justify-between min-w-[312px]">
+        <div className="flex min-w-[312px] items-center justify-between">
           <div
-            className={clsx("flex items-center flex-grow-0 text-gray-400", {
+            className={clsx("flex flex-grow-0 items-center text-gray-400", {
               "pointer-events-none": isLocked,
             })}
           >
@@ -251,7 +251,7 @@ const OrderEditLine = ({
               }
             />
             <span
-              className={clsx("px-8 text-center text-gray-900 min-w-[74px]", {
+              className={clsx("min-w-[74px] px-8 text-center text-gray-900", {
                 "!text-gray-400": isLocked,
               })}
             >
@@ -265,16 +265,16 @@ const OrderEditLine = ({
             />
           </div>
 
-          <div className="flex gap-6 items-center h-full">
+          <div className="flex h-full items-center gap-6">
             <div
               className={clsx(
-                "flex small:space-x-2 medium:space-x-4 large:space-x-6",
-                { "!text-gray-400 pointer-events-none": isLocked }
+                "small:space-x-2 medium:space-x-4 large:space-x-6 flex",
+                { "pointer-events-none !text-gray-400": isLocked }
               )}
             >
               <div
-                className={clsx("text-gray-900 min-w-[60px] text-right", {
-                  "!text-gray-400 pointer-events-none": isLocked,
+                className={clsx("min-w-[60px] text-right text-gray-900", {
+                  "pointer-events-none !text-gray-400": isLocked,
                 })}
               >
                 {formatAmountWithSymbol({
@@ -283,7 +283,7 @@ const OrderEditLine = ({
                   tax: item.includes_tax ? 0 : item.tax_lines,
                   digits: 2,
                 })}
-                <span className="text-gray-400 ml-2">
+                <span className="ml-2 text-gray-400">
                   {currencyCode.toUpperCase()}
                 </span>
               </div>

packages/admin-ui/ui/src/domain/orders/details/refund/index.tsx

@@ -1,6 +1,6 @@
 import { Order } from "@medusajs/medusa"
 import { useAdminRefundPayment } from "medusa-react"
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 
 import Button from "../../../../components/fundamentals/button"
@@ -92,8 +92,8 @@ const RefundMenu = ({
           </Modal.Header>
           <Modal.Content>
             {isSystemPayment && (
-              <div className="inter-small-regular mb-6 p-4 text-orange-50 bg-orange-5 rounded-rounded flex">
-                <div className="h-full mr-3">
+              <div className="inter-small-regular bg-orange-5 rounded-rounded mb-6 flex p-4 text-orange-50">
+                <div className="mr-3 h-full">
                   <AlertIcon size={20} />
                 </div>
                 <div className="flex flex-col">
@@ -105,7 +105,7 @@ const RefundMenu = ({
               </div>
             )}
             <span className="inter-base-semibold">Details</span>
-            <div className="grid gap-y-base mt-4">
+            <div className="gap-y-base mt-4 grid">
               <CurrencyInput.Root
                 size="small"
                 currentCurrency={order.currency_code}
@@ -158,11 +158,11 @@ const RefundMenu = ({
           <Modal.Footer>
             <div className="flex w-full  justify-between">
               <div
-                className="items-center h-full flex cursor-pointer"
+                className="flex h-full cursor-pointer items-center"
                 onClick={() => setNoNotification(!noNotification)}
               >
                 <div
-                  className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+                  className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                     !noNotification && "bg-violet-60"
                   }`}
                 >
@@ -178,12 +178,12 @@ const RefundMenu = ({
                   onChange={() => setNoNotification(!noNotification)}
                   type="checkbox"
                 />
-                <span className="ml-3 flex items-center text-grey-90 gap-x-xsmall">
+                <span className="text-grey-90 gap-x-xsmall ml-3 flex items-center">
                   Send notifications
                   <IconTooltip content="Notify customer of created return" />
                 </span>
               </div>
-              <div className="flex gap-x-xsmall">
+              <div className="gap-x-xsmall flex">
                 <Button
                   onClick={onDismiss}
                   size="small"

packages/admin-ui/ui/src/domain/orders/details/returns/index.tsx

@@ -213,7 +213,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
                   <span>Shipping</span>
                   <div>
                     {displayAmount(order.currency_code, shippingPrice || 0)}{" "}
-                    <span className="ml-3 text-grey-40">
+                    <span className="text-grey-40 ml-3">
                       {order.currency_code.toUpperCase()}
                     </span>
                   </div>
@@ -225,7 +225,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
                   {!refundEdited && (
                     <>
                       <span
-                        className="mr-2 cursor-pointer text-grey-40"
+                        className="text-grey-40 mr-2 cursor-pointer"
                         onClick={() => setRefundEdited(true)}
                       >
                         <EditIcon size={20} />{" "}
@@ -262,7 +262,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
               onClick={() => setNoNotification(!noNotification)}
             >
               <div
-                className={`flex h-5 w-5 justify-center rounded-base border border-grey-30 text-grey-0 ${
+                className={`rounded-base border-grey-30 text-grey-0 flex h-5 w-5 justify-center border ${
                   !noNotification && "bg-violet-60"
                 }`}
               >
@@ -278,12 +278,12 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
                 onChange={() => setNoNotification(!noNotification)}
                 type="checkbox"
               />
-              <span className="ml-3 flex items-center gap-x-xsmall text-grey-90">
+              <span className="gap-x-xsmall text-grey-90 ml-3 flex items-center">
                 Send notifications
                 <IconTooltip content="Notify customer of created return" />
               </span>
             </div>
-            <div className="flex gap-x-xsmall">
+            <div className="gap-x-xsmall flex">
               <Button
                 onClick={() => onDismiss()}
                 className="w-[112px]"

packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/address.tsx

@@ -36,9 +36,8 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
 }) => {
   const { pop } = useContext(LayeredModalContext)
 
-  const { register, handleSubmit, control, reset } = useForm<
-    RMAEditAddressSubModalFormData
-  >()
+  const { register, handleSubmit, control, reset } =
+    useForm<RMAEditAddressSubModalFormData>()
 
   const { region } = useAdminRegion(order.region_id)
 
@@ -84,7 +83,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
               <div>
                 <span className="inter-base-semibold">General</span>
 
-                <div className="grid grid-cols-2 gap-x-base gap-y-base">
+                <div className="gap-x-base gap-y-base grid grid-cols-2">
                   <Input
                     {...register("first_name", {
                       required: true,
@@ -110,7 +109,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
               </div>
               <div className="mt-8">
                 <span className="inter-base-semibold">Shipping Address</span>
-                <div className="grid gap-y-base my-4">
+                <div className="gap-y-base my-4 grid">
                   <Input
                     {...register("address_1", {
                       required: true,
@@ -125,7 +124,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
                     label="Address 2"
                   />
                 </div>
-                <div className="grid grid-cols-2 gap-x-base gap-y-base">
+                <div className="gap-x-base gap-y-base grid grid-cols-2">
                   <Input
                     {...register("province")}
                     placeholder="Province"
@@ -170,7 +169,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex w-full justify-end gap-x-xsmall">
+          <div className="gap-x-xsmall flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"

packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/products.tsx

@@ -66,11 +66,11 @@ const RMASelectProductSubModal: React.FC<RMASelectProductSubModalProps> = ({
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
                 {original.product.thumbnail ? (
                   <img
                     src={original.product.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
@@ -266,7 +266,7 @@ const RMASelectProductSubModal: React.FC<RMASelectProductSubModalProps> = ({
         </TableContainer>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"

packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/return-reasons.tsx

@@ -128,7 +128,7 @@ const RMAReturnReasonSubModal: React.FC<RMAReturnReasonSubModalProps> = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"
@@ -156,10 +156,10 @@ const RMAReturnReasonSubModal: React.FC<RMAReturnReasonSubModalProps> = ({
 }
 
 const ImageRow = ({ url, onDelete, name, size }) => (
-  <div className="flex items-center w-full justify-between my-8">
+  <div className="my-8 flex w-full items-center justify-between">
     <div className="flex items-center">
-      <div className="w-20 h-20 bg-voilet-60">
-        <img className="object-cover rounded-rounded w-full h-full" src={url} />
+      <div className="bg-voilet-60 h-20 w-20">
+        <img className="rounded-rounded h-full w-full object-cover" src={url} />
       </div>
       <div className="inter-small-regular ml-8 flex flex-col">
         {name}
@@ -169,7 +169,7 @@ const ImageRow = ({ url, onDelete, name, size }) => (
     <Button
       variant="ghost"
       size="small"
-      className="w-8 h-8 text-grey-40"
+      className="text-grey-40 h-8 w-8"
       onClick={onDelete}
     >
       <TrashIcon size={20} />

packages/admin-ui/ui/src/domain/orders/details/swap/create.tsx

@@ -263,12 +263,12 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               />
             )}
           </div>
-          <div className="flex justify-between mt-8 items-center">
+          <div className="mt-8 flex items-center justify-between">
             <h3 className="inter-base-semibold ">Items to send</h3>
             {itemsToAdd.length === 0 ? (
               <Button
                 variant="ghost"
-                className="border border-grey-20"
+                className="border-grey-20 border"
                 size="small"
                 onClick={() => {
                   layeredModalContext.push(
@@ -299,7 +299,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               <div className="flex w-full justify-end">
                 <Button
                   variant="ghost"
-                  className="border border-grey-20"
+                  className="border-grey-20 border"
                   size="small"
                   onClick={() => {
                     layeredModalContext.push(
@@ -316,7 +316,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               </div>
             </>
           )}
-          <div className="flex text-grey-90 justify-between items-center inter-small-regular mt-8">
+          <div className="text-grey-90 inter-small-regular mt-8 flex items-center justify-between">
             <span>Return Total</span>
             <span>
               {formatAmountWithSymbol({
@@ -325,7 +325,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               })}
             </span>
           </div>
-          <div className="flex text-grey-90 justify-between items-center inter-small-regular mt-2">
+          <div className="text-grey-90 inter-small-regular mt-2 flex items-center justify-between">
             <span>Additional Total</span>
             <span>
               {formatAmountWithSymbol({
@@ -336,11 +336,11 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               })}
             </span>
           </div>
-          <div className="flex text-grey-90 justify-between items-center inter-small-regular mt-2">
+          <div className="text-grey-90 inter-small-regular mt-2 flex items-center justify-between">
             <span>Outbond Shipping</span>
             <span>Calculated at checkout</span>
           </div>
-          <div className="flex justify-between items-center inter-base-semibold mt-4">
+          <div className="inter-base-semibold mt-4 flex items-center justify-between">
             <span>Estimated difference</span>
             <span className="inter-large-semibold">
               {formatAmountWithSymbol({
@@ -355,11 +355,11 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
         <Modal.Footer>
           <div className="flex w-full justify-between">
             <div
-              className="items-center h-full flex cursor-pointer"
+              className="flex h-full cursor-pointer items-center"
               onClick={() => setNoNotification(!noNotification)}
             >
               <div
-                className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+                className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                   !noNotification && "bg-violet-60"
                 }`}
               >
@@ -374,7 +374,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
                 checked={!noNotification}
                 type="checkbox"
               />
-              <span className="ml-3 flex items-center text-grey-90 gap-x-xsmall">
+              <span className="text-grey-90 gap-x-xsmall ml-3 flex items-center">
                 Send notifications
                 <IconTooltip content="If unchecked the customer will not receive communication about this exchange" />
               </span>

packages/admin-ui/ui/src/domain/orders/details/templates/address.tsx

@@ -1,5 +1,4 @@
 import { Address } from "@medusajs/medusa"
-import React from "react"
 
 type FormattedAddressProps = {
   title: string
@@ -11,7 +10,7 @@ export const FormattedAddress = ({ title, addr }: FormattedAddressProps) => {
     return (
       <div className="flex flex-col pl-6">
         <div className="inter-small-regular text-grey-50 mb-1">{title}</div>
-        <div className="flex flex-col inter-small-regular">N/A</div>
+        <div className="inter-small-regular flex flex-col">N/A</div>
       </div>
     )
   }
@@ -19,7 +18,7 @@ export const FormattedAddress = ({ title, addr }: FormattedAddressProps) => {
   return (
     <div className="flex flex-col pl-6">
       <div className="inter-small-regular text-grey-50 mb-1">{title}</div>
-      <div className="flex flex-col inter-small-regular">
+      <div className="inter-small-regular flex flex-col">
         <span>
           {addr?.address_1} {addr?.address_2}
         </span>