@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/dist/stories/components/Form/Select/Positions/Positions.stories.svelte

@@ -1,83 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
-import Select, {} from '../Select.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Select,
-    tags: ['autodocs'],
-    argTypes: storySelectArgTypes,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            story: {
-                height: '600px',
-                inline: false,
-            },
-        },
-    },
-});
-const options = selectOptions;
-let value = $state(options[0]);
-</script>
-
-<Story
-  name="BottomLeft"
-  args={{ options, value, onselect: (val: SelectOption) => (value = val), popupMaxHeight: '200px' }}
-/>
-
-<Story
-  name="BottomCenter"
-  args={{
-    options,
-    value,
-    onselect: (val: SelectOption) => (value = val),
-    popupPositionX: 'center',
-    popupMaxHeight: '200px',
-  }}
-/>
-
-<Story
-  name="BottomRight"
-  args={{
-    options,
-    value,
-    onselect: (val: SelectOption) => (value = val),
-    popupPositionX: 'right',
-    popupMaxHeight: '200px',
-  }}
-/>
-
-<Story
-  name="TopLeft"
-  args={{
-    options,
-    value,
-    onselect: (val: SelectOption) => (value = val),
-    popupPositionY: 'top',
-    popupMaxHeight: '200px',
-  }}
-/>
-
-<Story
-  name="TopCenter"
-  args={{
-    options,
-    value,
-    onselect: (val: SelectOption) => (value = val),
-    popupPositionY: 'top',
-    popupPositionX: 'center',
-    popupMaxHeight: '200px',
-  }}
-/>
-
-<Story
-  name="TopRight"
-  args={{
-    options,
-    value,
-    onselect: (val: SelectOption) => (value = val),
-    popupPositionY: 'top',
-    popupPositionX: 'right',
-    popupMaxHeight: '200px',
-  }}
-/>

package/dist/stories/components/Form/Select/Positions/Positions.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 Positions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Positions = InstanceType<typeof Positions>;
-export default Positions;

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

@@ -1,28 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Select, {} from '../Select.svelte';
-import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Select,
-    tags: ['autodocs'],
-    argTypes: storySelectArgTypes,
-    parameters: {
-        docs: {
-            story: {
-                height: '400px',
-                inline: false,
-            },
-        },
-    },
-});
-const options = selectOptions;
-let value = $state(options[0]);
-</script>
-
-<Story name="Roundness 1" args={{ options, value }} />
-
-<Story name="Roundness 2" args={{ options, value, roundness: 2 }} />
-
-<Story name="Roundness 3" args={{ options, value, roundness: 3 }} />
-
-<Story name="Roundness 0" args={{ options, value, roundness: 0 }} />

package/dist/stories/components/Form/Select/Roundness/Roundness.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 Roundness: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Roundness = InstanceType<typeof Roundness>;
-export default Roundness;

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

