@flightlesslabs/dodo-ui 0.17.2 → 0.19.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export type { ComponentRoundness } from './types/roundness.js';
 export type { ComponentSize } from './types/size.js';
 export type { ComponentWeight } from './types/weight.js';
 export type { PositionY, PositionX } from './types/position.js';
+export type { IconPosition } from './types/special.js';
 /** developer tools: helpers: logger */
 export { default as createLogger } from './stories/developer tools/helpers/logger/logger.js';
 export type { LogLevel, LoggerOptions, } from './stories/developer tools/helpers/logger/logger.js';
@@ -50,7 +51,7 @@ export { default as Message } from './stories/components/Form/Message/Message.sv
 export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
 /** Form: Select */
 export { default as Select } from './stories/components/Form/Select/Select.svelte';
-export type { SelectOption, SelectDropdownArrowPosition, SelectProps, } from './stories/components/Form/Select/Select.svelte';
+export type { SelectOption, SelectProps } from './stories/components/Form/Select/Select.svelte';
 /** Form: NumericInput */
 export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
 export type { NumericInputProps } from './stories/components/Form/NumericInput/NumericInput.svelte';
@@ -69,6 +70,9 @@ export type { CheckboxProps } from './stories/components/Form/Checkbox/Checkbox.
 /** Form: Radio */
 export { default as Radio } from './stories/components/Form/Radio/Radio.svelte';
 export type { RadioProps } from './stories/components/Form/Radio/Radio.svelte';
+/** Form: Search */
+export { default as Search } from './stories/components/Form/Search/Search.svelte';
+export type { SearchProps } from './stories/components/Form/Search/Search.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';
@@ -89,6 +93,9 @@ export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte'
 export type { GridRowProps } from './stories/components/Layout/Grid/Row/Row.svelte';
 export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
 export type { GridColumnSize, GridColumnProps, } from './stories/components/Layout/Grid/Column/Column.svelte';
+/** Layout: Accordian */
+export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
+export type { AccordianProps, AccordianToggleEvent, } from './stories/components/Layout/Accordian/Accordian.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export type { CalendarProps, CalendarActiveSection, } from './stories/components/Info/Calendar/Calendar.svelte';

package/dist/index.js

@@ -43,6 +43,8 @@ export { default as Toggle } from './stories/components/Form/Toggle/Toggle.svelt
 export { default as Checkbox } from './stories/components/Form/Checkbox/Checkbox.svelte';
 /** Form: Radio */
 export { default as Radio } from './stories/components/Form/Radio/Radio.svelte';
+/** Form: Search */
+export { default as Search } from './stories/components/Form/Search/Search.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 /** Layout: Separator */
@@ -55,6 +57,8 @@ export { default as DynamicMenu } from './stories/components/Layout/Menu/Dynamic
 export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
 export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
 export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
+/** Layout: Accordian */
+export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';

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

@@ -160,6 +160,7 @@ function onclearMod(e) {
             : getMoment(value, undefined, { timezone, utc }).format(format)}
           {readonly}
           variant={editable ? 'input' : 'button'}
+          {size}
         >
           {#snippet customInputContent()}
             {#if customInputContentTyped}

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

@@ -156,6 +156,7 @@ $effect(() => {
       {readonly}
       variant="input"
       bind:value
+      {size}
     />
   </InputEnclosure>
 </div>

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

@@ -64,6 +64,7 @@ function ontoggleMod(e) {
       bind:value
       {readonly}
       variant="input"
+      {size}
     />
 
     {#if passwordToggle && !disabled}

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

@@ -0,0 +1,137 @@
+<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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,142 @@
+<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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,27 @@
+<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>

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

@@ -0,0 +1,26 @@
+export default SearchIcon;
+type SearchIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SearchIcon: $$__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/Size/Size.stories.svelte

@@ -0,0 +1,17 @@
+<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="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

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

@@ -0,0 +1,26 @@
+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;
+}