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

packages/admin-ui/ui/src/components/templates/add-products-modal/index.tsx

@@ -27,12 +27,13 @@ const AddProductsModal = ({
   /* ************* Data ************  */
 
   const params = useQueryFilters(defaultQueryProps)
-  const { products, isLoading, count = 0 } = useAdminProducts(
-    params.queryObject,
-    {
-      keepPreviousData: true,
-    }
-  )
+  const {
+    products,
+    isLoading,
+    count = 0,
+  } = useAdminProducts(params.queryObject, {
+    keepPreviousData: true,
+  })
 
   /* ************* State ************  */
 
@@ -64,7 +65,7 @@ const AddProductsModal = ({
           <h2 className="inter-xlarge-semibold">Add Products</h2>
         </Modal.Header>
         <Modal.Content>
-          <div className="w-full flex flex-col justify-between min-h-[300px] h-full ">
+          <div className="flex h-full min-h-[300px] w-full flex-col justify-between ">
             <SelectableTable
               columns={columns}
               data={products || []}
@@ -84,7 +85,7 @@ const AddProductsModal = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end gap-2">
+          <div className="flex w-full justify-end gap-2">
             <Button
               variant="ghost"
               className="rounded-rounded h-8 w-[128px]"

packages/admin-ui/ui/src/components/templates/add-products-modal/product-table-config.tsx

@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import clsx from "clsx"
-import * as React from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import ImagePlaceholder from "../../fundamentals/image-placeholder"
 import Table from "../../molecules/table"
@@ -11,12 +10,12 @@ export const columns: Column<Product>[] = [
     Header: <div className="pl-4">Product Details</div>,
     accessor: "title",
     Cell: ({ row: { original } }) => (
-      <div className="pl-4 flex items-center w-[400px]">
-        <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+      <div className="flex w-[400px] items-center pl-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 />
@@ -37,16 +36,16 @@ export const columns: Column<Product>[] = [
     Header: <div>Status</div>,
     accessor: "status",
     Cell: ({ cell: { value } }) => (
-      <Table.Cell className="w-[10%] pr-base">
+      <Table.Cell className="pr-base w-[10%]">
         <div className="flex items-center">{decideStatus(value)}</div>
       </Table.Cell>
     ),
   },
   {
-    Header: <div className="flex justify-end items-center pr-4">Variants</div>,
+    Header: <div className="flex items-center justify-end pr-4">Variants</div>,
     accessor: "variants",
     Cell: ({ row: { original } }) => (
-      <Table.Cell className="flex justify-end items-center pr-4">
+      <Table.Cell className="flex items-center justify-end pr-4">
         {original.variants.length}
       </Table.Cell>
     ),

packages/admin-ui/ui/src/components/templates/address-form.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import { Option } from "../../types/shared"
 import FormValidator from "../../utils/form-validator"
@@ -51,7 +50,7 @@ const AddressForm = ({
       {(type === AddressType.SHIPPING || type === AddressType.BILLING) && (
         <>
           <span className="inter-base-semibold">General</span>
-          <div className="grid grid-cols-2 mt-4 mb-8 gap-large">
+          <div className="gap-large mt-4 mb-8 grid grid-cols-2">
             <Input
               {...register(path("first_name"), {
                 required: required
@@ -104,7 +103,7 @@ const AddressForm = ({
           }`}
         </span>
       )}
-      <div className="grid grid-cols-2 mt-4 gap-y-large gap-x-large">
+      <div className="gap-y-large gap-x-large mt-4 grid grid-cols-2">
         <Input
           {...form.register(path("address_1"), {
             required: required ? FormValidator.required("Address 1") : false,

packages/admin-ui/ui/src/components/templates/collection-modal/index.tsx

@@ -141,7 +141,7 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
           <Modal.Content>
             <div>
               <h2 className="inter-base-semibold mb-base">Details</h2>
-              <div className="flex items-center gap-x-base">
+              <div className="gap-x-base flex items-center">
                 <InputField
                   label="Title"
                   required
@@ -164,7 +164,7 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <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"

packages/admin-ui/ui/src/components/templates/collection-product-table/add-product-table.tsx

@@ -76,7 +76,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
           id: "selection",
           Cell: ({ row }) => {
             return (
-              <Table.Cell className="w-[5%] pl-base">
+              <Table.Cell className="pl-base w-[5%]">
                 <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
               </Table.Cell>
             )
@@ -205,7 +205,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
           </TableContainer>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex items-center justify-end gap-x-xsmall w-full">
+          <div className="gap-x-xsmall flex w-full items-center justify-end">
             <Button
               variant="ghost"
               size="small"

packages/admin-ui/ui/src/components/templates/collection-product-table/index.tsx

@@ -98,7 +98,7 @@ const CollectionProductTable: React.FC<CollectionProductTableProps> = ({
           id: "selection",
           Cell: ({ row }) => {
             return (
-              <Table.Cell className="w-[5%] pl-base">
+              <Table.Cell className="pl-base w-[5%]">
                 <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
               </Table.Cell>
             )

packages/admin-ui/ui/src/components/templates/collection-product-table/use-collection-product-columns.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column } from "react-table"
 import Table from "../../molecules/table"
 import { decideStatus, SimpleProductType } from "./utils"
@@ -10,7 +10,7 @@ const useCollectionProductColumns = () => {
         accessor: "thumbnail",
         Cell: ({ cell: { value } }) => (
           <Table.Cell className="w-[5%]">
-            <div className="h-[40px] w-[30px] bg-grey-5 rounded-soft overflow-hidden my-xsmall">
+            <div className="bg-grey-5 rounded-soft my-xsmall h-[40px] w-[30px] overflow-hidden">
               {value ? (
                 <img
                   src={value}
@@ -31,7 +31,7 @@ const useCollectionProductColumns = () => {
       {
         accessor: "status",
         Cell: ({ cell: { value } }) => (
-          <Table.Cell className="w-[10%] pr-base">
+          <Table.Cell className="pr-base w-[10%]">
             <div className="flex items-center justify-end">
               {decideStatus(value)}
             </div>

packages/admin-ui/ui/src/components/templates/collection-product-table/use-sorting-options.tsx

@@ -6,9 +6,8 @@ import { SimpleProductType } from "./utils"
 
 const useSortingOptions = (products: SimpleProductType[]) => {
   const [options, setOptions] = useState<FilteringOptionProps[]>([])
-  const [sortedProducts, setSortedProducts] = useState<SimpleProductType[]>(
-    products
-  )
+  const [sortedProducts, setSortedProducts] =
+    useState<SimpleProductType[]>(products)
 
   const sortByTitle = (a: SimpleProductType, b: SimpleProductType) => {
     if (a.title < b.title) {

packages/admin-ui/ui/src/components/templates/collection-product-table/use-view-product-columns.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Link } from "react-router-dom"
 import { Column } from "react-table"
 import Table from "../../molecules/table"
@@ -11,7 +11,7 @@ const useViewProductColumns = () => {
         id: "selection",
         Cell: ({ row }) => {
           return (
-            <Table.Cell className="w-[0%] pl-base pr-large">
+            <Table.Cell className="pl-base pr-large w-[0%]">
               <div>{row.index + 1}</div>
             </Table.Cell>
           )
@@ -20,8 +20,8 @@ const useViewProductColumns = () => {
       {
         accessor: "thumbnail",
         Cell: ({ cell: { value } }) => (
-          <Table.Cell className="w-[0%] pr-base">
-            <div className="h-[40px] w-[30px] bg-grey-5 rounded-soft overflow-hidden my-xsmall">
+          <Table.Cell className="pr-base w-[0%]">
+            <div className="bg-grey-5 rounded-soft my-xsmall h-[40px] w-[30px] overflow-hidden">
               {value ? (
                 <img
                   src={value}

packages/admin-ui/ui/src/components/templates/collection-product-table/utils.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import StatusIndicator from "../../fundamentals/status-indicator"
 
 export type SimpleProductType = {

packages/admin-ui/ui/src/components/templates/collection-product-table/view-products-table.tsx

@@ -89,7 +89,7 @@ const ViewProductsTable: React.FC<ViewProductsTableProps> = ({
           id: "actions",
           Cell: ({ row }) => {
             return (
-              <Table.Cell className="w-[0%] pr-2xsmall">
+              <Table.Cell className="pr-2xsmall w-[0%]">
                 <Button
                   variant="ghost"
                   size="small"

packages/admin-ui/ui/src/components/templates/collections-table/use-collection-actions.tsx

@@ -1,5 +1,4 @@
 import { useAdminDeleteCollection } from "medusa-react"
-import * as React from "react"
 import { useNavigate } from "react-router-dom"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import EditIcon from "../../fundamentals/icons/edit-icon"

packages/admin-ui/ui/src/components/templates/collections-table/use-collection-column.tsx

@@ -1,5 +1,5 @@
 import moment from "moment"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import Tooltip from "../../atoms/tooltip"
 
 const useCollectionTableColumn = () => {

packages/admin-ui/ui/src/components/templates/customer-group-table/config.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { Customer, CustomerGroup } from "@medusajs/medusa"
 import { Column } from "react-table"
 
@@ -69,36 +68,38 @@ export const CUSTOMER_GROUPS_CUSTOMERS_TABLE_COLUMNS: Column<Customer>[] = [
   },
 ]
 
-export const CUSTOMER_GROUPS_CUSTOMERS_LIST_TABLE_COLUMNS: Column<
-  Customer
->[] = [
-  {
-    Header: () => (
-      <div className="flex items-center gap-1">
-        Name <SortingIcon size={16} />
-      </div>
-    ),
-    id: "avatar",
-    Cell: ({ row }) => (
-      <CustomerAvatarItem customer={row.original} color={getColor(row.index)} />
-    ),
-  },
-  {
-    Header: () => (
-      <div className="flex items-center gap-1">
-        Email <SortingIcon size={16} />
-      </div>
-    ),
-    accessor: "email",
-  },
-  {
-    accessor: "groups",
-    disableSortBy: true,
-    Header: "Groups",
-    Cell: ({ cell: { value } }) => <CustomersGroupsSummary groups={value} />,
-  },
-  {
-    Header: "",
-    id: "settings-col",
-  },
-]
+export const CUSTOMER_GROUPS_CUSTOMERS_LIST_TABLE_COLUMNS: Column<Customer>[] =
+  [
+    {
+      Header: () => (
+        <div className="flex items-center gap-1">
+          Name <SortingIcon size={16} />
+        </div>
+      ),
+      id: "avatar",
+      Cell: ({ row }) => (
+        <CustomerAvatarItem
+          customer={row.original}
+          color={getColor(row.index)}
+        />
+      ),
+    },
+    {
+      Header: () => (
+        <div className="flex items-center gap-1">
+          Email <SortingIcon size={16} />
+        </div>
+      ),
+      accessor: "email",
+    },
+    {
+      accessor: "groups",
+      disableSortBy: true,
+      Header: "Groups",
+      Cell: ({ cell: { value } }) => <CustomersGroupsSummary groups={value} />,
+    },
+    {
+      Header: "",
+      id: "settings-col",
+    },
+  ]

packages/admin-ui/ui/src/components/templates/customer-group-table/customer-groups-table.tsx

@@ -1,6 +1,6 @@
 import { CustomerGroup } from "@medusajs/medusa"
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   HeaderGroup,
@@ -36,7 +36,7 @@ const defaultQueryProps = {
  */
 function CustomerGroupsPlaceholder() {
   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 customer groups yet</span>
     </div>
   )
@@ -137,14 +137,8 @@ type CustomerGroupsTableProps = ReturnType<typeof useQueryFilters> & {
  * Root component of the customer groups table.
  */
 function CustomerGroupsTable(props: CustomerGroupsTableProps) {
-  const {
-    customerGroups,
-    queryObject,
-    count,
-    paginate,
-    setQuery,
-    isLoading,
-  } = props
+  const { customerGroups, queryObject, count, paginate, setQuery, isLoading } =
+    props
 
   const tableConfig: TableOptions<CustomerGroup> = {
     columns: CUSTOMER_GROUPS_TABLE_COLUMNS,

packages/admin-ui/ui/src/components/templates/customer-group-table/edit-customers-table.tsx

@@ -1,6 +1,6 @@
 import { Customer } from "@medusajs/medusa"
 import { useAdminCustomerGroups, useAdminCustomers } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import {
   HeaderGroup,
   Row,
@@ -74,26 +74,21 @@ type EditCustomersTableProps = {
  * Container for the "edit customers" table.
  */
 function EditCustomersTable(props: EditCustomersTableProps) {
-  const {
-    setSelectedCustomerIds,
-    selectedCustomerIds,
-    handleSubmit,
-    onClose,
-  } = props
+  const { setSelectedCustomerIds, selectedCustomerIds, handleSubmit, onClose } =
+    props
 
-  const {
-    paginate,
-    setQuery,
-    setFilters,
-    filters,
-    queryObject,
-  } = useQueryFilters(defaultQueryProps)
+  const { paginate, setQuery, setFilters, filters, queryObject } =
+    useQueryFilters(defaultQueryProps)
 
   const [numPages, setNumPages] = useState(0)
   const [activeGroupId, setActiveGroupId] = useState()
 
   const { customer_groups } = useAdminCustomerGroups({ expand: "customers" })
-  const { customers = [], count = 0, isLoading } = useAdminCustomers({
+  const {
+    customers = [],
+    count = 0,
+    isLoading,
+  } = useAdminCustomers({
     ...queryObject,
     groups: activeGroupId ? [activeGroupId] : null,
   })
@@ -226,7 +221,7 @@ function EditCustomersTable(props: EditCustomersTableProps) {
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex items-center justify-end gap-x-xsmall w-full">
+          <div className="gap-x-xsmall flex w-full items-center justify-end">
             <Button
               variant="ghost"
               size="small"

packages/admin-ui/ui/src/components/templates/customer-orders-table/use-customer-orders-columns.tsx

@@ -73,12 +73,12 @@ export const useCustomerOrdersColumns = (): Column<Order>[] => {
           }
 
           return (
-            <div className="flex gap-x-2xsmall">
-              <div ref={containerRef} className="flex gap-x-xsmall">
+            <div className="gap-x-2xsmall flex">
+              <div ref={containerRef} className="gap-x-xsmall flex">
                 {visibleItems.map((item) => {
                   return (
                     <Tooltip content={item.title} key={item.id}>
-                      <div className="h-[35px] w-[25px] flex items-center justify-center rounded-rounded overflow-hidden">
+                      <div className="rounded-rounded flex h-[35px] w-[25px] items-center justify-center overflow-hidden">
                         {item.thumbnail ? (
                           <img
                             className="object-cover"

packages/admin-ui/ui/src/components/templates/customer-table/use-customer-columns.tsx

@@ -1,5 +1,5 @@
 import moment from "moment"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { getColor } from "../../../utils/color"
 import CustomerAvatarItem from "../../molecules/customer-avatar-item"
 

packages/admin-ui/ui/src/components/templates/customer-table/use-customer-filters.tsx

@@ -63,10 +63,10 @@ export const useCustomerFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const [state, dispatch] = useReducer(reducer, initial)
 

packages/admin-ui/ui/src/components/templates/discount-filter-dropdown/index.tsx

@@ -84,10 +84,10 @@ const DiscountFilters = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -95,7 +95,7 @@ const DiscountFilters = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <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/components/templates/discount-table/use-promotion-columns.tsx

@@ -1,5 +1,5 @@
 import { end, parse } from "iso8601-duration"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { formatAmountWithSymbol } from "../../../utils/prices"
 import Badge from "../../fundamentals/badge"
 import StatusDot from "../../fundamentals/status-indicator"
@@ -20,10 +20,10 @@ const getPromotionStatus = (promotion) => {
       (promotion.ends_at && new Date(promotion.ends_at) < date) ||
       (promotion.valid_duration &&
         date >
-        end(
-          parse(promotion.valid_duration),
-          new Date(promotion.starts_at)
-        )) ||
+          end(
+            parse(promotion.valid_duration),
+            new Date(promotion.starts_at)
+          )) ||
       promotion.usage_count === promotion.usage_limit
     ) {
       return PromotionStatus.EXPIRED
@@ -111,7 +111,7 @@ export const usePromotionTableColumns = () => {
         Header: <div className="w-[60px]" />,
         id: "currency",
         Cell: ({ row: { original } }) => (
-          <div className="px-2 text-grey-40">{getCurrencySymbol(original)}</div>
+          <div className="text-grey-40 px-2">{getCurrencySymbol(original)}</div>
         ),
       },
       {

packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-filters.tsx

@@ -118,10 +118,10 @@ export const usePromotionFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("promotions::filters")

packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-row-actions.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { useAdminDeleteDiscount, useAdminUpdateDiscount } from "medusa-react"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"
@@ -55,7 +54,8 @@ const usePromotionActions = (promotion) => {
               onSuccess: () => {
                 notification(
                   "Success",
-                  `Successfully ${promotion.is_disabled ? "published" : "unpublished"
+                  `Successfully ${
+                    promotion.is_disabled ? "published" : "unpublished"
                   } discount`,
                   "success"
                 )

packages/admin-ui/ui/src/components/templates/draft-order-table/index.tsx

@@ -1,5 +1,5 @@
 import { useAdminDraftOrders } from "medusa-react"
-import React, { Fragment, useEffect, useState } from "react"
+import { Fragment, useEffect, useState } from "react"
 import { useLocation } from "react-router-dom"
 import { usePagination, useTable } from "react-table"
 import Table from "../../molecules/table"

packages/admin-ui/ui/src/components/templates/draft-order-table/use-draft-order-column.tsx

@@ -1,5 +1,5 @@
 import moment from "moment"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { getColor } from "../../../utils/color"
 import StatusDot from "../../fundamentals/status-indicator"
 import CustomerAvatarItem from "../../molecules/customer-avatar-item"

packages/admin-ui/ui/src/components/templates/gift-card-filter-dropdown/index.tsx

@@ -110,10 +110,10 @@ const OrderFilters = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -121,7 +121,7 @@ const OrderFilters = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <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/components/templates/gift-card-table/index.tsx

@@ -162,7 +162,7 @@ const GiftCardTable = () => {
           <Table.Body {...getTableBodyProps()}>
             <Table.Row>
               <Table.Cell colSpan={columns.length}>
-                <div className="flex w-full h-full absolute items-center justify-center mt-10">
+                <div className="absolute mt-10 flex h-full w-full items-center justify-center">
                   <div className="">
                     <Spinner size={"large"} variant={"secondary"} />
                   </div>

packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-column.tsx

@@ -80,14 +80,14 @@ const useGiftCardTableColums = () => {
       },
       {
         Header: () => (
-          <div className="pr-2 flex rounded-rounded w-full justify-end">
+          <div className="rounded-rounded flex w-full justify-end pr-2">
             Created
           </div>
         ),
         accessor: "created_at",
         Cell: ({ cell: { value }, index }) => (
           <Table.Cell className="pr-2" key={index}>
-            <div className="flex rounded-rounded w-full justify-end">
+            <div className="rounded-rounded flex w-full justify-end">
               {moment(value).format("MMM Do YYYY")}
             </div>
           </Table.Cell>

packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-filters.ts

@@ -148,10 +148,10 @@ export const useGiftCardFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("GiftCards::filters")

packages/admin-ui/ui/src/components/templates/image-table/index.tsx

@@ -97,7 +97,7 @@ const ImageTable = ({ data, form, onDelete }: ImageTableProps) => {
               onClick={() => onDelete(row.index)}
               variant="ghost"
               size="small"
-              className="p-1 mx-6 cursor-pointer text-grey-40"
+              className="text-grey-40 mx-6 cursor-pointer p-1"
               type="button"
             >
               <TrashIcon size={20} />

packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx

@@ -413,7 +413,7 @@ const AdjustAvailabilityModal = ({
                     {variant?.product?.thumbnail ? (
                       <img
                         src={variant?.product?.thumbnail}
-                        className="object-cover h-full rounded-rounded"
+                        className="rounded-rounded h-full object-cover"
                       />
                     ) : (
                       <ImagePlaceholder />
@@ -422,7 +422,7 @@ const AdjustAvailabilityModal = ({
                   <div className="flex flex-col">
                     <span className="truncate">
                       {variant?.product?.title}
-                      <span className="truncate text-grey-50">
+                      <span className="text-grey-50 truncate">
                         ({inventory.sku})
                       </span>
                     </span>
@@ -445,7 +445,7 @@ const AdjustAvailabilityModal = ({
         </Modal.Content>
       </Modal.Body>
       <Modal.Footer>
-        <div className="flex justify-end w-full gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             size="small"
             variant="ghost"

packages/admin-ui/ui/src/components/templates/inventory-table/use-inventory-column.tsx

@@ -15,7 +15,7 @@ const useInventoryTableColumn = () => {
                 {original.variants[0]?.product?.thumbnail ? (
                   <img
                     src={original.variants[0].product.thumbnail}
-                    className="object-cover h-full rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />

packages/admin-ui/ui/src/components/templates/login-layout.tsx

@@ -1,9 +1,7 @@
-import React from "react"
-
 const LoginLayout = ({ children }) => {
   return (
-    <div className="min-h-screen flex flex-col">
-      <div className="grid grid-cols-1 grid-rows-1 min-h-screen">
+    <div className="flex min-h-screen flex-col">
+      <div className="grid min-h-screen grid-cols-1 grid-rows-1">
         <div
           className="flex flex-col items-center"
           style={{

packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx

@@ -138,10 +138,10 @@ const OrderFilters = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -149,7 +149,7 @@ const OrderFilters = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <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/components/templates/order-table/use-order-column.tsx

@@ -95,7 +95,7 @@ const useOrderTableColums = () => {
         Header: "",
         accessor: "currency_code",
         Cell: ({ cell: { value } }) => (
-          <div className="text-right text-grey-40">{value.toUpperCase()}</div>
+          <div className="text-grey-40 text-right">{value.toUpperCase()}</div>
         ),
       },
       {
@@ -103,7 +103,7 @@ const useOrderTableColums = () => {
         accessor: "country_code",
         Cell: ({ row }) => (
           <div className="pr-2">
-            <div className="flex rounded-rounded w-full justify-end">
+            <div className="rounded-rounded flex w-full justify-end">
               <Tooltip
                 content={
                   isoAlpha2Countries[

packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts

@@ -155,10 +155,10 @@ export const useOrderFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("orders::filters")

packages/admin-ui/ui/src/components/templates/price-list-table/price-list-filters.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
 import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
 import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
@@ -78,10 +78,10 @@ const PriceListsFilter = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -89,7 +89,7 @@ const PriceListsFilter = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <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/components/templates/price-list-table/price-list-table.tsx

@@ -1,6 +1,5 @@
 import { PriceList } from "@medusajs/medusa"
-import { debounce } from "lodash"
-import React, { useCallback, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import {
   Column,
   HeaderGroup,

packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-actions.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useAdminDeletePriceList, useAdminUpdatePriceList } from "medusa-react"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"

packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-columns.tsx

@@ -1,6 +1,6 @@
 import { PriceList } from "@medusajs/medusa"
 import { isArray } from "lodash"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column } from "react-table"
 import Actionables from "../../molecules/actionables"
 import Table from "../../molecules/table"
@@ -54,7 +54,7 @@ export const usePriceListTableColumns = () => {
           return (
             <Table.Cell
               onClick={(e) => e.stopPropagation()}
-              className="w-full flex justify-end"
+              className="flex w-full justify-end"
             >
               <div className="justify-end">
                 <Actionables forceDropdown actions={getActions()} />

packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-filters.tsx

@@ -105,10 +105,10 @@ export const usePriceListFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("priceLists::filters")

packages/admin-ui/ui/src/components/templates/price-list-table/utils.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import StatusDot from "../../fundamentals/status-indicator"
 
 const isFuture = (date?: string) => {

packages/admin-ui/ui/src/components/templates/price-overrides/index.tsx

@@ -88,7 +88,7 @@ const PriceOverrides = ({
           <RadioGroup.Root
             value={mode}
             onValueChange={(value) => setMode(value)}
-            className="pt-2 flex items-center"
+            className="flex items-center pt-2"
           >
             <RadioGroup.SimpleItem
               value={MODES.SELECTED_ONLY}
@@ -101,11 +101,11 @@ const PriceOverrides = ({
           </RadioGroup.Root>
         )}
         {mode === MODES.SELECTED_ONLY && !isEdit && (
-          <div className="pt-6 flex flex-col gap-2">
+          <div className="flex flex-col gap-2 pt-6">
             {variants.map((variant, idx) => (
               <div
                 id={variant.id}
-                className="py-2.5 px-3 border border-grey-20 rounded-rounded"
+                className="border-grey-20 rounded-rounded border py-2.5 px-3"
               >
                 <ControlledCheckbox
                   control={control}
@@ -147,10 +147,10 @@ const PriceOverrides = ({
         </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 rounded-rounded"
+            className="text-small rounded-rounded mr-2 w-32 justify-center"
             size="large"
             onClick={onClose}
           >
@@ -158,7 +158,7 @@ const PriceOverrides = ({
           </Button>
           <Button
             size="large"
-            className="text-small justify-center rounded-rounded"
+            className="text-small rounded-rounded justify-center"
             variant="primary"
             onClick={onClick}
             loading={isSubmitting}
@@ -198,7 +198,7 @@ const ControlledCheckbox = ({
       render={({ field }) => {
         return (
           <Checkbox
-            className="shrink-0 inter-small-regular"
+            className="inter-small-regular shrink-0"
             {...props}
             {...field}
             checked={variants?.some((variant) => variant === value)}

packages/admin-ui/ui/src/components/templates/price-overrides/price-amount.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import useToggleState from "../../../hooks/use-toggle-state"
 import { currencies } from "../../../utils/currencies"
 import Button from "../../fundamentals/button"
@@ -11,7 +10,7 @@ const PriceAmount = ({ value, onChange }) => {
 
   const currencyName = currencies[value.currency_code?.toUpperCase()]?.name
   return (
-    <div className="flex flex-col gap-3 py-3 first:border-t border-grey-20 border-solid border-b last:border-b-0">
+    <div className="border-grey-20 flex flex-col gap-3 border-b border-solid py-3 first:border-t last:border-b-0">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="inter-base-semibold">

packages/admin-ui/ui/src/components/templates/product-table/overview.tsx

@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import clsx from "clsx"
-import * as React from "react"
 import { Link } from "react-router-dom"
 import { getProductStatusVariant } from "../../../utils/product-status-variant"
 import Button from "../../fundamentals/button"
@@ -23,19 +22,19 @@ const ProductOverview = ({
 }: ProductOverviewProps) => {
   return (
     <>
-      <div className="flex justify-end border-t border-b border-grey-20 py-2.5 pr-xlarge">
+      <div className="border-grey-20 pr-xlarge flex justify-end border-t border-b py-2.5">
         <div className="inter-small-semibold text-grey-50 flex justify-self-end">
           <span
             onClick={toggleListView}
             className={clsx(
-              "hover:bg-grey-5 cursor-pointer rounded p-0.5 text-grey-40"
+              "hover:bg-grey-5 text-grey-40 cursor-pointer rounded p-0.5"
             )}
           >
             <ListIcon size={20} />
           </span>
           <span
             className={clsx(
-              "hover:bg-grey-5 cursor-pointer rounded p-0.5 text-grey-90"
+              "hover:bg-grey-5 text-grey-90 cursor-pointer rounded p-0.5"
             )}
           >
             <TileIcon size={20} />
@@ -55,10 +54,10 @@ const ProductTile = ({ product }) => {
   const { getActions } = useProductActions(product)
 
   return (
-    <div className="p-base group rounded-rounded hover:bg-grey-5 flex-col">
+    <div className="p-base rounded-rounded hover:bg-grey-5 group flex-col">
       <div className="relative">
         <div
-          className={clsx("rounded-base inline-block absolute top-2 right-2")}
+          className={clsx("rounded-base absolute top-2 right-2 inline-block")}
         >
           <Actionables
             actions={getActions()}
@@ -66,7 +65,7 @@ const ProductTile = ({ product }) => {
               <Button
                 variant="ghost"
                 size="small"
-                className="w-xlarge h-xlarge hidden-actions group-hover:opacity-100 focus-within:opacity-100 opacity-0 bg-grey-0"
+                className="w-xlarge h-xlarge hidden-actions bg-grey-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100"
               >
                 <MoreHorizontalIcon size={20} />
               </Button>
@@ -76,11 +75,11 @@ const ProductTile = ({ product }) => {
         <Link to={`${product.id}`}>
           {product.thumbnail ? (
             <img
-              className="min-h-[230px] block object-cover rounded-rounded"
+              className="rounded-rounded block min-h-[230px] object-cover"
               src={product.thumbnail}
             />
           ) : (
-            <div className="min-h-[230px] flex items-center justify-center bg-grey-5 rounded-rounded">
+            <div className="bg-grey-5 rounded-rounded flex min-h-[230px] items-center justify-center">
               <ImagePlaceholder />
             </div>
           )}

packages/admin-ui/ui/src/components/templates/product-table/use-filter-tabs.tsx

@@ -100,10 +100,10 @@ export const useProductFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("products::filters")

packages/admin-ui/ui/src/components/templates/product-table/use-product-actions.tsx

@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import { useAdminDeleteProduct, useAdminUpdateProduct } from "medusa-react"
-import * as React from "react"
 import { useNavigate } from "react-router-dom"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"
@@ -50,7 +49,8 @@ const useProductActions = (product: Product) => {
             onSuccess: () => {
               notification(
                 "Success",
-                `Successfully ${product.status === "published" ? "unpublished" : "published"
+                `Successfully ${
+                  product.status === "published" ? "unpublished" : "published"
                 } product`,
                 "success"
               )

packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx

@@ -46,7 +46,7 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
                 {original.thumbnail ? (
                   <img
                     src={original.thumbnail}
-                    className="object-cover h-full rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />

packages/admin-ui/ui/src/components/templates/product-table/use-product-filters.ts

@@ -154,10 +154,10 @@ export const useProductFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("products::filters")

packages/admin-ui/ui/src/components/templates/search-modal/index.tsx

@@ -74,17 +74,17 @@ const SearchModal = ({ handleClose }) => {
       <RadixDialog.Portal>
         <RadixDialog.Overlay
           className={clsx(
-            "fixed pt-[140px] pb-[100px] z-50 inset-0 backdrop-blur-sm",
+            "fixed inset-0 z-50 pt-[140px] pb-[100px] backdrop-blur-sm",
             { flex: totalLength > 0 }
           )}
         >
           <RadixDialog.Content
             className={clsx(
-              "max-w-[640px] flex-1 flex mx-auto bg-grey-0 rounded-rounded shadow-searchModal"
+              "bg-grey-0 rounded-rounded shadow-searchModal mx-auto flex max-w-[640px] flex-1"
             )}
           >
-            <div className="py-large flex-1 flex flex-col">
-              <div className="flex items-center gap-x-4 pb-large border-solid px-xlarge border-b border-grey-20">
+            <div className="py-large flex flex-1 flex-col">
+              <div className="pb-large px-xlarge border-grey-20 flex items-center gap-x-4 border-b border-solid">
                 <SearchIcon className="text-grey-40" />
                 <Input
                   className="flex-1"
@@ -98,17 +98,17 @@ const SearchModal = ({ handleClose }) => {
                   onClick={handleClear}
                   content="Clear search"
                 >
-                  <CrossIcon className="flex text-grey-50" />
+                  <CrossIcon className="text-grey-50 flex" />
                 </Tooltip>
               </div>
-              <KeyboardShortcuts className="mt-xlarge px-xlarge flex items-center gap-x-3 text-grey-40 inter-small-regular" />
+              <KeyboardShortcuts className="mt-xlarge px-xlarge text-grey-40 inter-small-regular flex items-center gap-x-3" />
               {totalLength > 0 ? (
                 <ul
                   {...getULProps()}
-                  className="flex-1 overflow-y-auto mt-large px-xlarge"
+                  className="mt-large px-xlarge flex-1 overflow-y-auto"
                 >
                   {isFetching ? (
-                    <div className="w-full pt-2xlarge flex items-center justify-center">
+                    <div className="pt-2xlarge flex w-full items-center justify-center">
                       <Spinner size={"large"} variant={"secondary"} />
                     </div>
                   ) : (

packages/admin-ui/ui/src/components/templates/search-modal/keyboard-shortcuts.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
 import ArrowUpIcon from "../../fundamentals/icons/arrow-up-icon"
 import DownLeftIcon from "../../fundamentals/icons/down-left"
@@ -7,26 +6,26 @@ import PointerIcon from "../../fundamentals/icons/pointer-icon"
 const KeyboardShortcuts = ({ ...props }) => {
   return (
     <p {...props}>
-      <span className="rounded p-1 bg-grey-10">
+      <span className="bg-grey-10 rounded p-1">
         <PointerIcon color="#9CA3AF" size="16px" />
       </span>
       or
-      <span className="rounded p-1 bg-grey-10">
+      <span className="bg-grey-10 rounded p-1">
         <ArrowUpIcon color="#9CA3AF" size="16px" />
       </span>
-      <span className="rounded -ml-1 p-1 bg-grey-10">
+      <span className="bg-grey-10 -ml-1 rounded p-1">
         <ArrowDownIcon color="#9CA3AF" size="16px" />
       </span>
       to navigate,
-      <span className="rounded p-1 bg-grey-10">
+      <span className="bg-grey-10 rounded p-1">
         <DownLeftIcon color="#9CA3AF" size="16px" />
       </span>
       to select, and
-      <span className="rounded px-1.5 py-0.5 bg-grey-10 font-semibold leading-small font-small">
+      <span className="bg-grey-10 leading-small font-small rounded px-1.5 py-0.5 font-semibold">
         <OSCommandIcon />
       </span>
       <span className="-mx-2">+</span>
-      <span className="rounded px-1.5 py-0.5 bg-grey-10 font-semibold leading-small font-small">
+      <span className="bg-grey-10 leading-small font-small rounded px-1.5 py-0.5 font-semibold">
         K
       </span>
       to search anytime

packages/admin-ui/ui/src/components/templates/search-modal/results/customer-results.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminCustomers } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -29,16 +28,16 @@ const CustomerResults = ({
                 index: offset + index,
               })}
               className={clsx(
-                "px-base group py-1.5 focus:bg-grey-5 rounded-rounded",
+                "px-base focus:bg-grey-5 rounded-rounded group py-1.5",
                 { "bg-grey-5": selected === offset + index }
               )}
             >
               <Link
                 to={`/a/customers/${customer.id}`}
-                className="py-1.5 flex items-center rounded-rounded justify-between"
+                className="rounded-rounded flex items-center justify-between py-1.5"
               >
                 <div className="flex items-center gap-x-3">
-                  <div className="w-[20px] h-[20px] shrink-0">
+                  <div className="h-[20px] w-[20px] shrink-0">
                     <Avatar user={customer} />
                   </div>
                   <p className="inter-small-regular text-grey-90">
@@ -49,7 +48,7 @@ const CustomerResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }

packages/admin-ui/ui/src/components/templates/search-modal/results/discount-results.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminDiscounts } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -26,16 +25,16 @@ const DiscountResults = ({
             <li
               {...getLIProps({ index: offset + index })}
               className={clsx(
-                "px-base py-1.5 group focus:bg-grey-5 rounded-rounded",
+                "px-base focus:bg-grey-5 rounded-rounded group py-1.5",
                 { "bg-grey-5": selected === offset + index }
               )}
             >
               <Link
                 to={`/a/discounts/${discount.id}`}
-                className="py-1.5 flex items-center rounded-rounded justify-between"
+                className="rounded-rounded flex items-center justify-between py-1.5"
               >
                 <div className="flex items-center gap-x-3">
-                  <div className="py-0.5 px-2 bg-grey-10 rounded-rounded">
+                  <div className="bg-grey-10 rounded-rounded py-0.5 px-2">
                     <span className="inter-small-regular">{discount.code}</span>
                   </div>
                   <p className="inter-small-regular text-grey-90">
@@ -44,7 +43,7 @@ const DiscountResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }

packages/admin-ui/ui/src/components/templates/search-modal/results/order-results.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminOrders } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -25,13 +24,13 @@ const OrderResults = ({
           {orders?.map((order, index) => (
             <li
               {...getLIProps({ index: offset + index })}
-              className={clsx("py-1.5 group focus:bg-grey-5 rounded-rounded", {
+              className={clsx("focus:bg-grey-5 rounded-rounded group py-1.5", {
                 "bg-grey-5": selected === offset + index,
               })}
             >
               <Link
                 to={`/a/orders/${order.id}`}
-                className="px-base py-1.5 flex items-center rounded-rounded justify-between"
+                className="px-base rounded-rounded flex items-center justify-between py-1.5"
               >
                 <div className="flex items-center gap-x-3">
                   <span className="inter-small-semibold">
@@ -43,7 +42,7 @@ const OrderResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }

packages/admin-ui/ui/src/components/templates/search-modal/results/product-results.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminProducts } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -28,7 +27,7 @@ const ProductResults = ({
                 index: offset + index,
               })}
               className={clsx(
-                "px-base py-1.5 group focus:bg-grey-5 rounded-rounded",
+                "px-base focus:bg-grey-5 rounded-rounded group py-1.5",
                 {
                   "bg-grey-5": selected === offset + index,
                 }
@@ -41,7 +40,7 @@ const ProductResults = ({
                 <div className="flex items-center gap-x-3">
                   <img
                     src={product.thumbnail}
-                    className="h-[32px] w-[24px] object-cover rounded"
+                    className="h-[32px] w-[24px] rounded object-cover"
                   />
                   <p className="inter-small-regular text-grey-90">
                     {product.title}
@@ -49,7 +48,7 @@ const ProductResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }

packages/admin-ui/ui/src/components/templates/search-modal/section-collapsible.tsx

@@ -8,7 +8,7 @@ const SectionCollapsible = ({ title, length, children, ...props }) => {
   return (
     <RadixCollapsible.Root open={open} onOpenChange={setOpen} {...props}>
       <RadixCollapsible.Trigger asChild>
-        <button className="px-base py-small w-full justify-between flex items-center bg-grey-10 rounded-rounded">
+        <button className="px-base py-small bg-grey-10 rounded-rounded flex w-full items-center justify-between">
           <h6 className="inter-base-semibold text-grey-90">
             {title}
             <span className="inter-base-regular text-grey-40"> ({length})</span>

packages/admin-ui/ui/src/components/templates/settings-overview.tsx

@@ -8,7 +8,7 @@ const SettingsOverview: React.FC<React.PropsWithChildren> = ({ children }) => {
         title={"Settings"}
         subtitle={"Manage the settings for your Medusa store"}
       />
-      <div className="grid medium:grid-cols-2 auto-cols-fr grid-cols-1 gap-x-base gap-y-xsmall">
+      <div className="medium:grid-cols-2 gap-x-base gap-y-xsmall grid auto-cols-fr grid-cols-1">
         {children}
       </div>
     </div>

packages/admin-ui/ui/src/components/templates/transfer-orders-modal/index.tsx

@@ -127,10 +127,10 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
           <h2 className="inter-xlarge-semibold">Transfer order</h2>
         </Modal.Header>
         <Modal.Content>
-          <div className="flex flex-col space-y-xlarge">
+          <div className="space-y-xlarge flex flex-col">
             <div className="space-y-xsmall">
               <h3 className="inter-base-semibold">Order</h3>
-              <div className="flex items-center justify-between border-grey-20 border rounded-rounded py-xsmall px-2.5">
+              <div className="border-grey-20 rounded-rounded py-xsmall flex items-center justify-between border px-2.5">
                 <Badge variant="default">
                   <span className="text-grey-60">{`#${order.display_id}`}</span>
                 </Badge>
@@ -145,7 +145,7 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
                 />
               </div>
             </div>
-            <div className="w-full grid grid-cols-2">
+            <div className="grid w-full grid-cols-2">
               <div className="flex flex-col">
                 <span className="inter-base-semibold">Current Owner</span>
                 <span className="inter-base-regular">
@@ -172,7 +172,7 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
                 />
               </div>
             </div>
-            <div className="w-full grid grid-cols-2">
+            <div className="grid w-full grid-cols-2">
               <div className="flex flex-col">
                 <span className="inter-base-semibold">New Owner</span>
                 <span className="inter-base-regular">
@@ -199,11 +199,11 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
         </Modal.Content>
         <Modal.Footer>
           <div className="flex w-full justify-end">
-            <div className="flex gap-x-xsmall">
+            <div className="gap-x-xsmall flex">
               <Button
                 onClick={onDismiss}
                 size="small"
-                className="border border-grey-20"
+                className="border-grey-20 border"
                 variant="ghost"
               >
                 Cancel

packages/admin-ui/ui/src/components/templates/two-split-pane.tsx

@@ -18,8 +18,8 @@ const TwoSplitPane: React.FC<TwoSplitPaneProps> = ({
 
   const heightClass = height
     ? {
-      gridTemplateRows: `${height}px`,
-    }
+        gridTemplateRows: `${height}px`,
+      }
     : undefined
 
   if (childrenCount > 2) {
@@ -28,7 +28,7 @@ const TwoSplitPane: React.FC<TwoSplitPaneProps> = ({
 
   return (
     <div
-      className={clsx("grid gap-xsmall grid-cols-1", className, {
+      className={clsx("gap-xsmall grid grid-cols-1", className, {
         "medium:grid-cols-2": !threeCols,
         "medium:grid-cols-3": threeCols,
       })}
@@ -38,7 +38,7 @@ const TwoSplitPane: React.FC<TwoSplitPaneProps> = ({
       {Children.map(children, (child, i) => {
         return (
           <div
-            className={clsx("w-full h-full", {
+            className={clsx("h-full w-full", {
               "col-span-2": threeCols && i === 1,
             })}
             key={i}

packages/admin-ui/ui/src/components/templates/user-table.tsx

@@ -273,7 +273,7 @@ const UserTable: React.FC<UserTableProps> = ({
   }
 
   return (
-    <div className="w-full h-full overflow-y-auto">
+    <div className="h-full w-full overflow-y-auto">
       <Table
         filteringOptions={filteringOptions}
         enableSearch