@reshape-biotech/design-system 2.1.0 → 2.2.0

package/dist/components/drawer/Drawer.stories.svelte

@@ -1,64 +1,231 @@
-<script module>
+<script context="module">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Drawer from './Drawer.svelte';
   import Button from '../button/Button.svelte';
+  import * as Drawer from './';
+  import { Root } from './';
 
   const { Story } = defineMeta({
-    component: Drawer,
     title: 'Design System/Drawer',
-    tags: ['autodocs'],
+    component: Root,
+    parameters: {
+      layout: 'fullscreen',
+    },
+    argTypes: {
+      side: {
+        control: 'select',
+        options: ['left', 'right'],
+        description: 'Side from which the drawer slides in',
+      },
+      width: {
+        control: 'text',
+        description: 'Custom width for the drawer',
+      },
+      withOverlay: {
+        control: 'boolean',
+        description: 'Show overlay behind the drawer',
+      },
+      withClose: {
+        control: 'boolean',
+        description: 'Show close button in the drawer',
+      },
+      closeOnOutsideClick: {
+        control: 'boolean',
+        description: 'Close drawer when clicking outside',
+      },
+    },
   });
-
-  let open = $state(false);
+  const defaultArgs = {
+    side: 'right',
+    width: '460px',
+    withOverlay: false,
+    withClose: true,
+    closeOnOutsideClick: false,
+  };
 </script>
 
-<Story name="Base" asChild>
-  <div class="py-12">
-    <Drawer id="my-drawer" bind:open controlled>
-      {#snippet trigger()}
-        <Button onClick={() => (open = true)}>Open Drawer</Button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <div>
-            <p>Drawer content here</p>
-          </div>
+<Story name="Default" asChild>
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content>
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Drawer Title</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This is the main content of the drawer.</p>
+          <p>
+            The drawer slides in from the {defaultArgs.side} side and provides a focused interface for
+            specific tasks or detailed information.
+          </p>
+          <p>You can customize the width, add an overlay, control the close behavior, and more.</p>
+        </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Cancel</span>
+          </Drawer.Close>
+
+          <Button variant="primary">Save</Button>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
+</Story>
+
+<Story name="Left Side">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="secondary">Open Left Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} side="left">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Left Drawer</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer slides in from the left side.</p>
+          <p>It includes an overlay and closes when clicking outside.</p>
+          <ul class="list-inside list-disc space-y-2">
+            <li>Navigation items</li>
+            <li>Settings</li>
+            <li>User profile</li>
+            <li>Help & support</li>
+          </ul>
         </div>
-      {/snippet}
-    </Drawer>
-  </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Close</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
 </Story>
 
-<Story name="Open" asChild>
-  <div class="py-12">
-    <Drawer id="my-drawer" open controlled>
-      {#snippet trigger()}
-        <Button onClick={() => (open = true)}>Open Drawer</Button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <div>
-            <p>Drawer content here</p>
+<Story name="With Overlay">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open with Overlay</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} withOverlay side="right">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Drawer with Overlay</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer includes a backdrop overlay.</p>
+          <p>Clicking outside the drawer will close it.</p>
+
+          <div class="space-y-3 rounded-lg border border-gray-200 p-4">
+            <h3 class="font-semibold">Form Example</h3>
+            <input
+              type="text"
+              placeholder="Enter your name"
+              class="w-full rounded border border-gray-300 p-2"
+            />
+            <textarea
+              placeholder="Add a comment..."
+              class="h-24 w-full rounded border border-gray-300 p-2"
+            ></textarea>
           </div>
         </div>
-      {/snippet}
-    </Drawer>
-  </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Cancel</span>
+          </Drawer.Close>
+          <Button variant="primary">Submit</Button>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
 </Story>
 
-<Story name="Open Left" asChild>
-  <div class="py-12">
-    <Drawer id="my-drawer" side="left" bind:open controlled>
-      {#snippet trigger()}
-        <Button onClick={() => (open = true)}>Open Drawer</Button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <div>
-            <p>Drawer content here</p>
+<Story name="Custom Width">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Wide Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} class="!w-[800px]" side="right">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Wide Drawer (600px)</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer has a custom width of 600px.</p>
+          <p>Perfect for forms, data tables, or detailed content.</p>
+
+          <div class="grid grid-cols-2 gap-4">
+            <div class="rounded-lg border border-static p-4">
+              <h4 class="mb-2 font-semibold">Column 1</h4>
+              <p>Content for the first column.</p>
+            </div>
+            <div class="rounded-lg border border-static p-4">
+              <h4 class="mb-2 font-semibold">Column 2</h4>
+              <p>Content for the second column.</p>
+            </div>
           </div>
         </div>
