polymorph-ui-components 0.1.0

package/dist/Toolbar/Toolbar.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { ToolbarProperties } from './properties';
+  import backSvg from '../assets/back.svg?raw';
+
+  let {
+    showBackButton = true,
+    text,
+    backIcon,
+    leftContent,
+    centerContent,
+    rightContent,
+    additionalContent,
+    testId,
+    classes,
+    onbackclick,
+    onkeydown
+  }: ToolbarProperties = $props();
+
+  function handleBackKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+    onkeydown?.(event);
+  }
+</script>
+
+<div class="toolbar {classes ?? ''}" data-pw={testId}>
+  <div class="content">
+    {#if typeof leftContent === 'function'}
+      {@render leftContent()}
+    {:else if showBackButton}
+      <div
+        class="back"
+        onclick={onbackclick}
+        onkeydown={handleBackKeydown}
+        role="button"
+        tabindex="0"
+        aria-label="Back"
+      >
+        {#if typeof backIcon === 'string' && backIcon.length > 0}
+          <img src={backIcon} alt="Back" />
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html backSvg}
+        {/if}
+      </div>
+    {/if}
+    {#if typeof centerContent === 'function'}
+      <div class="center-content">
+        {@render centerContent()}
+      </div>
+    {:else if typeof text === 'string' && text.length > 0}
+      <div class="text">
+        {text}
+      </div>
+    {/if}
+    {#if typeof rightContent === 'function'}
+      <div class="right-content">
+        {@render rightContent()}
+      </div>
+    {/if}
+  </div>
+  <div class="additional-content" class:hidden={!(typeof additionalContent === 'function')}>
+    {#if typeof additionalContent === 'function'}
+      {@render additionalContent()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .toolbar {
+    display: flex;
+    flex-direction: column;
+    padding: var(--toolbar-padding, 0px);
+    height: var(--toolbar-height, fit-content);
+    width: var(--toolbar-width, 100%);
+    position: var(--toolbar-position, sticky);
+    top: var(--toolbar-top, 0);
+    left: var(--toolbar-left, 0);
+    right: var(--toolbar-right, 0);
+    background: var(--toolbar-background, #ffffff);
+    box-shadow: var(--toolbar-box-shadow, 0px 2px 12px rgba(0, 0, 0, 0.1));
+    z-index: var(--toolbar-z-index, 10);
+    border-radius: var(--toolbar-border-radius, 0px);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--toolbar-content-padding, 0px);
+    justify-content: var(--toolbar-justify-content, normal);
+    visibility: var(--toolbar-content-visibility, visible);
+  }
+
+  .additional-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--toolbar-additional-content-padding, 0px);
+    height: var(--toolbar-additional-content-height, fit-content);
+    justify-content: var(--toolbar-justify-additional-content, normal);
+    visibility: var(--toolbar-additional-content-visibility, visible);
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .back {
+    height: var(--toolbar-back-button-height, 20px);
+    width: var(--toolbar-back-button-width, 20px);
+    padding: var(--toolbar-back-button-padding, 20px 14px);
+    cursor: var(--toolbar-back-button-cursor, pointer);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .back img,
+  .back :global(svg) {
+    height: var(--toolbar-back-image-height, 16px);
+    width: var(--toolbar-back-image-width, 16px);
+  }
+
+  .center-content {
+    display: flex;
+    flex: 1;
+  }
+
+  .text {
+    font-size: var(--toolbar-text-font-size, inherit);
+    font-weight: var(--toolbar-text-font-weight, 400);
+    padding: var(--toolbar-text-padding, 0px);
+    margin: var(--toolbar-text-margin, 0px);
+    color: var(--toolbar-text-color);
+    flex: var(--toolbar-text-flex, 1);
+  }
+</style>

package/dist/Toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarProperties } from './properties';
+declare const Toolbar: import("svelte").Component<ToolbarProperties, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/Toolbar/properties.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export type ToolbarProperties = ToolbarEventProperties & {
+    showBackButton?: boolean;
+    text?: string | null;
+    backIcon?: string | null;
+    leftContent?: Snippet;
+    centerContent?: Snippet;
+    rightContent?: Snippet;
+    additionalContent?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ToolbarEventProperties = {
+    onbackclick?: () => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/Toolbar/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Tooltip/Tooltip.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import type { TooltipProperties } from './properties';
+
+  let {
+    text,
+    position = 'top',
+    delay = 0,
+    testId,
+    classes,
+    children
+  }: TooltipProperties = $props();
+
+  let visible = $state(false);
+  let delayTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  function showTooltip() {
+    if (delay > 0) {
+      delayTimeout = setTimeout(() => {
+        visible = true;
+      }, delay);
+    } else {
+      visible = true;
+    }
+  }
+
+  function hideTooltip() {
+    if (delayTimeout !== null) {
+      clearTimeout(delayTimeout);
+      delayTimeout = null;
+    }
+    visible = false;
+  }
+</script>
+
+<div
+  class="tooltip-container {classes ?? ''}"
+  role="none"
+  onmouseenter={showTooltip}
+  onmouseleave={hideTooltip}
+  onfocusin={showTooltip}
+  onfocusout={hideTooltip}
+  data-pw={testId}
+>
+  {@render children()}
+  {#if visible}
+    <div class="tooltip-bubble {position}" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <span class="tooltip-text">{text}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tooltip-container {
+    position: relative;
+    display: var(--tooltip-container-display, inline-flex);
+  }
+
+  .tooltip-bubble {
+    position: absolute;
+    z-index: var(--tooltip-z-index, 1000);
+    max-width: var(--tooltip-max-width, 200px);
+    background: var(--tooltip-background, #18181b);
+    color: var(--tooltip-color, #ffffff);
+    font-size: var(--tooltip-font-size, 12px);
+    font-weight: var(--tooltip-font-weight, 400);
+    font-family: var(--tooltip-font-family);
+    padding: var(--tooltip-padding, 6px 10px);
+    border-radius: var(--tooltip-border-radius, 8px);
+    border: var(--tooltip-border, none);
+    box-shadow: var(--tooltip-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
+    white-space: normal;
+    word-wrap: break-word;
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity var(--tooltip-opacity-duration, 0.15s) ease-in-out;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  /* Top position */
+  .top {
+    bottom: calc(100% + var(--tooltip-offset, 8px));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .top .tooltip-arrow {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px) 0
+      var(--tooltip-arrow-size, 5px);
+    border-color: var(--tooltip-arrow-color, var(--tooltip-background, #18181b)) transparent
+      transparent transparent;
+  }
+
+  /* Bottom position */
+  .bottom {
+    top: calc(100% + var(--tooltip-offset, 8px));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .bottom .tooltip-arrow {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)
+      var(--tooltip-arrow-size, 5px);
+    border-color: transparent transparent
+      var(--tooltip-arrow-color, var(--tooltip-background, #18181b)) transparent;
+  }
+
+  /* Left position */
+  .left {
+    right: calc(100% + var(--tooltip-offset, 8px));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .left .tooltip-arrow {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--tooltip-arrow-size, 5px) 0 var(--tooltip-arrow-size, 5px)
+      var(--tooltip-arrow-size, 5px);
+    border-color: transparent transparent transparent
+      var(--tooltip-arrow-color, var(--tooltip-background, #18181b));
+  }
+
+  /* Right position */
+  .right {
+    left: calc(100% + var(--tooltip-offset, 8px));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .right .tooltip-arrow {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)
+      var(--tooltip-arrow-size, 5px) 0;
+    border-color: transparent var(--tooltip-arrow-color, var(--tooltip-background, #18181b))
+      transparent transparent;
+  }
+</style>

package/dist/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProperties } from './properties';
+declare const Tooltip: import("svelte").Component<TooltipProperties, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Tooltip/properties.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type MandatoryTooltipProperties = {
+    text: string;
+    children: Snippet;
+};
+export type OptionalTooltipProperties = {
+    position?: TooltipPosition;
+    delay?: number;
+    testId?: string | null;
+    classes?: string;
+};
+export type TooltipProperties = MandatoryTooltipProperties & OptionalTooltipProperties;

package/dist/Tooltip/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/assets/back.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 8H3M3 8L7 4M3 8L7 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/battery.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 28 13" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="24" height="12" rx="2" stroke="currentColor" stroke-width="1" fill="none" />
+  <rect x="2" y="2" width="18" height="8" rx="1" />
+  <rect x="25" y="3.5" width="3" height="5" rx="1" />
+</svg>

package/dist/assets/checkmark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>

package/dist/assets/chevron-down-sm.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="6 9 12 15 18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/chevron-left-lg.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/chevron-right-lg.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="18 15 12 9 6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/close.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/copy.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+</svg>

package/dist/assets/error-circle.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+  <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="12" cy="16" r="1" fill="currentColor"/>
+</svg>

package/dist/assets/lock.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z" fill="currentColor"/>
+</svg>

package/dist/assets/minus.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg">
+  <line x1="5" y1="12" x2="19" y2="12"></line>
+</svg>

package/dist/assets/monitor.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+  <line x1="8" y1="21" x2="16" y2="21"></line>
+  <line x1="12" y1="17" x2="12" y2="21"></line>
+</svg>

package/dist/assets/moon.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+</svg>

package/dist/assets/palette.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor"></circle>
+  <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor"></circle>
+  <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor"></circle>
+  <circle cx="6.5" cy="12.5" r="0.5" fill="currentColor"></circle>
+  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path>
+</svg>

package/dist/assets/search.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="11" cy="11" r="8"></circle>
+  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+</svg>

package/dist/assets/signal.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 18 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="8" width="3" height="4" rx="0.5" />
+  <rect x="5" y="5" width="3" height="7" rx="0.5" />
+  <rect x="10" y="2" width="3" height="10" rx="0.5" />
+  <rect x="15" y="0" width="3" height="12" rx="0.5" />
+</svg>

package/dist/assets/sort-default.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="18 15 12 9 6 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
+  <polyline points="6 17 12 23 18 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
+</svg>

package/dist/assets/sun.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="5"></circle>
+  <line x1="12" y1="1" x2="12" y2="3"></line>
+  <line x1="12" y1="21" x2="12" y2="23"></line>
+  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+  <line x1="1" y1="12" x2="3" y2="12"></line>
+  <line x1="21" y1="12" x2="23" y2="12"></line>
+  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+</svg>

package/dist/assets/swap-vertical.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 4v16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 8l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 20V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13 16l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/wifi.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 2.4C5.6 2.4 3.5 3.4 2 5l1.4 1.4C4.6 5.2 6.2 4.4 8 4.4s3.4.8 4.6 2l1.4-1.4C12.5 3.4 10.4 2.4 8 2.4zM8 6.4c-1.4 0-2.6.6-3.4 1.4L6 9.2c.5-.5 1.2-.8 2-.8s1.5.3 2 .8l1.4-1.4C10.6 7 9.4 6.4 8 6.4zM8 10.4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" />
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+export { default as Modal } from './Modal/Modal.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputButton } from './InputButton/InputButton.svelte';
+export { default as ListItem } from './ListItem/ListItem.svelte';
+export { default as Loader } from './Loader/Loader.svelte';
+export { default as Toolbar } from './Toolbar/Toolbar.svelte';
+export { default as Icon } from './Icon/Icon.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as ModalAnimation } from './Animations/ModalAnimation.svelte';
+export { default as OverlayAnimation } from './Animations/OverlayAnimation.svelte';
+export { default as Carousel } from './Carousel/Carousel.svelte';
+export { default as Badge } from './Badge/Badge.svelte';
+export { default as Banner } from './Banner/Banner.svelte';
+export { default as Toggle } from './Toggle/Toggle.svelte';
+export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
+export { default as Table } from './Table/Table.svelte';
+export { default as Stepper } from './Stepper/Stepper.svelte';
+export { default as Step } from './Stepper/Step.svelte';
+export { default as Toast } from './Toast/Toast.svelte';
+export { default as GridItem } from './GridItem/GridItem.svelte';
+export { default as IconStack } from './IconStack/IconStack.svelte';
+export { default as Img } from './Img/Img.svelte';
+export { default as Checkbox } from './Checkbox/Checkbox.svelte';
+export { default as Radio } from './Radio/Radio.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as Choicebox } from './Choicebox/Choicebox.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
+export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as Shimmer } from './Shimmer/Shimmer.svelte';
+export { default as Progress } from './Progress/Progress.svelte';
+export { default as Pill } from './Pill/Pill.svelte';
+export { default as Pagination } from './Pagination/Pagination.svelte';
+export { default as Snippet } from './Snippet/Snippet.svelte';
+export { default as Gauge } from './Gauge/Gauge.svelte';
+export { default as SplitButton } from './SplitButton/SplitButton.svelte';
+export { default as KeyboardInput } from './KeyboardInput/KeyboardInput.svelte';
+export { default as LoadingDots } from './LoadingDots/LoadingDots.svelte';
+export { default as Menu } from './Menu/Menu.svelte';
+export { default as Sheet } from './Sheet/Sheet.svelte';
+export { default as Scroller } from './Scroller/Scroller.svelte';
+export { default as CommandMenu } from './CommandMenu/CommandMenu.svelte';
+export { default as ContextMenu } from './ContextMenu/ContextMenu.svelte';
+export { default as Calendar } from './Calendar/Calendar.svelte';
+export { default as RelativeTime } from './RelativeTime/RelativeTime.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
+export { default as Book } from './Book/Book.svelte';
+export { default as Browser } from './Browser/Browser.svelte';
+export { default as Phone } from './Phone/Phone.svelte';
+export { default as Combobox } from './Combobox/Combobox.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as SplitInput } from './SplitInput/SplitInput.svelte';
+export type * from './Button/properties';
+export type * from './Modal/properties';
+export type * from './Input/properties';
+export type * from './InputButton/properties';
+export type * from './ListItem/properties';
+export type * from './types';
+export type * from './Icon/properties';
+export type * from './Select/properties';
+export type * from './Toolbar/properties';
+export type * from './Carousel/properties';
+export type * from './Badge/properties';
+export type * from './Banner/properties';
+export type * from './Table/properties';
+export type * from './Stepper/properties';
+export type * from './Toast/properties';
+export type * from './IconStack/properties';
+export type * from './Img/properties';
+export type * from './Checkbox/properties';
+export type * from './Radio/properties';
+export type * from './Avatar/properties';
+export type * from './Tabs/properties';
+export type * from './Choicebox/properties';
+export type * from './Slider/properties';
+export type * from './Tooltip/properties';
+export type * from './Shimmer/properties';
+export type * from './Progress/properties';
+export type * from './Pill/properties';
+export type * from './Pagination/properties';
+export type * from './Snippet/properties';
+export type * from './Gauge/properties';
+export type * from './SplitButton/properties';
+export type * from './KeyboardInput/properties';
+export type * from './LoadingDots/properties';
+export type * from './Menu/properties';
+export type * from './Sheet/properties';
+export type * from './Scroller/properties';
+export type * from './CommandMenu/properties';
+export type * from './ContextMenu/properties';
+export type * from './Calendar/properties';
+export type * from './RelativeTime/properties';
+export type * from './ThemeSwitcher/properties';
+export type * from './Book/properties';
+export type * from './Browser/properties';
+export type * from './Phone/properties';
+export type * from './Loader/properties';
+export type * from './Combobox/properties';
+export type * from './ColorPicker/properties';
+export type * from './SplitInput/properties';
+export { validateInput } from './utils';