@coyalabs/bts-style 1.0.7 → 1.0.9

package/dist/Components/InputBox.svelte

@@ -0,0 +1,103 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseIcon from '../Base/BaseIcon.svelte';
+  import { icons } from '../icons.js';
+
+  /**
+   * @type {'full' | 'primary' | 'secondary'}
+   */
+  export let theme = 'secondary';
+
+  /**
+   * @type {string}
+   */
+  export let value = '';
+
+  /**
+   * @type {string}
+   */
+  export let placeholder = '';
+
+  /**
+   * @type {string}
+   */
+  export let type = 'text';
+
+  /**
+   * @type {string | null}
+   */
+  export let icon = null;
+
+  /**
+   * @type {string}
+   */
+  export let iconSize = '18px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+</script>
+
+<div class="input-wrapper">
+  <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
+    <div class="input-content">
+      {#if icon}
+        <BaseIcon variant="toned" svg={icon} size={iconSize} />
+      {/if}
+      <input 
+        {type}
+        {placeholder}
+        bind:value
+        on:input
+        on:change
+        on:focus
+        on:blur
+        on:keydown
+      />
+      <BaseIcon variant="toned" svg={icons.pen} size="15px" />
+    </div>
+  </BaseContainer>
+</div>
+
+<style>
+  .input-wrapper {
+    width: 100%;
+  }
+
+  .input-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 25px; /* Match button text height */
+  }
+
+  input {
+    all: unset;
+    flex: 1;
+    font-family: 'Satoshi', sans-serif;
+    font-weight: 700;
+    font-size: 18px;
+    color: #E3D8D8;
+    width: 100%;
+  }
+
+  input::placeholder {
+    color: rgba(227, 216, 216, 0.4);
+  }
+</style>

package/dist/Components/InputBox.svelte.d.ts