-      {/snippet}
-    </Drawer>
-  </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Close</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
+</Story>
+
+<Story name="Without Close Button">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} withClose={false} side="right">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>No Close Button</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer doesn't have a close button in the top-right corner.</p>
+          <p>Users must use the bottom buttons to close it.</p>
+          <p>This is useful for critical actions or multi-step processes.</p>
+        </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Done</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
+</Story>
+
+<Story name="Behavior test" asChild>
+  <Drawer.Root>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content>
+      <div class="flex h-full flex-col p-5">
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer doesn't have a close button in the top-right corner.</p>
+          <p>Users must use the bottom buttons to close it.</p>
+          <p>This is useful for critical actions or multi-step processes.</p>
+        </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close variant="primary">
+            <span>Done</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
 </Story>

package/dist/components/drawer/Drawer.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Drawer from './Drawer.svelte';
+import * as Drawer from './';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/drawer/components/drawer-bottom.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { DrawerBottomProps } from '../types';
+
+  let { children, class: className = '', ...restProps }: DrawerBottomProps = $props();
+
+  const baseClasses = 'border-t border-static -mx-5';
+  const finalClasses = `${baseClasses} ${className}`;
+</script>
+
+<div class={finalClasses} {...restProps}>
+  <div class="flex justify-end gap-4 px-5 py-4 pb-0">
+    {@render children()}
+  </div>
+</div>

package/dist/components/drawer/components/drawer-bottom.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerBottomProps } from '../types';
+declare const DrawerBottom: import("svelte").Component<DrawerBottomProps, {}, "">;
+type DrawerBottom = ReturnType<typeof DrawerBottom>;
+export default DrawerBottom;

package/dist/components/drawer/components/drawer-close.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import Button from '../../button/Button.svelte';
+  import type { DrawerCloseProps } from '../types';
+
+  let {
+    children,
+    variant = 'secondary',
+    disabled = false,
+    class: className = '',
+    ...restProps
+  }: DrawerCloseProps = $props();
+</script>
+
+<Dialog.Close class={className} {...restProps} {disabled}>
+  <Button {variant} {disabled} tabindex={-1}>
+    {@render children()}
+  </Button>
+</Dialog.Close>

package/dist/components/drawer/components/drawer-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerCloseProps } from '../types';
+declare const DrawerClose: import("svelte").Component<DrawerCloseProps, {}, "">;
+type DrawerClose = ReturnType<typeof DrawerClose>;
+export default DrawerClose;

