@getmicdrop/svelte-components 5.12.0 → 5.14.0

package/dist/recipes/modals/ModalTestWrapper.spec.js

@@ -13,18 +13,18 @@ describe('ModalTestWrapper', () => {
 
   describe('Basic Rendering', () => {
     it('should not render when show is false', () => {
-      render(ModalTestWrapper, { props: { show: false } });
+      render(ModalTestWrapper, { props: { open: false } });
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
 
     it('should render when show is true', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should render modal without errors when no props provided', () => {
       expect(() => {
-        render(ModalTestWrapper, { props: { show: true } });
+        render(ModalTestWrapper, { props: { open: true } });
       }).not.toThrow();
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
@@ -35,7 +35,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: 'Test Modal Title'
           }
         });
@@ -46,7 +46,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             description: 'Test modal description'
           }
         });
@@ -57,7 +57,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             warningText: 'Warning message'
           }
         });
@@ -69,7 +69,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             oncancel
           }
         });
@@ -81,7 +81,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: 'Full Test',
             description: 'Full description',
             warningText: 'Full warning',
@@ -96,13 +96,13 @@ describe('ModalTestWrapper', () => {
   describe('Show Prop Binding', () => {
     it('should render when show is true and not render when false', () => {
       const { unmount: unmount1 } = render(ModalTestWrapper, {
-        props: { show: true }
+        props: { open: true }
       });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
       unmount1();
 
       render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
@@ -110,14 +110,14 @@ describe('ModalTestWrapper', () => {
     it('should support bindable show prop behavior', () => {
       // Test that show can be initially false
       const { unmount } = render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       unmount();
 
       // Test that show can be initially true
       render(ModalTestWrapper, {
-        props: { show: true }
+        props: { open: true }
       });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
@@ -127,7 +127,7 @@ describe('ModalTestWrapper', () => {
     it('should not error when oncancel is not provided', () => {
       expect(() => {
         render(ModalTestWrapper, {
-          props: { show: true }
+          props: { open: true }
         });
       }).not.toThrow();
     });
@@ -136,7 +136,7 @@ describe('ModalTestWrapper', () => {
       const oncancel = vi.fn();
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           oncancel
         }
       });
@@ -149,7 +149,7 @@ describe('ModalTestWrapper', () => {
     it('should update when title changes', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           title: 'Original Title'
         }
       });
@@ -157,7 +157,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         title: 'Updated Title'
       });
 
@@ -167,7 +167,7 @@ describe('ModalTestWrapper', () => {
     it('should update when description changes', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Original Description'
         }
       });
@@ -175,7 +175,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         description: 'Updated Description'
       });
 
@@ -185,7 +185,7 @@ describe('ModalTestWrapper', () => {
     it('should update when warningText changes', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           warningText: 'Original Warning'
         }
       });
@@ -193,7 +193,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         warningText: 'Updated Warning'
       });
 
@@ -203,7 +203,7 @@ describe('ModalTestWrapper', () => {
     it('should handle adding and removing warning text', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Main text'
         }
       });
@@ -211,7 +211,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         description: 'Main text',
         warningText: 'New warning'
       });
@@ -219,7 +219,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         description: 'Main text',
         warningText: ''
       });
@@ -233,7 +233,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: '',
             description: '',
             warningText: ''
@@ -247,7 +247,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: undefined,
             description: undefined,
             warningText: undefined
@@ -260,7 +260,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             oncancel: null
           }
         });
@@ -275,7 +275,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: longTitle,
             description: longDescription,
             warningText: longWarning
@@ -292,7 +292,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: specialTitle,
             description: specialDescription
           }
@@ -305,7 +305,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: '🎉 Success! 你好',
             description: 'Test with émojis and spëcial çharacters',
             warningText: '⚠️ Warning'
