@flightlesslabs/dodo-ui 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -2,12 +2,14 @@ import './styles/global.css';
 export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+/** developer tools: components: InputEnclosure */
+export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
 export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-export type { TextInputRoundness, TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
+export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
 /** Form: PasswordInput */
 export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
 export type { PasswordInputToggleEvent } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
@@ -18,3 +20,9 @@ export { default as FormControl } from './stories/components/Form/FormControl/Fo
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
 export type { MessageColor } from './stories/components/Form/Message/Message.svelte';
+/** Form: SimpleSelect */
+export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type { SimpleSelectFocusEvent, SimpleSelectOption, } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+/** Layout: Paper */
+export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
+export type { PaperRoundness, PaperShadow, } from './stories/components/Layout/Paper/Paper.svelte';

package/dist/index.js

@@ -1,6 +1,8 @@
 import './styles/global.css';
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+/** developer tools: components: InputEnclosure */
+export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
@@ -13,3 +15,7 @@ export { default as Label } from './stories/components/Form/Label/Label.svelte';
 export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
+/** Form: SimpleSelect */
+export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+/** Layout: Paper */
+export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';

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

@@ -8,7 +8,7 @@ export const storyButtonArgTypes = {
     },
     color: {
         control: { type: 'select' },
-        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+        options: ['default', 'secondary', 'primary', 'safe', 'warning', 'danger'],
     },
     variant: {
         control: { type: 'select' },

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

@@ -96,6 +96,13 @@ export {};
   --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
   --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
   --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-700);
   --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
   --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
   --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
@@ -117,13 +124,6 @@ export {};
   --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
   --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
   --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
-  --dodo-ui-Button-outline-info: var(--dodo-color-info-400);
-  --dodo-ui-Button-text-info-bg: var(--dodo-color-info-100);
-  --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-200);
-  --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-300);
-  --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-500);
-  --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-600);
-  --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-700);
 }
 
 :global(.dodo-theme--dark) {
@@ -143,6 +143,13 @@ export {};
   --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-300);
   --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-200);
   --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-50);
+  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-100);
   --dodo-ui-Button-outline-safe: var(--dodo-color-safe-300);
   --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-50);
   --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-100);
@@ -164,13 +171,6 @@ export {};
   --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-300);
   --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-200);
   --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-100);
-  --dodo-ui-Button-outline-info: var(--dodo-color-info-300);
-  --dodo-ui-Button-text-info-bg: var(--dodo-color-info-50);
-  --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-100);
-  --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-200);
-  --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-300);
-  --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-200);
-  --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-100);
 }
 
 .dodo-ui-Button {
@@ -268,6 +268,29 @@ export {};
 .dodo-ui-Button.color--primary.variant--solid:active {
   background-color: var(--dodo-ui-Button-solid-primary-active-bg);
 }
+.dodo-ui-Button.color--secondary.variant--text {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-Button-text-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-secondary-active-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-secondary);
+}
+.dodo-ui-Button.color--secondary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-secondary-active-bg);
+}
 .dodo-ui-Button.color--safe.variant--text {
   color: var(--dodo-color-safe-800);
   background-color: var(--dodo-ui-Button-text-safe-bg);
@@ -337,29 +360,6 @@ export {};
 .dodo-ui-Button.color--danger.variant--solid:active {
   background-color: var(--dodo-ui-Button-solid-danger-active-bg);
 }
-.dodo-ui-Button.color--info.variant--text {
-  color: var(--dodo-color-info-800);
-  background-color: var(--dodo-ui-Button-text-info-bg);
-}
-.dodo-ui-Button.color--info.variant--text:hover {
-  background-color: var(--dodo-ui-Button-text-info-hover-bg);
-}
-.dodo-ui-Button.color--info.variant--text:active {
-  background-color: var(--dodo-ui-Button-text-info-active-bg);
-}
-.dodo-ui-Button.color--info.variant--text.outline {
-  border-color: var(--dodo-ui-Button-outline-info);
-}
-.dodo-ui-Button.color--info.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Button-solid-info-bg);
-}
-.dodo-ui-Button.color--info.variant--solid:hover {
-  background-color: var(--dodo-ui-Button-solid-info-hover-bg);
-}
-.dodo-ui-Button.color--info.variant--solid:active {
-  background-color: var(--dodo-ui-Button-solid-info-active-bg);
-}
 .dodo-ui-Button[disabled] {
   cursor: initial;
 }

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

@@ -1,4 +1,4 @@
-export type ButtonColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+export type ButtonColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
 export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
 export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
 export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;

package/dist/stories/components/Form/Button/Color/Color.stories.svelte

@@ -19,10 +19,12 @@
   <Button>Click me!</Button>
 </Story>
 <Story name="Primary" args={{ color: 'primary' }}><Button color="primary">Click me!</Button></Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>
+  <Button color="secondary">Click me!</Button>
+</Story>
 <Story name="Safe" args={{ color: 'safe' }}><Button color="safe">Click me!</Button></Story>
 <Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
 <Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
-<Story name="Info" args={{ color: 'info' }}><Button color="info">Click me!</Button></Story>
 
 <Story
   name="Default Solid"
@@ -33,6 +35,9 @@
 <Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
   <Button color="primary" variant="solid">Click me!</Button>
 </Story>
+<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid' }}>
+  <Button color="secondary" variant="solid">Click me!</Button>
+</Story>
 <Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
   <Button color="safe" variant="solid">Click me!</Button>
 </Story>