package/dist/components/drawer/components/drawer-content.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import { fly } from 'svelte/transition';
+  import { Icon } from '../../icons';
+  import type { DrawerContentProps } from '../types';
+  import Overlay from './drawer-overlay.svelte';
+
+  let {
+    children,
+    class: className = '',
+    side = 'right',
+    withClose = true,
+    withPortal = true,
+    withOverlay = false,
+    closeOnOutsideClick = false,
+    'data-testid': dataTestId,
+    ...restProps
+  }: DrawerContentProps = $props();
+
+  const baseClasses = 'fixed top-0 h-screen z-50  w-[460px] flex flex-col bg-surface shadow-lg';
+  const sideClasses = side === 'left' ? 'left-0' : 'right-0';
+  const finalClasses = `${baseClasses} ${sideClasses} ${className}`;
+
+  const getTransitionParams = (side: 'left' | 'right') => ({
+    x: side === 'left' ? -300 : 300,
+    duration: 300,
+  });
+</script>
+
+{#snippet withCloseButton()}
+  {#if withClose}
+    <Dialog.Close
+      class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+    >
+      <Icon iconName="X" />
+    </Dialog.Close>
+  {/if}
+{/snippet}
+
+{#snippet content()}
+  <Dialog.Content
+    forceMount
+    {...restProps}
+    interactOutsideBehavior={closeOnOutsideClick ? 'close' : 'ignore'}
+  >
+    {#snippet child({ props, open })}
+      {#if open}
+        <div
+          {...props}
+          class={finalClasses}
+          data-testid={dataTestId}
+          transition:fly={getTransitionParams(side)}
+        >
+          {@render withCloseButton()}
+          {@render children()}
+        </div>
+      {/if}
+    {/snippet}
+  </Dialog.Content>
+{/snippet}
+
+{#if withPortal}
+  <Dialog.Portal>
+    {#if withOverlay}
+      <Overlay />
+    {/if}
+    {@render content()}
+  </Dialog.Portal>
+{:else}
+  {#if withOverlay}
+    <Overlay />
+  {/if}
+  {@render content()}
+{/if}

package/dist/components/drawer/components/drawer-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerContentProps } from '../types';
+declare const DrawerContent: import("svelte").Component<DrawerContentProps, {}, "">;
+type DrawerContent = ReturnType<typeof DrawerContent>;
+export default DrawerContent;

package/dist/components/drawer/components/drawer-overlay.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+  import type { DrawerOverlayProps } from '../types';
+  import { fade } from 'svelte/transition';
+
+  let { children, ...restProps }: DrawerOverlayProps = $props();
+</script>
+
+<Dialog.Overlay forceMount {...restProps}>
+  {#snippet child({ props, open })}
+    {#if open}
+      <div
+        {...props}
+        class="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
+        transition:fade={{ duration: 200 }}
+      >
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+    {/if}
+  {/snippet}
+</Dialog.Overlay>

package/dist/components/drawer/components/drawer-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerOverlayProps } from '../types';
+declare const DrawerOverlay: import("svelte").Component<DrawerOverlayProps, {}, "">;
+type DrawerOverlay = ReturnType<typeof DrawerOverlay>;
+export default DrawerOverlay;

package/dist/components/drawer/components/drawer-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { DrawerTitleProps } from '../types';
+
+  let { children, class: className = '', icon, ...restProps }: DrawerTitleProps = $props();
+
+  const baseClasses = 'text-xl font-semibold tracking-tight text-primary';
+  const finalClasses = `${baseClasses} ${className}`;
+</script>
+
+<div class="space-y-6">
+  {#if icon}
+    <div class="flex justify-start">
+      {@render icon()}
+    </div>
+  {/if}
+  <Dialog.Title class={finalClasses} {...restProps}>
+    {@render children()}
+  </Dialog.Title>
+</div>

package/dist/components/drawer/components/drawer-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerTitleProps } from '../types';
+declare const DrawerTitle: import("svelte").Component<DrawerTitleProps, {}, "">;
+type DrawerTitle = ReturnType<typeof DrawerTitle>;
+export default DrawerTitle;

package/dist/components/drawer/components/drawer-trigger.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { DrawerTriggerProps } from '../types';
+
+  let { children, ...restProps }: DrawerTriggerProps = $props();
+</script>
+
+<Dialog.Trigger {...restProps}>
+  {@render children()}
+</Dialog.Trigger>

package/dist/components/drawer/components/drawer-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerTriggerProps } from '../types';
+declare const DrawerTrigger: import("svelte").Component<DrawerTriggerProps, {}, "">;
+type DrawerTrigger = ReturnType<typeof DrawerTrigger>;
+export default DrawerTrigger;

package/dist/components/drawer/index.d.ts

@@ -1 +1,12 @@
-export { default as Drawer } from './Drawer.svelte';
+import { Dialog } from 'bits-ui';
+import Content from './components/drawer-content.svelte';
+import Overlay from './components/drawer-overlay.svelte';
+import Trigger from './components/drawer-trigger.svelte';
+import Title from './components/drawer-title.svelte';
+import Bottom from './components/drawer-bottom.svelte';
+import Close from './components/drawer-close.svelte';
+export declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export declare const Description: import("svelte").Component<Dialog.DescriptionProps, {}, "ref">;
+export { Content, Overlay, Trigger, Title, Bottom, Close };
+export * from './types';

package/dist/components/drawer/index.js

@@ -1 +1,15 @@
-export { default as Drawer } from './Drawer.svelte';
+import { Dialog } from 'bits-ui';
+// Custom Svelte components
+import Content from './components/drawer-content.svelte';
+import Overlay from './components/drawer-overlay.svelte';
+import Trigger from './components/drawer-trigger.svelte';
+import Title from './components/drawer-title.svelte';
+import Bottom from './components/drawer-bottom.svelte';
+import Close from './components/drawer-close.svelte';
+// Re-export Dialog primitives
+export const Root = Dialog.Root;
+export const Portal = Dialog.Portal;
+export const Description = Dialog.Description;
+// Export custom components
+export { Content, Overlay, Trigger, Title, Bottom, Close };
+export * from './types';

package/dist/components/drawer/types.d.ts

@@ -0,0 +1,36 @@
+import { type DialogContentProps as BitsDialogContentProps, type DialogOverlayProps as BitsDialogOverlayProps, type DialogTriggerProps as BitsDialogTriggerProps, type DialogTitleProps as BitsDialogTitleProps, type DialogCloseProps as BitsDialogCloseProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonVariant } from '../button/Button.svelte';
+export type DrawerSide = 'left' | 'right';
+export type DrawerTriggerProps = {
+    children: Snippet;
+} & BitsDialogTriggerProps;
+export type DrawerOverlayProps = {
+    children?: Snippet;
+} & BitsDialogOverlayProps;
+export type DrawerContentProps = {
+    children: Snippet;
+    class?: string;
+    side?: DrawerSide;
+    withClose?: boolean;
+    withPortal?: boolean;
+    withOverlay?: boolean;
+    closeOnOutsideClick?: boolean;
+} & BitsDialogContentProps;
+export type DrawerTitleProps = {
+    children: Snippet;
+    class?: string;
+    icon?: Snippet;
+} & BitsDialogTitleProps;
+export type DrawerBottomProps = {
+    children: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export type DrawerCloseProps = {
+    children: Snippet;
+    class?: string;
+    variant?: ButtonVariant;
+    onclick?: (event: MouseEvent) => void;
+    disabled?: boolean;
+} & BitsDialogCloseProps;

package/dist/components/drawer/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

package/dist/components/modal/components/modal-content.svelte

@@ -29,27 +29,7 @@
   {/if}
 {/snippet}
 
-{#if withPortal}
-  <Dialog.Portal>
-    <Overlay />
-    <Dialog.Content forceMount {...restProps}>
-      {#snippet child({ props, open })}
-        {#if open}
-          <div
-            {...props}
-            class={finalClasses}
-            data-testid={dataTestId}
-            transition:scale={{ duration: 200, start: 0.95 }}
-          >
-            {@render withCloseButton()}
-            {@render children()}
-          </div>
-        {/if}
-      {/snippet}
-    </Dialog.Content>
-  </Dialog.Portal>
-{:else}
-  <Overlay />
+{#snippet content()}
   <Dialog.Content forceMount {...restProps}>
     {#snippet child({ props, open })}
       {#if open}
@@ -65,4 +45,14 @@
       {/if}
     {/snippet}
   </Dialog.Content>
+{/snippet}
+
+{#if withPortal}
+  <Dialog.Portal>
+    <Overlay />
+    {@render content()}
+  </Dialog.Portal>
+{:else}
+  <Overlay />
+  {@render content()}
 {/if}

package/dist/index.d.ts

@@ -8,8 +8,7 @@ export * as Combobox from './components/combobox/';
 export * from './components/graphs';
 export * from './components/datepicker/';
 export * from './components/divider/';
-export * from './components/drawer/';
-export * from './components/drawer/';
+export * as Drawer from './components/drawer/';
 export * from './components/dropdown/';
 export * from './components/empty-content/';
 export * from './components/icons/';

package/dist/index.js

@@ -9,8 +9,7 @@ export * as Combobox from './components/combobox/';
 export * from './components/graphs';
 export * from './components/datepicker/';
 export * from './components/divider/';
-export * from './components/drawer/';
-export * from './components/drawer/';
+export * as Drawer from './components/drawer/';
 export * from './components/dropdown/';
 export * from './components/empty-content/';
 export * from './components/icons/';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

package/dist/components/drawer/Drawer.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import DrawerLabel from './DrawerLabel.svelte';
-
-  interface Props {
-    id: string;
-    controlled?: boolean;
-    // Open only works when controlled is true
-    open?: boolean;
-    side?: 'left' | 'right';
-    trigger?: Snippet;
-    content: Snippet;
-  }
-
-  let {
-    id,
-    controlled = false,
-    open = $bindable(false),
-    side = 'right',
-    trigger,
-    content,
-  }: Props = $props();
-</script>
-
-<div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
-  {#if controlled}
-    <input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
-  {:else}
-    <input {id} type="checkbox" class="drawer-toggle" />
-  {/if}
-
-  <div class="drawer-content">
-    {@render trigger?.()}
-  </div>
-  <div class="drawer-side" inert={controlled ? !open : false}>
-    <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="h-screen bg-surface sm:w-[460px]">
-      {@render content()}
-    </div>
-  </div>
-</div>

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    id: string;
-    controlled?: boolean;
-    open?: boolean;
-    side?: 'left' | 'right';
-    trigger?: Snippet;
-    content: Snippet;
-}
-declare const Drawer: import("svelte").Component<Props, {}, "open">;
-type Drawer = ReturnType<typeof Drawer>;
-export default Drawer;

package/dist/components/drawer/DrawerLabel.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    id: string;
-    classes?: string;
-    children: Snippet;
-  }
-
-  let { id, classes = '', children }: Props = $props();
-</script>
-
-<label for={id} class={`${classes}`}>{@render children()}</label>
-
-<style>
-  label {
-
-    display: flex;
-
-    width: 100%;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    gap: 0.25rem;
-
-    border-radius: 0.5rem;
-
-    border-width: 1px;
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding: 0.75rem;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
-
-    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-  label:not(:focus-within):hover {
-
-    border-color: #5750ee40
-}
-
-  label:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
-</style>

package/dist/components/drawer/DrawerLabel.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    id: string;
-    classes?: string;
-    children: Snippet;
-}
-declare const DrawerLabel: import("svelte").Component<Props, {}, "">;
-type DrawerLabel = ReturnType<typeof DrawerLabel>;
-export default DrawerLabel;