@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/dist/stories/components/Form/RangeSlider/Size/Size.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Size;
-type Size = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Size: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte

@@ -1,30 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import RangeSlider from '../RangeSlider.svelte';
-import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
-import Icon from '@iconify/svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: RangeSlider,
-    tags: ['autodocs'],
-    argTypes: storyRangeSliderArgTypes,
-});
-let value = $state(30);
-</script>
-
-<!-- RangeSlider icon in front. -->
-<Story name="Icon Before" asChild>
-  <RangeSlider {value}>
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </RangeSlider>
-</Story>
-
-<!-- RangeSlider icon in front. -->
-<Story name="Icon After" asChild>
-  <RangeSlider {value}>
-    {#snippet after()}
-      <Icon icon="material-symbols:download-2" />
-    {/snippet}
-  </RangeSlider>
-</Story>

package/dist/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const WithIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type WithIcon = InstanceType<typeof WithIcon>;
-export default WithIcon;

package/dist/stories/components/Form/RangeSlider/utils/scss/mixins.scss

@@ -1,91 +0,0 @@
-/// Mixin: generate-dodo-ui-range-slider-colors
-/// Generates CSS custom properties for Dodo UI range-slider styles (text & solid)
-/// across different interaction states (default, hover, active).
-/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
-@mixin generate-dodo-ui-range-slider-colors($color-name) {
-  --dodo-ui-RangeSlider-thumb-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-RangeSlider-thumb-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-RangeSlider-thumb-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
-
-  --dodo-ui-RangeSlider-track-filled-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-}
-
-/// Mixin: generate-dodo-ui-range-slider-colors
-/// Generates CSS custom properties for Dodo UI range-slider styles (text & solid)
-/// across different interaction states (default, hover, active).
-/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
-@mixin generate-dodo-ui-range-slider-colors-dark($color-name) {
-  --dodo-ui-RangeSlider-thumb-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-RangeSlider-thumb-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-400);
-  --dodo-ui-RangeSlider-thumb-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
-
-  --dodo-ui-RangeSlider-track-filled-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-}
-
-/// Mixin: generate-dodo-ui-range-slider-color
-/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-range-slider-color($theme) {
-  &--#{$theme} {
-    .NativeRangeSlider {
-      &::-webkit-slider-runnable-track {
-        background-color: var(--dodo-ui-RangeSlider-track-#{$theme}-bg);
-      }
-
-      &::-moz-range-track {
-        background-color: var(--dodo-ui-RangeSlider-track-#{$theme}-bg);
-      }
-
-      &:focus-visible {
-        &::-webkit-slider-thumb {
-          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
-        }
-
-        &::-moz-range-thumb {
-          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
-        }
-      }
-
-      &::-webkit-slider-runnable-track {
-        background: linear-gradient(
-          to right,
-          var(--dodo-ui-RangeSlider-track-filled-#{$theme}-bg) 0%,
-          var(--dodo-ui-RangeSlider-track-filled-#{$theme}-bg)
-            calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%),
-          var(--dodo-ui-RangeSlider-track-bg)
-            calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%),
-          var(--dodo-ui-RangeSlider-track-bg) 100%
-        );
-      }
-
-      &::-moz-range-progress {
-        background: var(--dodo-ui-RangeSlider-track-filled-#{$theme}-bg);
-      }
-
-      // Thumb
-      &::-webkit-slider-thumb {
-        background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-bg);
-
-        &:hover {
-          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
-        }
-      }
-
-      &::-moz-range-thumb {
-        background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-bg);
-
-        &:hover {
-          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
-        }
-      }
-    }
-  }
-}

package/dist/stories/components/Form/Search/Events/Events.stories.svelte

