flowbite-svelte 0.44.10 → 0.44.12

package/src/lib/forms/Radio.svelte

@@ -1,53 +0,0 @@
-<script context="module" lang="ts">
-  // this part is shared between Radio and Checkbox
-  import { twMerge } from 'tailwind-merge';
-
-  const colorClasses: Record<FormColorType, string> = {
-    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: boolean, extraClass: string) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-  export let spacing: string = 'mr-2';
-
-  export const inputClass = (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => 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 lang="ts">
-  import { getContext } from 'svelte';
-  import type { FormColorType } from '../types';
-  import Label from './Label.svelte';
-
-  export let color: FormColorType = 'primary';
-  export let custom: boolean = false;
-  export let inline: boolean = false;
-  export let group: number | string = '';
-  export let value: number | string = '';
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-</script>
-
-<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} />
-  <slot />
-</Label>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let spacing: string = 'mr-2';
-@prop export let color: FormColorType = 'primary';
-@prop export let custom: boolean = false;
-@prop export let inline: boolean = false;
-@prop export let group: number | string = '';
-@prop export let value: number | string = '';
--->

package/src/lib/forms/RadioInline.svelte

@@ -1,9 +0,0 @@
-<div class="flex">
-  <slot />
-</div>
-
-<!--
-  @component
-  [Go to ](https://flowbite-svelte.com/docs/components/)
-  
--->

package/src/lib/forms/Range.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let value: number;
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-
-  const sizes = {
-    sm: 'h-1 range-sm',
-    md: 'h-2',
-    lg: 'h-3 range-lg'
-  };
-  let inputClass: string;
-  $: 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 />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let value: number;
-@prop export let size: 'sm' | 'md' | 'lg' = 'md';
--->

package/src/lib/forms/Search.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import type { FormSizeType } from '$lib/types';
-  import Wrapper from '$lib/utils/Wrapper.svelte';
-  import Input from './Input.svelte';
-
-  export let size: FormSizeType = 'lg';
-  export let placeholder: string = 'Search';
-  export let value: any = undefined;
-
-  const sizes = {
-    sm: 'w-3.5 h-3.5',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6'
-  };
-</script>
-
-<Wrapper class="relative w-full" show={$$slots.default}>
-  <Input bind:value on:blur on:change on:input on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste type="search" {placeholder} {size} {...$$restProps} class={$$props.class}>
-    <svg slot="left" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-    </svg>
-    <!-- We can use it here. See below. This will trigger right padding
-      <slot slot="right" />
-    -->
-  </Input>
-  <!-- This slot should be within Input as a slot='right'
-    Svelete has an issue with forwarded slots and even empty slot here will appear as existing slot in Input.
-    Due to that we need the below slot and Wrapper around
-  -->
-  {#if $$slots.default}
-    <div class="flex absolute inset-y-0 right-0 items-center text-gray-500 dark:text-gray-400">
-      <slot />
-    </div>
-  {/if}
-</Wrapper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let size: FormSizeType = 'lg';
-@prop export let placeholder: string = 'Search';
-@prop export let value: any = undefined;
--->

package/src/lib/forms/Select.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { SelectOptionType } from '../types';
-
-  export let items: SelectOptionType[] = [];
-  export let value: any = undefined;
-  export let placeholder: string = 'Choose option ...';
-  export let underline: boolean = false;
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-
-  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';
-
-  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';
-
-  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'
-  };
-
-  let selectClass: string;
-  $: 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>
-  {/if}
-
-  {#each items as { value, name }}
-    <option {value}>{name}</option>
-  {:else}
-    <slot />
-  {/each}
-</select>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let items: SelectOptionType[] = [];
-@prop export let value: any = undefined;
-@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';
--->

package/src/lib/forms/Textarea.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { getContext } from 'svelte';
-  import Wrapper from '../utils/Wrapper.svelte';
-
-  const background = getContext('background');
-
-  export let value: any = undefined;
-  export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
-  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';
-  export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
-  let wrapped: boolean;
-  $: wrapped = $$slots.header || $$slots.footer;
-
-  let wrapperClass: string;
-  $: wrapperClass = twMerge('w-full rounded-lg', background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
-
-  let textareaClass: string;
-  $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
-
-  const headerClass = (header: boolean) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
-
-  let innerWrapperClass: string;
-  $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
-</script>
-
-<Wrapper show={wrapped} class={wrapperClass}>
-  {#if $$slots.header}
-    <div class={headerClass(true)}>
-      <slot name="header" />
-    </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} />
-  </Wrapper>
-  {#if $$slots.footer}
-    <div class={headerClass(false)}>
-      <slot name="footer" />
-    </div>
-  {/if}
-</Wrapper>
-
-<!--
-@component
-[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 innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
--->

package/src/lib/forms/Toggle.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
-  import Checkbox from './Checkbox.svelte';
-  import type { FormColorType } from '../types';
-
-  export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
-  export let group: (string | number)[] = [];
-  export let value: string | number = '';
-  export let checked: boolean | undefined = undefined;
-  export let customSize: string = '';
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-
-  const common = "mr-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 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'
-  };
-
-  const sizes = {
-    small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
-    default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
-    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6',
-    custom: customSize
-  };
-
-  let divClass: string;
-
-  $: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
-</script>
-
-<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
-  <span class={divClass} />
-  <slot />
-</Checkbox>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
-@prop export let group: (string | number)[] = [];
-@prop export let value: string | number = '';
-@prop export let checked: boolean | undefined = undefined;
-@prop export let customSize: string = '';
--->

package/src/lib/forms/VoiceSearch.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let id: string = '';
-  export let labelClass: string = 'sr-only';
-  export let iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-  export let iconDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
-  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-  export let btnClass: string = 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-  export let voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
-  export let voiceIconClass: string = 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
-  export let placeholder: string = 'Search Mockups, Logos, Design Templates...';
-
-  const dispatch = createEventDispatcher();
-
-  const handleVoiceBtn = () => {
-    dispatch('handleVoiceBtn');
-  };
-</script>
-
-<form class="flex items-center" on:submit>
-  <label for={id} class={labelClass}>Search</label>
-  <div class="relative w-full">
-    <div class={iconDivClass}>
-      <svg class={iconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-      </svg>
-    </div>
-    <input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
-    <button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
-      <svg class={voiceIconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
-      </svg>
-    </button>
-  </div>
-  <button type="submit" class={btnClass}>
-    <svg class="mr-2 -ml-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-    </svg>
-    Search
-  </button>
-</form>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let id: string = '';
-@prop export let labelClass: string = 'sr-only';
-@prop export let iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-@prop export let iconDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
-@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-@prop export let btnClass: string = 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-@prop export let voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
-@prop export let voiceIconClass: string = 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
-@prop export let placeholder: string = 'Search Mockups, Logos, Design Templates...';
--->

package/src/lib/gallery/Gallery.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import type { ImgType } from '$lib/types';
-  import { twMerge } from 'tailwind-merge';
-
-  export let items: ImgType[] = [];
-  export let imgClass: string = 'h-auto max-w-full rounded-lg';
-
-  $: divClass = twMerge('grid', $$props.class);
-
-  function init(node: HTMLElement) {
-    if (getComputedStyle(node).gap === 'normal') node.style.gap = 'inherit';
-  }
-</script>
-
-<div {...$$restProps} class={divClass} use:init>
-  {#each items as item}
-    <slot {item}>
-      <div><img src={item.src} alt={item.alt} class={twMerge(imgClass, $$props.classImg)} /></div>
-    </slot>
-  {:else}
-    <slot item={items[0]} />
-  {/each}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let items: ImgType[] = [];
-@prop export let imgClass: string = 'h-auto max-w-full rounded-lg';
--->

package/src/lib/index.ts

@@ -1,225 +0,0 @@
-// Accordion
-export { default as Accordion } from './accordion/Accordion.svelte';
-export { default as AccordionItem } from './accordion/AccordionItem.svelte';
-
-// Alerts
-export { default as Alert } from './alerts/Alert.svelte';
-
-// Avatar
-export { default as Avatar } from './avatar/Avatar.svelte';
-
-// Badges
-export { default as Badge } from './badges/Badge.svelte';
-
-// Banner
-export { default as Banner } from './banner/Banner.svelte';
-
-// Bottom navigation
-export { default as BottomNav } from './bottom-nav/BottomNav.svelte';
-export { default as BottomNavItem } from './bottom-nav/BottomNavItem.svelte';
-export { default as BottomNavHeader } from './bottom-nav/BottomNavHeader.svelte';
-export { default as BottomNavHeaderItem } from './bottom-nav/BottomNavHeaderItem.svelte';
-
-// Breadcrumbs
-export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
-export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
-
-// Buttons
-export { default as Button } from './buttons/Button.svelte';
-export { default as GradientButton } from './buttons/GradientButton.svelte';
-
-// Buttongroups
-export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
-
-// Cards
-export { default as Card } from './cards/Card.svelte';
-
-// Carousels
-export { default as Carousel } from './carousels/Carousel.svelte';
-export { default as Thumbnails } from './carousels/Thumbnails.svelte';
-
-// Charts
-export { default as Chart } from './charts/Chart.svelte';
-
-// Dark mode
-export { default as DarkMode } from './darkmode/DarkMode.svelte';
-
-// Datepicker
-export { default as Datepicker } from './datepicker/Datepicker.svelte';
-
-// DeviceMockup
-export { default as DeviceMockup } from './device-mockup/DeviceMockup.svelte';
-
-// Drawer
-export { default as Drawer } from './drawer/Drawer.svelte';
-
-// Dropdown
-export { default as Dropdown } from './dropdowns/Dropdown.svelte';
-export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
-export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
-export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
-
-// Footers
-export { default as Footer } from './footer/Footer.svelte';
-export { default as FooterBrand } from './footer/FooterBrand.svelte';
-export { default as FooterCopyright } from './footer/FooterCopyright.svelte';
-export { default as FooterIcon } from './footer/FooterIcon.svelte';
-export { default as FooterLink } from './footer/FooterLink.svelte';
-export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
-
-// Forms
-export { default as Checkbox } from './forms/Checkbox.svelte';
-export { default as Dropzone } from './forms/Dropzone.svelte';
-export { default as Fileupload } from './forms/Fileupload.svelte';
-export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
-export { default as Helper } from './forms/Helper.svelte';
-export { default as Input } from './forms/Input.svelte';
-export { default as InputAddon } from './forms/InputAddon.svelte';
-export { default as Label } from './forms/Label.svelte';
-export { default as MultiSelect } from './forms/MultiSelect.svelte';
-export { default as NumberInput } from './forms/NumberInput.svelte';
-export { default as RadioInline } from './forms/RadioInline.svelte';
-export { default as Radio } from './forms/Radio.svelte';
-export { default as Range } from './forms/Range.svelte';
-export { default as Search } from './forms/Search.svelte';
-export { default as Select } from './forms/Select.svelte';
-export { default as Textarea } from './forms/Textarea.svelte';
-export { default as Toggle } from './forms/Toggle.svelte';
-export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
-
-// Gallery
-export { default as Gallery } from './gallery/Gallery.svelte';
-
-// Indicator
-export { default as Indicator } from './indicators/Indicator.svelte';
-
-// Kbd
-export { default as Kbd } from './kbd/Kbd.svelte';
-export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
-export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
-export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
-export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
-
-// List
-export { default as Listgroup } from './list-group/Listgroup.svelte';
-export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
-
-// Modals
-export { default as Modal } from './modals/Modal.svelte';
-
-// MegaMenu
-export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
-
-// Navbar
-export { default as Navbar } from './navbar/Navbar.svelte';
-export { default as NavBrand } from './navbar/NavBrand.svelte';
-export { default as NavHamburger } from './navbar/NavHamburger.svelte';
-export { default as NavLi } from './navbar/NavLi.svelte';
-export { default as NavUl } from './navbar/NavUl.svelte';
-
-// Pagination
-export { default as Pagination } from './paginations/Pagination.svelte';
-export { default as PaginationItem } from './paginations/PaginationItem.svelte';
-
-// Popover
-export { default as Popover } from './popover/Popover.svelte';
-
-// Progressbar
-export { default as Progressbar } from './progressbars/Progressbar.svelte';
-
-// Rating
-export { default as Rating } from './ratings/Rating.svelte';
-export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
-export { default as ScoreRating } from './ratings/ScoreRating.svelte';
-export { default as RatingComment } from './ratings/RatingComment.svelte';
-export { default as Review } from './ratings/Review.svelte';
-export { default as Star } from './ratings/Star.svelte';
-export { default as Heart } from './ratings/Heart.svelte';
-export { default as Thumbup } from './ratings/Thumbup.svelte';
-
-// Sidebar
-export { default as Sidebar } from './sidebars/Sidebar.svelte';
-export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
-export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
-export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
-export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
-export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
-export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
-export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
-
-// Skeleton
-export { default as CardPlaceholder } from './skeleton/CardPlaceholder.svelte';
-export { default as ImagePlaceholder } from './skeleton/ImagePlaceholder.svelte';
-export { default as ListPlaceholder } from './skeleton/ListPlaceholder.svelte';
-export { default as Skeleton } from './skeleton/Skeleton.svelte';
-export { default as TestimonialPlaceholder } from './skeleton/TestimonialPlaceholder.svelte';
-export { default as TextPlaceholder } from './skeleton/TextPlaceholder.svelte';
-export { default as VideoPlaceholder } from './skeleton/VideoPlaceholder.svelte';
-export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelte';
-
-// Speed dial
-export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
-export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
-
-// Spin
-export { default as Spinner } from './spinners/Spinner.svelte';
-
-// Steps
-export { default as StepIndicator } from './steps/StepIndicator.svelte';
-
-// Tables
-export { default as Table } from './tables/Table.svelte';
-export { default as TableBody } from './tables/TableBody.svelte';
-export { default as TableBodyCell } from './tables/TableBodyCell.svelte';
-export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
-export { default as TableHead } from './tables/TableHead.svelte';
-export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
-export { default as TableSearch } from './tables/TableSearch.svelte';
-
-// Tabs
-export { default as TabItem } from './tabs/TabItem.svelte';
-export { default as Tabs } from './tabs/Tabs.svelte';
-
-// Timeline
-export { default as Group } from './timeline/Group.svelte';
-export { default as GroupItem } from './timeline/GroupItem.svelte';
-export { default as Activity } from './timeline/Activity.svelte';
-export { default as ActivityItem } from './timeline/ActivityItem.svelte';
-export { default as Timeline } from './timeline/Timeline.svelte';
-export { default as TimelineItem } from './timeline/TimelineItem.svelte';
-export { default as TimelineHorizontal } from './timeline/TimelineHorizontal.svelte';
-export { default as TimelineItemHorizontal } from './timeline/TimelineItemHorizontal.svelte';
-export { default as TimelineItemVertical } from './timeline/TimelineItemVertical.svelte';
-
-// Toast
-export { default as Toast } from './toasts/Toast.svelte';
-
-// Toolbar
-export { default as Toolbar } from './toolbar/Toolbar.svelte';
-export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
-export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
-
-// Tooltips
-export { default as Tooltip } from './tooltips/Tooltip.svelte';
-
-// Typography
-export { default as A } from './typography/A.svelte';
-export { default as Blockquote } from './typography/Blockquote.svelte';
-export { default as DescriptionList } from './typography/DescriptionList.svelte';
-export { default as Heading } from './typography/Heading.svelte';
-export { default as Hr } from './typography/Hr.svelte';
-export { default as Img } from './typography/Img.svelte';
-export { default as Layout } from './typography/Layout.svelte';
-export { default as Li } from './typography/Li.svelte';
-export { default as Mark } from './typography/Mark.svelte';
-export { default as List } from './typography/List.svelte';
-export { default as P } from './typography/P.svelte';
-export { default as Secondary } from './typography/Secondary.svelte';
-export { default as Span } from './typography/Span.svelte';
-
-// utils
-export { default as CloseButton } from './utils/CloseButton.svelte';
-export { default as Frame } from './utils/Frame.svelte';
-
-// video
-export { default as Video } from './video/Video.svelte';