@@ -319,7 +319,7 @@ describe('ModalTestWrapper', () => {
   describe('TypeScript Interface Compliance', () => {
     it('should accept all defined Props', () => {
       const validProps = {
-        show: true,
+        open: true,
         title: 'Test',
         description: 'Description',
         warningText: 'Warning',
@@ -339,7 +339,7 @@ describe('ModalTestWrapper', () => {
 
     it('should work with only show prop', () => {
       expect(() => {
-        render(ModalTestWrapper, { props: { show: true } });
+        render(ModalTestWrapper, { props: { open: true } });
       }).not.toThrow();
     });
   });
@@ -347,17 +347,17 @@ describe('ModalTestWrapper', () => {
   describe('Integration with Modal Primitive', () => {
     it('should pass show prop to underlying Modal', () => {
       const { rerender } = render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
-      rerender({ show: true });
+      rerender({ open: true });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should render Modal with correct role', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       const dialog = screen.getByRole('dialog');
       expect(dialog).toBeInTheDocument();
       expect(dialog).toHaveAttribute('aria-modal', 'true');
@@ -368,7 +368,7 @@ describe('ModalTestWrapper', () => {
 
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           oncancel
         }
       });
@@ -380,12 +380,12 @@ describe('ModalTestWrapper', () => {
 
   describe('Accessibility', () => {
     it('should render with proper dialog role', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should have aria-modal attribute', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       const dialog = screen.getByRole('dialog');
       expect(dialog).toHaveAttribute('aria-modal', 'true');
     });
@@ -394,12 +394,12 @@ describe('ModalTestWrapper', () => {
   describe('Component Lifecycle', () => {
     it('should mount without errors', () => {
       expect(() => {
-        render(ModalTestWrapper, { props: { show: true } });
+        render(ModalTestWrapper, { props: { open: true } });
       }).not.toThrow();
     });
 
     it('should unmount without errors', () => {
-      const { unmount } = render(ModalTestWrapper, { props: { show: true } });
+      const { unmount } = render(ModalTestWrapper, { props: { open: true } });
       expect(() => {
         unmount();
       }).not.toThrow();
@@ -407,7 +407,7 @@ describe('ModalTestWrapper', () => {
 
     it('should handle multiple mounts and unmounts', () => {
       for (let i = 0; i < 3; i++) {
-        const { unmount } = render(ModalTestWrapper, { props: { show: true } });
+        const { unmount } = render(ModalTestWrapper, { props: { open: true } });
         expect(screen.getByRole('dialog')).toBeInTheDocument();
         unmount();
       }
@@ -417,19 +417,19 @@ describe('ModalTestWrapper', () => {
   describe('Reactive Behavior', () => {
     it('should react to show prop changes', () => {
       const { rerender } = render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
-      rerender({ show: true });
+      rerender({ open: true });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should maintain modal state during prop updates', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           title: 'Original'
         }
       });
@@ -437,7 +437,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         title: 'Updated',
         description: 'New description'
       });
@@ -451,7 +451,7 @@ describe('ModalTestWrapper', () => {
 
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           oncancel: oncancel1
         }
       });
@@ -459,7 +459,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         oncancel: oncancel2
       });
 
@@ -471,7 +471,7 @@ describe('ModalTestWrapper', () => {
     it('should handle presence of description without warning', () => {
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Main text only'
         }
       });
@@ -481,7 +481,7 @@ describe('ModalTestWrapper', () => {
     it('should handle warning without description', () => {
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           warningText: 'Warning only'
         }
       });
@@ -491,7 +491,7 @@ describe('ModalTestWrapper', () => {
     it('should handle both description and warning', () => {
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Main text',
           warningText: 'Warning text'
         }

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -5,7 +5,7 @@
 
   interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -23,7 +23,7 @@
   }
 
   let {
-    show = $bindable(false),
+    open = $bindable(false),
     title = '',
     description = '',
     warningText = '',
@@ -62,4 +62,4 @@
   {/if}
 {/snippet}
 
-<Modal bind:show {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />
+<Modal bind:open {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />

package/dist/recipes/modals/ModalTestWrapper.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -17,7 +17,7 @@ interface Props {
     /** Footer content */
     footer?: Snippet;
 }
-declare const ModalTestWrapper: import("svelte").Component<Props, {}, "show">;
+declare const ModalTestWrapper: import("svelte").Component<Props, {}, "open">;
 type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
 export default ModalTestWrapper;
 //# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

package/dist/recipes/modals/StatusModal.spec.js

@@ -7,7 +7,7 @@ function setupTest(args = {}) {
   const user = userEvent.setup();
   const { component } = render(StatusModal, {
     props: {
-      show: true,
+      open: true,
       title: "Test Status",
       description: "This is a test description",
       ...args,
@@ -27,7 +27,7 @@ describe("StatusModal Component Tests", () => {
 
   describe("Basic Rendering", () => {
     test("Does not render when show is false", () => {
-      render(StatusModal, { props: { show: false } });
+      render(StatusModal, { props: { open: false } });
       expect(screen.queryByText("Test Status")).not.toBeInTheDocument();
     });
 

package/dist/recipes/modals/StatusModal.svelte

@@ -6,8 +6,8 @@
   import { typography } from '../../tokens/typography';
 
   let {
-    show = $bindable(false),
-    size = "small",
+    open = $bindable(false),
+    size = "sm",
     title = "",
     subtitle = "",
     description = "",
@@ -45,7 +45,7 @@
   };
 
   const closeModal = () => {
-    show = false;
+    open = false;
     onclose?.();
   };
 
@@ -111,7 +111,7 @@
   let buttonVariant = $derived(getButtonVariant(effectiveVariant));
 </script>
 
-<Modal bind:show {size} oncancel={handleClose} {...restProps}>
+<Modal bind:open {size} oncancel={handleClose} {...restProps}>
   {#snippet header()}
     <div class="text-center">
       {#if closeBtn}

package/dist/recipes/modals/StatusModal.svelte.d.ts

@@ -4,7 +4,7 @@ type StatusModal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const StatusModal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     subtitle?: string;
@@ -20,9 +20,9 @@ declare const StatusModal: import("svelte").Component<{
     closeBtn?: boolean;
     onconfirm: any;
     onclose: any;
-} & Record<string, any>, {}, "show">;
+} & Record<string, any>, {}, "open">;
 type $$ComponentProps = {
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     subtitle?: string;

package/dist/stories/ComponentConsolidation.stories.svelte

@@ -326,13 +326,13 @@ grep -r "<button" /Users/peet/repos/performers-portal/src --include="*.svelte
         </div>
       </div>
 
-      <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded text-sm">
-        <strong class="text-blue-700 dark:text-blue-400">New Button variants added:</strong>
-        <ul class="mt-2 list-disc list-inside text-blue-600 dark:text-blue-400 space-y-1">
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="avatar"</code> - Avatar/image trigger buttons (opacity hover)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item"</code> - Dropdown menu items (full width, left-aligned)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item-danger"</code> - Destructive menu items (red text)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="card"</code> - Selectable card buttons (bordered)</li>
+      <div class="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded text-sm">
+        <strong class="text-green-700 dark:text-green-400">Extracted to dedicated components:</strong>
+        <ul class="mt-2 list-disc list-inside text-green-600 dark:text-green-400 space-y-1">
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;AvatarButton&gt;</code> - Avatar/image trigger buttons (opacity hover)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem&gt;</code> - Dropdown menu items (full width, left-aligned)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem danger&gt;</code> - Destructive menu items (red text)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;CardAction&gt;</code> - Selectable card buttons (bordered)</li>
         </ul>
       </div>
     </div>
@@ -505,7 +505,7 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
       </h2>
       <p class="text-sm text-green-700 dark:text-green-400">
         No raw <code class="bg-green-100 dark:bg-green-800 px-1 rounded">&lt;select&gt;</code> elements found outside of primitives.
-        All select functionality uses custom dropdown components (MultiSelect, SelectDropdown).
+        All select functionality uses the MultiSelect custom dropdown component.
       </p>
     </div>
 
@@ -1161,8 +1161,8 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
           <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Are these all necessary, or can some be variants of one component?</span>
         </li>
         <li>
-          <strong>Select vs SelectDropdown vs MultiSelect</strong>
-          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code?</span>
+          <strong>Select vs MultiSelect</strong>
+          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code? (SelectDropdown removed)</span>
         </li>
         <li>
           <strong>Input vs OTPInput vs PlaceAutocomplete</strong>

package/dist/stories/PrimitivesGallery.svelte

@@ -25,6 +25,10 @@
 
   // Button
   import Button from '../primitives/Button/Button.svelte';
+  import MenuItem from '../primitives/MenuItem/MenuItem.svelte';
+  import AvatarButton from '../primitives/AvatarButton/AvatarButton.svelte';
+  import CardAction from '../primitives/CardAction/CardAction.svelte';
+  import NavItem from '../primitives/NavItem/NavItem.svelte';
 
   // Card
   import Card from '../primitives/Card.svelte';
@@ -162,51 +166,51 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Nav Variant (Mobile Navigation)</p>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">NavItem (Mobile Navigation)</p>
         <div class="flex gap-6 items-end bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
-          <Button variant="nav">
+          <NavItem>
             <Home class="w-5 h-5" />
             <span>Home</span>
-          </Button>
-          <Button variant="nav" active={true}>
+          </NavItem>
+          <NavItem active={true}>
             <Notification class="w-5 h-5" />
             <span>Events</span>
-          </Button>
-          <Button variant="nav">
+          </NavItem>
+          <NavItem>
             <Profile class="w-5 h-5" />
             <span>Profile</span>
-          </Button>
+          </NavItem>
         </div>
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Variants</p>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Components</p>
         <div class="flex gap-6 items-start">
           <div class="flex flex-col items-center gap-2">
-            <Button variant="avatar">
+            <AvatarButton>
               <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%238b5cf6'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E" rounded size="md" />
-            </Button>
-            <span class="text-xs text-gray-500">Avatar trigger</span>
+            </AvatarButton>
+            <span class="text-xs text-gray-500">AvatarButton</span>
           </div>
           <div class="w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
-            <Button variant="menu-item">Settings</Button>
-            <Button variant="menu-item">Profile</Button>
+            <MenuItem>Settings</MenuItem>
+            <MenuItem>Profile</MenuItem>
             <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <Button variant="menu-item-danger">Sign out</Button>
+            <MenuItem danger>Sign out</MenuItem>
           </div>
           <div class="w-64 space-y-2">
-            <Button variant="card">
+            <CardAction>
               <span class="flex flex-col">
                 <span class="font-medium">Select this option</span>
                 <span class="text-sm text-gray-500">Description text here</span>
               </span>
-            </Button>
-            <Button variant="card">
+            </CardAction>
+            <CardAction>
               <span class="flex flex-col">
                 <span class="font-medium">Another option</span>
                 <span class="text-sm text-gray-500">More description</span>
               </span>
-            </Button>
+            </CardAction>
           </div>
         </div>
       </div>
@@ -703,7 +707,7 @@
   </section>
 
   <!-- Modal -->
-  <Modal bind:show={showModal}>
+  <Modal bind:open={showModal}>
     {#snippet header()}
       <h3 class="text-lg font-semibold">Example Modal</h3>
     {/snippet}
@@ -717,7 +721,7 @@
   </Modal>
 
   <!-- Drawer -->
-  <Drawer bind:show={showDrawer} placement="right">
+  <Drawer bind:open={showDrawer} placement="right">
     <div class="p-6">
       <h3 class="text-lg font-semibold mb-4">Drawer Content</h3>
       <p class="text-gray-600">This drawer slides in from the right.</p>
@@ -726,7 +730,7 @@
   </Drawer>
 
   <!-- BottomSheet -->
-  <BottomSheet show={showBottomSheet} onclose={() => showBottomSheet = false}>
+  <BottomSheet open={showBottomSheet} onclose={() => showBottomSheet = false}>
     <div class="p-6">
       <h3 class="text-lg font-semibold mb-4">Bottom Sheet</h3>
       <p class="text-gray-600">This sheet slides up from the bottom on mobile.</p>

package/dist/stories/PrimitivesGallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/PrimitivesGallery.svelte.ts"],"names":[],"mappings":"AAuxBA,QAAA,MAAM,iBAAiB,2DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PrimitivesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/PrimitivesGallery.svelte.ts"],"names":[],"mappings":"AA+xBA,QAAA,MAAM,iBAAiB,2DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}