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

packages/admin-ui/ui/src/components/atoms/avatar/index.tsx

@@ -34,18 +34,18 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <RadixAvatar.Root
       className={clsx(
-        "w-full h-full items-center justify-center overflow-hidden select-none rounded-circle",
+        "rounded-circle h-full w-full select-none items-center justify-center overflow-hidden",
         color
       )}
     >
       <RadixAvatar.Image
         src={user?.img}
         alt={username}
-        className="object-cover w-full h-full rounded-circle"
+        className="rounded-circle h-full w-full object-cover"
       />
       <RadixAvatar.Fallback
         className={clsx(
-          "w-full h-full flex items-center justify-center bg-inherit text-grey-0 rounded-circle",
+          "text-grey-0 rounded-circle flex h-full w-full items-center justify-center bg-inherit",
           font
         )}
       >

packages/admin-ui/ui/src/components/atoms/back-button/index.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { useNavigate } from "react-router-dom"
 import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
 
@@ -18,7 +17,7 @@ const BackButton = ({ path, label = "Go back", className }: Props) => {
       }}
       className={clsx("px-small py-xsmall", className)}
     >
-      <div className="flex items-center gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold">
+      <div className="gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold flex items-center">
         <ArrowLeftIcon size={20} />
         <span className="ml-1">{label}</span>
       </div>

packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx

@@ -12,13 +12,13 @@ const Checkbox = React.forwardRef(
     useImperativeHandle(ref, () => checkboxRef.current)
     return (
       <label
-        className={clsx("flex items-center cursor-pointer", className)}
+        className={clsx("flex cursor-pointer items-center", className)}
         htmlFor={id}
       >
         <input
           type="checkbox"
           ref={checkboxRef}
-          className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
+          className="form-checkbox rounded-base text-violet-60 mr-small border-grey-30 h-[20px] w-[20px] focus:ring-0"
           value={value}
           id={id}
           {...rest}

packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx

@@ -12,7 +12,7 @@ const CustomHeader = ({
 
   const year = date.getFullYear()
   return (
-    <div className="flex w-full gap-4 items-center">
+    <div className="flex w-full items-center gap-4">
       <div className="flex flex-1 items-center justify-end gap-3">
         <NativeSelect
           defaultValue={monthName}

packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx

@@ -50,13 +50,13 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
       <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
         <PopoverPrimitive.Trigger asChild>
           <button
-            className={clsx("w-full rounded-rounded border ", {
+            className={clsx("rounded-rounded w-full border ", {
               "shadow-input border-violet-60": isOpen,
               "border-grey-20": !isOpen,
             })}
           >
-            <InputContainer className="border-0 shadown-none focus-within:shadow-none">
+            <InputContainer className="shadown-none border-0 focus-within:shadow-none">
-              <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+              <div className="text-grey-50 flex w-full justify-between pr-0.5">
                 <InputHeader
                   {...{
                     label,
@@ -76,15 +76,15 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
         <PopoverPrimitive.Content
           side="top"
           sideOffset={8}
-          className="rounded-rounded px-8  border border-grey-20 bg-grey-0 w-full shadow-dropdown"
+          className="rounded-rounded border-grey-20  bg-grey-0 shadow-dropdown w-full border px-8"
         >
           <CalendarComponent date={tempDate} onChange={setTempDate} />
-          <div className="flex w-full mb-8 mt-5">
+          <div className="mb-8 mt-5 flex w-full">
             <Button
               variant="ghost"
               size="medium"
               onClick={() => setIsOpen(false)}
-              className="mr-2 w-1/3 flex justify-center border border-grey-20"
+              className="border-grey-20 mr-2 flex w-1/3 justify-center border"
             >
               Cancel
             </Button>
@@ -92,7 +92,7 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
               size="medium"
               variant="primary"
               onClick={() => submitDate()}
-              className="w-2/3 flex justify-center"
+              className="flex w-2/3 justify-center"
             >{`Set ${label}`}</Button>
           </div>
         </PopoverPrimitive.Content>

packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx

@@ -49,13 +49,13 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
       <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
         <PopoverPrimitive.Trigger asChild>
           <button
-            className={clsx("w-full rounded-rounded border ", {
+            className={clsx("rounded-rounded w-full border ", {
               "shadow-input border-violet-60": isOpen,
               "border-grey-20": !isOpen,
             })}
           >
-            <InputContainer className="border-0 shadown-none focus-within:shadow-none">
+            <InputContainer className="shadown-none border-0 focus-within:shadow-none">
-              <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+              <div className="text-grey-50 flex w-full justify-between pr-0.5">
                 <InputHeader
                   {...{
                     label,
@@ -66,7 +66,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
                 />
                 <ArrowDownIcon size={16} />
               </div>
-              <div className="w-full items-center flex text-left text-grey-40">
+              <div className="text-grey-40 flex w-full items-center text-left">
                 <ClockIcon size={16} />
                 <span className="mx-1">UTC</span>
                 <span className="text-grey-90">
@@ -79,7 +79,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
         <PopoverPrimitive.Content
           side="top"
           sideOffset={8}
-          className="rounded-rounded scrollbar-hide border px-6 pt-6 pb-4 border-grey-20 bg-grey-0 w-full flex shadow-dropdown"
+          className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown flex w-full border px-6 pt-6 pb-4"
         >
           <NumberScroller
             numbers={hourNumbers}
@@ -92,7 +92,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
             selected={selectedMinute}
             onSelect={(n) => setSelectedMinute(n)}
           />
-          <div className="absolute bottom-4 left-0 right-0 bg-gradient-to-b from-transparent to-grey-0 h-xlarge z-10" />
+          <div className="to-grey-0 h-xlarge absolute bottom-4 left-0 right-0 z-10 bg-gradient-to-b from-transparent" />
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Root>
     </div>

packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx

@@ -37,7 +37,7 @@ const Fade: React.FC<FadeProps> = ({
 
   return (
     <div
-      className={clsx("transition-all duration-100 z-50", classes, classname)}
+      className={clsx("z-50 transition-all duration-100", classes, classname)}
     >
       {show ? children : null}
     </div>

packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx

@@ -77,7 +77,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = ({
       onDrop={handleFileDrop}
       onDragOver={(e) => e.preventDefault()}
       className={clsx(
-        "flex flex-col select-none inter-base-regular text-grey-50 cursor-pointer items-center justify-center w-full h-full rounded-rounded border-2 border-dashed border-grey-20 transition-colors hover:border-violet-60 hover:text-grey-40",
+        "inter-base-regular text-grey-50 rounded-rounded border-grey-20 hover:border-violet-60 hover:text-grey-40 flex h-full w-full cursor-pointer select-none flex-col items-center justify-center border-2 border-dashed transition-colors",
         className
       )}
     >

packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import TaxesIcon from "../../fundamentals/icons/taxes-icon"
 import Tooltip from "../tooltip"
 
@@ -10,7 +9,7 @@ type Props = {
 const IncludesTaxTooltip = ({ includesTax }: Props) => {
   return (
     <Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
-      <div className="w-large h-large rounded-rounded border border-grey-20 flex items-center justify-center">
+      <div className="w-large h-large rounded-rounded border-grey-20 flex items-center justify-center border">
         <TaxesIcon
           size={16}
           className={clsx({

packages/admin-ui/ui/src/components/atoms/input-error/index.tsx

@@ -1,6 +1,5 @@
 import { ErrorMessage } from "@hookform/error-message"
 import clsx from "clsx"
-import React from "react"
 import { MultipleFieldErrors } from "react-hook-form"
 import Tooltip from "../tooltip"
 
@@ -22,7 +21,7 @@ const InputError = ({ errors, name, className }: InputErrorProps) => {
       render={({ message, messages }) => {
         return (
           <div
-            className={clsx("text-rose-50 inter-small-regular mt-2", className)}
+            className={clsx("inter-small-regular mt-2 text-rose-50", className)}
           >
             {messages ? (
               <MultipleMessages messages={messages} />
@@ -43,12 +42,12 @@ const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
   const remainderErrors = errors.slice(1)
 
   return (
-    <div className="flex items-center gap-x-1 cursor-default">
+    <div className="flex cursor-default items-center gap-x-1">
       <p>{displayedError}</p>
       {remainderErrors?.length > 0 && (
         <Tooltip
           content={
-            <div className="text-rose-50 inter-small-regular">
+            <div className="inter-small-regular text-rose-50">
               {remainderErrors.map((e, i) => {
                 return (
                   <p key={i}>

packages/admin-ui/ui/src/components/atoms/notification/index.tsx

@@ -30,7 +30,7 @@ const Notification: React.FC<NotificationProps> = ({
   return (
     <ToasterContainer visible={toast.visible} className="w-[380px]">
       <div>{getIcon(type)}</div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-white">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col text-white">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-20">{message}</span>
       </div>

packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx

@@ -18,7 +18,7 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
     <div
       {...props}
       className={clsx(
-        "flex flex-col time-list h-[305px] overflow-y-auto",
+        "time-list flex h-[305px] flex-col overflow-y-auto",
         className
       )}
     >
@@ -27,14 +27,14 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
           <div
             key={i}
             className={clsx(
-              "w-[40px] h-[40px] last:mb-4 rounded inter-base-regular hover:bg-grey-20",
+              "inter-base-regular hover:bg-grey-20 h-[40px] w-[40px] rounded last:mb-4",
               {
-                "bg-violet-60 hover:bg-violet-50 text-grey-0 inter-base-semibold":
+                "bg-violet-60 text-grey-0 inter-base-semibold hover:bg-violet-50":
                   n === selected,
               }
             )}
           >
-            <button onClick={() => onSelect(n)} className="w-full h-full py-2">
+            <button onClick={() => onSelect(n)} className="h-full w-full py-2">
               {n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
             </button>
           </div>

packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 type OSShortcutProps = {
   winModifiers: string | string[]
   macModifiers: string | string[]
@@ -38,8 +36,8 @@ const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
   }
 
   return (
-    <div className="flex items-center text-grey-40">
+    <div className="text-grey-40 flex items-center">
-      <p className="m-0 inter-base-semibold">
+      <p className="inter-base-semibold m-0">
         <span className="inter-base-semibold">{modifiers} </span>
         {input}
       </p>

packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx

@@ -32,7 +32,7 @@ const ErrorState: React.FC<SavingStateProps> = ({
       <div>
         <XCircleIcon size={20} className="text-rose-40" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>

packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx

@@ -54,21 +54,21 @@ const SaveNotification: React.FC<SaveNotificationProps> = ({
   }
 
   return (
-    <ToasterContainer visible={toast.visible} className="p-0 pl-base w-[448px]">
+    <ToasterContainer visible={toast.visible} className="pl-base w-[448px] p-0">
       <div className="py-base">{getIcon(icon)}</div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow py-base">
+      <div className="ml-small mr-base gap-y-2xsmall py-base flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>
-      <div className="flex flex-col inter-small-semibold border-l border-grey-20 h-full">
+      <div className="inter-small-semibold border-grey-20 flex h-full flex-col border-l">
         <button
           onClick={handleSave}
-          className="inter-small-semibold flex items-center justify-center h-1/2 border-b border-grey-20 px-base text-violet-60"
+          className="inter-small-semibold border-grey-20 px-base text-violet-60 flex h-1/2 items-center justify-center border-b"
         >
           Publish
         </button>
         <button
-          className="inter-small-semibold flex items-center justify-center h-1/2 px-base"
+          className="inter-small-semibold px-base flex h-1/2 items-center justify-center"
           onClick={onDismiss}
         >
           Discard

packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx

@@ -19,7 +19,7 @@ const SavingState: React.FC<SavingStateProps> = ({
       <div>
         <Spinner variant="secondary" size="large" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>

packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx

@@ -32,7 +32,7 @@ const SuccessState: React.FC<SavingStateProps> = ({
       <div>
         <CheckCircleIcon size={20} className="text-emerald-40" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>

packages/admin-ui/ui/src/components/atoms/spinner.tsx

@@ -19,10 +19,10 @@ const Spinner: React.FC<SpinnerProps> = ({
         { "h-[16px] w-[16px]": size === "small" }
       )}
     >
-      <div className="flex items-center justify-center relative w-full h-full">
+      <div className="relative flex h-full w-full items-center justify-center">
         <div
           className={clsx(
-            "animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
+            "animate-ring rounded-circle h-4/5 w-4/5 border-2 border-transparent",
             { "border-t-grey-0": variant === "primary" },
             { "border-t-violet-60": variant === "secondary" }
           )}

packages/admin-ui/ui/src/components/atoms/switch/index.tsx

@@ -1,6 +1,5 @@
 import * as RadixSwitch from "@radix-ui/react-switch"
 import clsx from "clsx"
-import React from "react"
 
 /**
  * A controlled switch component atom.
@@ -11,12 +10,12 @@ function Switch(props: RadixSwitch.SwitchProps) {
       {...props}
       disabled={props.disabled}
       className={clsx(
-        "w-8 h-[18px] rounded-full transition-bg bg-gray-300 radix-state-checked:bg-violet-60"
+        "transition-bg radix-state-checked:bg-violet-60 h-[18px] w-8 rounded-full bg-gray-300"
       )}
     >
       <RadixSwitch.Thumb
         className={clsx(
-          "w-2 h-2 bg-white rounded-full block transition-transform translate-x-[5px] radix-state-checked:translate-x-[19px]"
+          "radix-state-checked:translate-x-[19px] block h-2 w-2 translate-x-[5px] rounded-full bg-white transition-transform"
         )}
       />
     </RadixSwitch.Root>

packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx

@@ -11,17 +11,17 @@ export const Thumbnail = ({ src, className, size = "small" }: Props) => {
   return (
     <div
       className={clsx(
-        "bg-grey-5 flex items-center justify-center overflow-hidden rounded-rounded",
+        "bg-grey-5 rounded-rounded flex items-center justify-center overflow-hidden",
         {
-          "w-[30px] h-10": size === "small",
+          "h-10 w-[30px]": size === "small",
-          "w-9 h-12": size === "medium",
+          "h-12 w-9": size === "medium",
-          "w-[170px] h-[226px]": size === "large",
+          "h-[226px] w-[170px]": size === "large",
         },
         className
       )}
     >
       {src ? (
-        <img src={src} className="object-cover object-center flex-1" />
+        <img src={src} className="flex-1 object-cover object-center" />
       ) : (
         <ImagePlaceholderIcon />
       )}

packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx

@@ -14,7 +14,7 @@ const ToasterContainer: React.FC<ToasterContainerProps> = ({
   return (
     <div
       className={clsx(
-        "flex items-start bg-grey-90 p-base border rounded-rounded shadow-toaster mb-xsmall last:mb-0",
+        "bg-grey-90 p-base rounded-rounded shadow-toaster mb-xsmall flex items-start border last:mb-0",
         {
           "animate-enter": visible,
         },

packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx

@@ -41,8 +41,8 @@ const Tooltip = ({
           align="center"
           className={clsx(
             "inter-small-semibold text-grey-50",
-            "bg-grey-0 py-2 px-3 shadow-dropdown rounded-rounded",
+            "bg-grey-0 shadow-dropdown rounded-rounded py-2 px-3",
-            "border border-solid border-grey-20",
+            "border-grey-20 border border-solid",
             "max-w-[220px]",
             className
           )}

packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx

@@ -60,10 +60,10 @@ const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
     return (
       <button
         className={clsx(
-          "transition-all rounded-lg border flex items-center justify-center",
+          "flex items-center justify-center rounded-lg border transition-all",
           {
-            "bg-rose-50 border-rose-50 px-3 py-1.5": armed,
+            "border-rose-50 bg-rose-50 px-3 py-1.5": armed,
-            "bg-transparent border-gray-20 p-1.5": !armed,
+            "border-gray-20 bg-transparent p-1.5": !armed,
           },
           {
             "!bg-grey-40 !border-grey-40 !p-1.5": deleting,
@@ -75,14 +75,14 @@ const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
         ref={innerRef}
       >
         <div
-          className={clsx("text-rose-50 inter-small-semibold", {
+          className={clsx("inter-small-semibold text-rose-50", {
             hidden: armed || deleting,
           })}
         >
           {children || <TrashIcon className="text-grey-50" size={20} />}
         </div>
         <span
-          className={clsx("text-white inter-small-semibold", {
+          className={clsx("inter-small-semibold text-white", {
             hidden: !armed || deleting,
           })}
         >

packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx

@@ -23,7 +23,7 @@ const IconBadge: React.FC<IconBadgeProps> = ({
     <Badge
       variant={variant ?? "default"}
       className={clsx(
-        "flex items-center justify-center aspect-square w-[40px] h-[40px] border-2 border-white outline outline-1 outline-grey-20",
+        "outline-grey-20 flex aspect-square h-[40px] w-[40px] items-center justify-center border-2 border-white outline outline-1",
         className
       )}
       {...rest}

packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react"
+import { FC } from "react"
 import IconProps from "./types/icon-type"
 
 const DownloadIcon: FC<IconProps> = (props) => {

packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react"
+import { FC } from "react"
 import IconProps from "./types/icon-type"
 
 const FileIcon: FC<IconProps> = (props) => {

packages/admin-ui/ui/src/components/fundamentals/icons/sad-face-icon/index.tsx

@@ -44,7 +44,6 @@ const SadFaceIcon: React.FC<IconProps> = ({
         strokeLinejoin="round"
       />
     </svg>
-
   )
 }
 

packages/admin-ui/ui/src/components/fundamentals/icons/sided-mouth-face/index.tsx

@@ -43,7 +43,6 @@ const SidedMouthFaceIcon: React.FC<IconProps> = ({
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-
     </svg>
   )
 }

packages/admin-ui/ui/src/components/fundamentals/image-placeholder.tsx

@@ -2,7 +2,7 @@ import ImagePlaceholderIcon from "./icons/image-placeholder-icon"
 
 const ImagePlaceholder = () => {
   return (
-    <div className="flex items-center justify-center w-full h-full rounded-soft bg-grey-5">
+    <div className="rounded-soft bg-grey-5 flex h-full w-full items-center justify-center">
       <ImagePlaceholderIcon size={12} />
     </div>
   )

packages/admin-ui/ui/src/components/fundamentals/input-container.tsx

@@ -25,7 +25,7 @@ const InputContainer: React.FC<InputContainerProps> = ({
         }
       }}
       className={clsx([
-        `bg-grey-5 inter-base-regular w-full p-3 flex h-18 flex-col cursor-text border border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-rounded`,
+        `bg-grey-5 inter-base-regular h-18 border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-rounded flex w-full cursor-text flex-col border p-3`,
         className,
       ])}
     >

packages/admin-ui/ui/src/components/fundamentals/input-header.tsx

@@ -20,14 +20,14 @@ const InputHeader: React.FC<InputHeaderProps> = ({
   return (
     <div
       className={clsx(
-        "w-full flex inter-small-semibold text-grey-50 items-center",
+        "inter-small-semibold text-grey-50 flex w-full items-center",
         className
       )}
     >
       <label>{label}</label>
       {required && <div className="text-rose-50 "> *</div>}
       {tooltip || tooltipContent ? (
-        <div className="flex ml-1.5">
+        <div className="ml-1.5 flex">
           {tooltip || <IconTooltip content={tooltipContent} />}
         </div>
       ) : null}

packages/admin-ui/ui/src/components/molecules/actionables.tsx

@@ -32,7 +32,7 @@ const Actionables: React.FC<ActionablesProps> = ({
               <Button
                 variant="ghost"
                 size="small"
-                className="w-xlarge h-xlarge focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none"
+                className="w-xlarge h-xlarge focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none focus-visible:outline-none"
               >
                 <MoreHorizontalIcon size={20} />
               </Button>
@@ -43,7 +43,7 @@ const Actionables: React.FC<ActionablesProps> = ({
 
           <DropdownMenu.Content
             sideOffset={5}
-            className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall min-w-[200px] z-30"
+            className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
           >
             {actions.map((action, i) => {
               return (
@@ -52,9 +52,9 @@ const Actionables: React.FC<ActionablesProps> = ({
                     <Button
                       variant="ghost"
                       size="small"
-                      className={clsx("w-full justify-start flex", {
+                      className={clsx("flex w-full justify-start", {
                         "text-rose-50": action?.variant === "danger",
-                        "opacity-50 select-none pointer-events-none":
+                        "pointer-events-none select-none opacity-50":
                           action?.disabled,
                       })}
                       onClick={action?.onClick}
@@ -97,7 +97,7 @@ const Actionables: React.FC<ActionablesProps> = ({
           onClick={action.onClick}
         >
           {action.icon ? (
-            <div className="flex items-center gap-x-2xsmall">
+            <div className="gap-x-2xsmall flex items-center">
               {action.icon}
               {action.label}
             </div>

packages/admin-ui/ui/src/components/molecules/activity-card/index.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, ReactNode } from "react"
+import React, { ReactNode } from "react"
 import StatusIndicator from "../../fundamentals/status-indicator"
 import Tooltip from "../../atoms/tooltip"
 import clsx from "clsx"
@@ -16,18 +16,12 @@ export type ActivityCardProps = {
 export const ActivityCard: React.FC<ActivityCardProps> = (
   props: ActivityCardProps
 ) => {
-  const {
+  const { key, title, icon, relativeTimeElapsed, shouldShowStatus, children } =
-    key,
+    props
-    title,
-    icon,
-    relativeTimeElapsed,
-    shouldShowStatus,
-    children
-  } = props
 
-  const date = !!props.date && new Date(props.date).toLocaleDateString(
+  const date =
-    "en-us",
+    !!props.date &&
-    {
+    new Date(props.date).toLocaleDateString("en-us", {
       hour12: true,
       day: "2-digit",
       month: "short",
@@ -40,47 +34,33 @@ export const ActivityCard: React.FC<ActivityCardProps> = (
   const getTimeElement = () => {
     return (
       <div className="flex cursor-default">
-        {
+        {!!relativeTimeElapsed && <span>{relativeTimeElapsed}</span>}
-          !!relativeTimeElapsed && (
+        {shouldShowStatus && (
-            <span >{relativeTimeElapsed}</span>
-          )
-        }
-        {
-          shouldShowStatus &&
           <StatusIndicator variant={"primary"} className="ml-2" />
-        }
+        )}
       </div>
     )
   }
 
   return (
-    <div key={key} className="mx-8 border-b last:border-b-0 border-grey-20">
+    <div key={key} className="border-grey-20 mx-8 border-b last:border-b-0">
-      <div className="flex hover:bg-grey-5 -mx-8 px-8 py-6">
+      <div className="hover:bg-grey-5 -mx-8 flex px-8 py-6">
-        <div className="relative w-full h-full">
+        <div className="relative h-full w-full">
-          <div className="flex justify-between inter-small-semibold text-grey-90">
+          <div className="inter-small-semibold text-grey-90 flex justify-between">
             <div className="flex">
-              {
+              {!!icon && icon}
-                !!icon && icon
-              }
               <span>{title}</span>
             </div>
 
-            {
+            {(!!relativeTimeElapsed || shouldShowStatus) &&
-              ((!!relativeTimeElapsed || shouldShowStatus)) && (
+              (formattedDate ? (
-                formattedDate ? (
+                <Tooltip content={formattedDate}>{getTimeElement()}</Tooltip>
-                  <Tooltip content={formattedDate}>
-                    {getTimeElement()}
-                  </Tooltip>
               ) : (
                 getTimeElement()
-                )
+              ))}
-              )
-            }
           </div>
 
-          <div className={clsx(!!icon && "pl-8")}>
+          <div className={clsx(!!icon && "pl-8")}>{children}</div>
-            {children}
-          </div>
         </div>
       </div>
     </div>

packages/admin-ui/ui/src/components/molecules/amount-input/amount-and-currency-input.tsx

@@ -87,10 +87,10 @@ const AmountAndCurrencyInput = ({
   }
 
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex w-full flex-col">
       {label && <InputHeader label={label} className="mb-xsmall" />}
       <div className="focus-within:shadow-focus-border rounded-rounded">
-        <div className="relative bg-grey-5 rounded-rounded h-10 shadow-border focus-within:shadow-cta transition-colors">
+        <div className="bg-grey-5 rounded-rounded shadow-border focus-within:shadow-cta relative h-10 transition-colors">
           <NextSelect
             customStyles={{
               control:
@@ -107,7 +107,7 @@ const AmountAndCurrencyInput = ({
             value={value.currency}
             onChange={onCurrencyChange}
           />
-          <div className="absolute left-[92px] inset-y-0 right-0 flex items-center pl-xsmall pr-base inter-base-regular h-10">
+          <div className="pl-xsmall pr-base inter-base-regular absolute inset-y-0 left-[92px] right-0 flex h-10 items-center">
             <AmountField
               ref={inputRef}
               step={step}
@@ -118,9 +118,9 @@ const AmountAndCurrencyInput = ({
               allowNegativeValue={false}
               placeholder="-"
               decimalScale={decimal_digits}
-              className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
+              className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
             />
-            <div className="flex items-center min-w-[16px] ml-2xsmall">
+            <div className="ml-2xsmall flex min-w-[16px] items-center">
               <p className="text-grey-40 w-full text-right">{symbol_native}</p>
             </div>
           </div>

packages/admin-ui/ui/src/components/molecules/amount-input/amount-input.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import AmountField from "react-currency-input-field"
 import { currencies } from "../../../utils/currencies"
 import InputError from "../../atoms/input-error"
@@ -22,9 +22,8 @@ const AmountInput = ({
   value,
   onChange,
 }: Props) => {
-  const { symbol_native, decimal_digits } = currencies[
+  const { symbol_native, decimal_digits } =
-    currencyCode.toUpperCase()
+    currencies[currencyCode.toUpperCase()]
-  ]
 
   const getFormattedValue = (value: number) => {
     return `${value / 10 ** decimal_digits}`
@@ -57,7 +56,7 @@ const AmountInput = ({
       {label && <InputHeader label={label} className="mb-xsmall" />}
       <div
         className={clsx(
-          "w-full flex items-center bg-grey-5 border border-gray-20 px-base py-xsmall rounded-rounded h-10 focus-within:shadow-input focus-within:border-violet-60 inter-base-regular",
+          "bg-grey-5 border-gray-20 px-base py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 inter-base-regular flex h-10 w-full items-center border",
           {
             "border-rose-50": errors && name && errors[name],
           }
@@ -67,7 +66,7 @@ const AmountInput = ({
           <p>{currencyCode.toUpperCase()}</p>
         </div>
 
-        <div className="flex items-center gap-2xsmall w-full">
+        <div className="gap-2xsmall flex w-full items-center">
           <AmountField
             step={step}
             value={formattedValue}
@@ -77,9 +76,9 @@ const AmountInput = ({
             allowNegativeValue={false}
             placeholder="-"
             decimalScale={decimal_digits}
-            className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
           />
-          <div className="flex items-center min-w-[16px] ml-2xsmall">
+          <div className="ml-2xsmall flex min-w-[16px] items-center">
             <p className="text-grey-40 w-full text-right">{symbol_native}</p>
           </div>
         </div>

packages/admin-ui/ui/src/components/molecules/availability-duration/index.tsx

@@ -37,7 +37,7 @@ const AvailabilityDuration: React.FC<AvailabilityDurationProps> = ({
 
   return (
     <div>
-      <div className="grid grid-cols-3 grid-rows-2 gap-x-xsmall gap-y-base mt-xlarge">
+      <div className="gap-x-xsmall gap-y-base mt-xlarge grid grid-cols-3 grid-rows-2">
         <InputField
           label="Years"
           type="number"

packages/admin-ui/ui/src/components/molecules/banner-card/index.tsx

@@ -19,14 +19,14 @@ const BannerCard: React.FC<BannerCardProps> & {
   Footer: React.FC
 } = ({ title, thumbnail, actions, children }) => {
   return (
-    <div className="rounded-rounded border bg-grey-0 border-grey-20 w-full p-base medium:p-xlarge">
+    <div className="rounded-rounded bg-grey-0 border-grey-20 p-base medium:p-xlarge w-full border">
-      <div className="flex gap-large items-start">
+      <div className="gap-large flex items-start">
         {thumbnail && (
-          <div className="min-w-[72px] min-h-[72px] w-[72px] h-[72px] rounded-base overflow-hidden">
+          <div className="rounded-base h-[72px] min-h-[72px] w-[72px] min-w-[72px] overflow-hidden">
             <img
               src={thumbnail}
               alt="Thumbnail"
-              className="w-full h-full object-cover"
+              className="h-full w-full object-cover"
             />
           </div>
         )}
@@ -48,7 +48,7 @@ const Description: React.FC<BannerCardDescriptionProps> = ({
 }) => {
   return (
     <div>
-      <p className="inter-small-regular text-grey-50 max-w-[460px] line-clamp-2">
+      <p className="inter-small-regular text-grey-50 line-clamp-2 max-w-[460px]">
         {children}
       </p>
       {cta && (

packages/admin-ui/ui/src/components/molecules/batch-job-file-card/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
 
 type Props = {
   fileName: string
@@ -8,31 +8,27 @@ type Props = {
 }
 
 const BatchJobFileCard = ({ fileName, fileSize, icon, onClick }: Props) => {
-  const preparedOnClick = (onClick ?? (() => void 0))
+  const preparedOnClick = onClick ?? (() => void 0)
 
   return (
     <div
-      className="flex items-center w-full cursor-pointer mt-4"
+      className="mt-4 flex w-full cursor-pointer items-center"
       onClick={preparedOnClick}
     >
       <div
-        className="flex items-center justify-center p-2.5 border border-grey-20 rounded-lg"
+        className="border-grey-20 flex items-center justify-center rounded-lg border p-2.5"
         title={fileName}
       >
         {!!icon && icon}
       </div>
 
-      <div className="text-left relative w-full pl-4">
+      <div className="relative w-full pl-4 text-left">
-        <div
+        <div className="inter-small-regular max-w-[80%] overflow-hidden truncate">
-          className="overflow-hidden truncate inter-small-regular max-w-[80%]"
-        >
           {fileName}
         </div>
 
         {!!fileSize && (
-          <div className="text-grey-40 inter-small-regular">
+          <div className="text-grey-40 inter-small-regular">{fileSize}</div>
-            {fileSize}
-          </div>
         )}
       </div>
     </div>

packages/admin-ui/ui/src/components/molecules/breadcrumb/index.tsx

@@ -20,7 +20,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   return (
     <div
       className={clsx(
-        "w-full flex items-center inter-small-semibold text-grey-50 mb-4",
+        "inter-small-semibold text-grey-50 mb-4 flex w-full items-center",
         className
       )}
       {...props}

packages/admin-ui/ui/src/components/molecules/collapsible-tree/index.tsx

@@ -22,9 +22,8 @@ type TCollapsibleTreeContext = {
   toggle: () => void
 }
 
-const CollapsibleTreeContext = React.createContext<TCollapsibleTreeContext | null>(
+const CollapsibleTreeContext =
-  null
+  React.createContext<TCollapsibleTreeContext | null>(null)
-)
 
 export const CollapsibleTree: CollapsibleTreeType = ({ children }) => {
   const [open, setOpen] = React.useState(false)
@@ -66,7 +65,7 @@ const CollapsibleTreeContent: React.FC<CollapsibleTreeContentProps> = ({
   return (
     <div
       className={clsx(
-        "pl-5 mt-xsmall",
+        "mt-xsmall pl-5",
         {
           hidden: !open,
           "animate-fade-in-top": open,
@@ -100,15 +99,15 @@ const CollapsibleTreeParent: React.FC<CollapsibleTreeParentProps> = ({
       <Container className={className}>
         <div className="flex items-center justify-between">
           <div className="gap-x-small flex items-center">{children}</div>
-          <div className="flex items-center gap-x-xsmall">
+          <div className="gap-x-xsmall flex items-center">
             {actions && (
               <Actionables customTrigger={Trigger()} actions={actions} />
             )}
-            <div className="h-5 w-px rounded-circle bg-grey-20" />
+            <div className="rounded-circle bg-grey-20 h-5 w-px" />
             <Button
               variant="ghost"
               size="small"
-              className="p-[6px] text-grey-50"
+              className="text-grey-50 p-[6px]"
               onClick={toggle}
             >
               {open ? <MinusIcon size={20} /> : <PlusIcon size={20} />}
@@ -137,16 +136,16 @@ const CollapsibleTreeLeaf: React.FC<CollapsibleTreeLeafProps> = ({
   return (
     <div
       className={clsx(
-        "col-tree flex items-center relative pb-xsmall last:pb-0",
+        "col-tree pb-xsmall relative flex items-center last:pb-0",
         className
       )}
     >
       <div className="absolute top-0 left-0 bottom-0">
-        <div className="border-l border-dashed border-grey-20 h-1/2 w-px" />
+        <div className="border-grey-20 h-1/2 w-px border-l border-dashed" />
-        <div className="h-1/2 border-l border-dashed border-grey-20 w-px bottom-half-dash" />
+        <div className="border-grey-20 bottom-half-dash h-1/2 w-px border-l border-dashed" />
       </div>
-      <div className="w-[13px] h-px border-t border-grey-20 border-dashed mr-xsmall" />
+      <div className="border-grey-20 mr-xsmall h-px w-[13px] border-t border-dashed" />
-      <Container className="w-full flex items-center justify-between inter-small-regular">
+      <Container className="inter-small-regular flex w-full items-center justify-between">
         {children}
         {actions && (
           <Actionables
@@ -169,7 +168,7 @@ const Container: React.FC<{ className?: string }> = ({
   return (
     <div
       className={clsx(
-        "rounded-rounded border border-grey-20 py-2xsmall px-small",
+        "rounded-rounded border-grey-20 py-2xsmall px-small border",
         className
       )}
     >
@@ -180,7 +179,7 @@ const Container: React.FC<{ className?: string }> = ({
 
 const Trigger = () => {
   return (
-    <Button variant="ghost" size="small" className="p-[6px] text-grey-50">
+    <Button variant="ghost" size="small" className="text-grey-50 p-[6px]">
       <MoreHorizontalIcon size={20} />
     </Button>
   )

packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx

@@ -22,11 +22,11 @@ const CustomerAvatarItem: React.FC<CustomerAvatarItemProps> = ({
       : "-"
 
   return (
-    <div className="flex items-center py-1.5 w-full">
+    <div className="flex w-full items-center py-1.5">
-      <div className="w-[24px] h-[24px]">
+      <div className="h-[24px] w-[24px]">
         <Avatar user={customer} color={color} />
       </div>
-      <span className="pl-2.5 w-40 truncate">{identifier}</span>
+      <span className="w-40 truncate pl-2.5">{identifier}</span>
     </div>
   )
 }

packages/admin-ui/ui/src/components/molecules/emoji-picker/index.tsx

@@ -16,7 +16,7 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
           variant="ghost"
           size="small"
           type="button"
-          className="focus:border-none focus:shadow-none text-grey-40 hover:text-violet-60 p-0 h-5 w-5"
+          className="text-grey-40 hover:text-violet-60 h-5 w-5 p-0 focus:border-none focus:shadow-none"
         >
           <HappyIcon size={20} />
         </Button>
@@ -24,7 +24,7 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
 
       <DropdownMenu.Content
         sideOffset={5}
-        className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown overflow-hidden min-w-[200px] z-30"
+        className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown z-30 min-w-[200px] overflow-hidden border"
       >
         <Picker
           onEmojiClick={(emojiData) => onEmojiClick(emojiData.emoji)}

packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx

@@ -52,13 +52,13 @@ const FilterDropdownContainer = ({
       <RadixPopover.Content
         sideOffset={8}
         style={heightStyle}
-        className="bg-grey-0 overflow-y-auto rounded-rounded shadow-dropdown max-w-[272px] py-4 z-40"
+        className="bg-grey-0 rounded-rounded shadow-dropdown z-40 max-w-[272px] overflow-y-auto py-4"
       >
-        <div className="flex px-4 pb-4 border-b border-grey-20">
+        <div className="border-grey-20 flex border-b px-4 pb-4">
           <Button
             size="small"
             tabIndex={-1}
-            className="mr-2 border border-grey-20"
+            className="border-grey-20 mr-2 border"
             variant="ghost"
             onClick={() => onClear()}
           >
@@ -76,7 +76,7 @@ const FilterDropdownContainer = ({
         </div>
         {React.Children.map(children, (child) => {
           return (
-            <div className="border-b border-grey-20 py-2 px-4 last:pb-0 last:border-0">
+            <div className="border-grey-20 border-b py-2 px-4 last:border-0 last:pb-0">
               {child}
             </div>
           )

packages/admin-ui/ui/src/components/molecules/filter-dropdown/item.tsx

@@ -96,7 +96,7 @@ const FilterDropdownItem = ({
       >
         <RadixCollapsible.Trigger
           className={clsx(
-            "py-1.5 px-3 flex w-full items-center hover:bg-grey-5 rounded justify-between",
+            "hover:bg-grey-5 flex w-full items-center justify-between rounded py-1.5 px-3",
             {
               "inter-small-semibold": open,
               "inter-small-regular": !open,
@@ -105,7 +105,7 @@ const FilterDropdownItem = ({
         >
           <div className="flex items-center">
             <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 ${
                 open && "bg-violet-60"
               }`}
             >
@@ -130,17 +130,17 @@ const FilterDropdownItem = ({
         </RadixCollapsible.Trigger>
         <RadixCollapsible.Content className="w-full">
           {hasPrev && (
-            <div className="py-2 pl-6 flex">
+            <div className="flex py-2 pl-6">
               <button
                 onClick={handlePrev}
-                className="font-semibold hover:text-violet-60 text-grey-90"
+                className="hover:text-violet-60 text-grey-90 font-semibold"
               >
                 Back
               </button>
             </div>
           )}
           {isLoading ? (
-            <div className="py-1 flex justify-center items-center">
+            <div className="flex items-center justify-center py-1">
               <Spinner size={"large"} variant={"secondary"} />
             </div>
           ) : filterTitle === "Date" ? (
@@ -167,7 +167,7 @@ const FilterDropdownItem = ({
               return (
                 <div
                   className={clsx(
-                    "w-full flex hover:bg-grey-20 my-1 py-1.5 pl-6 items-center rounded",
+                    "hover:bg-grey-20 my-1 flex w-full items-center rounded py-1.5 pl-6",
                     {
                       "inter-small-semibold": checked[value],
                       "inter-small-regular": !checked[value],
@@ -177,7 +177,7 @@ const FilterDropdownItem = ({
                   onClick={() => onCheck(value)}
                 >
                   <div
-                    className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border mr-2 rounded-base ${
+                    className={`text-grey-0 border-grey-30 rounded-base mr-2 flex h-5 w-5 justify-center border ${
                       checked[value] === true && "bg-violet-60"
                     }`}
                   >
@@ -201,10 +201,10 @@ const FilterDropdownItem = ({
             })
           )}
           {hasMore && (
-            <div className="py-2 pl-6 flex">
+            <div className="flex py-2 pl-6">
               <button
                 onClick={handleNext}
-                className="font-semibold hover:text-violet-60 text-grey-90"
+                className="hover:text-violet-60 text-grey-90 font-semibold"
               >
                 Show more
               </button>
@@ -417,7 +417,7 @@ const DateFilter = ({
       case DateFilters.InTheLast:
       case DateFilters.OlderThan:
         return (
-          <div className="flex flex-col w-full">
+          <div className="flex w-full flex-col">
             <InputField
               className="pt-0 pb-1"
               type="number"
@@ -429,7 +429,7 @@ const DateFilter = ({
             />
             <RightPopover
               trigger={
-                <div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
+                <div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
                   <label>{daysMonthsValue}</label>
                   <span className="text-grey-50">
                     <ArrowRightIcon size={16} />
@@ -449,10 +449,10 @@ const DateFilter = ({
       case DateFilters.After:
       case DateFilters.Before:
         return (
-          <div className="flex flex-col w-full">
+          <div className="flex w-full flex-col">
             <RightPopover
               trigger={
-                <div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
+                <div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
                   <label>
                     {startDate ? moment(startDate).format("MM.DD.YYYY") : "-"}
                   </label>
@@ -477,7 +477,7 @@ const DateFilter = ({
     <div className="pl-9">
       <RightPopover
         trigger={
-          <div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
+          <div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
             <label>{currentFilter}</label>
             <span className="text-grey-50">
               <ArrowRightIcon size={16} />
@@ -506,7 +506,7 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
             onClick(item)
           }}
           className={clsx(
-            "px-3 py-1.5 my-1 flex items-center rounded hover:bg-grey-5 cursor-pointer",
+            "hover:bg-grey-5 my-1 flex cursor-pointer items-center rounded px-3 py-1.5",
             {
               "inter-small-semibold": item === selectedItem,
               "inter-small-regular": item !== selectedItem,
@@ -515,15 +515,15 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
         >
           <div
             className={clsx(
-              "rounded-full flex items-center justify-center mr-2 w-4 h-4",
+              "mr-2 flex h-4 w-4 items-center justify-center rounded-full",
               {
-                "border-2 border-violet-60": item === selectedItem,
+                "border-violet-60 border-2": item === selectedItem,
-                "border border-grey-30 ": item !== selectedItem,
+                "border-grey-30 border ": item !== selectedItem,
               }
             )}
           >
             {item === selectedItem && (
-              <div className="rounded-full w-2 h-2 bg-violet-60" />
+              <div className="bg-violet-60 h-2 w-2 rounded-full" />
             )}
           </div>
           {item}
@@ -535,7 +535,7 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
 
 const RightPopover = ({ trigger, children }) => (
   <RadixPopover.Root>
-    <RadixPopover.Trigger className="w-full my-1">
+    <RadixPopover.Trigger className="my-1 w-full">
       {trigger}
     </RadixPopover.Trigger>
     <RadixPopover.Content
@@ -543,7 +543,7 @@ const RightPopover = ({ trigger, children }) => (
       align="start"
       alignOffset={-8}
       sideOffset={20}
-      className="flex flex-col bg-grey-0 rounded-rounded shadow-dropdown p-2 top-2/4"
+      className="bg-grey-0 rounded-rounded shadow-dropdown top-2/4 flex flex-col p-2"
     >
       {children}
     </RadixPopover.Content>

packages/admin-ui/ui/src/components/molecules/filter-dropdown/save-field.tsx

@@ -25,13 +25,13 @@ const SaveFilterItem: React.FC<SaveFilterItemProps> = ({
   return (
     <div className="mt-2 flex w-full">
       <InputField
-        className="pt-0 pb-1 max-w-[172px]"
+        className="max-w-[172px] pt-0 pb-1"
         placeholder="Name your filter..."
         onChange={(e) => setName(e.target.value)}
         value={name}
       />
       <Button
-        className="border ml-2 border-grey-20"
+        className="border-grey-20 ml-2 border"
         variant="ghost"
         size="small"
         onClick={onSave}

packages/admin-ui/ui/src/components/molecules/filter-tab/index.tsx

@@ -43,7 +43,7 @@ export const FilterTab: React.FC<FilterTabProps> = ({
       onKeyUp={handleKeyPress}
       onClick={handleClick}
       className={clsx(
-        "flex items-center bg-grey-5 border border-grey-20 inter-small-regular px-2 h-6 text-grey-50 rounded-rounded focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1",
+        "bg-grey-5 border-grey-20 inter-small-regular text-grey-50 rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex flex h-6 items-center items-center space-x-1 border px-2 focus-visible:outline-none",
         {
           ["bg-violet-5 border-violet-60 text-violet-60 "]: isActive,
         }

packages/admin-ui/ui/src/components/molecules/form-error-toaster/index.tsx

@@ -24,7 +24,7 @@ const FormErrorToaster: React.FC<FormErrorToasterProps> = ({
       <div>
         <XCircleIcon size={20} className="text-rose-40" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-grey-0">
+      <div className="ml-small mr-base gap-y-2xsmall text-grey-0 flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-20">{message}</span>
       </div>

packages/admin-ui/ui/src/components/molecules/form-toaster/index.tsx

@@ -39,7 +39,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
   const content = useMemo(() => {
     if (isLoading) {
       return (
-        <div className="flex items-center p-base gap-x-base">
+        <div className="p-base gap-x-base flex items-center">
           <span>
             <Spinner />
           </span>
@@ -49,7 +49,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
     } else {
       return (
         <>
-          <div className="flex items-center p-base gap-x-base">
+          <div className="p-base gap-x-base flex items-center">
             <span>{icon}</span>
             <span className="inter-small-regular">{unsavedChangesMessage}</span>
           </div>
@@ -67,7 +67,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
       })}
       {...toast?.ariaProps}
     >
-      <div className="flex items-center rounded-rounded bg-grey-90 h-[72px] w-[344px] text-grey-0 justify-between">
+      <div className="rounded-rounded bg-grey-90 text-grey-0 flex h-[72px] w-[344px] items-center justify-between">
         {content}
       </div>
     </div>
@@ -76,10 +76,10 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
 
 const Actions: React.FC = ({ children }) => {
   return (
-    <div className="border-l border-grey-70 h-full">
+    <div className="border-grey-70 h-full border-l">
       {Children.map(children, (child) => {
         return (
-          <div className="flex items-center justify-center border-b border-grey-70 last:border-none h-1/2 w-[72px]">
+          <div className="border-grey-70 flex h-1/2 w-[72px] items-center justify-center border-b last:border-none">
             {child}
           </div>
         )
@@ -96,7 +96,7 @@ const DiscardButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
   return (
     <button
       className={clsx(
-        "flex items-center justify-center text-white inter-small-semibold h-full w-full",
+        "inter-small-semibold flex h-full w-full items-center justify-center text-white",
         className
       )}
       {...props}
@@ -114,7 +114,7 @@ const ActionButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
   return (
     <button
       className={clsx(
-        "flex items-center justify-center text-white inter-small-semibold h-full w-full",
+        "inter-small-semibold flex h-full w-full items-center justify-center text-white",
         className
       )}
       {...props}
@@ -133,7 +133,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
     <Dropdown.Root>
       <Dropdown.Trigger
         className={clsx(
-          "inter-small-semibold flex items-center justify-center h-full w-full",
+          "inter-small-semibold flex h-full w-full items-center justify-center",
           className
         )}
       >
@@ -142,7 +142,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
       </Dropdown.Trigger>
 
       <Dropdown.Content
-        className="rounded-rounded flex bg-grey-90 text-white p-xsmall flex-col min-w-[208px]"
+        className="rounded-rounded bg-grey-90 p-xsmall flex min-w-[208px] flex-col text-white"
         sideOffset={10}
       >
         {actions.map((action, i) => {
@@ -150,7 +150,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
             <Dropdown.Item key={i}>
               <button
                 onClick={action.onClick}
-                className="p-2xsmall hover:bg-grey-80 hover:outline-none inter-small-semibold rounded-base text-left flex items-center w-full"
+                className="p-2xsmall hover:bg-grey-80 inter-small-semibold rounded-base flex w-full items-center text-left hover:outline-none"
               >
                 {action.icon && (
                   <span className="text-grey-0 mr-xsmall">

packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx

@@ -71,7 +71,7 @@ const GeneratingInput = React.forwardRef(
             ref={inputRef}
             value={value}
             onChange={handleChange}
-            className="bg-inherit outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40"
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-inherit font-normal outline-none outline-0"
             placeholder={placeholder}
             autoComplete="off"
             name={name}

packages/admin-ui/ui/src/components/molecules/grid-input/index.tsx

@@ -5,7 +5,7 @@ type GridInputProps = React.InputHTMLAttributes<HTMLInputElement>
 const GridInput: React.FC<GridInputProps> = ({ value, ...props }) => {
   return (
     <input
-      className="outline-none outline-0 leading-base bg-transparent py-4 px-2 w-full h-full border rounded-rounded border-transparent inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border focus-within:border-violet-60"
+      className="leading-base rounded-rounded inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border-violet-60 h-full w-full border border-transparent bg-transparent py-4 px-2 outline-none outline-0 focus-within:border"
       value={value}
       {...props}
     />

packages/admin-ui/ui/src/components/molecules/hot-key-action/index.tsx

@@ -13,7 +13,7 @@ const HotKeyAction = ({ label, hotKey, icon, onAction }: HotKeyActionProps) => {
   return (
     <div className="flex items-center gap-2">
       <span className="text-grey-0 inter-small-semibold">{label}</span>
-      <div className="inter-small-semibold text-grey-30 flex items-center justify-center w-[24px] h-[24px] rounded bg-grey-70">
+      <div className="inter-small-semibold text-grey-30 bg-grey-70 flex h-[24px] w-[24px] items-center justify-center rounded">
         {icon}
       </div>
     </div>

packages/admin-ui/ui/src/components/molecules/icon-tooltip/index.tsx

@@ -18,11 +18,11 @@ const IconTooltip: React.FC<IconTooltipProps> = ({
   const icon = (type: IconTooltipProps["type"]) => {
     switch (type) {
       case "warning":
-        return <AlertIcon size={size} className="flex text-orange-40" />
+        return <AlertIcon size={size} className="text-orange-40 flex" />
       case "error":
-        return <XCircleIcon size={size} className="flex text-rose-40" />
+        return <XCircleIcon size={size} className="text-rose-40 flex" />
       default:
-        return <InfoIcon size={size} className="flex text-grey-40" />
+        return <InfoIcon size={size} className="text-grey-40 flex" />
     }
   }
 

packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx

@@ -56,7 +56,7 @@ const IndeterminateCheckbox = React.forwardRef<
     <div className="flex h-full items-center">
       <div
         onClick={handleClick}
-        className={`flex h-5 w-5 cursor-pointer 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 cursor-pointer justify-center border ${
           rest.disabled
             ? checked
               ? "bg-gray-300"

packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx

@@ -52,12 +52,12 @@ const SigninInput = React.forwardRef(
     return (
       <div
         className={clsx(
-          "w-[320px] h-[48px] mb-xsmall last:mb-0 border rounded-rounded overflow-hidden",
+          "mb-xsmall rounded-rounded h-[48px] w-[320px] overflow-hidden border last:mb-0",
           "bg-grey-5 inter-base-regular placeholder:text-grey-40",
           "focus-within:shadow-input focus-within:border-violet-60",
           "flex items-center",
           {
-            "pointer-events-none focus-within:shadow-none focus-within:border-none text-grey-40":
+            "text-grey-40 pointer-events-none focus-within:border-none focus-within:shadow-none":
               props.readOnly,
           },
           className
@@ -68,7 +68,7 @@ const SigninInput = React.forwardRef(
         )}
         <input
           className={clsx(
-            "outline-none outline-0 remove-number-spinner leading-base bg-transparent w-full py-3 px-4",
+            "remove-number-spinner leading-base w-full bg-transparent py-3 px-4 outline-none outline-0",
             {
               "pl-xsmall": props.readOnly,
             }
@@ -86,7 +86,7 @@ const SigninInput = React.forwardRef(
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="text-grey-40 px-4 focus:outline-none focus:text-violet-60"
+            className="text-grey-40 focus:text-violet-60 px-4 focus:outline-none"
           >
             {showPassword ? <EyeIcon /> : <EyeOffIcon />}
           </button>

packages/admin-ui/ui/src/components/molecules/json-view/index.tsx

@@ -29,8 +29,8 @@ const JSONView = ({ data }: JSONViewProps) => {
     <div className="px-base py-xsmall rounded-rounded bg-grey-5 w-full">
       <Collapsible.Root open={expanded} onOpenChange={setExpanded}>
         <Collapsible.Trigger asChild>
-          <div className="flex items-center justify-between cursor-pointer">
+          <div className="flex cursor-pointer items-center justify-between">
-            <div className="flex items-center gap-x-xsmall inter-base-regular">
+            <div className="gap-x-xsmall inter-base-regular flex items-center">
               <p className="inter-base-semibold">
                 {expanded ? "{" : length > 0 ? "{ ... }" : "{}"}
               </p>
@@ -66,9 +66,9 @@ const JSONView = ({ data }: JSONViewProps) => {
               shouldExpandNode={() => false}
             />
           </div>
-          <div className="flex items-center justify-between w-full">
+          <div className="flex w-full items-center justify-between">
             {expanded && <p className="inter-base-semibold">{`}`}</p>}
-            <div className="flex items-center gap-x-xsmall text-grey-50 inter-small-regular">
+            <div className="gap-x-xsmall text-grey-50 inter-small-regular flex items-center">
               {isCopied && (
                 <span className="animate-fade-in-right">Copied!</span>
               )}

packages/admin-ui/ui/src/components/molecules/modal/focus-modal.tsx

@@ -26,7 +26,7 @@ type BasicFocusModalProps = {
 const FocusModal: IFocusModal = ({ className, children }) => (
   <div
     className={clsx(
-      "absolute inset-0 bg-grey-0 z-50 flex flex-col items-center",
+      "bg-grey-0 absolute inset-0 z-50 flex flex-col items-center",
       className
     )}
   >
@@ -37,7 +37,7 @@ const FocusModal: IFocusModal = ({ className, children }) => (
 FocusModal.Header = ({ children, className }) => (
   <div
     className={clsx(
-      "w-full border-b py-4 border-b-grey-20 flex justify-center",
+      "border-b-grey-20 flex w-full justify-center border-b py-4",
       className
     )}
   >
@@ -46,7 +46,7 @@ FocusModal.Header = ({ children, className }) => (
 )
 
 FocusModal.Main = ({ children, className }) => (
-  <div className={clsx("w-full px-8 overflow-y-auto h-full", className)}>
+  <div className={clsx("h-full w-full overflow-y-auto px-8", className)}>
     {children}
   </div>
 )
@@ -79,12 +79,12 @@ const BasicFocusModalHeader: React.FC<BasicFocusModalProps> = ({
 }) => {
   return (
     <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={handleClose}
-          className="border rounded-rounded w-8 h-8"
+          className="rounded-rounded h-8 w-8 border"
         >
           <CrossIcon size={20} />
         </Button>
@@ -93,7 +93,7 @@ const BasicFocusModalHeader: React.FC<BasicFocusModalProps> = ({
             onClick={handleClose}
             size="small"
             variant="ghost"
-            className="border rounded-rounded"
+            className="rounded-rounded border"
           >
             {cancelText || "Cancel"}
           </Button>

packages/admin-ui/ui/src/components/molecules/modal/index.tsx

@@ -43,7 +43,7 @@ type ModalType = React.FC<ModalProps> & {
 
 const Overlay: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <Dialog.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-50 grid overflow-y-auto bg-grey-90/40 place-items-center">
+    <Dialog.Overlay className="bg-grey-90/40 fixed top-0 bottom-0 left-0 right-0 z-50 grid place-items-center overflow-y-auto">
       {children}
     </Dialog.Overlay>
   )
@@ -57,7 +57,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Dialog.Content
       style={style}
-      className="overflow-x-hidden min-w-modal rounded-rounded bg-grey-0"
+      className="min-w-modal rounded-rounded bg-grey-0 overflow-x-hidden"
     >
       {children}
     </Dialog.Content>
@@ -125,7 +125,7 @@ Modal.Content = ({ children, className }) => {
 Modal.Header = ({ handleClose = undefined, children }) => {
   return (
     <div
-      className="flex items-center w-full px-8 py-6 border-b"
+      className="flex w-full items-center border-b px-8 py-6"
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex flex-grow">{children}</div>

packages/admin-ui/ui/src/components/molecules/modal/layered-modal.tsx

@@ -112,13 +112,13 @@ const LayeredModal: React.FC<LayeredModalProps> = ({
                 <Button
                   variant="ghost"
                   size="small"
-                  className="w-8 h-8 border text-grey-50"
+                  className="text-grey-50 h-8 w-8 border"
                   onClick={screen.onBack}
                 >
                   <UTurnIcon size={20} />
                 </Button>
-                <div className="flex items-center gap-x-2xsmall">
+                <div className="gap-x-2xsmall flex items-center">
-                  <h2 className="ml-4 inter-xlarge-semibold">{screen.title}</h2>
+                  <h2 className="inter-xlarge-semibold ml-4">{screen.title}</h2>
                   {screen.subtitle && (
                     <span className="inter-xlarge-regular text-grey-50">
                       ({screen.subtitle})

packages/admin-ui/ui/src/components/molecules/modal/stepped-modal.tsx

@@ -139,7 +139,7 @@ const SteppedModal: React.FC<SteppedProps> = ({
     >
       <Modal.Body
         className={clsx(
-          "transition-transform flex flex-col justify-between duration-100 max-h-full"
+          "flex max-h-full flex-col justify-between transition-transform duration-100"
         )}
       >
         <Modal.Header handleClose={resetAndClose}>
@@ -149,20 +149,20 @@ const SteppedModal: React.FC<SteppedProps> = ({
               (lastScreenIsSummary &&
                 context.currentStep !== steps.length - 1 && (
                   <div className="flex items-center">
-                    <span className="text-grey-50 inter-small-regular w-[70px] mr-4">{`Step ${
+                    <span className="text-grey-50 inter-small-regular mr-4 w-[70px]">{`Step ${
                       context.currentStep + 1
                     } of ${steps.length}`}</span>
                     {steps.map((_, i) => (
                       <span
                         key={i}
                         className={clsx(
-                          "w-2 h-2 rounded-full mr-3",
+                          "mr-3 h-2 w-2 rounded-full",
                           {
                             "bg-grey-20": i > context.currentStep,
                             "bg-violet-60": context.currentStep >= i,
                           },
                           {
-                            "outline-4 outline outline-violet-20":
+                            "outline-violet-20 outline outline-4":
                               context.currentStep === i,
                           }
                         )}
@@ -175,7 +175,7 @@ const SteppedModal: React.FC<SteppedProps> = ({
         <Modal.Content>{steps[context.currentStep]}</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
             variant="ghost"
             size="small"

packages/admin-ui/ui/src/components/molecules/native-select/index.tsx

@@ -23,7 +23,7 @@ const NativeSelect: NativeSelectType = ({
   return (
     <RadixSelect.Root {...props}>
       <RadixSelect.SelectTrigger
-        className="flex items-center inter-base-semibold gap-3 px-2"
+        className="inter-base-semibold flex items-center gap-3 px-2"
         {...triggerProps}
       >
         <RadixSelect.Value />
@@ -33,13 +33,13 @@ const NativeSelect: NativeSelectType = ({
       </RadixSelect.SelectTrigger>
       <RadixSelect.Content
         position="popper"
-        className="rounded-rounded scrollbar-hide border px-2 py-2 border-grey-20 bg-grey-0 w-full flex shadow-dropdown z-[9999] max-h-[305px] overflow-y-auto"
+        className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown z-[9999] flex max-h-[305px] w-full overflow-y-auto border px-2 py-2"
       >
-        <RadixSelect.ScrollUpButton className="h-[25px] flex items-center justify-center bg-gradient-to-b from-transparent to-grey-0">
+        <RadixSelect.ScrollUpButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
           <ChevronUpIcon size={ICON_SIZE} />
         </RadixSelect.ScrollUpButton>
         <RadixSelect.Viewport className="p-2">{children}</RadixSelect.Viewport>
-        <RadixSelect.ScrollDownButton className="h-[25px] flex items-center justify-center bg-gradient-to-b from-transparent to-grey-0">
+        <RadixSelect.ScrollDownButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
           <ChevronDownIcon size={ICON_SIZE} />
         </RadixSelect.ScrollDownButton>
       </RadixSelect.Content>
@@ -52,7 +52,7 @@ type ItemProps = RadixSelect.SelectItemProps
 const Item: React.FC<ItemProps> = ({ children, ...props }) => (
   <RadixSelect.Item
     className={clsx(
-      "flex relative justify-start py-1.5 px-9 items-center inter-base-regular rounded hover:bg-grey-10"
+      "inter-base-regular hover:bg-grey-10 relative flex items-center justify-start rounded py-1.5 px-9"
     )}
     {...props}
   >

packages/admin-ui/ui/src/components/molecules/note-input/index.tsx

@@ -44,17 +44,17 @@ const NoteInput: React.FC<NoteInputProps> = ({ onSubmit }) => {
   return (
     <form>
       <div
-        className="flex items-center py-xsmall px-small bg-grey-5 border border-grey-20 rounded-rounded"
+        className="py-xsmall px-small bg-grey-5 border-grey-20 rounded-rounded flex items-center border"
         onClick={() => inputRef.current?.focus()}
       >
-        <div className="flex items-center gap-x-small flex-grow">
+        <div className="gap-x-small flex flex-grow items-center">
           <EmojiPicker onEmojiClick={handleAddEmoji} />
           <input
             type="text"
             placeholder="Write a note..."
             value={note}
             onChange={(e) => setNote(e.target.value)}
-            className="flex-grow bg-transparent inter-base-regular placeholder:text-grey-40 focus:outline-none"
+            className="inter-base-regular placeholder:text-grey-40 flex-grow bg-transparent focus:outline-none"
             ref={inputRef}
             id="note-input"
             autoComplete="off"

packages/admin-ui/ui/src/components/molecules/notification-bell/index.tsx

@@ -12,7 +12,7 @@ const NotificationBell: React.FC<NotificationBellProps> = ({
   ...attributes
 }) => {
   return (
-    <Button className="w-8 h-8" size="small" {...attributes}>
+    <Button className="h-8 w-8" size="small" {...attributes}>
       {hasNotifications ? <BellNotiIcon /> : <BellIcon />}
     </Button>
   )

packages/admin-ui/ui/src/components/molecules/numbered-item/index.tsx

@@ -18,17 +18,17 @@ const NumberedItem: React.FC<NumberedItemProps> = ({
   description,
 }) => {
   return (
-    <div className="p-base border rounded-rounded flex gap-base justify-between items-center">
+    <div className="p-base rounded-rounded gap-base flex items-center justify-between border">
-      <div className="flex overflow-hidden gap-base w-full">
+      <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}
           </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">{title}</div>
           {description &&
             (typeof description === "string" ? (

packages/admin-ui/ui/src/components/molecules/rma-select-shipping/index.tsx

@@ -21,7 +21,7 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
   setUseCustomShippingPrice,
 }) => {
   return useCustomShippingPrice ? (
-    <div className="flex items-end mt-4 gap-x-base w-full">
+    <div className="gap-x-base mt-4 flex w-full items-end">
       <AmountInput
         label={`Shipping price (${inclTax ? "incl. tax" : "excl. tax"})`}
         currencyCode={currencyCode}
@@ -30,7 +30,7 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
       />
       <Button
         onClick={() => setUseCustomShippingPrice(false)}
-        className="w-10 h-10 text-grey-40"
+        className="text-grey-40 h-10 w-10"
         variant="ghost"
         size="small"
       >
@@ -38,11 +38,11 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
       </Button>
     </div>
   ) : (
-    <div className="flex w-full mt-4 justify-end">
+    <div className="mt-4 flex w-full justify-end">
       <Button
         onClick={() => setUseCustomShippingPrice(true)}
         variant="ghost"
-        className="border border-grey-20"
+        className="border-grey-20 border"
         size="small"
       >
         Add custom price

packages/admin-ui/ui/src/components/molecules/sales-channels-list/index.tsx

@@ -18,7 +18,7 @@ const SalesChannelsList = ({ salesChannels, showMax = 3 }: Props) => {
       {salesChannels
         .slice(0, showMax)
         .map((salesChannel, index, slicedArray) => (
-          <span className="ml-1 inter-base-regular text-grey-90 first-of-type:ml-0">
+          <span className="inter-base-regular text-grey-90 ml-1 first-of-type:ml-0">
             {salesChannel.name}
             {index < slicedArray.length - 1 && ", "}
           </span>
@@ -34,7 +34,7 @@ const SalesChannelsList = ({ salesChannels, showMax = 3 }: Props) => {
           }
           side="top"
         >
-          <span className="ml-1 text-grey-50">
+          <span className="text-grey-50 ml-1">
             + {salesChannels.length - showMax} more
           </span>
         </Tooltip>

packages/admin-ui/ui/src/components/molecules/search-bar.tsx

@@ -31,7 +31,7 @@ const SearchBar: React.FC = () => {
     <>
       <button
         onClick={() => setShowSearchModal(true)}
-        className="flex basis-1/2 items-center px-small py-[6px]"
+        className="px-small flex basis-1/2 items-center py-[6px]"
       >
         <SearchIcon className="text-grey-40" />
         <div className="ml-5">

packages/admin-ui/ui/src/components/molecules/section/index.tsx

@@ -15,10 +15,10 @@ const Section: React.FC<SectionProps> = ({
 }) => {
   return (
     <div>
-      <div className="flex items-center mb-2xsmall">
+      <div className="mb-2xsmall flex items-center">
         <h3 className="inter-base-semibold">{title}</h3>
         {tooltip && (
-          <div className="flex items-center ml-1.5">
+          <div className="ml-1.5 flex items-center">
             <IconTooltip content={tooltip} />
           </div>
         )}

packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx

@@ -34,7 +34,7 @@ export const AdjacentContainer = forwardRef<
     ref
   ) => {
     return (
-      <div className="flex flex-col gap-y-xsmall w-full" ref={ref}>
+      <div className="gap-y-xsmall flex w-full flex-col" ref={ref}>
         {label && (
           <label
             className="inter-small-semibold text-grey-50"
@@ -77,7 +77,7 @@ export const SelectContainer = <
           "--has-value": hasValue,
         },
         clsx(
-          "relative pointer-events-auto",
+          "pointer-events-auto relative",
           { "text-grey-40": isDisabled },
           className
         )
@@ -116,7 +116,7 @@ export const ValueContainer = <
             "value-container--has-value": hasValue,
           },
           clsx(
-            "group flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
+            "scrolling-touch group relative flex flex-1 flex-wrap items-center overflow-hidden",
             {
               "gap-2xsmall": isMulti,
             },
@@ -125,14 +125,14 @@ export const ValueContainer = <
         )}
       >
         {value?.length > 0 && (
-          <div className="h-7 bg-grey-20 text-grey-50 px-small inter-small-semibold flex items-center rounded-rounded gap-x-2xsmall cursor-default">
+          <div className="bg-grey-20 text-grey-50 px-small inter-small-semibold rounded-rounded gap-x-2xsmall flex h-7 cursor-default items-center">
             <span>{value.length}</span>
           </div>
         )}
         <div className="relative grow">
           {children}
           {value?.length > 0 && inputValue === "" && (
-            <span className="absolute top-1/2 -translate-y-1/2 inter-base-regular text-grey-50">
+            <span className="inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2">
               {selectedPlaceholder || label || "Selected"}
             </span>
           )}
@@ -151,7 +151,7 @@ export const ValueContainer = <
           "value-container--has-value": hasValue,
         },
         clsx(
-          "flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
+          "scrolling-touch relative flex flex-1 flex-wrap items-center overflow-hidden",
           {
             "gap-2xsmall": isMulti,
           },
@@ -181,7 +181,7 @@ export const IndicatorsContainer = <
         {
           "indicators-container": true,
         },
-        clsx("text-grey-50 flex items-center gap-x-small px-small", className)
+        clsx("text-grey-50 gap-x-small px-small flex items-center", className)
       )}
     >
       {children}

packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx

@@ -38,7 +38,7 @@ const Control = <
           "control--menu-is-open": menuIsOpen,
         },
         clsx(
-          "flex p-0 overflow-hidden rounded-rounded border border-gray-20 bg-grey-5 focus-within:shadow-cta transition-colors focus-within:border-violet-60 box-border pl-small",
+          "rounded-rounded border-gray-20 bg-grey-5 focus-within:shadow-cta focus-within:border-violet-60 pl-small box-border flex overflow-hidden border p-0 transition-colors",
           {
             "h-xlarge": size === "sm",
             "h-10": size === "md" || !size,
@@ -50,7 +50,7 @@ const Control = <
     >
       <div
         className={clsx(
-          "flex items-center flex-1",
+          "flex flex-1 items-center",
           customStyles?.inner_control
         )}
       >

packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx

@@ -53,7 +53,7 @@ const Menu = <
       className={cx(
         { menu: true },
         clsx(
-          "absolute w-full overflow-hidden border-border z-[60] bg-grey-0 rounded-rounded border border-grey-20 shadow-dropdown mb-base",
+          "border-border bg-grey-0 rounded-rounded border-grey-20 shadow-dropdown mb-base absolute z-[60] w-full overflow-hidden border",
           {
             "top-[calc(100%+8px)]": placement === "bottom",
             "bottom-full": placement === "top",
@@ -178,7 +178,7 @@ export const MenuList = <
           "menu-list": true,
           "menu-list--is-multi": isMulti,
         },
-        clsx("overflow-y-auto flex flex-col py-xsmall no-scrollbar", className)
+        clsx("py-xsmall no-scrollbar flex flex-col overflow-y-auto", className)
       )}
     >
       {isMulti && selectAll && (
@@ -208,14 +208,14 @@ export const LoadingMessage = <
     return (
       <div
         className={clsx(
-          "w-full flex items-center px-base transition-colors hover:bg-grey-5",
+          "px-base hover:bg-grey-5 flex w-full items-center transition-colors",
           {
             "h-xlarge": size === "sm",
             "h-10": size === "md" || !size,
           }
         )}
       >
-        <div className="bg-grey-10 animate-pulse w-1/4 h-xsmall rounded-rounded" />
+        <div className="bg-grey-10 h-xsmall rounded-rounded w-1/4 animate-pulse" />
       </div>
     )
   }
@@ -271,9 +271,9 @@ export const Option = <
           "option--is-focused": isFocused,
         },
         clsx(
-          "flex items-center justify-between py-xsmall px-base transition-colors hover:bg-grey-5",
+          "py-xsmall px-base hover:bg-grey-5 flex items-center justify-between transition-colors",
           {
-            "text-grey-30 select-none cursor-not-allowed": isDisabled,
+            "text-grey-30 cursor-not-allowed select-none": isDisabled,
             "bg-grey-10": isFocused && !isDisabled,
             hidden: hideSelectedOptions && isSelected,
           },
@@ -290,13 +290,13 @@ export const Option = <
       tabIndex={isDisabled ? -1 : 0}
       {...innerProps}
     >
-      <div className="flex items-center gap-x-small flex-1">
+      <div className="gap-x-small flex flex-1 items-center">
         {isMulti && (
           <CheckboxAdornment isSelected={isSelected} isDisabled={isDisabled} />
         )}
         <div
           className={clsx(
-            "flex items-center justify-between gap-x-xsmall inter-base-regular flex-1",
+            "gap-x-xsmall inter-base-regular flex flex-1 items-center justify-between",
             {
               truncate: !!truncateOption,
             }
@@ -306,14 +306,14 @@ export const Option = <
           <span className="w-full">{children}</span>
 
           {suffix && (
-            <span className="inter-base-regular justify-self-end text-grey-50">
+            <span className="inter-base-regular text-grey-50 justify-self-end">
               {suffix}
             </span>
           )}
         </div>
       </div>
       {!isMulti && (
-        <div className="w-5 ml-xsmall">
+        <div className="ml-xsmall w-5">
           {isSelected && <CheckIcon size={16} />}
         </div>
       )}
@@ -328,7 +328,7 @@ const CheckboxAdornment = ({
   return (
     <div
       className={clsx(
-        `w-base h-base flex justify-center text-grey-0 border-grey-30 border rounded-base transition-colors`,
+        `w-base h-base text-grey-0 border-grey-30 rounded-base flex justify-center border transition-colors`,
         {
           "bg-violet-60 border-violet-60": isSelected,
           "bg-grey-5": isDisabled,

packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx

@@ -1,13 +1,12 @@
-import clsx from "clsx";
+import clsx from "clsx"
-import React from "react";
 import {
   GroupBase,
   MultiValueGenericProps,
   MultiValueProps,
-    MultiValueRemoveProps
+  MultiValueRemoveProps,
-} from "react-select";
+} from "react-select"
-import CrossIcon from "../../../../fundamentals/icons/cross-icon";
+import CrossIcon from "../../../../fundamentals/icons/cross-icon"
-import { optionIsFixed } from "../utils";
+import { optionIsFixed } from "../utils"
 
 const MultiValue = <
   Option,
@@ -31,12 +30,15 @@ const MultiValue = <
     <Container
       data={data}
       innerProps={{
-        className: cx({
+        className: cx(
+          {
             "multi-value": true,
             "multi-value--is-disabled": isDisabled,
-        }, clsx({
+          },
-            "bg-grey-70 text-grey-0": isFocused
+          clsx({
-        })),
+            "bg-grey-70 text-grey-0": isFocused,
+          })
+        ),
         ...innerProps,
       }}
       selectProps={selectProps}
@@ -84,7 +86,14 @@ export const MultiValueContainer = <
   innerProps: { className },
 }: MultiValueGenericProps<Option, IsMulti, Group>) => {
   return (
-        <span className={clsx("flex items-center gap-x-2xsmall py-2xsmall pl-small pr-2.5 rounded-rounded transition-colors bg-grey-20 text-grey-50 inter-small-semibold", className)}>{children}</span>
+    <span
+      className={clsx(
+        "gap-x-2xsmall py-2xsmall pl-small rounded-rounded bg-grey-20 text-grey-50 inter-small-semibold flex items-center pr-2.5 transition-colors",
+        className
+      )}
+    >
+      {children}
+    </span>
   )
 }
 
@@ -95,19 +104,15 @@ export const MultiValueRemove = <
 >(
   props: MultiValueRemoveProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps, data } = props;
+  const { children, innerProps, data } = props
 
   if (optionIsFixed(data) && data.isFixed) {
-    return null;
+    return null
   }
 
   return (
-    <div
+    <div {...innerProps} role="button" className="text-grey-40">
-      {...innerProps}
-      role="button"
-      className="text-grey-40"
-    >
       {children || <CrossIcon size={16} />}
     </div>
-  );
+  )
-};
+}

packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { GroupBase, PlaceholderProps } from "react-select"
 
 const Placeholder = <
@@ -20,7 +19,7 @@ const Placeholder = <
           placeholder: true,
         },
         clsx(
-          "absolute top-1/2 -translate-y-1/2 select-none inter-base-regular text-grey-50",
+          "inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2 select-none",
           className
         )
       )}

packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { GroupBase, SingleValueProps } from "react-select"
 import { hasPrefix } from "../utils"
 
@@ -26,12 +25,12 @@ const SingleValue = <
           "single-value--is-disabled": isDisabled,
         },
         clsx(
-          "overflow-hidden absolute top-1/2 -translate-y-1/2 whitespace-nowrap overflow-ellipsis",
+          "absolute top-1/2 -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap",
           className
         )
       )}
     >
-      <div className="flex items-center gap-x-xsmall inter-base-regular">
+      <div className="gap-x-xsmall inter-base-regular flex items-center">
         {prefix && <span className="inter-base-semibold">{prefix}</span>}
         {children}
       </div>

packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx

@@ -1,5 +1,5 @@
 import type { MutableRefObject, ReactElement, RefAttributes } from "react"
-import React, { forwardRef } from "react"
+import { forwardRef } from "react"
 import type { GroupBase, SelectInstance } from "react-select"
 import type { CreatableProps } from "react-select/creatable"
 import CreatableReactSelect from "react-select/creatable"

packages/admin-ui/ui/src/components/molecules/select/select-components.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import {
   ClearIndicatorProps,
   components,
@@ -39,7 +38,7 @@ const MultiValueLabel = <
   return (
     <div
       {...innerProps}
-      className={clsx("bg-grey-5 mx-0 inter-base-regular p-0", {
+      className={clsx("bg-grey-5 inter-base-regular mx-0 p-0", {
         "after:content-[',']": !isLast,
       })}
     >
@@ -59,9 +58,9 @@ const Menu = <
   return (
     <components.Menu
       className={clsx("!rounded-rounded", {
-        "-mt-1 z-60":
+        "z-60 -mt-1":
           !props.selectProps.isSearchable && props.menuPlacement === "bottom",
-        "mb-3 z-60":
+        "z-60 mb-3":
           !props.selectProps.isSearchable && props.menuPlacement === "top",
       })}
       {...props}
@@ -95,7 +94,7 @@ const Placeholder = <
   props: PlaceholderProps<Option, IsMulti, Group>
 ) => {
   return props.selectProps.menuIsOpen ? null : (
-    <components.Placeholder {...props} className="!mx-0 !text-grey-40" />
+    <components.Placeholder {...props} className="!text-grey-40 !mx-0" />
   )
 }
 
@@ -142,7 +141,7 @@ const SelectContainer = <
   props: ContainerProps<Option, IsMulti, Group>
 ) => {
   return (
-    <div className="bg-grey-5 h-10 border border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small">
+    <div className="bg-grey-5 border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small h-10 border">
       <components.SelectContainer {...props} />
     </div>
   )
@@ -164,8 +163,8 @@ const Input = <
   }
 
   return (
-    <div className="w-full flex items-center h-full space-between">
+    <div className="space-between flex h-full w-full items-center">
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span className="text-grey-40 mr-2">
           <SearchIcon size={16} />
         </span>
@@ -190,7 +189,7 @@ const ClearIndicator = <
   return (
     <div
       {...innerProps}
-      className="hover:bg-grey-10 text-grey-50 rounded cursor-pointer"
+      className="hover:bg-grey-10 text-grey-50 cursor-pointer rounded"
     >
       <XCircleIcon size={16} />
     </div>
@@ -201,7 +200,7 @@ const CheckboxAdornment = ({ isSelected }: { isSelected: boolean }) => {
   return (
     <div
       className={clsx(
-        `w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base`,
+        `text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border`,
         {
           "bg-violet-60": isSelected,
         }
@@ -219,18 +218,18 @@ const RadioAdornment = ({ isSelected }: { isSelected: boolean }) => {
     <div
       className={clsx(
         "radio-outer-ring outline-0",
-        "shrink-0 w-[20px] h-[20px] rounded-circle",
+        "rounded-circle h-[20px] w-[20px] shrink-0",
         {
           "shadow-[0_0_0_1px] shadow-[#D1D5DB]": !isSelected,
-          "shadow-[0_0_0_2px] shadow-violet-60": isSelected,
+          "shadow-violet-60 shadow-[0_0_0_2px]": isSelected,
         }
       )}
     >
       {isSelected && (
         <div
           className={clsx(
-            "group flex items-center justify-center w-full h-full relative",
+            "group relative flex h-full w-full items-center justify-center",
-            "after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
           )}
         />
       )}
@@ -248,7 +247,7 @@ const NoOptionsMessage = <
 }: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      className="text-grey-50 inter-small-semibold text-center p-xsmall"
+      className="text-grey-50 inter-small-semibold p-xsmall text-center"
       {...innerProps}
     >
       <p>{isLoading ? "Loading..." : "No options"}</p>
@@ -267,12 +266,12 @@ const Option = <
   return (
     <components.Option
       {...props}
-      className="my-1 py-0 px-2 bg-grey-0 active:bg-grey-0"
+      className="bg-grey-0 active:bg-grey-0 my-1 py-0 px-2"
     >
       <div
-        className={`item-renderer h-full hover:bg-grey-10 py-2 px-2 cursor-pointer rounded`}
+        className={`item-renderer hover:bg-grey-10 h-full cursor-pointer rounded py-2 px-2`}
       >
-        <div className="items-center h-full flex">
+        <div className="flex h-full items-center">
           {props.data?.value !== "all" && props.data?.label !== "Select All" ? (
             <>
               {props.isMulti ? (
@@ -280,7 +279,7 @@ const Option = <
               ) : (
                 <RadioAdornment isSelected={props.isSelected} />
               )}
-              <span className="ml-3 text-grey-90 inter-base-regular">
+              <span className="text-grey-90 inter-base-regular ml-3">
                 {props.data.label}
               </span>
             </>

packages/admin-ui/ui/src/components/molecules/shipping-option/index.tsx

@@ -32,10 +32,10 @@ const ShippingOption: React.FC<ShippingOptionProps> = ({
   onEdit,
 }) => {
   return (
-    <div className="flex items-baseline justify-between p-base rounded-base border border-grey-20">
+    <div className="p-base rounded-base border-grey-20 flex items-baseline justify-between border">
       <div className="truncate">
         <div className="flex items-center">
-          <p className="inter-small-semibold truncate mr-xsmall">
+          <p className="inter-small-semibold mr-xsmall truncate">
             {option.name} {option.data.name && `(${option.data.name})`}{" "}
           </p>
           {option.admin_only && <Badge variant="primary">Not on website</Badge>}
@@ -45,7 +45,7 @@ const ShippingOption: React.FC<ShippingOptionProps> = ({
           {option.amount !== undefined &&
             `${option.amount / 100} ${currency_code.toUpperCase()}`}
           {option.requirements.length
-            ? option.requirements.map(r => {
+            ? option.requirements.map((r) => {
                 const type =
                   r.type === "max_subtotal" ? "Max. subtotal" : "Min. subtotal"
                 return ` - ${type}: ${

packages/admin-ui/ui/src/components/molecules/sidebar-company-logo/index.tsx

@@ -8,11 +8,11 @@ const SidebarCompanyLogo: React.FC<SidebarCompanyLogoProps> = ({
   storeName,
 }: SidebarCompanyLogoProps) => {
   return (
-    <div className="flex items-center bg-grey-0 px-2.5 pb-6 w-full mb-4">
+    <div className="bg-grey-0 mb-4 flex w-full items-center px-2.5 pb-6">
-      <div className="w-[32px] h-[32px] flex items-center justify-center bg-grey-90 text-grey-0 rounded">
+      <div className="bg-grey-90 text-grey-0 flex h-[32px] w-[32px] items-center justify-center rounded">
         <div>{storeName?.slice(0, 1) || "M"}</div>
       </div>
-      <span className="font-semibold ml-2.5">{storeName}</span>
+      <span className="ml-2.5 font-semibold">{storeName}</span>
     </div>
   )
 }

packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx

@@ -40,7 +40,7 @@ const SidebarMenuItem: React.FC<SidebarMenuItemProps> & {
       trigger={
         <NavLink className={classNameFn} to={pageLink}>
           <span className="items-start">{icon}</span>
-          <span className="ml-3 group-[.is-active]:text-grey-90">{text}</span>
+          <span className="group-[.is-active]:text-grey-90 ml-3">{text}</span>
         </NavLink>
       }
     >
@@ -62,7 +62,7 @@ const SubItem = ({ pageLink, text }: SidebarMenuSubitemProps) => {
 
   return (
     <NavLink className={classNameFn} to={pageLink}>
-      <span className="ml-3 text-grey-90 text-small">{text}</span>
+      <span className="text-grey-90 text-small ml-3">{text}</span>
     </NavLink>
   )
 }

packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx

@@ -16,11 +16,11 @@ const SidebarTeamMember: React.FC<SidebarTeamMemberProps> = ({
       : user.email
 
   return (
-    <div className="flex items-center bg-inherit px-2.5 py-1.5 w-full">
+    <div className="flex w-full items-center bg-inherit px-2.5 py-1.5">
-      <div className="w-[24px] h-[24px]">
+      <div className="h-[24px] w-[24px]">
         <Avatar user={user} color={color} />
       </div>
-      <span className="pl-2.5 w-40 truncate">{fullName}</span>
+      <span className="w-40 truncate pl-2.5">{fullName}</span>
     </div>
   )
 }

packages/admin-ui/ui/src/components/molecules/status-selector/index.tsx

@@ -29,7 +29,7 @@ const StatusSelector: React.FC<StatusSelectorProps> = ({
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           sideOffset={5}
-          className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall min-w-[200px] z-30"
+          className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
         >
           <DropdownMenu.Item>
             {

packages/admin-ui/ui/src/components/molecules/switchable-item/index.tsx

@@ -24,7 +24,7 @@ const SwitchableItem: React.FC<SwitchableItemProps> = ({
     <div>
       <div className="flex items-start justify-between">
         <div className="flex flex-col">
-          <div className="flex items-center gap-x-2xsmall">
+          <div className="gap-x-2xsmall flex items-center">
             <p className="inter-base-semibold">{title}</p>
             {tooltip && <IconTooltip content={tooltip} />}
           </div>
@@ -39,7 +39,7 @@ const SwitchableItem: React.FC<SwitchableItemProps> = ({
       </div>
       <div
         className={clsx(
-          "transition-[max-height,opacity] duration-500 ease-in-out overflow-hidden",
+          "overflow-hidden transition-[max-height,opacity] duration-500 ease-in-out",
           {
             "max-h-[1000px] opacity-100": open,
             "max-h-0 opacity-0": !open,

packages/admin-ui/ui/src/components/molecules/table-fileds-filter/index.tsx

@@ -44,7 +44,7 @@ type FieldMenuItemProps = {
 function Chip(props: ChipProps) {
   const { remove, short } = props
   return (
-    <div className="rounded-lg h-[32px] inline-flex gap-1 shrink-0 items-center text-small text-grey-70 border border-gray-70 px-3 mr-1 last:mr-2">
+    <div className="text-small text-grey-70 border-gray-70 mr-1 inline-flex h-[32px] shrink-0 items-center gap-1 rounded-lg border px-3 last:mr-2">
       {short}
       <CrossIcon
         className="text-grey-40 cursor-pointer"
@@ -64,7 +64,7 @@ function FieldMenuItem(props: FieldMenuItemProps) {
     <DropdownMenu.Item>
       <Checkbox
         checked={checked}
-        className="px-[6px] mx-2 h-[32px] hover:bg-grey-10 rounded text-small"
+        className="hover:bg-grey-10 text-small mx-2 h-[32px] rounded px-[6px]"
         onChange={onChange}
         label={
           typeof field.label === "function"
@@ -132,9 +132,9 @@ function FieldsMenu(props: FieldsMenuProps) {
         <Button
           onClick={onTriggerClick}
           variant="secondary"
-          className="rounded-lg h-[32px] px-3 text-small font-semibold text-grey-90 inline-flex"
+          className="text-small text-grey-90 inline-flex h-[32px] rounded-lg px-3 font-semibold"
         >
-          <span className="flex whitespace-nowrap items-center gap-1">
+          <span className="flex items-center gap-1 whitespace-nowrap">
             Add fields <PlusIcon size={14} />
           </span>
         </Button>
@@ -142,7 +142,7 @@ function FieldsMenu(props: FieldsMenuProps) {
 
       <DropdownMenu.Content
         ref={contentRef}
-        className="w-[240px] bg-white shadow rounded-xl p-2"
+        className="w-[240px] rounded-xl bg-white p-2 shadow"
       >
         {fields.map((f) => (
           <FieldMenuItem
@@ -179,8 +179,8 @@ function TableFieldsFilters(props: TableFieldsFilterProps) {
   const visibleFields = _selected.map((id) => fields.find((f) => f.id === id))
 
   return (
-    <div className="flex-wrap flex items-center gap-y-2">
+    <div className="flex flex-wrap items-center gap-y-2">
-      <span className="text-small font-semibold whitespace-nowrap text-gray-500 mr-2">
+      <span className="text-small mr-2 whitespace-nowrap font-semibold text-gray-500">
         Currently editing these fields:
       </span>
 

packages/admin-ui/ui/src/components/molecules/table-pagination/table-pagination.tsx

@@ -40,16 +40,16 @@ export const TablePagination = <T,>({
   return (
     <div
       className={clsx(
-        "inter-small-regular flex items-center justify-between text-grey-50",
+        "inter-small-regular text-grey-50 flex items-center justify-between",
         className
       )}
     >
       <div>
         <p>{`${from} – ${to} of ${count} results`}</p>
       </div>
-      <div className="flex items-center gap-x-small">
+      <div className="gap-x-small flex items-center">
         <p>{`${getState().pagination.pageIndex + 1} of ${getPageCount()}`}</p>
-        <div className="flex items-center gap-x-2xsmall">
+        <div className="gap-x-2xsmall flex items-center">
           <Button
             variant="ghost"
             size="small"

packages/admin-ui/ui/src/components/molecules/table-toaster/index.tsx

@@ -19,7 +19,7 @@ export const TableToasterContainer = ({
       })}
       {...toast?.ariaProps}
     >
-      <div className="flex items-center rounded-rounded bg-grey-90 px-base py-3.5">
+      <div className="rounded-rounded bg-grey-90 px-base flex items-center py-3.5">
         {children}
       </div>
     </div>

packages/admin-ui/ui/src/components/molecules/table/filtering-option.tsx

@@ -24,7 +24,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
   return (
     <div
       className={clsx(
-        "inter-small-regular flex text-grey-50 mr-6 last:mr-0",
+        "inter-small-regular text-grey-50 mr-6 flex last:mr-0",
         className
       )}
       {...props}
@@ -34,11 +34,11 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
         <DropdownMenu.Trigger
           asChild
           className={clsx(
-            "inter-small-regular text-grey-50 flex items-center pl-1.5 pr-0.5 rounded active:bg-grey-5 hover:bg-grey-5",
+            "inter-small-regular text-grey-50 active:bg-grey-5 hover:bg-grey-5 flex items-center rounded pl-1.5 pr-0.5",
             { "bg-grey-5": open }
           )}
         >
-          <div className="flex align-center">
+          <div className="align-center flex">
             {selected}
             <div className="text-grey-40 h-min">
               <ChevronDownIcon size={16} />
@@ -47,7 +47,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           sideOffset={8}
-          className="bg-grey-0 p-2 border border-grey-20 rounded-rounded shadow-dropdown"
+          className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown border p-2"
         >
           {options.map((opt, idx) => (
             <DropdownMenu.DropdownMenuItem
@@ -58,9 +58,9 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
               }}
               disabled={typeof opt.count !== "undefined" && opt.count < 1}
               className={clsx(
-                "py-1.5 my-1 w-48 px-3 flex items-center rounded text-grey-90  hover:border-0 hover:outline-none inter-small-semibold",
+                "text-grey-90 inter-small-semibold my-1 flex w-48 items-center rounded py-1.5  px-3 hover:border-0 hover:outline-none",
                 {
-                  "cursor-pointer hover:bg-grey-10":
+                  "hover:bg-grey-10 cursor-pointer":
                     typeof opt.count === "undefined" || opt.count > 0,
                 }
               )}
@@ -71,7 +71,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
                 </span>
               )}
               <div
-                className={clsx("ml-3 w-full flex justify-between", {
+                className={clsx("ml-3 flex w-full justify-between", {
                   "ml-7": selected !== opt.title,
                   "text-grey-30": (opt.count || 0) < 1,
                 })}

packages/admin-ui/ui/src/components/molecules/table/table-search.tsx

@@ -20,7 +20,7 @@ const TableSearch: React.FC<TableSearchProps> = ({
   return (
     <div
       className={clsx(
-        "inter-small-regular mt-1 transition-color flex text-grey-50 items-center mb-1 pl-1 py-1.5 rounded-rounded border border-grey-20 min-w-content w-60 focus-within:shadow-input focus-within:border-violet-60 bg-grey-5",
+        "inter-small-regular transition-color text-grey-50 rounded-rounded border-grey-20 min-w-content focus-within:shadow-input focus-within:border-violet-60 bg-grey-5 mt-1 mb-1 flex w-60 items-center border py-1.5 pl-1",
         className
       )}
       {...props}
@@ -33,7 +33,7 @@ const TableSearch: React.FC<TableSearchProps> = ({
         type="text"
         value={searchValue}
         className={clsx(
-          "focus:outline-none focus:border-none inter-small-regular w-full bg-transparent focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40"
+          "inter-small-regular focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40 w-full bg-transparent focus:border-none focus:outline-none"
         )}
         placeholder={placeholder}
         onChange={(e) => {

packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx

@@ -22,7 +22,7 @@ const TagGrid: React.FC<TagGridProps> = ({ tags, badgeVariant }) => {
   const remainder = tags.length - columns
 
   return (
-    <div className="flex items-center gap-x-2xsmall w-1/2" ref={containerRef}>
+    <div className="gap-x-2xsmall flex w-1/2 items-center" ref={containerRef}>
       {visibleTags?.map((tag, index) => {
         return (
           <Badge className="mr-2xsmall" key={index} variant={badgeVariant}>

packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx

@@ -175,19 +175,20 @@ const TagInput: React.FC<TagInputProps> = ({
       >
         <div
           className={clsx(
-            "h-auto min-h-[40px] bg-grey-5 shadow-border focus-within:outline-4 focus-within:outline focus-within:outline-violet-60/10 transition-colors focus-within:shadow-focus-border rounded-rounded flex items-center px-3 box-border",
+            "bg-grey-5 shadow-border focus-within:outline-violet-60/10 focus-within:shadow-focus-border rounded-rounded box-border flex h-auto min-h-[40px] items-center px-3 transition-colors focus-within:outline focus-within:outline-4",
             {
-              "shadow-error-border focus-within:shadow-error-border focus-within:outline-rose-60/10": invalid,
+              "shadow-error-border focus-within:shadow-error-border focus-within:outline-rose-60/10":
+                invalid,
             }
           )}
         >
           <div className="h-full">
-            <div className="w-full gap-xsmall flex flex-wrap box-border h-28px py-1.5">
+            <div className="gap-xsmall h-28px box-border flex w-full flex-wrap py-1.5">
               {values.map((v, index) => (
                 <div
                   key={index}
                   className={clsx(
-                    "flex items-center justify-center whitespace-nowrap w-max bg-grey-20 rounded-rounded px-3 py-1 gap-x-1",
+                    "bg-grey-20 rounded-rounded flex w-max items-center justify-center gap-x-1 whitespace-nowrap px-3 py-1",
                     {
                       ["!bg-grey-90"]: index === highlighted,
                     }
@@ -195,7 +196,7 @@ const TagInput: React.FC<TagInputProps> = ({
                 >
                   <span
                     className={clsx(
-                      "inline-block text-grey-50 inter-small-semibold",
+                      "text-grey-50 inter-small-semibold inline-block",
                       {
                         ["text-grey-20"]: index === highlighted,
                       }
@@ -204,7 +205,7 @@ const TagInput: React.FC<TagInputProps> = ({
                     {v}
                   </span>
                   <CrossIcon
-                    className="inline cursor-pointer text-grey-40"
+                    className="text-grey-40 inline cursor-pointer"
                     size="16"
                     onClick={() => handleRemove(index)}
                   />
@@ -216,7 +217,7 @@ const TagInput: React.FC<TagInputProps> = ({
                 onBlur={handleBlur}
                 onKeyDown={handleKeyDown}
                 onChange={handleInput}
-                className={clsx("focus:outline-none bg-transparent flex-1")}
+                className={clsx("flex-1 bg-transparent focus:outline-none")}
                 placeholder={values?.length ? "" : placeholder} // only visible if no tags exist
                 {...props}
               />

packages/admin-ui/ui/src/components/molecules/textarea/index.tsx

@@ -75,17 +75,17 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <div
           className={clsx(
-            "w-full flex flex-col focus-within:shadow-input focus-within:border-violet-60 px-small py-xsmall bg-grey-5 border border-grey-20 rounded-rounded",
+            "focus-within:shadow-input focus-within:border-violet-60 px-small py-xsmall bg-grey-5 border-grey-20 rounded-rounded flex w-full flex-col border",
             {
-              "border-rose-50 focus-within:shadow-cta focus-within:shadow-rose-60/10 focus-within:border-rose-50":
+              "focus-within:shadow-cta focus-within:shadow-rose-60/10 border-rose-50 focus-within:border-rose-50":
                 errors && name && errors[name],
             }
           )}
         >
           <textarea
             className={clsx(
-              "relative text-justify overflow-hidden focus:overflow-auto resize-none bg-inherit outline-none outline-0",
+              "relative resize-none overflow-hidden bg-inherit text-justify outline-none outline-0 focus:overflow-auto",
-              "w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40",
+              "remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full font-normal",
               "line-clamp-[var(--lines)] focus:line-clamp-none"
             )}
             style={

packages/admin-ui/ui/src/components/molecules/timeline-events/event-actionables.tsx

@@ -8,7 +8,7 @@ type EventActionablesProps = {
 
 const EventActionables: React.FC<EventActionablesProps> = ({ actions }) => {
   const EventTrigger = (
-    <button className="btn-ghost py-0 px-2xsmall flex justify-center items-center focus:outline-none focus:ring-2 rounded-base focus:ring-violet-40">
+    <button className="btn-ghost px-2xsmall rounded-base focus:ring-violet-40 flex items-center justify-center py-0 focus:outline-none focus:ring-2">
       <MoreHorizontalIcon size={20} />
     </button>
   )

packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx

@@ -48,12 +48,12 @@ const EventContainer: React.FC<EventContainerProps> = ({
   return (
     <div className="mb-base">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-x-xsmall">
+        <div className="gap-x-xsmall flex items-center">
           <div className={clsx("h-5 w-5", iconColor)}>{icon}</div>
           <div className="inter-small-semibold">{title}</div>
           <div className="inter-small-regular text-grey-50"></div>
         </div>
-        <div className="flex items-center gap-x-xsmall">
+        <div className="gap-x-xsmall flex items-center">
           {noNotification && (
             <Tooltip content="Notifications related to this event are disabled">
               <BellOffIcon size={20} className="text-grey-40" />
@@ -71,8 +71,8 @@ const EventContainer: React.FC<EventContainerProps> = ({
           )}
         </div>
       </div>
-      <div className="flex gap-x-xsmall">
+      <div className="gap-x-xsmall flex">
-        <div className="flex w-5 justify-center pt-base">
+        <div className="pt-base flex w-5 justify-center">
           {!isFirst && <div className="min-h-[24px] w-px" />}
         </div>
         <div className="inter-small-regular mt-2xsmall w-full">
@@ -90,7 +90,7 @@ const EventContainer: React.FC<EventContainerProps> = ({
             {midNode}
           </div>
           {children && isExpanded && (
-            <div className="mt-small w-full pb-base">{children}</div>
+            <div className="mt-small pb-base w-full">{children}</div>
           )}
         </div>
       </div>

packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx

@@ -16,9 +16,9 @@ const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
     return null
   }
   return (
-    <div className="flex items-center gap-x-small mb-base last:mb-0">
+    <div className="gap-x-small mb-base flex items-center last:mb-0">
       {item.thumbnail && (
-        <div className="h-10 w-[30px] rounded-base overflow-hidden">
+        <div className="rounded-base h-10 w-[30px] overflow-hidden">
           <img
             src={item.thumbnail}
             alt={`Thumbnail for ${item.title}`}
@@ -26,8 +26,8 @@ const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
           />
         </div>
       )}
-      <div className="flex flex-col inter-small-regular w-full">
+      <div className="inter-small-regular flex w-full flex-col">
-        <div className="flex items-center justify-between w-full">
+        <div className="flex w-full items-center justify-between">
           <p>{item.title}</p>
           <span className="inter-small-semibold text-violet-60">{`x${item.quantity}`}</span>
         </div>

packages/admin-ui/ui/src/components/molecules/timeline-events/note.tsx

@@ -49,7 +49,7 @@ const Note: React.FC<NoteProps> = ({ event }) => {
         isFirst={event.first}
       >
         <div
-          className={clsx("rounded-2xl px-base py-base", {
+          className={clsx("px-base py-base rounded-2xl", {
             "bg-grey-5": !isMe,
             "bg-violet-5 text-violet-90": isMe,
           })}

packages/admin-ui/ui/src/components/molecules/timeline-events/notification/resend-modal.tsx

@@ -67,11 +67,11 @@ const ResendModal: React.FC<ResendModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-end">
+            <div className="flex h-8 w-full justify-end">
               <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}
                 >
@@ -79,7 +79,7 @@ const ResendModal: React.FC<ResendModalProps> = ({
                 </Button>
                 <Button
                   size="large"
-                  className="w-32 text-small justify-center"
+                  className="text-small w-32 justify-center"
                   variant="primary"
                   type="submit"
                   disabled={isLoading}

packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx

@@ -45,9 +45,8 @@ const getInfo = (edit: OrderEdit): { type: string; user_id: string } => {
 }
 
 const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
-  const { isModalVisible, showModal, setActiveOrderEdit } = useContext(
+  const { isModalVisible, showModal, setActiveOrderEdit } =
-    OrderEditContext
+    useContext(OrderEditContext)
-  )
 
   const { order_edit: orderEdit, isFetching } = useAdminOrderEdit(event.edit.id)
 
@@ -90,8 +89,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
   const onConfirmEditClicked = async () => {
     const shouldDelete = await forceConfirmDialog({
       heading: "Delete Confirm",
-      text:
+      text: "By force confirming you allow the order edit to be fulfilled. You will still have to reconcile payments manually after confirming.",
-        "By force confirming you allow the order edit to be fulfilled. You will still have to reconcile payments manually after confirming.",
       confirmText: "Yes, Force Confirm",
       cancelText: "No, Cancel",
     })
@@ -149,7 +147,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
             {type === "created" ? (
               <>
                 <Button
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                   size="small"
                   variant="ghost"
                   onClick={onContinueEdit}
@@ -158,7 +156,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
                 </Button>
                 <TwoStepDelete
                   onDelete={onDeleteOrderEditClicked}
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                 >
                   Delete the order edit
                 </TwoStepDelete>
@@ -166,7 +164,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
             ) : (
               <>
                 <Button
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                   size="small"
                   variant="ghost"
                   onClick={onCopyConfirmationLinkClicked}
@@ -174,7 +172,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
                   Copy Confirmation-Request Link
                 </Button>
                 <Button
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                   size="small"
                   variant="ghost"
                   onClick={onConfirmEditClicked}
@@ -184,7 +182,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
 
                 <TwoStepDelete
                   onDelete={onCancelOrderEditClicked}
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                 >
                   Cancel Order Edit
                 </TwoStepDelete>
@@ -220,7 +218,7 @@ const OrderEditChanges = ({ orderEdit }) => {
   )
 
   return (
-    <div className="flex flex-col gap-y-base">
+    <div className="gap-y-base flex flex-col">
       {added.length > 0 && (
         <div>
           <span className="inter-small-regular text-grey-50">Added</span>
@@ -264,9 +262,9 @@ const OrderEditChangeItem: React.FC<OrderEditChangeItemProps> = ({
   const lineItem = isAdd ? change.line_item : change.original_line_item
 
   return (
-    <div className="flex gap-x-base mt-xsmall">
+    <div className="gap-x-base mt-xsmall flex">
       <div>
-        <div className="flex h-[40px] w-[30px] rounded-rounded overflow-hidden">
+        <div className="rounded-rounded flex h-[40px] w-[30px] overflow-hidden">
           {lineItem?.thumbnail ? (
             <img src={lineItem.thumbnail} className="object-cover" />
           ) : (
@@ -281,7 +279,7 @@ const OrderEditChangeItem: React.FC<OrderEditChangeItemProps> = ({
             <CopyToClipboard value={lineItem?.variant?.sku} iconSize={14} />
           )}
         </span>
-        <span className="flex inter-small-regular text-grey-50">
+        <span className="inter-small-regular text-grey-50 flex">
           {lineItem?.variant?.options?.map((option) => option.value)}
         </span>
       </div>

packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/index.tsx

@@ -16,7 +16,7 @@ export const ByLine: React.FC<ByLineProps> = ({ user }) => {
     !first_name && !last_name ? email : `${first_name || ""} ${last_name || ""}`
 
   return (
-    <div className="flex inter-small-regular items-center text-grey-50">
+    <div className="inter-small-regular text-grey-50 flex items-center">
       By
       <span className="w-base h-base mx-xsmall">
         <Avatar user={user} font="inter-xsmall-semibold" />

packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx

@@ -59,7 +59,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
     >
       <Button
         size="small"
-        className="w-full border border-grey-20 mb-xsmall"
+        className="border-grey-20 mb-xsmall w-full border"
         variant="ghost"
         onClick={onCopyPaymentLinkClicked}
       >
@@ -67,7 +67,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
       </Button>
       <Button
         size="small"
-        className="w-full border border-grey-20"
+        className="border-grey-20 w-full border"
         variant="ghost"
         onClick={onMarkAsPaidClicked}
       >

packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/refund-required.tsx

@@ -49,7 +49,7 @@ const RefundRequired: React.FC<RequestedProps> = ({ event }) => {
           onClick={() => setShowRefundModal(true)}
           variant="ghost"
           size="small"
-          className="w-full border border-grey-20 mb-xsmall text-rose-50"
+          className="border-grey-20 mb-xsmall w-full border text-rose-50"
         >
           Refund
           {formatAmountWithSymbol({

packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/requested.tsx

@@ -40,7 +40,7 @@ const EditRequested: React.FC<RequestedProps> = ({ event }) => {
         }
       >
         <Button
-          className="w-full border border-grey-20 mb-5"
+          className="border-grey-20 mb-5 w-full border"
           size="small"
           variant="ghost"
           onClick={() => setShowResend(true)}

packages/admin-ui/ui/src/components/molecules/timeline-events/order-placed.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { OrderPlacedEvent } from "../../../hooks/use-build-timeline"
 import { formatAmountWithSymbol } from "../../../utils/prices"
 import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
-import EventContainer, { EventIconColor } from "./event-container"
+import EventContainer from "./event-container"
 
 type OrderPlacedProps = {
   event: OrderPlacedEvent