From c8e4904ad85ad1eb6f780fd4056eaecb62d760cd Mon Sep 17 00:00:00 2001
From: jordanarldt <jordan.arldt@bigcommerce.com>
Date: Thu, 20 Mar 2025 12:50:10 -0500
Subject: [PATCH 1/2] feat: Update Modal component

---
 apps/web/vibes/soul/docs/modal.mdx            | 35 +++++-----
 .../soul/examples/primitives/modal/index.tsx  |  4 +-
 .../web/vibes/soul/primitives/modal/index.tsx | 64 +++++++++++++++----
 3 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/apps/web/vibes/soul/docs/modal.mdx b/apps/web/vibes/soul/docs/modal.mdx
index 37e729a6b..d4067cb9b 100644
--- a/apps/web/vibes/soul/docs/modal.mdx
+++ b/apps/web/vibes/soul/docs/modal.mdx
@@ -16,17 +16,17 @@ import { useState } from 'react';
 import { Modal } from '@/vibes/soul/primitives/modal';
 
 function Usage() {
-      const [isOpen, setIsOpen] = useState(true);
+    const [isOpen, setIsOpen] = useState(true);
 
     return (
-        <Modal
-            isOpen={isOpen}
-            setOpen={setIsOpen}
-            title="Example modal"
-            trigger={<button>Open Modal</button>}
-        >
-            <p>Put your content here!</p>
-        </Modal>
+      <Modal
+        isOpen={isOpen}
+        setOpen={setIsOpen}
+        title="Example modal"
+        trigger={<button>Open Modal</button>}
+      >
+        <p>Put your content here!</p>
+      </Modal>
     );
 }
 `}
@@ -40,13 +40,16 @@ This component uses the Dialog component from Radix UI. Refer to the [Radix UI D
 
 ### ModalProps
 
-| Prop        | Type                      | Default |
-| ----------- | ------------------------- | ------- |
-| `isOpen*`   | `boolean`                 |         |
-| `setOpen*`  | `(open: boolean) => void` |         |
-| `title*`    | `string`                  |         |
-| `trigger*`  | `ReactNode`               |         |
-| `children*` | `ReactNode`               |         |
+| Prop         | Type                      | Default |
+| ------------ | ------------------------- | ------- |
+| `className`  | `string`                  |         |
+| `isOpen`     | `boolean`                 |         |
+| `setOpen`    | `(open: boolean) => void` |         |
+| `required`   | `boolean`                 | `false` |
+| `hideHeader` | `boolean`                 | `false` |
+| `title*`     | `string`                  |         |
+| `trigger*`   | `ReactNode`               |         |
+| `children*`  | `ReactNode`               |         |
 
 ### CSS Variables
 
diff --git a/apps/web/vibes/soul/examples/primitives/modal/index.tsx b/apps/web/vibes/soul/examples/primitives/modal/index.tsx
index f89d24feb..e8790533b 100644
--- a/apps/web/vibes/soul/examples/primitives/modal/index.tsx
+++ b/apps/web/vibes/soul/examples/primitives/modal/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useState } from 'react';
-
 import { Button } from '@/vibes/soul/primitives/button';
 import { Modal } from '@/vibes/soul/primitives/modal';
+import { useState } from 'react';
 
 export default function Preview() {
   const [isOpen, setIsOpen] = useState(true);
+
   return (
     <div>
       <div className="bg-background p-8 @container">
diff --git a/apps/web/vibes/soul/primitives/modal/index.tsx b/apps/web/vibes/soul/primitives/modal/index.tsx
index 5985798ae..801af9a5c 100644
--- a/apps/web/vibes/soul/primitives/modal/index.tsx
+++ b/apps/web/vibes/soul/primitives/modal/index.tsx
@@ -1,13 +1,21 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { clsx } from 'clsx';
-import { ReactNode } from 'react';
+import { XIcon } from 'lucide-react';
 
-export interface ModalProps {
-  isOpen: boolean;
-  setOpen: (open: boolean) => void;
+import { Button } from '@/vibes/soul/primitives/button';
+
+export interface ModalProps extends React.PropsWithChildren {
+  className?: string;
+  isOpen?: boolean;
+  setOpen?: (open: boolean) => void;
+  /** Title should always be given for screen reader support. */
   title: string;
-  trigger: ReactNode;
-  children: ReactNode;
+  /** Element to trigger the modal. Not required if the modal is being controlled manually. */
+  trigger?: React.ReactNode;
+  /** If `true`, a user will be required to make a choice by clicking on one of the provided actions. Defaults to `false`. */
+  required?: boolean;
+  /** Hides the header / top of the modal. */
+  hideHeader?: boolean;
 }
 
 /**
@@ -21,23 +29,55 @@ export interface ModalProps {
  * }
  * ```
  */