@@ -42,9 +47,6 @@
 <Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
   <Button color="danger" variant="solid">Click me!</Button>
 </Story>
-<Story name="Info Solid" args={{ color: 'info', variant: 'solid' }}>
-  <Button color="info" variant="solid">Click me!</Button>
-</Story>
 
 <Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
   <Button outline>Click me!</Button>
@@ -52,6 +54,9 @@
 <Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
   <Button color="primary" outline>Click me!</Button>
 </Story>
+<Story name="Secondary Outline" args={{ outline: true, color: 'secondary' }}>
+  <Button color="secondary" outline>Click me!</Button>
+</Story>
 <Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
   <Button color="safe" outline>Click me!</Button>
 </Story>
@@ -61,6 +66,3 @@
 <Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
   <Button color="danger" outline>Click me!</Button>
 </Story>
-<Story name="Info Outline" args={{ outline: true, color: 'info' }}>
-  <Button color="info" outline>Click me!</Button>
-</Story>

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

@@ -23,7 +23,7 @@ let { children, label, class: className = '', for: htmlFor, form, ref = $bindabl
 
 <style>:global(:root) {
   --dodo-ui-FormControl-LabelSection-gap: 8px;
-  --dodo-ui-FormControl-errorMessage-gap: 16px;
+  --dodo-ui-FormControl-errorMessage-gap: 10px;
 }
 
 .dodo-ui-FormControl .LabelSection {

package/dist/stories/components/Form/Message/Color/Color.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Default">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Primary" args={{ color: 'primary' }}>
+  <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Secondary" args={{ color: 'secondary' }}>
+  <Message color="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Safe" args={{ color: 'safe' }}>
+  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Danger" args={{ color: 'danger' }}>
+  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

package/dist/stories/components/Form/Message/Color/Color.stories.svelte.d.ts

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

@@ -1,15 +1,20 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import Message from './Message.svelte';
+export const storyMessageArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: ['default', 'primary', 'secondary', 'safe', 'warning', 'danger'],
+    },
+    size: {
+        control: { type: 'select' },
+        options: ['normal', 'small', 'large'],
+    },
+};
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const { Story } = defineMeta({
     component: Message,
     tags: ['autodocs'],
-    argTypes: {
-        color: {
-            control: { type: 'select' },
-            options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
-        },
-    },
+    argTypes: storyMessageArgTypes,
 });
 </script>
 
@@ -24,23 +29,3 @@ const { Story } = defineMeta({
 <Story name="Default">
   <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
-
-<Story name="Primary" args={{ color: 'primary' }}>
-  <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Safe" args={{ color: 'safe' }}>
-  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Warning" args={{ color: 'warning' }}>
-  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Danger" args={{ color: 'danger' }}>
-  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Info" args={{ color: 'info' }}>
-  <Message color="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>

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

@@ -1,4 +1,6 @@
 import Message from './Message.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyMessageArgTypes: 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;

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

@@ -1,11 +1,14 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">let { children, class: className = '', color = 'default', ref = $bindable(), _unsafeChildrenStringForTesting, } = $props();
+<script lang="ts">let { children, class: className = '', color = 'default', ref = $bindable(), _unsafeChildrenStringForTesting, size = 'normal', } = $props();
 export {};
 </script>
 
-<div class={['dodo-ui-Message', `color--${color}`, className].join(' ')} bind:this={ref}>
+<div
+  class={['dodo-ui-Message', `color--${color}`, `size--${size}`, className].join(' ')}
+  bind:this={ref}
+>
   {#if children}
     {@render children()}
   {:else if _unsafeChildrenStringForTesting}
@@ -14,17 +17,28 @@ export {};
 </div>
 
 <style>.dodo-ui-Message {
-  font-size: 1rem;
   letter-spacing: 0.3px;
   display: flex;
   font-family: inherit;
 }
+.dodo-ui-Message.size--normal {
+  font-size: 1rem;
+}
+.dodo-ui-Message.size--small {
+  font-size: 0.9rem;
+}
+.dodo-ui-Message.size--large {
+  font-size: 1.1rem;
+}
 .dodo-ui-Message.color--default {
   color: var(--dodo-color-default-800);
 }
 .dodo-ui-Message.color--primary {
   color: var(--dodo-color-primary-600);
 }
+.dodo-ui-Message.color--secondary {
+  color: var(--dodo-color-secondary-600);
+}
 .dodo-ui-Message.color--safe {
   color: var(--dodo-color-safe-600);
 }
@@ -33,7 +47,4 @@ export {};
 }
 .dodo-ui-Message.color--danger {
   color: var(--dodo-color-danger-600);
-}
-.dodo-ui-Message.color--info {
-  color: var(--dodo-color-info-600);
 }</style>

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

@@ -1,4 +1,5 @@
-export type MessageColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
+import type { ComponentSize } from '../../../../types.js';
 import type { Snippet } from 'svelte';
 interface MessageProps {
     /** Message contents goes here */
@@ -7,6 +8,8 @@ interface MessageProps {
     ref?: HTMLDivElement;
     /** What color to use? */
     color?: MessageColor;
+    /** Message size */
+    size?: ComponentSize;
     /** Custom css class*/
     class?: string;
     /** Test: ⚠️ Unsafe Children String. Do Not use*/

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

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Normal">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

package/dist/stories/components/Form/Message/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;
+}