flowbite-svelte 0.46.0 → 0.46.2

package/dist/forms/Radio.svelte

@@ -1,30 +1,28 @@
-<script context="module">// this part is shared between Radio and Checkbox
-import { twMerge } from 'tailwind-merge';
+<script context="module">import { twMerge } from "tailwind-merge";
 const colorClasses = {
-    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
-    secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
+  secondary: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600",
+  red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
+  green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
+  purple: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600",
+  teal: "text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600",
+  yellow: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600",
+  orange: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600",
+  blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
 };
-export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-export const inputClass = (custom, color, rounded, tinted, spacing, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+export const labelClass = (inline, extraClass) => twMerge(inline ? "inline-flex" : "flex", "items-center", extraClass);
+export const inputClass = (custom, color, rounded, tinted, spacing, extraClass) => twMerge("w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2", spacing, tinted ? "dark:bg-gray-600 dark:border-gray-500" : "dark:bg-gray-700 dark:border-gray-600", custom && "sr-only peer", rounded && "rounded", colorClasses[color], extraClass);
 </script>
 
-<script>import { getContext } from 'svelte';
-import Label from './Label.svelte';
-export let color = 'primary';
+<script>import { getContext } from "svelte";
+import Label from "./Label.svelte";
+export let color = "primary";
 export let custom = false;
 export let inline = false;
-export let group = undefined;
-export let value = '';
-export let spacing = $$slots.default ? 'me-2' : '';
-// tinted if put in component having its own background
-let background = getContext('background');
+export let group = void 0;
+export let value = "";
+export let spacing = $$slots.default ? "me-2" : "";
+let background = getContext("background");
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>

package/dist/forms/Radio.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 export declare const labelClass: (inline: boolean, extraClass: string) => string;
 export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, spacing: string, extraClass: string) => string;
 import type { FormColorType } from '../types';
@@ -44,7 +44,6 @@ export type RadioSlots = typeof __propDef.slots;
  * @prop export let value: number | string = '';
  * @prop export let spacing: string = $$slots.default ? 'me-2' : '';
  */
-export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
+export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};
-//# sourceMappingURL=Radio.svelte.d.ts.map

package/dist/forms/RadioButton.svelte

@@ -1,16 +1,15 @@
-<script>import Button from '../buttons/Button.svelte';
-import { twMerge } from 'tailwind-merge';
-export let group = '';
-export let value = '';
+<script>import Button from "../buttons/Button.svelte";
+import { twMerge } from "tailwind-merge";
+export let group = "";
+export let value = "";
 export let inline = true;
-// Button properties forwarding
 export let pill = false;
 export let outline = false;
-export let size = undefined;
-export let color = undefined;
+export let size = void 0;
+export let color = void 0;
 export let shadow = false;
 let buttonClass;
-$: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
+$: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
 <Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>