-export const Modal = function Modal({ isOpen, setOpen, title, trigger, children }: ModalProps) {
+export const Modal = ({
+  className = '',
+  isOpen,
+  setOpen,
+  title,
+  trigger,
+  children,
+  required = false,
+  hideHeader = false,
+}: ModalProps) => {
   return (
     <Dialog.Root onOpenChange={setOpen} open={isOpen}>
-      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
+      {trigger != null && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-30 flex items-center justify-center bg-[var(--modal-overlay-background,hsl(var(--foreground)/50%))] @container">
           <Dialog.Content
             className={clsx(
-              'mx-3 my-10 max-h-[90%] max-w-3xl overflow-y-auto rounded-xl bg-[var(--modal-background,hsl(var(--background)))] px-3 py-5 @sm:px-6 @sm:py-8 @5xl:px-20 @5xl:py-10',
+              'mx-3 my-10 max-h-[90%] max-w-3xl overflow-y-auto rounded-2xl bg-[var(--modal-background,hsl(var(--background)))]',
               'transition ease-out',
               'data-[state=closed]:duration-200 data-[state=open]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out',
               'focus:outline-none data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
+              className,
             )}
-            onOpenAutoFocus={(e) => e.preventDefault()}
+            onEscapeKeyDown={required ? (event) => event.preventDefault() : undefined}
+            onInteractOutside={required ? (event) => event.preventDefault() : undefined}
+            onPointerDownOutside={required ? (event) => event.preventDefault() : undefined}
           >
-            <Dialog.Title className="sr-only">{title}</Dialog.Title>
-            {children}
+            <div className="flex flex-col">
+              <div
+                className={clsx(
+                  'mb-5 flex min-h-10 flex-row items-center pl-5 py-3 border-b border-b-contrast-200',
+                  hideHeader ? 'sr-only' : '',
+                )}
+              >
+                <Dialog.Title asChild>
+                  <h1 className="flex-1 pr-4 text-base font-semibold leading-none">{title}</h1>
+                </Dialog.Title>
+                {!(required || hideHeader) && (
+                  <div className="flex items-center justify-center pr-3">
+                    <Dialog.Close asChild>
+                      <Button shape="circle" size="x-small" variant="ghost">
+                        <XIcon size={20} />
+                      </Button>
+                    </Dialog.Close>
+                  </div>
+                )}
+              </div>
+              <div className={clsx('mb-5 flex-1 px-5', hideHeader ? 'mt-5' : '')}>{children}</div>
+            </div>
           </Dialog.Content>
         </Dialog.Overlay>
       </Dialog.Portal>

From 7dd938d324839cf8e2250a945384c54063c5cd3a Mon Sep 17 00:00:00 2001
From: jordanarldt <jordan.arldt@bigcommerce.com>
Date: Thu, 20 Mar 2025 12:53:08 -0500
Subject: [PATCH 2/2] fix: fix linting issues

---
 apps/web/vibes/soul/examples/form/checkbox-group/index.tsx | 7 ++++---
 apps/web/vibes/soul/examples/form/number-input/index.tsx   | 2 +-
 apps/web/vibes/soul/examples/form/select/index.tsx         | 2 +-
 apps/web/vibes/soul/examples/pages/blog/post/electric.tsx  | 2 +-
 apps/web/vibes/soul/examples/pages/blog/post/luxury.tsx    | 2 +-
 apps/web/vibes/soul/examples/pages/blog/post/warm.tsx      | 2 +-
 apps/web/vibes/soul/examples/pages/cart/electric.tsx       | 2 +-
 apps/web/vibes/soul/examples/pages/cart/luxury.tsx         | 2 +-
 apps/web/vibes/soul/examples/pages/cart/warm.tsx           | 2 +-
 apps/web/vibes/soul/examples/pages/error/index.tsx         | 2 +-
 apps/web/vibes/soul/examples/pages/not-found/electric.tsx  | 2 +-
 apps/web/vibes/soul/examples/pages/product/electric.tsx    | 2 +-
 apps/web/vibes/soul/examples/pages/product/luxury.tsx      | 2 +-
 apps/web/vibes/soul/examples/pages/product/warm.tsx        | 2 +-
 apps/web/vibes/soul/examples/pages/products/electric.tsx   | 2 +-
 apps/web/vibes/soul/examples/pages/products/luxury.tsx     | 2 +-
 apps/web/vibes/soul/examples/primitives/modal/index.tsx    | 3 ++-
 .../vibes/soul/examples/sections/forgot-password/index.tsx | 5 +++--
 .../vibes/soul/examples/sections/reset-password/index.tsx  | 4 ++--
 apps/web/vibes/soul/examples/sections/sign-in/index.tsx    | 5 +++--
 apps/web/vibes/soul/primitives/modal/index.tsx             | 2 +-
 .../web/vibes/soul/sections/address-list-section/index.tsx | 4 ++--
 apps/web/vibes/soul/sections/reviews/index.tsx             | 6 +++---
 23 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/apps/web/vibes/soul/examples/form/checkbox-group/index.tsx b/apps/web/vibes/soul/examples/form/checkbox-group/index.tsx
index 9ef52c664..cd7b7ddd9 100644
--- a/apps/web/vibes/soul/examples/form/checkbox-group/index.tsx
+++ b/apps/web/vibes/soul/examples/form/checkbox-group/index.tsx
@@ -1,22 +1,23 @@
 'use client';
 
-import { CheckboxGroup } from '@/vibes/soul/form/checkbox-group';
 import { useState } from 'react';
 
+import { CheckboxGroup } from '@/vibes/soul/form/checkbox-group';
+
 export default function Preview() {
   const [value, setValue] = useState<string[]>([]);
 
   return (
     <div className="p-10">
       <CheckboxGroup
+        label="Options"
+        onValueChange={setValue}
         options={[
           { label: 'Option 1', value: 'option-1' },
           { label: 'Option 2', value: 'option-2' },
           { label: 'Option 3', value: 'option-3' },
         ]}
-        label="Options"
         value={value}
-        onValueChange={setValue}
       />
     </div>
   );
diff --git a/apps/web/vibes/soul/examples/form/number-input/index.tsx b/apps/web/vibes/soul/examples/form/number-input/index.tsx
index 2ab03c31e..9824126cc 100644
--- a/apps/web/vibes/soul/examples/form/number-input/index.tsx
+++ b/apps/web/vibes/soul/examples/form/number-input/index.tsx
@@ -3,7 +3,7 @@ import { NumberInput } from '@/vibes/soul/form/number-input';
 export default function Preview() {
   return (
     <div className="p-10">
-      <NumberInput errors={['Please select a quantity.']} min={0} max={5} label="Quantity" />
+      <NumberInput errors={['Please select a quantity.']} label="Quantity" max={5} min={0} />
     </div>
   );
 }
diff --git a/apps/web/vibes/soul/examples/form/select/index.tsx b/apps/web/vibes/soul/examples/form/select/index.tsx
index cfd9d9575..f3836e554 100644
--- a/apps/web/vibes/soul/examples/form/select/index.tsx
+++ b/apps/web/vibes/soul/examples/form/select/index.tsx
@@ -4,8 +4,8 @@ export default function Preview() {
   return (
     <div className="p-10">
       <Select
-        name="options"
         label="Option"
+        name="options"
         options={[
           { value: 'option-1', label: 'Option 1' },
           { value: 'option-2', label: 'Option 2' },
diff --git a/apps/web/vibes/soul/examples/pages/blog/post/electric.tsx b/apps/web/vibes/soul/examples/pages/blog/post/electric.tsx
index ec3c8f33c..5d67c71eb 100644
--- a/apps/web/vibes/soul/examples/pages/blog/post/electric.tsx
+++ b/apps/web/vibes/soul/examples/pages/blog/post/electric.tsx
@@ -1,5 +1,4 @@
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import { posts } from '@/vibes/soul/examples/sections/blog-post-list/electric';
@@ -8,6 +7,7 @@ import {
   copyright,
   footerLinks,
 } from '@/vibes/soul/examples/sections/footer/electric';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { BlogPost, BlogPostContent } from '@/vibes/soul/sections/blog-post-content';
diff --git a/apps/web/vibes/soul/examples/pages/blog/post/luxury.tsx b/apps/web/vibes/soul/examples/pages/blog/post/luxury.tsx
index ad8b51ffc..459816f20 100644
--- a/apps/web/vibes/soul/examples/pages/blog/post/luxury.tsx
+++ b/apps/web/vibes/soul/examples/pages/blog/post/luxury.tsx
@@ -1,5 +1,4 @@
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/luxury';
 import { posts } from '@/vibes/soul/examples/sections/blog-post-list/luxury';
@@ -8,6 +7,7 @@ import {
   copyright,
   footerLinks,
 } from '@/vibes/soul/examples/sections/footer/luxury';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { BlogPost, BlogPostContent } from '@/vibes/soul/sections/blog-post-content';
diff --git a/apps/web/vibes/soul/examples/pages/blog/post/warm.tsx b/apps/web/vibes/soul/examples/pages/blog/post/warm.tsx
index 78c025a47..b058c1283 100644
--- a/apps/web/vibes/soul/examples/pages/blog/post/warm.tsx
+++ b/apps/web/vibes/soul/examples/pages/blog/post/warm.tsx
@@ -1,5 +1,4 @@
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/warm';
 import { posts } from '@/vibes/soul/examples/sections/blog-post-list/warm';
@@ -8,6 +7,7 @@ import {
   copyright,
   footerLinks,
 } from '@/vibes/soul/examples/sections/footer/warm';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { BlogPost, BlogPostContent } from '@/vibes/soul/sections/blog-post-content';
diff --git a/apps/web/vibes/soul/examples/pages/cart/electric.tsx b/apps/web/vibes/soul/examples/pages/cart/electric.tsx
index 3eb2fc9eb..dde549d20 100644
--- a/apps/web/vibes/soul/examples/pages/cart/electric.tsx
+++ b/apps/web/vibes/soul/examples/pages/cart/electric.tsx
@@ -1,6 +1,5 @@
 import { getLineItems } from '@/vibes/soul/data/line-items';
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import {
@@ -9,6 +8,7 @@ import {
   lineItemAction,
 } from '@/vibes/soul/examples/sections/cart/actions';
 import { copyright, footerLinks } from '@/vibes/soul/examples/sections/footer/electric';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { Cart } from '@/vibes/soul/sections/cart';
diff --git a/apps/web/vibes/soul/examples/pages/cart/luxury.tsx b/apps/web/vibes/soul/examples/pages/cart/luxury.tsx
index 4252ddf64..c047953e6 100644
--- a/apps/web/vibes/soul/examples/pages/cart/luxury.tsx
+++ b/apps/web/vibes/soul/examples/pages/cart/luxury.tsx
@@ -1,6 +1,5 @@
 import { getLineItems } from '@/vibes/soul/data/line-items';
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import {
@@ -9,6 +8,7 @@ import {
   lineItemAction,
 } from '@/vibes/soul/examples/sections/cart/actions';
 import { copyright, footerLinks } from '@/vibes/soul/examples/sections/footer/electric';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { Cart } from '@/vibes/soul/sections/cart';
diff --git a/apps/web/vibes/soul/examples/pages/cart/warm.tsx b/apps/web/vibes/soul/examples/pages/cart/warm.tsx
index 256f0ea0f..50825997e 100644
--- a/apps/web/vibes/soul/examples/pages/cart/warm.tsx
+++ b/apps/web/vibes/soul/examples/pages/cart/warm.tsx
@@ -1,6 +1,5 @@
 import { getLineItems } from '@/vibes/soul/data/line-items';
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import {
@@ -9,6 +8,7 @@ import {
   lineItemAction,
 } from '@/vibes/soul/examples/sections/cart/actions';
 import { copyright, footerLinks } from '@/vibes/soul/examples/sections/footer/electric';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { Cart } from '@/vibes/soul/sections/cart';
diff --git a/apps/web/vibes/soul/examples/pages/error/index.tsx b/apps/web/vibes/soul/examples/pages/error/index.tsx
index 7a91323b3..559fc796c 100644
--- a/apps/web/vibes/soul/examples/pages/error/index.tsx
+++ b/apps/web/vibes/soul/examples/pages/error/index.tsx
@@ -1,8 +1,8 @@
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import { copyright, footerLinks } from '@/vibes/soul/examples/sections/footer/electric';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { Error } from '@/vibes/soul/sections/error';
diff --git a/apps/web/vibes/soul/examples/pages/not-found/electric.tsx b/apps/web/vibes/soul/examples/pages/not-found/electric.tsx
index a8b5d5334..f88bcf3ad 100644
--- a/apps/web/vibes/soul/examples/pages/not-found/electric.tsx
+++ b/apps/web/vibes/soul/examples/pages/not-found/electric.tsx
@@ -1,8 +1,8 @@
 import { locales } from '@/vibes/soul/data/locales';
-import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { logo, navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import { copyright, footerLinks } from '@/vibes/soul/examples/sections/footer/electric';
+import { action } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { type Product } from '@/vibes/soul/primitives/product-card';
diff --git a/apps/web/vibes/soul/examples/pages/product/electric.tsx b/apps/web/vibes/soul/examples/pages/product/electric.tsx
index 68ce39bb4..7e7a1e08d 100644
--- a/apps/web/vibes/soul/examples/pages/product/electric.tsx
+++ b/apps/web/vibes/soul/examples/pages/product/electric.tsx
@@ -1,9 +1,9 @@
 import { getProducts } from '@/vibes/soul/data';
 import { locales } from '@/vibes/soul/data/locales';
-import { action as subscribeAction } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import { footerLinks, logo } from '@/vibes/soul/examples/sections/footer/electric';
+import { action as subscribeAction } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { action, fields } from '@/vibes/soul/examples/sections/product-detail/action';
 import { product } from '@/vibes/soul/examples/sections/product-detail/electric';
 import { reviews } from '@/vibes/soul/examples/sections/reviews';
diff --git a/apps/web/vibes/soul/examples/pages/product/luxury.tsx b/apps/web/vibes/soul/examples/pages/product/luxury.tsx
index af42b949c..47e778b97 100644
--- a/apps/web/vibes/soul/examples/pages/product/luxury.tsx
+++ b/apps/web/vibes/soul/examples/pages/product/luxury.tsx
@@ -1,9 +1,9 @@
 import { getProducts } from '@/vibes/soul/data';
 import { locales } from '@/vibes/soul/data/locales';
-import { action as subscribeAction } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { navigationLinks } from '@/vibes/soul/examples/primitives/navigation/luxury';
 import { footerLinks, logo } from '@/vibes/soul/examples/sections/footer/luxury';
+import { action as subscribeAction } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { action, fields } from '@/vibes/soul/examples/sections/product-detail/action';
 import { product } from '@/vibes/soul/examples/sections/product-detail/luxury';
 import { reviews } from '@/vibes/soul/examples/sections/reviews';
diff --git a/apps/web/vibes/soul/examples/pages/product/warm.tsx b/apps/web/vibes/soul/examples/pages/product/warm.tsx
index 36ad7df5e..4d1da4070 100644
--- a/apps/web/vibes/soul/examples/pages/product/warm.tsx
+++ b/apps/web/vibes/soul/examples/pages/product/warm.tsx
@@ -1,9 +1,9 @@
 import { getProducts } from '@/vibes/soul/data';
 import { locales } from '@/vibes/soul/data/locales';
-import { action as subscribeAction } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { navigationLinks } from '@/vibes/soul/examples/primitives/navigation/warm';
 import { footerLinks, logo } from '@/vibes/soul/examples/sections/footer/warm';
+import { action as subscribeAction } from '@/vibes/soul/examples/sections/inline-email-form/actions';
 import { action, fields } from '@/vibes/soul/examples/sections/product-detail/action';
 import { product } from '@/vibes/soul/examples/sections/product-detail/warm';
 import { reviews } from '@/vibes/soul/examples/sections/reviews';
diff --git a/apps/web/vibes/soul/examples/pages/products/electric.tsx b/apps/web/vibes/soul/examples/pages/products/electric.tsx
index b74780cdd..08d294836 100644
--- a/apps/web/vibes/soul/examples/pages/products/electric.tsx
+++ b/apps/web/vibes/soul/examples/pages/products/electric.tsx
@@ -1,8 +1,8 @@
 import { getFilters, getProducts, getSortOptions } from '@/vibes/soul/data';
 import { locales } from '@/vibes/soul/data/locales';
-import { breadcrumbs } from '@/vibes/soul/examples/sections/breadcrumbs/electric';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
+import { breadcrumbs } from '@/vibes/soul/examples/sections/breadcrumbs/electric';
 import { copyright, footerLinks, logo } from '@/vibes/soul/examples/sections/footer/electric';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
diff --git a/apps/web/vibes/soul/examples/pages/products/luxury.tsx b/apps/web/vibes/soul/examples/pages/products/luxury.tsx
index 21c3567d5..2a559bb43 100644
--- a/apps/web/vibes/soul/examples/pages/products/luxury.tsx
+++ b/apps/web/vibes/soul/examples/pages/products/luxury.tsx
@@ -1,8 +1,8 @@
 import { getFilters, getProducts, getSortOptions } from '@/vibes/soul/data';
 import { locales } from '@/vibes/soul/data/locales';
-import { breadcrumbs } from '@/vibes/soul/examples/sections/breadcrumbs/luxury';
 import { localeAction } from '@/vibes/soul/examples/primitives/navigation/actions';
 import { navigationLinks } from '@/vibes/soul/examples/primitives/navigation/luxury';
+import { breadcrumbs } from '@/vibes/soul/examples/sections/breadcrumbs/luxury';
 import { copyright, footerLinks, logo } from '@/vibes/soul/examples/sections/footer/luxury';
 import { Banner } from '@/vibes/soul/primitives/banner';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
diff --git a/apps/web/vibes/soul/examples/primitives/modal/index.tsx b/apps/web/vibes/soul/examples/primitives/modal/index.tsx
index e8790533b..ff08fe174 100644
--- a/apps/web/vibes/soul/examples/primitives/modal/index.tsx
+++ b/apps/web/vibes/soul/examples/primitives/modal/index.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+
 import { Button } from '@/vibes/soul/primitives/button';
 import { Modal } from '@/vibes/soul/primitives/modal';
-import { useState } from 'react';
 
 export default function Preview() {
   const [isOpen, setIsOpen] = useState(true);
diff --git a/apps/web/vibes/soul/examples/sections/forgot-password/index.tsx b/apps/web/vibes/soul/examples/sections/forgot-password/index.tsx
index e5de9fc37..bd18f2dd5 100644
--- a/apps/web/vibes/soul/examples/sections/forgot-password/index.tsx
+++ b/apps/web/vibes/soul/examples/sections/forgot-password/index.tsx
@@ -1,8 +1,9 @@
-import { ForgotPassword } from '@/vibes/soul/sections/forgot-password';
-import { schema } from '@/vibes/soul/sections/forgot-password/schema';
 import { SubmissionResult } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
 
+import { ForgotPassword } from '@/vibes/soul/sections/forgot-password';
+import { schema } from '@/vibes/soul/sections/forgot-password/schema';
+
 export default function Preview() {
   return <ForgotPassword action={forgotPasswordAction} />;
 }
diff --git a/apps/web/vibes/soul/examples/sections/reset-password/index.tsx b/apps/web/vibes/soul/examples/sections/reset-password/index.tsx
index 7b5938fa7..ba23e8a7e 100644
--- a/apps/web/vibes/soul/examples/sections/reset-password/index.tsx
+++ b/apps/web/vibes/soul/examples/sections/reset-password/index.tsx
@@ -1,7 +1,7 @@
-import { ResetPassword } from '@/vibes/soul/sections/reset-password';
-
 import { SubmissionResult } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
+
+import { ResetPassword } from '@/vibes/soul/sections/reset-password';
 import { schema } from '@/vibes/soul/sections/reset-password/schema';
 
 export default function Preview() {
diff --git a/apps/web/vibes/soul/examples/sections/sign-in/index.tsx b/apps/web/vibes/soul/examples/sections/sign-in/index.tsx
index fc67effa2..afa78b12c 100644
--- a/apps/web/vibes/soul/examples/sections/sign-in/index.tsx
+++ b/apps/web/vibes/soul/examples/sections/sign-in/index.tsx
@@ -1,8 +1,9 @@
-import { SignIn } from '@/vibes/soul/sections/sign-in';
-import { schema } from '@/vibes/soul/sections/sign-in/schema';
 import { SubmissionResult } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
 
+import { SignIn } from '@/vibes/soul/sections/sign-in';
+import { schema } from '@/vibes/soul/sections/sign-in/schema';
+
 export default function Preview() {
   return <SignIn action={signInAction} forgotPasswordHref="#" />;
 }
diff --git a/apps/web/vibes/soul/primitives/modal/index.tsx b/apps/web/vibes/soul/primitives/modal/index.tsx
index 801af9a5c..8f97bd793 100644
--- a/apps/web/vibes/soul/primitives/modal/index.tsx
+++ b/apps/web/vibes/soul/primitives/modal/index.tsx
@@ -59,7 +59,7 @@ export const Modal = ({
             <div className="flex flex-col">
               <div
                 className={clsx(
-                  'mb-5 flex min-h-10 flex-row items-center pl-5 py-3 border-b border-b-contrast-200',
+                  'mb-5 flex min-h-10 flex-row items-center border-b border-b-contrast-200 py-3 pl-5',
                   hideHeader ? 'sr-only' : '',
                 )}
               >
diff --git a/apps/web/vibes/soul/sections/address-list-section/index.tsx b/apps/web/vibes/soul/sections/address-list-section/index.tsx
index ebec6e7cd..b61dc139a 100644
--- a/apps/web/vibes/soul/sections/address-list-section/index.tsx
+++ b/apps/web/vibes/soul/sections/address-list-section/index.tsx
@@ -14,10 +14,10 @@ import {
 import { useFormStatus } from 'react-dom';
 import { z } from 'zod';
 
-import { Badge } from '@/vibes/soul/primitives/badge';
-import { Button } from '@/vibes/soul/primitives/button';
 import { DynamicForm } from '@/vibes/soul/form/dynamic-form';
 import { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';
+import { Badge } from '@/vibes/soul/primitives/badge';
+import { Button } from '@/vibes/soul/primitives/button';
 import { Spinner } from '@/vibes/soul/primitives/spinner';
 import { toast } from '@/vibes/soul/primitives/toaster';
 
diff --git a/apps/web/vibes/soul/sections/reviews/index.tsx b/apps/web/vibes/soul/sections/reviews/index.tsx
index c53bb6285..8a4cbf13f 100644
--- a/apps/web/vibes/soul/sections/reviews/index.tsx
+++ b/apps/web/vibes/soul/sections/reviews/index.tsx
@@ -1,8 +1,8 @@
 import { Stream, Streamable } from '@/vibes/soul/lib/streamable';
 import { CursorPagination, CursorPaginationInfo } from '@/vibes/soul/primitives/cursor-pagination';
 import { Rating } from '@/vibes/soul/primitives/rating';
-import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 import * as Skeleton from '@/vibes/soul/primitives/skeleton';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 interface Review {
   id: string;
@@ -209,9 +209,9 @@ function TotalCountSkeleton() {
   return (
     <Skeleton.Root className="w-full group-has-[[data-pending]]/reviews:animate-pulse" pending>
       <Skeleton.Text
-        data-pending
         characterCount={3}
         className="rounded-md text-xl @xl:my-5 @xl:text-2xl"
+        data-pending
       />
     </Skeleton.Root>
   );
@@ -235,7 +235,7 @@ function AverageRatingSkeleton() {
 function RatingSkeleton() {
   return (
     <Skeleton.Root className="w-full group-has-[[data-pending]]/reviews:animate-pulse" pending>
-      <Skeleton.Box data-pending className="h-6 w-32 rounded-md" />
+      <Skeleton.Box className="h-6 w-32 rounded-md" data-pending />
     </Skeleton.Root>
   );
 }