@@ -1,118 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Select, {} from './Select.svelte';
-import { componentRoundnessArray } from '../../../../types/roundness.js';
-import { componentSizeArray } from '../../../../types/size.js';
-export const storySelectArgTypes = {
-    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: Select,
-    tags: ['autodocs'],
-    argTypes: storySelectArgTypes,
-    parameters: {
-        docs: {
-            story: {
-                height: '400px',
-                inline: false,
-            },
-        },
-    },
-});
-export const selectOptions = [
-    {
-        value: 1,
-        label: 'One',
-    },
-    {
-        value: 2,
-        label: 'Two',
-    },
-    {
-        value: 3,
-        label: 'Three',
-    },
-    {
-        value: 4,
-        label: 'Four',
-    },
-    {
-        value: 5,
-        label: 'Five',
-    },
-    {
-        value: 6,
-        label: 'Six',
-        disabled: true,
-    },
-    {
-        value: 7,
-        label: 'Seven',
-    },
-    {
-        value: 8,
-        label: 'Eight',
-    },
-    {
-        value: 9,
-        label: 'Nine',
-    },
-];
-const options = selectOptions;
-let value = $state(options[0]);
-</script>
-
-<!-- Select with default style -->
-<Story name="Default" asChild>
-  <Select {options} {value} onselect={(val: SelectOption) => (value = val)} />
-</Story>
-
-<Story name="Searchable" asChild>
-  <Select
-    {options}
-    {value}
-    searchable
-    optionsPlaceholder="No results"
-    onselect={(val: SelectOption) => (value = val)}
-  />
-</Story>
-
-<Story name="Clearable" asChild>
-  <Select
-    {options}
-    {value}
-    clearable
-    onselect={(val: SelectOption) => (value = val)}
-    onclear={() => (value = undefined)}
-    placeholder="Select option"
-  />
-</Story>
-
-<Story name="PopupMaxHeight" asChild>
-  <Select
-    {options}
-    {value}
-    onselect={(val: SelectOption) => (value = val)}
-    popupMaxHeight="200px"
-  />
-</Story>
-
-<Story name="OpenByDefault" asChild>
-  <Select {options} {value} onselect={(val: SelectOption) => (value = val)} open={true} />
-</Story>
-
-<!-- Format look and feel of input content. [More Customizations](?path=/docs/components-form-select-customize--docs)  -->
-<Story name="CustomInputContent" asChild>
-  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
-    {#snippet customInputContent(selectedOption)}
-      {selectedOption.label} 💯💯💯
-    {/snippet}
-  </Select>
-</Story>

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

@@ -1,272 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
-import Icon from '@iconify/svelte';
-import { DynamicInput, DynamicMenu, Popper, } from '../../../../index.js';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, customDropdownArrowIcon: customDropdownArrowIconInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', dropdownArrowPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, open = $bindable(false), } = $props();
-function convertOptionsToDynamicMenuItemOptions(options) {
-    const newOptions = options.map((option) => ({
-        id: `opt-${option.value}`,
-        disabled: option.disabled,
-        label: option.label,
-        meta: option,
-        type: 'button',
-    }));
-    return newOptions;
-}
-let onInputStart = $state(false);
-const selectedOption = $derived(value);
-let searchTerm = $state(value?.label.trim() || '');
-let options = $state(convertOptionsToDynamicMenuItemOptions(optionsRaw));
-let menuRef = $state(undefined);
-$effect(() => {
-    if (!onInputStart) {
-        options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
-        return;
-    }
-    const searchTermSimplified = searchTerm.trim().toLowerCase();
-    if (!searchTermSimplified) {
-        options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
-        return;
-    }
-    options = convertOptionsToDynamicMenuItemOptions(optionsRaw).filter((item) => item?.meta?.label.trim().toLowerCase().includes(searchTermSimplified));
-});
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customInputContentTyped = customInputContentInternal;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customMenuItemContentTyped = customMenuItemContentInternal;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customPopupContentTyped = customPopupContentInternal;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContentInternal;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
-function closeMenu() {
-    open = false;
-    ref?.blur();
-}
-function openMenu() {
-    open = true;
-}
-function onfocusMod(e) {
-    openMenu();
-    if (onfocus) {
-        onfocus(e);
-    }
-}
-function onblurMod(e) {
-    if (onblur) {
-        onblur(e);
-    }
-}
-function onClickOutside() {
-    searchTerm = selectedOption?.label || '';
-    onInputStart = false;
-    closeMenu();
-}
-function onselectMod(val) {
-    searchTerm = val.label;
-    onInputStart = false;
-    closeMenu();
-    if (onselect) {
-        onselect(val);
-    }
-}
-function oninputMod(e) {
-    const target = e.target;
-    searchTerm = target.value;
-    onInputStart = true;
-    if (oninput) {
-        oninput(e);
-    }
-}
-function onclearMod(e) {
-    searchTerm = '';
-    onInputStart = false;
-    closeMenu();
-    if (onclear) {
-        onclear(e);
-    }
-}
-function onKeyBoardEnter(e, selectedItemIndex) {
-    e.preventDefault();
-    const targetOption = options[selectedItemIndex];
-    if (!targetOption) {
-        return;
-    }
-    if (targetOption.disabled) {
-        return;
-    }
-    onselectMod(targetOption.meta);
-}
-</script>
-
-{#snippet selectDropdownArrowIcon()}
-  <UtilityButton {size} title="Dropdown" onclick={onfocusMod}>
-    {#if customDropdownArrowIconTyped}
-      {@render customDropdownArrowIconTyped(open)}
-    {:else if open}
-      <Icon icon="material-symbols:arrow-drop-up-rounded" width="28" height="28" />
-    {:else}
-      <Icon icon="material-symbols:arrow-drop-down-rounded" width="28" height="28" />
-    {/if}
-  </UtilityButton>
-{/snippet}
-
-<div class={['dodo-ui-Select', className].join(' ')}>
-  <Popper
-    fullWidth
-    {open}
-    {onClickOutside}
-    {...popperProps}
-    {popupMaxHeight}
-    {popupPositionX}
-    {popupPositionY}
-    {paperProps}
-    {lockPoistions}
-    {popperHeightForVerticalPosition}
-  >
-    <div
-      class:outline
-      class:disabled
-      class:error
-      class={[
-        'Select',
-        `size--${size}`,
-        `${open ? 'focused' : ''}`,
-        `roundness--${roundness}`,
-        className,
-      ].join(' ')}
-    >
-      <InputEnclosure
-        {outline}
-        {disabled}
-        {error}
-        focused={open}
-        {size}
-        {roundness}
-        {before}
-        {after}
-      >
-        {#if dropdownArrowPosition === 'before'}
-          <div class:before class:open class="DropdownArrow">
-            {@render selectDropdownArrowIcon()}
-          </div>
-        {/if}
-
-        <DynamicInput
-          type="text"
-          {name}
-          {id}
-          {disabled}
-          bind:ref
-          oninput={oninputMod}
-          {onchange}
-          onfocus={onfocusMod}
-          onblur={onblurMod}
-          {onpaste}
-          {oncopy}
-          {oncut}
-          {onkeydown}
-          {onkeypress}
-          {onkeyup}
-          {placeholder}
-          value={searchable ? searchTerm : selectedOption?.label}
-          {readonly}
-          variant={searchable ? 'input' : 'button'}
-          {size}
-        >
-          {#snippet customInputContent()}
-            {#if customInputContentTyped}
-              {@render customInputContentTyped(selectedOption)}
-            {:else}
-              {selectedOption?.label || placeholder}
-            {/if}
-          {/snippet}
-        </DynamicInput>
-
-        {#if selectedOption?.label && clearable && !disabled}
-          <div class:after class="SelectClear">
-            <UtilityButton {size} title="Clear" onclick={onclearMod}>
-              <Icon icon="material-symbols:close-small" width="24" height="24" />
-            </UtilityButton>
-          </div>
-        {/if}
-
-        {#if dropdownArrowPosition === 'after'}
-          <div class:after class:open class="DropdownArrow">
-            {@render selectDropdownArrowIcon()}
-          </div>
-        {/if}
-      </InputEnclosure>
-    </div>
-
-    {#snippet popupChildren()}
-      {#if customPopupContentTyped}
-        {@render customPopupContentTyped(optionsRaw, selectedOption, onselectMod)}
-      {:else}
-        <DynamicMenu
-          bind:ref={menuRef}
-          {menuItemProps}
-          {options}
-          keyboardNavigation
-          onEnter={onKeyBoardEnter}
-          selectedOption={options.find((item) => item.meta?.value === selectedOption?.value)}
-          onclick={(_e, option: DynamicMenuItemOption) => onselectMod(option.meta as SelectOption)}
-          showOptionsPlaceholder
-          {...menuProps}
-        >
-          {#snippet customMenuItemContent(option, selectedOption)}
-            {#if customMenuItemContentTyped}
-              {@render customMenuItemContentTyped(
-                option?.meta as SelectOption,
-                (selectedOption?.meta as SelectOption).value ===
-                  (option?.meta as SelectOption).value,
-              )}
-            {:else}
-              {(option?.meta as SelectOption).label}
-            {/if}
-          {/snippet}
-
-          {#snippet customPlaceholderMenuItemContent()}
-            {#if customPlaceholderMenuItemContentTyped}
-              {@render customPlaceholderMenuItemContentTyped()}
-            {:else}
-              {optionsPlaceholder}
-            {/if}
-          {/snippet}
-        </DynamicMenu>
-      {/if}
-    {/snippet}
-  </Popper>
-</div>
-
-<style>.dodo-ui-Select .Select.size--normal .SelectClear.after {
-  margin-right: calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-Select .Select.size--normal .DropdownArrow.after {
-  margin-right: calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-Select .Select.size--normal .DropdownArrow.before {
-  margin-right: calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-Select .Select.size--small .SelectClear.after {
-  margin-right: var(--dodo-ui-space);
-}
-.dodo-ui-Select .Select.size--small .DropdownArrow.after {
-  margin-right: var(--dodo-ui-space);
-}
-.dodo-ui-Select .Select.size--small .DropdownArrow.before {
-  margin-right: var(--dodo-ui-space);
-}
-.dodo-ui-Select .Select.size--large .SelectClear.after {
-  margin-right: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-Select .Select.size--large .DropdownArrow.after {
-  margin-right: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-Select .Select.size--large .DropdownArrow.before {
-  margin-right: calc(var(--dodo-ui-space) * 2);
-}</style>

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

@@ -1,108 +0,0 @@
-import type { ComponentSize } from '../../../../types/size.js';
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
-export type SelectOption = {
-    value: string | number | boolean | null | undefined;
-    label: string;
-    disabled?: boolean;
-};
-export interface SelectProps {
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** want a searchable Select? */
-    options: SelectOption[];
-    /** want a searchable Select? */
-    searchable?: boolean;
-    /** want a clearable Select? */
-    clearable?: boolean;
-    /** onselect event handler */
-    onselect?: (val: SelectOption) => void;
-    /** onclear event handler */
-    onclear?: MouseEventHandler<HTMLButtonElement>;
-    /** Select ref */
-    ref?: HTMLInputElement | HTMLButtonElement;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** Select value */
-    value: SelectOption | undefined;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** Placeholder if there are no options found*/
-    optionsPlaceholder?: 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;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    /** oninput event handler */
-    oninput?: FormEventHandler<HTMLInputElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onpaste event handler */
-    onpaste?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncopy event handler */
-    oncopy?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncut event handler */
-    oncut?: ClipboardEventHandler<HTMLInputElement>;
-    /** onkeydown event handler */
-    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onkeypress event handler */
-    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onkeyup event handler */
-    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** custom Content Formatting for variant button */
-    customInputContent?: (val: SelectOption) => Snippet;
-    /** custom Menu Item Content */
-    customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
-    /** Custom Popup Content */
-    customPopupContent?: (options: SelectOption[], selectedOption: SelectOption, onselect: (val: SelectOption) => void) => Snippet;
-    /** custom Placeholder MenuItem Content */
-    customPlaceholderMenuItemContent?: () => Snippet;
-    /** PopperPopup Max height. Use css compatible value */
-    popupMaxHeight?: string;
-    /** PaperProps: Paper component props for Popup */
-    paperProps?: Partial<PaperProps>;
-    /** PopperProps: Popper component props */
-    popperProps?: Partial<PopperProps>;
-    /** MenuProps: Menu component props */
-    menuProps?: Partial<MenuProps>;
-    /** MenuItem: Menu component props */
-    menuItemProps?: Partial<MenuItemProps>;
-    /** Dropdown Arrow Icon */
-    customDropdownArrowIcon?: (open: boolean) => Snippet;
-    /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: IconPosition;
-    /** Popup stick horizontally  */
-    popupPositionX?: PositionX;
-    /** Popup stick vertically  */
-    popupPositionY?: PositionY;
-    /** Lock positions, disable auto top, bottom position based  */
-    lockPoistions?: boolean;
-    /** Popper Height For Vertical Position, default 300 */
-    popperHeightForVerticalPosition?: number;
-    /** Control Popup Open state */
-    open?: boolean;
-}
-import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
-import type { IconPosition } from '../../../../types/special.js';
-declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "open">;
-type Select = ReturnType<typeof Select>;
-export default Select;

package/dist/stories/components/Form/Select/Size/Size.stories.svelte

@@ -1,24 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Select, {} from '../Select.svelte';
-import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Select,
-    tags: ['autodocs'],
-    argTypes: storySelectArgTypes,
-    parameters: {
-        docs: {
-            story: {
-                height: '400px',
-                inline: false,
-            },
-        },
-    },
-});
-const options = selectOptions;
-let value = $state(options[0]);
-</script>
-
-<Story name="Normal" args={{ options, value }} />
-<Story name="Small" args={{ options, value, size: 'small' }} />
-<Story name="Large" args={{ options, value, size: 'large' }} />

package/dist/stories/components/Form/Select/Size/Size.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 Size: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Size = InstanceType<typeof Size>;
-export default Size;