@@ -0,0 +1,56 @@
+export default InputBox;
+type InputBox = SvelteComponent<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    iconSize?: string | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    type?: string | undefined;
+}, {
+    input: Event;
+    change: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    iconSize?: string | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    type?: string | undefined;
+}, {
+    input: Event;
+    change: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+} & {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/AlertPopup.svelte

@@ -0,0 +1,27 @@
+<script>
+  import Button from '../Button.svelte';
+  import { icons } from '../../icons.js';
+  import { popupStore } from '../popupStore.js';
+
+  /** @type {() => void} */
+  export let onOk = () => {};
+
+  /** @type {string} */
+  export let okText = 'OK';
+
+  function handleOk() {
+    onOk();
+    popupStore.close();
+  }
+</script>
+
+<div class="buttons">
+  <Button actionIcon={icons.check} theme="primary" on:click={handleOk}>{okText}</Button>
+</div>
+
+<style>
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

package/dist/Components/Popup/AlertPopup.svelte.d.ts

@@ -0,0 +1,28 @@
+export default AlertPopup;
+type AlertPopup = SvelteComponent<{
+    onOk?: (() => void) | undefined;
+    okText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const AlertPopup: $$__sveltets_2_IsomorphicComponent<{
+    onOk?: (() => void) | undefined;
+    okText?: string | undefined;
+}, {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/ConfirmPopup.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { icons } from '../../icons.js';
+  import Button from '../Button.svelte';
+  import { popupStore } from '../popupStore.js';
+
+  /** @type {() => void} */
+  export let onConfirm = () => {};
+  
+  /** @type {() => void} */
+  export let onCancel = () => {};
+
+  /** @type {string} */
+  export let confirmText = 'Confirm';
+
+  /** @type {string} */
+  export let cancelText = 'Cancel';
+
+  function handleConfirm() {
+    onConfirm();
+    popupStore.close();
+  }
+
+  function handleCancel() {
+    onCancel();
+    popupStore.close();
+  }
+</script>
+
+<div class="buttons">
+  <Button theme="primary" actionIcon={icons.check} on:click={handleConfirm}>{confirmText}</Button>
+  <Button theme="secondary" actionIcon={icons.crossb} on:click={handleCancel}>{cancelText}</Button>
+</div>
+
+<style>
+  .buttons {
+    display: flex;
+    gap: 1rem;
+  }
+</style>

package/dist/Components/Popup/ConfirmPopup.svelte.d.ts

@@ -0,0 +1,32 @@
+export default ConfirmPopup;
+type ConfirmPopup = SvelteComponent<{
+    onConfirm?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    confirmText?: string | undefined;
+    cancelText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ConfirmPopup: $$__sveltets_2_IsomorphicComponent<{
+    onConfirm?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    confirmText?: string | undefined;
+    cancelText?: string | undefined;
+}, {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/Popup.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { fade, fly } from 'svelte/transition';
+  import { backOut } from 'svelte/easing';
+  import { popupStore } from '../popupStore.js';
+  import BaseContainer from '../../Base/BaseContainer.svelte';
+  import IconButton from '../IconButton.svelte';
+  import TextHeader from '../../Structure/TextHeader.svelte';
+  import { icons } from '../../icons.js';
+</script>
+
+{#if $popupStore.isOpen}
+  <div class="overlay" transition:fade={{ duration: 250 }} on:click={popupStore.close} role="presentation">
+    <div 
+      class="dialog" 
+      transition:fly={{ y: 30, duration: 300, easing: backOut }}
+      on:click|stopPropagation
+      on:keydown|stopPropagation
+      role="dialog"
+      tabindex="-1"
+    >
+      <BaseContainer padding="1.5rem" borderRadiusTopLeft="35px" borderRadiusTopRight="35px" borderRadiusBottomLeft="35px" borderRadiusBottomRight="35px" theme="filled">
+        <header>
+          <TextHeader title={$popupStore.title} subtitle={$popupStore.subtitle || ''} />
+          <div class="close-btn">
+            <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
+          </div>
+        </header>
+        <main>
+          <svelte:component this={$popupStore.component} {...$popupStore.props} />
+        </main>
+      </BaseContainer>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: #0b070eda;
+    backdrop-filter: blur(3px);
+    display: grid;
+    place-items: center;
+    z-index: 9999;
+  }
+
+  .dialog {
+    width: min(90%, 600px);
+    max-height: 80vh;
+    zoom: 0.92;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .close-btn {
+    opacity: 0.5;
+  }
+
+  main {
+    margin-top: 1.5rem;
+  }
+</style>

package/dist/{BasePage.svelte.d.ts → Components/Popup/Popup.svelte.d.ts}

@@ -1,16 +1,22 @@
-export default BasePage;
-type BasePage = SvelteComponent<any, {
-    [evt: string]: CustomEvent<any>;
+export default Popup;
+type Popup = SvelteComponent<{
+    [x: string]: never;
 }, {
-    default: {};
-}> & {
+    click: PointerEvent;
+    keydown: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
     $$bindings?: string | undefined;
 };
-declare const BasePage: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
+declare const Popup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
 }, {
-    default: {};
-}, {}, string>;
+    click: PointerEvent;
+    keydown: KeyboardEvent;
+} & {
+    [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;

package/dist/Components/Popup/PromptPopup.svelte

@@ -0,0 +1,61 @@
+<script>
+  import Button from '../Button.svelte';
+  import InputBox from '../InputBox.svelte';
+  import BaseText from '../../Base/BaseText.svelte';
+  import { icons } from '../../icons.js';
+  import { popupStore } from '../popupStore.js';
+
+  /** @type {(value: string) => void} */
+  export let onSubmit = () => {};
+  
+  /** @type {() => void} */
+  export let onCancel = () => {};
+
+  /** @type {string} */
+  export let placeholder = 'Enter value...';
+
+  /** @type {string} */
+  export let submitText = 'Submit';
+
+  /** @type {string} */
+  export let cancelText = 'Cancel';
+
+  /** @type {string} */
+  export let label = '';
+
+  let value = '';
+
+  function handleSubmit() {
+    onSubmit(value);
+    popupStore.close();
+  }
+
+  function handleCancel() {
+    onCancel();
+    popupStore.close();
+  }
+</script>
+
+<div class="prompt">
+  {#if label}
+    <BaseText variant="content">{label}</BaseText>
+  {/if}
+  <InputBox bind:value {placeholder} />
+  <div class="buttons">
+    <Button theme="primary" actionIcon={icons.check} on:click={handleSubmit}>{submitText}</Button>
+    <Button theme="secondary" actionIcon={icons.crossb} on:click={handleCancel}>{cancelText}</Button>
+  </div>
+</div>
+
+<style>
+  .prompt {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 1rem;
+  }
+</style>

package/dist/Components/Popup/PromptPopup.svelte.d.ts

@@ -0,0 +1,36 @@
+export default PromptPopup;
+type PromptPopup = SvelteComponent<{
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    onCancel?: (() => void) | undefined;
+    cancelText?: string | undefined;
+    onSubmit?: ((value: string) => void) | undefined;
+    submitText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PromptPopup: $$__sveltets_2_IsomorphicComponent<{
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    onCancel?: (() => void) | undefined;
+    cancelText?: string | undefined;
+    onSubmit?: ((value: string) => void) | undefined;
+    submitText?: string | undefined;
+}, {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Separator.svelte

@@ -0,0 +1,61 @@
+<script>
+  const svgSide = '<svg width="51" height="14" viewBox="0 0 51 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.34766 0.0117188C1.73943 0.0206734 2.04817 0.156895 2.21484 0.246094C2.40301 0.347061 2.5769 0.471392 2.71875 0.585938C3.0026 0.815356 3.30516 1.12112 3.62109 1.46484C4.13857 2.02792 4.71503 2.52735 5.34375 2.96484C6.12646 3.50981 6.96366 4.39169 7.88672 5.49609H8.48438C9.19157 5.39437 9.93448 5.3599 10.7109 5.44922C11.5804 5.54939 12.4548 5.65477 13.3242 5.75391C13.9681 5.8268 14.6202 5.75253 15.293 5.53125C16.3428 5.18618 17.4137 5.05727 18.4922 5.14453C19.3709 5.21564 20.2502 5.28987 21.1289 5.37891C22.0304 5.47028 22.9352 5.59238 23.8359 5.74219C24.6263 5.87367 25.416 5.93785 26.2031 5.94141C27.0095 5.94481 27.8211 5.89987 28.6289 5.80078C29.5372 5.68937 30.4503 5.61804 31.3594 5.57812C32.2056 5.5409 33.0559 5.47755 33.9023 5.40234C34.8753 5.3162 35.8484 5.3421 36.8203 5.46094C37.5779 5.5537 38.3368 5.55236 39.0938 5.47266C39.9604 5.3814 40.8287 5.2886 41.6953 5.19141C42.7294 5.0756 43.7635 5.12971 44.7891 5.35547C45.5064 5.51388 46.2252 5.55602 46.9336 5.48438C47.9079 5.38622 49.2439 5.3997 50.8945 5.49609H51V8.49609H50.8008C49.152 8.3975 47.9732 8.39714 47.2266 8.47266C46.1967 8.57625 45.1655 8.51061 44.1445 8.28516C43.434 8.12869 42.7253 8.10097 42.0234 8.17969C41.1525 8.27735 40.2811 8.36922 39.4102 8.46094C38.4271 8.56446 37.4395 8.5578 36.457 8.4375C35.6916 8.34387 34.9244 8.32272 34.1602 8.39062C33.2694 8.46972 32.3792 8.53898 31.4883 8.57812C30.6576 8.6146 29.8236 8.67535 28.9922 8.77734C28.0603 8.89161 27.1247 8.94535 26.1914 8.94141C25.2411 8.93721 24.2908 8.86458 23.3438 8.70703C22.5052 8.56754 21.662 8.4521 20.8242 8.36719C19.9661 8.28025 19.1041 8.20224 18.2461 8.13281C17.5864 8.07996 16.9187 8.16426 16.2305 8.39062C15.1658 8.74063 14.078 8.8547 12.9844 8.73047C12.1141 8.63124 11.2413 8.52605 10.3711 8.42578C9.62969 8.34036 9.03581 8.37464 8.57812 8.48438C8.2446 8.56426 7.92758 8.63057 7.66406 8.66016C6.72608 9.63803 5.8882 10.4341 5.09766 10.9102C4.50693 11.2662 4.00397 11.7139 3.58594 12.2695C3.30392 12.6446 3.03046 12.976 2.77734 13.2305C2.65105 13.3571 2.49298 13.4978 2.32031 13.6172C2.17514 13.7176 1.86759 13.9106 1.45312 13.957L1.26562 13.9805L1.06641 13.9453L0.84375 13.9219L1.04297 12.5508L0.996094 12.5039L0 11.3789L0.0820312 11.3086L0.609375 10.8516L0.84375 10.875C0.934721 10.7665 1.0544 10.6367 1.18359 10.4648C1.83258 9.60176 2.62756 8.88803 3.55078 8.33203C3.95922 8.08554 4.48198 7.62172 5.16797 6.9375C4.51681 6.19986 4.0219 5.69702 3.63281 5.42578C2.82398 4.86296 2.08428 4.21715 1.41797 3.49219C1.26913 3.33024 1.13246 3.21476 1.03125 3.11719L0.667969 3.21094L0.0820312 2.69531L0 2.625L0.996094 1.5L1.03125 1.45312L0.714844 0.105469L0.960938 0.046875L1.14844 0L1.34766 0.0117188Z" fill="#1D191F"/></svg>';
+  const svgStretch = '<svg width="50" height="4" viewBox="0 0 50 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.793 0.271071C20.7035 0.362386 21.6137 0.484728 22.5234 0.634352C23.3258 0.766294 24.1266 0.830205 24.9258 0.833571C25.7413 0.836979 26.5581 0.791831 27.375 0.692946C28.2931 0.581596 29.2218 0.498462 30.1406 0.458571C30.9959 0.421352 31.8515 0.369633 32.707 0.294509C33.691 0.208078 34.6773 0.222428 35.6602 0.341384C36.429 0.434456 37.2006 0.44479 37.9688 0.364821C38.8437 0.273727 39.7188 0.180578 40.5938 0.0835715C41.6386 -0.0322773 42.6862 0.021345 43.7227 0.247634C44.4507 0.406319 45.1712 0.448468 45.8906 0.37654C46.8918 0.276437 48.2776 0.286775 49.9922 0.388259H50.0039V3.38826H49.8164C48.1444 3.28929 46.9425 3.28894 46.1836 3.36482C45.1458 3.46797 44.1073 3.40201 43.0781 3.17732C42.3554 3.01977 41.6363 2.98092 40.9219 3.06013C40.0396 3.15795 39.1557 3.26125 38.2734 3.3531C37.2824 3.45608 36.2873 3.43784 35.2969 3.31794C34.5228 3.22447 33.7496 3.21526 32.9766 3.28279C32.0761 3.36188 31.1702 3.4194 30.2695 3.45857C29.4284 3.49508 28.5802 3.5674 27.7383 3.66951C26.7976 3.78349 25.8561 3.83749 24.9141 3.83357C23.9535 3.82955 22.9886 3.74493 22.0312 3.58747C21.1841 3.44827 20.3346 3.34416 19.4883 3.25935C18.6188 3.17223 17.7444 3.09453 16.875 3.02497C16.2036 2.97193 15.5232 3.044 14.8242 3.27107C13.7509 3.62006 12.656 3.74633 11.5547 3.62263C10.6741 3.52337 9.7868 3.41824 8.9062 3.31794C8.17514 3.23508 7.43857 3.26613 6.70312 3.39997C5.77106 3.56937 4.83678 3.67782 3.90234 3.73982C2.94429 3.80324 2.00452 3.78762 1.08984 3.69294C0.66932 3.6493 0.31018 3.61128 0.04688 3.56404L0 0.388259H3.86719L3.46875 0.763259C3.54583 0.759357 3.62544 0.756682 3.70312 0.75154C4.52477 0.697065 5.35175 0.596824 6.17578 0.446852C7.1966 0.261429 8.22096 0.22495 9.2461 0.341384C10.1237 0.441342 11.0053 0.535427 11.8828 0.634352C12.5405 0.708486 13.2127 0.646387 13.8984 0.423415C14.9568 0.0795105 16.0351 -0.0619009 17.1211 0.0249777C18.0107 0.0961552 18.9034 0.181928 19.793 0.271071Z" fill="#1D191F"/></svg>';
+
+  // Convert SVG to data URL
+  const sideDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgSide);
+  const stretchDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgStretch);
+
+  /**
+   * @type {string}
+   */
+  export let height = '12px';
+
+  /**
+   * @type {string}
+   */
+  export let width = '100%';
+
+  /**
+   * @type {string}
+   */
+  export let margin = '2rem 0';
+</script>
+
+<div class="separator" style="--height: {height}; --width: {width}; --margin: {margin};">
+  <img src={sideDataUrl} alt="" class="side left" />
+  <div class="middle" style="background-image: url('{stretchDataUrl}');"></div>
+  <img src={sideDataUrl} alt="" class="side right" />
+</div>
+
+<style>
+  .separator {
+    width: var(--width);
+    height: var(--height);
+    margin: var(--margin);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .separator img {
+    height: 100%;
+    display: block;
+  }
+
+  .side {
+    flex-shrink: 0;
+  }
+
+  .side.right {
+    transform: scaleX(-1);
+  }
+
+  .middle {
+    flex: 1;
+    height: 100%;
+    background-repeat: repeat-x;
+    background-size: auto 30%;
+    background-position: left center;
+  }
+</style>

package/dist/Components/Separator.svelte.d.ts

@@ -0,0 +1,30 @@
+export default Separator;
+type Separator = SvelteComponent<{
+    height?: string | undefined;
+    width?: string | undefined;
+    margin?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Separator: $$__sveltets_2_IsomorphicComponent<{
+    height?: string | undefined;
+    width?: string | undefined;
+    margin?: string | undefined;
+}, {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}