@flightlesslabs/dodo-ui 0.6.6 → 0.7.1

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

@@ -9,18 +9,21 @@
 </script>
 
 <script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
+import DynamicInput, {} from '../../../developer tools/components/DynamicInput/DynamicInput.svelte';
 let { type = 'text', size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 function onfocusMod(e) {
+    const eTyped = e;
     focused = true;
     if (onfocus) {
-        onfocus(e);
+        onfocus(eTyped);
     }
 }
 function onblurMod(e) {
+    const eTyped = e;
     focused = false;
     if (onblur) {
-        onblur(e);
+        onblur(eTyped);
     }
 }
 </script>
@@ -33,11 +36,12 @@ function onblurMod(e) {
   class={['dodo-ui-TextInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
   <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <input
+    <DynamicInput
       {type}
       {name}
       {id}
       {disabled}
+      bind:ref
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -46,32 +50,9 @@ function onblurMod(e) {
       {oncopy}
       {oncut}
       {placeholder}
-      {readonly}
       bind:value
-      bind:this={ref}
+      {readonly}
+      variant="input"
     />
   </InputEnclosure>
 </div>
-
-<style>.dodo-ui-TextInput input {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
-}
-.dodo-ui-TextInput.size--normal input {
-  font-size: 1rem;
-  padding: 0 calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-TextInput.size--small input {
-  padding: 0 var(--dodo-ui-space);
-  font-size: 0.9rem;
-}
-.dodo-ui-TextInput.size--large input {
-  font-size: 1.1rem;
-  padding: 0 calc(var(--dodo-ui-space) * 2);
-}</style>

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

@@ -1,3 +1,7 @@
+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 } from 'svelte/elements';
 export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
 export declare const textInputTypeArray: TextInputType[];
 export type TextInputFocusEvent = FocusEvent & {
@@ -6,11 +10,10 @@ export type TextInputFocusEvent = FocusEvent & {
 export type TextInputClipboardEvent = ClipboardEvent & {
     currentTarget: EventTarget & HTMLInputElement;
 };
-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 } from 'svelte/elements';
-interface TextInputProps {
+export type TextInputInputEvent = Event & {
+    currentTarget: EventTarget & HTMLInputElement;
+};
+export interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
     /** Input ref */

package/dist/stories/components/Layout/Menu/Menu.stories.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Menu from './Menu.svelte';
+import MenuItem from './MenuItem/MenuItem.svelte';
+import { Separator } from '../../../../index.js';
+export const storyMenuArgTypes = {};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Menu,
+    tags: ['autodocs'],
+    argTypes: storyMenuArgTypes,
+});
+</script>
+
+<!-- Default Menu -->
+<Story name="Default" asChild>
+  <Menu>
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>
+
+<!-- Fixed width and height -->
+<Story name="FixedSize" asChild>
+  <Menu width="200px" height="300px">
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>
+
+<!-- MenuItems With Separator -->
+<Story name="WithSeparator" asChild>
+  <Menu separator>
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>
+
+<!-- MenuItems Grouped in Sections. [Separator](?path=/docs/components-layout-separator--docs) -->
+<Story name="Sections" asChild>
+  <Menu width="200px">
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Cut Special</MenuItem>
+    <MenuItem>Cut Selected</MenuItem>
+    <Separator />
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Copy Special</MenuItem>
+    <MenuItem>Copy Selected</MenuItem>
+    <Separator />
+    <MenuItem>Paste</MenuItem>
+    <MenuItem>Paste Special</MenuItem>
+    <MenuItem>Paste Selected</MenuItem>
+  </Menu>
+</Story>
+
+<!-- MenuItems With some options disabled -->
+<Story name="Disabled" asChild>
+  <Menu>
+    <MenuItem>Cut</MenuItem>
+    <MenuItem disabled>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>

package/dist/stories/components/Layout/Menu/Menu.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import Menu from './Menu.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyMenuArgTypes: 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 Menu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

package/dist/stories/components/Layout/Menu/Menu.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>import {} from 'svelte';
+</script>
+
+<script lang="ts">import { setContext } from 'svelte';
+let { children, id, class: className = '', width, height, ref = $bindable(), size, separator, } = $props();
+setContext('MenuItemSize', () => size);
+setContext('MenuItemSeparator', () => separator);
+</script>
+
+<ul
+  class={['dodo-ui-Menu', className].join(' ')}
+  {id}
+  bind:this={ref}
+  style={`${width ? `width:${width};` : ''}
+  ${height ? `height:${height};` : ''}
+  `}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</ul>
+
+<style>.dodo-ui-Menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: inherit;
+  outline: 0;
+}</style>

package/dist/stories/components/Layout/Menu/Menu.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Snippet } from 'svelte';
+import type { ComponentSize } from '../../../../types/size.js';
+export interface MenuProps {
+    /** Menu contents goes here */
+    children?: Snippet;
+    /** Menu ref */
+    ref?: HTMLUListElement;
+    /** Custom css class */
+    class?: string;
+    /** Menu Width */
+    width?: string;
+    /** Menu Height */
+    height?: string;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** Menu Separator */
+    separator?: boolean;
+    /** Id */
+    id?: string;
+}
+declare const Menu: import("svelte").Component<MenuProps, {}, "ref">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import MenuItem, { menuItemTypeArray } from './MenuItem.svelte';
+import { componentSizeArray } from '../../../../../types/size.js';
+export const storyMenuItemArgTypes = {
+    type: {
+        control: { type: 'select' },
+        options: menuItemTypeArray,
+    },
+    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: MenuItem,
+    tags: ['autodocs'],
+    argTypes: storyMenuItemArgTypes,
+});
+</script>
+
+<!-- Default MenuItem -->
+<Story name="Default">Menu Item</Story>
+
+<!-- With Separator -->
+<Story name="WithSeparator" args={{ separator: true }}>Menu Item</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Menu Item</Story>
+
+<Story name="Selected" args={{ selected: true }}>Menu Item</Story>

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { StoryBookArgTypes } from '../../../../../storybook-types.js';
+import MenuItem from './MenuItem.svelte';
+export declare const storyMenuItemArgTypes: 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 MenuItem: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MenuItem = InstanceType<typeof MenuItem>;
+export default MenuItem;

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.svelte

@@ -0,0 +1,164 @@
+<script lang="ts" module>import {} from 'svelte';
+export const menuItemTypeArray = ['text', 'button', 'link'];
+</script>
+
+<script lang="ts">import { getContext } from 'svelte';
+let { children, id, class: className = '', type = 'text', href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, disabled = false, selected = false, separator: separatorInternal, onclick, size: sizeInternal, ref = $bindable(), } = $props();
+const hover = false;
+const sizeMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (getContext('MenuItemSize') ? getContext('MenuItemSize')() : undefined);
+const size = sizeMenu || sizeInternal || 'normal';
+const separatorMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (getContext('MenuItemSeparator') ? getContext('MenuItemSeparator')() : undefined);
+const separator = separatorMenu !== undefined ? separatorMenu : separatorInternal || false;
+</script>
+
+{#snippet menuItemContent()}
+  {#if children}
+    {@render children()}
+  {/if}
+{/snippet}
+
+<li
+  class:disabled
+  class:separator
+  class:selected
+  class:hover
+  class={['dodo-ui-MenuItem', `size--${size}`, className].join(' ')}
+  {id}
+  bind:this={ref}
+>
+  {#if type === 'link'}
+    <a
+      class:disabled
+      class:selected
+      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
+      {href}
+      {download}
+      {hreflang}
+      {media}
+      {ping}
+      {rel}
+      {target}
+      type={anchorMediaType}
+      {referrerpolicy}
+    >
+      {@render menuItemContent()}
+    </a>
+  {:else if type === 'button'}
+    <button
+      class:disabled
+      class:selected
+      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
+      {onclick}
+      {disabled}
+    >
+      {@render menuItemContent()}
+    </button>
+  {:else}
+    <div
+      class:disabled
+      class:selected
+      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
+    >
+      {@render menuItemContent()}
+    </div>
+  {/if}
+</li>
+
+<style>:global(:root) {
+  --dodo-ui-MenuItem-selected-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-800) 4%,
+    transparent
+  );
+  --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
+  --dodo-ui-MenuItem-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-800) 11%,
+    transparent
+  );
+  --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
+  --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-400);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-MenuItem-selected-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-800) 4%,
+    transparent
+  );
+  --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
+  --dodo-ui-MenuItem-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-800) 15%,
+    transparent
+  );
+  --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
+  --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-500);
+}
+
+.dodo-ui-MenuItem {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+.dodo-ui-MenuItem.separator {
+  border-bottom: 1px solid var(--dodo-ui-MenuItem-separator-color);
+}
+.dodo-ui-MenuItem .MenuItem-type {
+  cursor: pointer;
+  transition: all 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  border: 0;
+  outline: 0;
+  background-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  width: 100%;
+}
+.dodo-ui-MenuItem .MenuItem-type.selected {
+  background-color: var(--dodo-ui-MenuItem-selected-bg);
+}
+.dodo-ui-MenuItem .MenuItem-type:hover {
+  background-color: var(--dodo-ui-MenuItem-hover-bg);
+}
+.dodo-ui-MenuItem .MenuItem-type:active {
+  background-color: var(--dodo-ui-MenuItem-active-bg);
+}
+.dodo-ui-MenuItem .MenuItem-type.size--normal {
+  min-height: var(--dodo-ui-element-height-normal);
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-MenuItem .MenuItem-type.size--small {
+  min-height: var(--dodo-ui-element-height-small);
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+}
+.dodo-ui-MenuItem .MenuItem-type.size--large {
+  min-height: var(--dodo-ui-element-height-large);
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-MenuItem .MenuItem-type.disabled {
+  cursor: initial;
+  background-color: transparent;
+  color: var(--dodo-ui-MenuItem-disabled-color);
+}
+.dodo-ui-MenuItem .MenuItem-type.disabled:hover {
+  background-color: transparent;
+  color: var(--dodo-ui-MenuItem-disabled-color);
+}
+.dodo-ui-MenuItem .MenuItem-type.disabled:active {
+  background-color: transparent;
+  color: var(--dodo-ui-MenuItem-disabled-color);
+}
+.dodo-ui-MenuItem.hover .MenuItem-type {
+  background-color: var(--dodo-ui-MenuItem-hover-bg);
+}</style>

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { ButtonLinkReferrerpolicy, ButtonLinkTarget } from '../../../Form/Button/Button.svelte';
+import { type Snippet } from 'svelte';
+import type { MouseEventHandler } from 'svelte/elements';
+export type MenuItemType = 'text' | 'button' | 'link';
+export declare const menuItemTypeArray: MenuItemType[];
+export interface MenuItemProps {
+    /** MenuItem contents goes here */
+    children?: Snippet;
+    /** MenuItem ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** Id */
+    id?: string;
+    /** Menu Item type */
+    type?: MenuItemType;
+    /** Menu Item type */
+    selected?: boolean;
+    /** Separator */
+    separator?: boolean;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /**  disabled state */
+    disabled?: boolean;
+    /** link href */
+    href?: string;
+    /** Link button: download  */
+    download?: any;
+    /** Link button: hreflang  */
+    hreflang?: string | undefined | null;
+    /** Link button: media  */
+    media?: string | undefined | null;
+    /** Link button: ping  */
+    ping?: string | undefined | null;
+    /** Link button: rel  */
+    rel?: string | undefined | null;
+    /** Link button: target  */
+    target?: ButtonLinkTarget;
+    /** Link button: Type  */
+    anchorMediaType?: string | undefined | null;
+    /** Link button: referrerpolicy  */
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+}
+import type { ComponentSize } from '../../../../../types/size.js';
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "ref">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte

@@ -0,0 +1,16 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import MenuItem from '../MenuItem.svelte';
+  import { storyMenuItemArgTypes } from '../MenuItem.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: MenuItem,
+    tags: ['autodocs'],
+    argTypes: storyMenuItemArgTypes,
+  });
+</script>
+
+<Story name="Normal">Menu Item</Story>
+<Story name="Small" args={{ size: 'small' }}>Menu Item</Story>
+<Story name="Large" args={{ size: 'large' }}>Menu Item</Story>

package/dist/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte

@@ -0,0 +1,21 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import MenuItem from '../MenuItem.svelte';
+  import { storyMenuItemArgTypes } from '../MenuItem.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: MenuItem,
+    tags: ['autodocs'],
+    argTypes: storyMenuItemArgTypes,
+  });
+</script>
+
+<Story name="Text">Menu Item</Story>
+<Story
+  name="Link"
+  args={{ type: 'link', href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
+>
+  Menu Item
+</Story>
+<Story name="Button" args={{ type: 'button', onclick: () => {} }}>Menu Item</Story>

package/dist/stories/components/{Form/SimpleSelect/WithIcon/WithIcon.stories.svelte.d.ts → Layout/Menu/MenuItem/Type/Type.stories.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default WithIcon;
-type WithIcon = SvelteComponent<{
+export default Type;
+type Type = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const WithIcon: $$__sveltets_2_IsomorphicComponent<{
+declare const Type: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/stories/components/Layout/Menu/Size/Size.stories.svelte

@@ -0,0 +1,37 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Menu from '../Menu.svelte';
+  import { storyMenuArgTypes } from '../Menu.stories.svelte';
+  import MenuItem from '../MenuItem/MenuItem.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Menu,
+    tags: ['autodocs'],
+    argTypes: storyMenuArgTypes,
+  });
+</script>
+
+<Story name="Normal" asChild>
+  <Menu>
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>
+
+<Story name="Small" asChild>
+  <Menu size="small">
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>
+
+<Story name="Large" asChild>
+  <Menu size="large">
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </Menu>
+</Story>

package/dist/stories/components/{Form/SimpleSelect/Roundness/Roundness.stories.svelte.d.ts → Layout/Menu/Size/Size.stories.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default Roundness;
-type Roundness = SvelteComponent<{
+export default Size;
+type Size = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/stories/components/Layout/Paper/Color/Color.stories.svelte

@@ -54,7 +54,7 @@
   Hola!
 </Story>
 
-<!-- Paper with Custom Backgroun and Border colors -->
+<!-- Paper with Custom Background and Border colors -->
 <Story
   name="Custom Color"
   args={{ height: '100px', customBackgroundColor: '#ffdfad', customBorderColor: '#fbc674' }}

package/dist/stories/components/Layout/Paper/Paper.stories.svelte

@@ -37,7 +37,7 @@ const { Story } = defineMeta({
   Hola!
 </Story>
 
-<!-- Paper with Custom Backgroun and Border colors -->
+<!-- Paper with Custom Background and Border colors -->
 <Story
   name="Custom Color"
   args={{ height: '100px', customBackgroundColor: '#ffdfad', customBorderColor: '#fbc674' }}

package/dist/stories/components/Layout/Paper/Paper.svelte.d.ts

@@ -1,11 +1,10 @@
-import { type ComponentColor } from '../../../../types/colors.js';
-export type PaperColor = 'default' | ComponentColor;
-export declare const paperColorArray: PaperColor[];
 import type { ComponentRoundness } from '../../../../types/roundness.js';
 import type { ComponentShadow } from '../../../../types/shadow.js';
 import type { ComponentWeight } from '../../../../types/weight.js';
-import type { Snippet } from 'svelte';
-interface PaperProps {
+import { type ComponentColor } from '../../../../types/colors.js';
+export type PaperColor = 'default' | ComponentColor;
+export declare const paperColorArray: PaperColor[];
+export interface PaperProps {
     /** Paper contents goes here */
     children?: Snippet;
     /** Paper ref */
@@ -33,6 +32,7 @@ interface PaperProps {
     /** Custom border color. Use CSS compatible value */
     customBorderColor?: string;
 }
+import type { Snippet } from 'svelte';
 declare const Paper: import("svelte").Component<PaperProps, {}, "ref">;
 type Paper = ReturnType<typeof Paper>;
 export default Paper;