@@ -1,137 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { storySearchArgTypes } from '../Search.stories.svelte';
-import Search from '../Search.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Search,
-    tags: ['autodocs'],
-    argTypes: storySearchArgTypes,
-});
-</script>
-
-<Story
-  name="Search"
-  args={{
-    onsearch: () => {
-      console.log('Search Event');
-    },
-  }}
-/>
-
-<Story
-  name="Clear"
-  args={{
-    onclear: () => {
-      console.log('Clear Event');
-    },
-  }}
-/>
-
-<Story
-  name="Input"
-  args={{
-    oninput: (e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    },
-  }}
-/>
-
-<Story
-  name="Change"
-  args={{
-    onchange: (e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onChange Event', target.value);
-    },
-  }}
-/>
-
-<!-- `e: TextInputFocusEvent` -->
-<Story
-  name="Focus"
-  args={{
-    onfocus: (e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    },
-  }}
-/>
-
-<!-- `e: TextInputFocusEvent` -->
-<Story
-  name="Blur"
-  args={{
-    onblur: (e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    },
-  }}
-/>
-
-<!-- `e: TextInputClipboardEvent` -->
-<Story
-  name="Copy"
-  args={{
-    oncopy: (e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncopy Event', target);
-    },
-  }}
-/>
-
-<!-- `e: TextInputClipboardEvent` -->
-<Story
-  name="Cut"
-  args={{
-    oncut: (e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncut Event', target);
-    },
-  }}
-/>
-
-<!-- `e: TextInputClipboardEvent` -->
-<Story
-  name="Paste"
-  args={{
-    onpaste: (e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onpaste Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="KeyDown"
-  args={{
-    onkeydown: (e: TextInputKeyboardEvent) => {
-      console.log('onkeydown Event', e.key);
-    },
-  }}
-/>
-
-<Story
-  name="KeyPress"
-  args={{
-    onkeypress: (e: TextInputKeyboardEvent) => {
-      console.log('onkeypress Event', e.key);
-    },
-  }}
-/>
-
-<Story
-  name="KeyUp"
-  args={{
-    onkeyup: (e: TextInputKeyboardEvent) => {
-      console.log('onkeyup Event', e.key);
-    },
-  }}
-/>

package/dist/stories/components/Form/Search/Events/Events.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Events = InstanceType<typeof Events>;
-export default Events;

package/dist/stories/components/Form/Search/Roundness/Roundness.stories.svelte

@@ -1,21 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Search from '../Search.svelte';
-  import { storySearchArgTypes } from '../Search.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Search,
-    tags: ['autodocs'],
-    argTypes: storySearchArgTypes,
-    args: { value: 'Hello world!' },
-  });
-</script>
-
-<Story name="Roundness 1" />
-
-<Story name="Roundness 2" args={{ roundness: 2 }} />
-
-<Story name="Roundness 3" args={{ roundness: 3 }} />
-
-<Story name="Roundness 0" args={{ roundness: 0 }} />

package/dist/stories/components/Form/Search/Roundness/Roundness.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Roundness;
-type Roundness = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/stories/components/Form/Search/Search.stories.svelte

@@ -1,40 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Search from './Search.svelte';
-import { componentRoundnessArray } from '../../../../types/roundness.js';
-import { componentSizeArray } from '../../../../types/size.js';
-export const storySearchArgTypes = {
-    roundness: {
-        control: { type: 'select' },
-        options: componentRoundnessArray,
-    },
-    size: {
-        control: { type: 'select' },
-        options: componentSizeArray,
-    },
-};
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Search,
-    tags: ['autodocs'],
-    argTypes: storySearchArgTypes,
-    args: { value: 'Hello world!' },
-});
-let value = $state('Something');
-</script>
-
-<!-- Search with default style -->
-<Story name="Default" />
-
-<Story name="Clearable" asChild>
-  <Search bind:value onclear={() => (value = '')} />
-</Story>
-
-<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
-
-<Story name="No Outline" args={{ outline: false }} />
-
-<Story name="Error" args={{ error: true }} />
-
-<Story name="Disabled" args={{ disabled: true }} />
-
-<Story name="Read only" args={{ readonly: true }} />

package/dist/stories/components/Form/Search/Search.stories.svelte.d.ts

@@ -1,21 +0,0 @@
-import Search from './Search.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storySearchArgTypes: StoryBookArgTypes;
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Search: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Search = InstanceType<typeof Search>;
-export default Search;

package/dist/stories/components/Form/Search/Search.svelte