package/dist/forms/RadioButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { ButtonColorType, SizeType } from '../types';
 declare const __propDef: {
     props: {
@@ -46,7 +46,6 @@ export type RadioButtonSlots = typeof __propDef.slots;
  * @prop export let color: ButtonColorType | undefined = undefined;
  * @prop export let shadow: boolean = false;
  */
-export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }
 export {};
-//# sourceMappingURL=RadioButton.svelte.d.ts.map

package/dist/forms/Range.svelte

@@ -1,13 +1,13 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let value;
-export let size = 'md';
+export let size = "md";
 const sizes = {
-    sm: 'h-1 range-sm',
-    md: 'h-2',
-    lg: 'h-3 range-lg'
+  sm: "h-1 range-sm",
+  md: "h-2",
+  lg: "h-3 range-lg"
 };
 let inputClass;
-$: inputClass = twMerge('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
+$: inputClass = twMerge("w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700", sizes[size] ?? sizes.md, $$props.class);
 </script>
 
 <input type="range" bind:value {...$$restProps} class={inputClass} on:change on:click on:keydown on:keypress on:keyup />

package/dist/forms/Range.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -25,7 +25,6 @@ export type RangeSlots = typeof __propDef.slots;
  * @prop export let value: number;
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  */
-export default class Range extends SvelteComponent<RangeProps, RangeEvents, RangeSlots> {
+export default class Range extends SvelteComponentTyped<RangeProps, RangeEvents, RangeSlots> {
 }
 export {};
-//# sourceMappingURL=Range.svelte.d.ts.map

package/dist/forms/Search.svelte

@@ -1,12 +1,12 @@
-<script>import Wrapper from '../utils/Wrapper.svelte';
-import Input from './Input.svelte';
-export let size = 'lg';
-export let placeholder = 'Search';
-export let value = undefined;
+<script>import Wrapper from "../utils/Wrapper.svelte";
+import Input from "./Input.svelte";
+export let size = "lg";
+export let placeholder = "Search";
+export let value = void 0;
 const sizes = {
-    sm: 'w-3.5 h-3.5',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6'
+  sm: "w-3.5 h-3.5",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
 };
 </script>
 

package/dist/forms/Search.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { FormSizeType } from '../types';
 declare const __propDef: {
     props: {
@@ -37,7 +37,6 @@ export type SearchSlots = typeof __propDef.slots;
  * @prop export let placeholder: string = 'Search';
  * @prop export let value: any = undefined;
  */
-export default class Search extends SvelteComponent<SearchProps, SearchEvents, SearchSlots> {
+export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
 }
 export {};
-//# sourceMappingURL=Search.svelte.d.ts.map

package/dist/forms/Select.svelte

@@ -1,28 +1,28 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let items = [];
-export let value = undefined;
-export let placeholder = 'Choose option ...';
+export let value = void 0;
+export let placeholder = "Choose option ...";
 export let underline = false;
-export let size = 'md';
-export let defaultClass = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
-export let underlineClass = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
-const common = 'block w-full';
+export let size = "md";
+export let defaultClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
+export let underlineClass = "text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer";
+const common = "block w-full";
 const sizes = {
-    sm: 'text-sm p-2',
-    md: 'text-sm p-2.5',
-    lg: 'text-base py-3 px-4'
+  sm: "text-sm p-2",
+  md: "text-sm p-2.5",
+  lg: "text-base py-3 px-4"
 };
 let selectClass;
-$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
+$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && "!px-0", $$props.class);
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
   {#if placeholder}
-    <option disabled selected value="">{placeholder}</option>
+    <option disabled selected={(value === undefined) ? true : undefined} value="">{placeholder}</option>
   {/if}
 
-  {#each items as { value, name }}
-    <option {value}>{name}</option>
+  {#each items as { value: itemValue, name }}
+    <option value={itemValue} selected={(itemValue === value) ? true : undefined}>{name}</option>
   {:else}
     <slot />
   {/each}
@@ -37,6 +37,6 @@ $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, size
 @prop export let placeholder: string = 'Choose option ...';
 @prop export let underline: boolean = false;
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
-@prop export let defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
-@prop export let underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+@prop export let defaultClass: string = 'text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let underlineClass: string = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
 -->

package/dist/forms/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { SelectOptionType } from '../types';
 declare const __propDef: {
     props: {
@@ -33,10 +33,9 @@ export type SelectSlots = typeof __propDef.slots;
  * @prop export let placeholder: string = 'Choose option ...';
  * @prop export let underline: boolean = false;
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
- * @prop export let defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
- * @prop export let underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+ * @prop export let defaultClass: string = 'text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+ * @prop export let underlineClass: string = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
  */
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};
-//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/forms/Textarea.svelte

@@ -1,20 +1,20 @@
-<script>import { twMerge } from 'tailwind-merge';
-import { getContext } from 'svelte';
-import Wrapper from '../utils/Wrapper.svelte';
-const background = getContext('background');
-export let value = undefined;
-export let wrappedClass = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
-export let unWrappedClass = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
-export let innerWrappedClass = 'py-2 px-4 bg-white dark:bg-gray-800';
+<script>import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import Wrapper from "../utils/Wrapper.svelte";
+const background = getContext("background");
+export let value = void 0;
+export let wrappedClass = "block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50";
+export let unWrappedClass = "p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50";
+export let innerWrappedClass = "py-2 px-4 bg-white dark:bg-gray-800";
 let wrapped;
 $: wrapped = $$slots.header || $$slots.footer;
 let wrapperClass;
-$: wrapperClass = twMerge('w-full rounded-lg bg-gray-50', background ? 'dark:bg-gray-800' : 'dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
+$: wrapperClass = twMerge("w-full rounded-lg bg-gray-50", background ? "dark:bg-gray-600" : "dark:bg-gray-700", "text-gray-900 dark:placeholder-gray-400 dark:text-white", "border border-gray-200", background ? "dark:border-gray-500" : "dark:border-gray-600", $$props.class);
 let textareaClass;
 $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
-const headerClass = (header) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
+const headerClass = (header) => twMerge(header ? "border-b" : "border-t", "py-2 px-3 border-gray-200", background ? "dark:border-gray-500" : "dark:border-gray-600");
 let innerWrapperClass;
-$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded-b-lg', $$slots.header ? '' : 'rounded-t-lg');
+$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? "" : "rounded-b-lg", $$slots.header ? "" : "rounded-t-lg");
 </script>
 
 <Wrapper show={wrapped} class={wrapperClass}>
@@ -24,7 +24,7 @@ $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded
     </div>
   {/if}
   <Wrapper show={wrapped} class={innerWrapperClass}>
-    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...$$restProps} class={textareaClass} />
+    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste on:select {...$$restProps} class={textareaClass} />
   </Wrapper>
   {#if $$slots.footer}
     <div class={headerClass(false)}>
@@ -38,7 +38,7 @@ $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let value: any = undefined;
-@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
-@prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
 @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
 -->

package/dist/forms/Textarea.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -21,6 +21,7 @@ declare const __propDef: {
         mouseleave: MouseEvent;
         mouseover: MouseEvent;
         paste: ClipboardEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -36,11 +37,10 @@ export type TextareaSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let value: any = undefined;
- * @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
- * @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+ * @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+ * @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
  * @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
  */
-export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
 }
 export {};
-//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/forms/Toggle.svelte

@@ -1,33 +1,32 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import Checkbox from './Checkbox.svelte';
-export let size = 'default';
+<script>import { getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
+import Checkbox from "./Checkbox.svelte";
+export let size = "default";
 export let group = [];
-export let value = '';
-export let checked = undefined;
-export let customSize = '';
-// tinted if put in component having its own background
-let background = getContext('background');
+export let value = "";
+export let checked = void 0;
+export let customSize = "";
+let background = getContext("background");
 const common = "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
 const colors = {
-    primary: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600',
-    secondary: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600',
-    red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
-    green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
-    purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
-    yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
-    teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
-    orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
-    blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+  primary: "peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600",
+  secondary: "peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600",
+  red: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",
+  green: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",
+  purple: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",
+  yellow: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400",
+  teal: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",
+  orange: "peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500",
+  blue: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600"
 };
 const sizes = {
-    small: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
-    default: 'w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5',
-    large: 'w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6',
-    custom: customSize
+  small: "w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4",
+  default: "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5",
+  large: "w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6",
+  custom: customSize
 };
 let divClass;
-$: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
+$: divClass = twMerge(common, background ? "dark:bg-gray-600 dark:border-gray-500" : "dark:bg-gray-700 dark:border-gray-600", colors[$$restProps.color ?? "primary"], sizes[size], "relative", $$props.classDiv);
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>

package/dist/forms/Toggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -30,7 +30,6 @@ export type ToggleSlots = typeof __propDef.slots;
  * @prop export let checked: boolean | undefined = undefined;
  * @prop export let customSize: string = '';
  */
-export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }
 export {};
-//# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/gallery/Gallery.svelte

@@ -1,10 +1,9 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let items = [];
-export let imgClass = 'h-auto max-w-full rounded-lg';
-$: divClass = twMerge('grid', $$props.class);
+export let imgClass = "h-auto max-w-full rounded-lg";
+$: divClass = twMerge("grid", $$props.class);
 function init(node) {
-    if (getComputedStyle(node).gap === 'normal')
-        node.style.gap = 'inherit';
+  if (getComputedStyle(node).gap === "normal") node.style.gap = "inherit";
 }
 </script>
 

package/dist/gallery/Gallery.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { ImgType } from '../types';
 declare const __propDef: {
     props: {
@@ -24,7 +24,6 @@ export type GallerySlots = typeof __propDef.slots;
  * @prop export let items: ImgType[] = [];
  * @prop export let imgClass: string = 'h-auto max-w-full rounded-lg';
  */
-export default class Gallery extends SvelteComponent<GalleryProps, GalleryEvents, GallerySlots> {
+export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
 }
 export {};
-//# sourceMappingURL=Gallery.svelte.d.ts.map

package/dist/index.d.ts

@@ -136,4 +136,3 @@ export { default as Frame } from "./utils/Frame.svelte";
 export { default as TransitionFrame } from "./utils/TransitionFrame.svelte";
 export { default as Video } from "./video/Video.svelte";
 export * from "./types";
-//# sourceMappingURL=index.d.ts.map

package/dist/indicators/Indicator.svelte

@@ -1,60 +1,60 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let color = 'gray';
+<script>import { twMerge } from "tailwind-merge";
+export let color = "gray";
 export let rounded = false;
-export let size = 'md';
+export let size = "md";
 export let border = false;
-export let placement = undefined;
+export let placement = void 0;
 export let offset = true;
 const colors = {
-    gray: 'bg-gray-200',
-    dark: 'bg-gray-900 dark:bg-gray-700',
-    blue: 'bg-blue-600',
-    orange: 'bg-orange-600',
-    green: 'bg-green-500',
-    red: 'bg-red-500',
-    purple: 'bg-purple-500',
-    indigo: 'bg-indigo-500',
-    yellow: 'bg-yellow-300',
-    teal: 'bg-teal-500',
-    none: ''
+  gray: "bg-gray-200",
+  dark: "bg-gray-900 dark:bg-gray-700",
+  blue: "bg-blue-600",
+  orange: "bg-orange-600",
+  green: "bg-green-500",
+  red: "bg-red-500",
+  purple: "bg-purple-500",
+  indigo: "bg-indigo-500",
+  yellow: "bg-yellow-300",
+  teal: "bg-teal-500",
+  none: ""
 };
 const sizes = {
-    xs: 'w-2 h-2',
-    sm: 'w-2.5 h-2.5',
-    md: 'w-3 h-3',
-    lg: 'w-3.5 h-3.5',
-    xl: 'w-6 h-6'
+  xs: "w-2 h-2",
+  sm: "w-2.5 h-2.5",
+  md: "w-3 h-3",
+  lg: "w-3.5 h-3.5",
+  xl: "w-6 h-6"
 };
 const placements = {
-    // top
-    'top-left': 'top-0 start-0',
-    'top-center': 'top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2',
-    'top-right': 'top-0 end-0',
-    // center
-    'center-left': 'top-1/2 -translate-y-1/2 start-0',
-    center: 'top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2',
-    'center-right': 'top-1/2 -translate-y-1/2 end-0',
-    // bottom
-    'bottom-left': 'bottom-0 start-0',
-    'bottom-center': 'bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2',
-    'bottom-right': 'bottom-0 end-0'
+  // top
+  "top-left": "top-0 start-0",
+  "top-center": "top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2",
+  "top-right": "top-0 end-0",
+  // center
+  "center-left": "top-1/2 -translate-y-1/2 start-0",
+  center: "top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2",
+  "center-right": "top-1/2 -translate-y-1/2 end-0",
+  // bottom
+  "bottom-left": "bottom-0 start-0",
+  "bottom-center": "bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2",
+  "bottom-right": "bottom-0 end-0"
 };
 const offsets = {
-    // top
-    'top-left': '-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3',
-    'top-center': '-translate-y-1/3',
-    'top-right': 'translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3',
-    // center
-    'center-left': '-translate-x-1/3 rtl:translate-x-1/3',
-    center: '',
-    'center-right': 'translate-x-1/3 rtl:-translate-x-1/3',
-    // bottom
-    'bottom-left': '-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3',
-    'bottom-center': 'translate-y-1/3',
-    'bottom-right': 'translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3'
+  // top
+  "top-left": "-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3",
+  "top-center": "-translate-y-1/3",
+  "top-right": "translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3",
+  // center
+  "center-left": "-translate-x-1/3 rtl:translate-x-1/3",
+  center: "",
+  "center-right": "translate-x-1/3 rtl:-translate-x-1/3",
+  // bottom
+  "bottom-left": "-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3",
+  "bottom-center": "translate-y-1/3",
+  "bottom-right": "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3"
 };
 let dotClass;
-$: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
+$: dotClass = twMerge("flex-shrink-0", rounded ? "rounded" : "rounded-full", border && "border-2 border-white dark:border-gray-800", sizes[size], colors[color], $$slots.default && "inline-flex items-center justify-center", placement && "absolute " + placements[placement], placement && offset && offsets[placement], $$props.class);
 </script>
 
 <div class={dotClass}><slot /></div>

package/dist/indicators/Indicator.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { IndicatorPlacementType } from '../types';
 declare const __propDef: {
     props: {
@@ -30,7 +30,6 @@ export type IndicatorSlots = typeof __propDef.slots;
  * @prop export let placement: IndicatorPlacementType | undefined = undefined;
  * @prop export let offset: boolean = true;
  */
-export default class Indicator extends SvelteComponent<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
 }
 export {};
-//# sourceMappingURL=Indicator.svelte.d.ts.map

package/dist/kbd/ArrowKeyDown.svelte

@@ -1,5 +1,5 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let svgClass = 'w-4 h-4';
+<script>import { twMerge } from "tailwind-merge";
+export let svgClass = "w-4 h-4";
 </script>
 
 <svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">

package/dist/kbd/ArrowKeyDown.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -17,7 +17,6 @@ export type ArrowKeyDownSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let svgClass: string = 'w-4 h-4';
  */
-export default class ArrowKeyDown extends SvelteComponent<ArrowKeyDownProps, ArrowKeyDownEvents, ArrowKeyDownSlots> {
+export default class ArrowKeyDown extends SvelteComponentTyped<ArrowKeyDownProps, ArrowKeyDownEvents, ArrowKeyDownSlots> {
 }
 export {};
-//# sourceMappingURL=ArrowKeyDown.svelte.d.ts.map

package/dist/kbd/ArrowKeyLeft.svelte

@@ -1,5 +1,5 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let svgClass = 'w-4 h-4';
+<script>import { twMerge } from "tailwind-merge";
+export let svgClass = "w-4 h-4";
 </script>
 
 <svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">