@@ -1,142 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-import {} from '../../../developer tools/components/DynamicInput/DynamicInput.svelte';
-import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
-import Icon from '@iconify/svelte';
-import UtilityIcon from '../../../developer tools/components/UtilityIcon/UtilityIcon.svelte';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onsearch, onclear, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, customSearchIcon, searchIconPosition = 'before', } = $props();
-let focused = $state(false);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customSearchIconTyped = customSearchIcon;
-function onfocusMod(e) {
-    const eTyped = e;
-    if (onfocus) {
-        onfocus(eTyped);
-    }
-}
-function onblurMod(e) {
-    const eTyped = e;
-    if (onblur) {
-        onblur(eTyped);
-    }
-}
-function onkeydownMod(e) {
-    const eTyped = e;
-    if (onkeydown) {
-        onkeydown(eTyped);
-    }
-    if (e.key === 'Enter' && onsearch) {
-        e.preventDefault();
-        onsearch();
-        return;
-    }
-    if (e.key === 'Escape' && onclear) {
-        e.preventDefault();
-        onclear();
-        return;
-    }
-}
-</script>
-
-{#snippet searchIcon()}
-  <UtilityIcon {size} {disabled}>
-    {#if customSearchIconTyped}
-      {@render customSearchIconTyped()}
-    {:else}
-      <Icon icon="material-symbols:search-rounded" width="24" height="24" />
-    {/if}
-  </UtilityIcon>
-{/snippet}
-
-<div
-  class:outline
-  class:disabled
-  class:error
-  class:focused
-  class={['dodo-ui-Search', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
->
-  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    {#if searchIconPosition === 'before'}
-      <div class="SearchIcon before">
-        {@render searchIcon()}
-      </div>
-    {/if}
-
-    <input
-      type="search"
-      {name}
-      {id}
-      {disabled}
-      bind:this={ref}
-      bind:focused
-      {oninput}
-      {onchange}
-      onfocus={onfocusMod}
-      onblur={onblurMod}
-      {onpaste}
-      {oncopy}
-      {oncut}
-      onkeydown={onkeydownMod}
-      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
-      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
-      {placeholder}
-      bind:value
-      {readonly}
-    />
-
-    {#if value && onclear && !disabled}
-      <div class="SearchClear">
-        <UtilityButton {size} title="Clear" onclick={onclear}>
-          <Icon icon="material-symbols:close-small" width="24" height="24" />
-        </UtilityButton>
-      </div>
-    {/if}
-
-    {#if searchIconPosition === 'after'}
-      <div class="SearchIcon after">
-        {@render searchIcon()}
-      </div>
-    {/if}
-  </InputEnclosure>
-</div>
-
-<style>.dodo-ui-Search input {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
-  margin: 0;
-}
-.dodo-ui-Search input::-webkit-search-decoration, .dodo-ui-Search input::-webkit-search-cancel-button, .dodo-ui-Search input::-webkit-search-results-button, .dodo-ui-Search input::-webkit-search-results-decoration {
-  display: none;
-}
-.dodo-ui-Search .SearchIcon {
-  display: flex;
-}
-.dodo-ui-Search.size--normal .SearchIcon.before {
-  margin-right: calc(var(--dodo-ui-space-small) * 2 * -1);
-}
-.dodo-ui-Search.size--normal input {
-  font-size: 1rem;
-  padding: 0 calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-Search.size--small .SearchIcon.before {
-  margin-right: calc(var(--dodo-ui-space) * -1);
-}
-.dodo-ui-Search.size--small input {
-  padding: 0 var(--dodo-ui-space);
-  font-size: 0.9rem;
-}
-.dodo-ui-Search.size--large .SearchIcon.before {
-  margin-right: calc(var(--dodo-ui-space) * 2 * -1);
-}
-.dodo-ui-Search.size--large input {
-  font-size: 1.1rem;
-  padding: 0 calc(var(--dodo-ui-space) * 2);
-}</style>

package/dist/stories/components/Form/Search/Search.svelte.d.ts

@@ -1,66 +0,0 @@
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-import type { ComponentSize } from '../../../../types/size.js';
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'svelte/elements';
-export interface SearchProps {
-    /** Input ref */
-    ref?: HTMLInputElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** Input value */
-    value?: string;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** disabled state */
-    disabled?: boolean;
-    /** Read only ? */
-    readonly?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** onsearch event handler */
-    onsearch?: () => void;
-    /** onclear event handler */
-    onclear?: () => void;
-    /** oninput event handler */
-    oninput?: FormEventHandler<HTMLInputElement>;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    /** onpaste event handler */
-    onpaste?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncopy event handler */
-    oncopy?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncut event handler */
-    oncut?: ClipboardEventHandler<HTMLInputElement>;
-    /** onkeydown event handler */
-    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-    /** onkeypress event handler */
-    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
-    /** onkeyup event handler */
-    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
-    /** custom Search Icon */
-    customSearchIcon?: () => Snippet;
-    /** search Icon Position */
-    searchIconPosition?: IconPosition;
-}
-import type { IconPosition } from '../../../../types/special.js';
-declare const Search: import("svelte").Component<SearchProps, {}, "ref" | "value">;
-type Search = ReturnType<typeof Search>;
-export default Search;

package/dist/stories/components/Form/Search/SearchIcon/SearchIcon.stories.svelte

@@ -1,27 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Search from '../Search.svelte';
-  import { storySearchArgTypes } from '../Search.stories.svelte';
-  import Icon from '@iconify/svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Search,
-    tags: ['autodocs'],
-    argTypes: storySearchArgTypes,
-  });
-</script>
-
-<Story name="Deafult" />
-
-<Story name="Icon After" args={{ searchIconPosition: 'after' }} />
-
-<Story name="No Search Icon" args={{ searchIconPosition: false }} />
-
-<Story name="CustomSearchIcon" asChild>
-  <Search>
-    {#snippet customSearchIcon()}
-      <Icon icon="line-md:search-twotone" width="24" height="24" />
-    {/snippet}
-  </Search>
-</Story>