flowbite-svelte 0.44.11 → 0.44.13

package/src/lib/device-mockup/DeviceMockup.svelte

@@ -1,235 +0,0 @@
-<script lang="ts">
-  import { twJoin, twMerge } from 'tailwind-merge';
-  import DefaultMockup from './DefaultMockup.svelte';
-  import Ios from './Ios.svelte';
-  import Android from './Android.svelte';
-  import Tablet from './Tablet.svelte';
-  import Smartwatch from './Smartwatch.svelte';
-
-  export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
-
-  // android
-  export let androidDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
-  export let androidSlot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-  export let androidTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-  export let androidLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-  export let androidLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  export let androidLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  export let androidRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-
-  // default
-  export let defaultDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
-  export let defaultSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-  export let defaultTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-  export let defaultLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  export let defaultLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  export let defaultRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-
-  // desktop
-  export let desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-  export let desktopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
-  export let desktopBotUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
-  export let destopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
-  export let desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-
-  // ios
-  export let iosDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
-  export let iosSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-  export let iosTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-  export let iosLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  export let iosLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  export let iosRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-
-  // laptop
-  export let laptopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
-  export let laptopSlot: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-  export let laptopInner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-  export let laptopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
-  export let laptopBotCen: string = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
-
-  // smartwatch
-  export let smartwatchDiv: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-  export let smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-  export let smartRightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-  export let smartRightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-  export let smartTop: string = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
-  export let smartBot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
-  export let smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-
-  // tablet
-  export let tabletDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
-  export let tabletSlot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-  export let tabletLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-  export let tabletLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  export let tabletLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  export let tabletRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-
-  // android
-  let androidDivCls: string = twMerge(androidDiv, $$props.classAndroidDiv);
-  let androidSlotCls: string = twMerge(androidSlot, $$props.classAndroidSlot);
-  let androidTopCls: string = twMerge(androidTop, $$props.classAndroidTop);
-  let androidLeftTopCls: string = twMerge(androidLeftTop, $$props.classAndroidLeftTop);
-  let androidLeftMidCls: string = twMerge(androidLeftMid, $$props.classAndroidLeftMid);
-  let androidLeftBotCls: string = twMerge(androidLeftBot, $$props.classAndroidLeftBot);
-  let androidRightCls: string = twMerge(androidRight, $$props.classAndroidRight);
-
-  //default
-  let defaultDivCls: string = twMerge(defaultDiv, $$props.classDefaultDiv);
-  let defaultSlotCls: string = twMerge(defaultSlot, $$props.classDefaultSlot);
-  let defaultTopCls: string = twMerge(defaultTop, $$props.classDefaultTop);
-  let defaultLeftTopCls: string = twMerge(defaultLeftTop, $$props.classDefaultLeftTop);
-  let defaultLeftBotCls: string = twMerge(defaultLeftBot, $$props.classDefaultLeftBot);
-  let defaultRightCls: string = twMerge(defaultRight, $$props.classDefaultRight);
-
-  // desktop
-  let desktopInnerCls: string = twMerge(desktopInner, $$props.classDesktopInner);
-  let desktopBotCls: string = twMerge(desktopBot, $$props.classDesktopBot);
-  let desktopBotUnderCls: string = twMerge(desktopBotUnder, $$props.classDesktopBotUnder);
-  let destopDivCls: string = twMerge(destopDiv, $$props.classDestopDiv);
-  let desktopSlotCls: string = twMerge(desktopSlot, $$props.classDesktopSlot);
-
-  // ios
-  let iosDivCls: string = twMerge(iosDiv, $$props.classIosDiv);
-  let iosSlotCls: string = twMerge(iosSlot, $$props.classIosSlot);
-  let iosTopCls: string = twMerge(iosTop, $$props.classIosTop);
-  let iosLeftTopCls: string = twMerge(iosLeftTop, $$props.classIosLeftTop);
-  let iosLeftBotCls: string = twMerge(iosLeftBot, $$props.classIosLeftBot);
-  let iosRightCls: string = twMerge(iosRight, $$props.classIosRight);
-
-  // laptop
-  let laptopDivCls: string = twMerge(laptopDiv, $$props.classLaptopDiv);
-  let laptopSlotCls: string = twMerge(laptopSlot, $$props.classLaptopSlot);
-  let laptopInnerCls: string = twMerge(laptopInner, $$props.classLaptopInner);
-  let laptopBotCls: string = twMerge(laptopBot, $$props.classLaptopBot);
-  let laptopBotCenCls: string = twMerge(laptopBotCen, $$props.classLaptopBotCen);
-
-  // smartwatch
-  let smartwatchDivCls: string = twMerge(smartwatchDiv, $$props.classSmartwatchDiv);
-  let smartwatchSlotCls: string = twMerge(smartwatchSlot, $$props.classSmartwatchSlot);
-  let smartRightTopCls: string = twMerge(smartRightTop, $$props.classSmartRightTop);
-  let smartRightBotCls: string = twMerge(smartRightBot, $$props.classSmartRightBot);
-  let smartTopCls: string = twMerge(smartTop, $$props.classSmartTop);
-  let smartBotCls: string = twMerge(smartBot, $$props.classSmartBot);
-  let smartwatchInnerCls: string = twMerge(smartwatchInner, $$props.classSmartwatchInner);
-
-  // tablet
-
-  let tabletDivCls: string = twMerge(tabletDiv, $$props.classTabletDiv);
-  let tabletSlotCls: string = twMerge(tabletSlot, $$props.classTabletSlot);
-  let tabletLeftTopCls: string = twMerge(tabletLeftTop, $$props.classTabletLeftTop);
-  let tabletLeftMidCls: string = twMerge(tabletLeftMid, $$props.classTabletLeftMid);
-  let tabletLeftBotCls: string = twMerge(tabletLeftBot, $$props.classTabletLeftBot);
-  let tabletRightCls: string = twMerge(tabletRight, $$props.classTabletRight);
-
-  const divClasses = {
-    default: defaultDivCls,
-    ios: iosDivCls,
-    android: androidDivCls,
-    tablet: tabletDivCls,
-    laptop: laptopDivCls,
-    desktop: destopDivCls,
-    smartwatch: smartwatchDivCls
-  };
-
-  const slotClasses = {
-    default: defaultSlotCls,
-    ios: iosSlotCls,
-    android: androidSlotCls,
-    tablet: tabletSlotCls,
-    laptop: laptopSlotCls,
-    desktop: desktopSlotCls,
-    smartwatch: smartwatchSlotCls
-  };
-</script>
-
-<div class={twMerge(divClasses[device], $$props.class)}>
-  {#if device === 'default'}
-    <DefaultMockup defaultTop={defaultTopCls} defaultLeftTop={defaultLeftTopCls} defaultLeftBot={defaultLeftBotCls} defaultRight={defaultRightCls} />
-  {:else if device === 'ios'}
-    <Ios iosTop={iosTopCls} iosLeftTop={iosLeftTopCls} iosLeftBot={iosLeftBotCls} iosRight={iosRightCls} />
-  {:else if device === 'android'}
-    <Android androidTop={androidTopCls} androidLeftTop={androidLeftTopCls} androidLeftMid={androidLeftMidCls} androidLeftBot={androidLeftBotCls} androidRight={androidRightCls} />
-  {:else if device === 'tablet'}
-    <Tablet tabletLeftTop={tabletLeftTopCls} tabletLeftMid={tabletLeftMidCls} tabletLeftBot={tabletLeftBotCls} tabletRight={tabletRightCls} />
-  {/if}
-  {#if device === 'laptop'}
-    <div class={laptopInnerCls}>
-      <slot />
-    </div>
-  {:else if device === 'desktop'}
-    <div class={desktopInnerCls}>
-      <slot />
-    </div>
-  {:else if device === 'smartwatch'}
-    <!-- No code -->
-  {:else}
-    <div class={slotClasses[device]}>
-      <slot />
-    </div>
-  {/if}
-</div>
-{#if device === 'laptop'}
-  <div class={laptopBotCls}>
-    <div class={laptopBotCenCls} />
-  </div>
-{:else if device === 'desktop'}
-  <div class={desktopBotCls} />
-  <div class={desktopBotUnderCls} />
-{:else if device === 'smartwatch'}
-  <div class={smartTopCls}>
-    <Smartwatch smartRightTop={smartRightTopCls} smartRightBot={smartRightBotCls} />
-    <div class={smartwatchInnerCls}>
-      <slot />
-    </div>
-  </div>
-  <div class={smartBotCls} />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
-@prop export let androidDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
-@prop export let androidSlot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let androidTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let androidLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let androidLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let androidLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let androidRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let defaultDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
-@prop export let defaultSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let defaultTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let defaultLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let defaultLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let defaultRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-@prop export let desktopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
-@prop export let desktopBotUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
-@prop export let destopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
-@prop export let desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-@prop export let iosDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
-@prop export let iosSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let iosTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let iosLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let iosLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let iosRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let laptopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
-@prop export let laptopSlot: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-@prop export let laptopInner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-@prop export let laptopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
-@prop export let laptopBotCen: string = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
-@prop export let smartwatchDiv: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-@prop export let smartRightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-@prop export let smartRightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-@prop export let smartTop: string = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
-@prop export let smartBot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-@prop export let tabletDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
-@prop export let tabletSlot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-@prop export let tabletLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let tabletLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let tabletLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let tabletRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
--->

package/src/lib/device-mockup/Ios.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  export let iosTop: string;
-  export let iosLeftTop: string;
-  export let iosLeftBot: string;
-  export let iosRight: string;
-</script>
-
-<div class={iosTop} />
-<div class={iosLeftTop} />
-<div class={iosLeftBot} />
-<div class={iosRight} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let iosTop: string;
-@prop export let iosLeftTop: string;
-@prop export let iosLeftBot: string;
-@prop export let iosRight: string;
--->

package/src/lib/device-mockup/Smartwatch.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  export let smartRightTop: string;
-  export let smartRightBot: string;
-</script>
-
-<div class={smartRightTop} />
-<div class={smartRightBot} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let smartRightTop: string;
-@prop export let smartRightBot: string;
--->

package/src/lib/device-mockup/Tablet.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  export let tabletLeftTop: string;
-  export let tabletLeftMid: string;
-  export let tabletLeftBot: string;
-  export let tabletRight: string;
-</script>
-
-<div class={tabletLeftTop} />
-<div class={tabletLeftMid} />
-<div class={tabletLeftBot} />
-<div class={tabletRight} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let tabletLeftTop: string;
-@prop export let tabletLeftMid: string;
-@prop export let tabletLeftBot: string;
-@prop export let tabletRight: string;
--->

package/src/lib/drawer/Drawer.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
-  import { fly, slide, blur, fade } from 'svelte/transition';
-  import { clickOutside } from '../utils/clickOutside';
-
-  export let activateClickOutside: boolean = true;
-  export let hidden: boolean = true;
-  export let position: 'fixed' | 'absolute' = 'fixed';
-  export let leftOffset: string = 'inset-y-0 left-0';
-  export let rightOffset: string = 'inset-y-0 right-0';
-  export let topOffset: string = 'inset-x-0 top-0';
-  export let bottomOffset: string = 'inset-x-0 bottom-0';
-  export let width: string = 'w-80';
-  export let backdrop: boolean = true;
-  export let bgColor: string = 'bg-gray-900';
-  export let bgOpacity: string = 'bg-opacity-75';
-  export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
-  export let id: string = 'drawer-example';
-  export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
-  export let transitionParams: drawerTransitionParamTypes = {};
-  export let transitionType: drawerTransitionTypes = 'fly';
-
-  function multiple(node: HTMLElement, params: any) {
-    switch (transitionType) {
-      case 'slide':
-        return slide(node, params);
-      case 'blur':
-        return blur(node, params);
-      case 'fade':
-        return fade(node, params);
-      default:
-        return fly(node, params);
-    }
-  }
-
-  const placements = {
-    left: leftOffset,
-    right: rightOffset,
-    top: topOffset,
-    bottom: bottomOffset
-  };
-
-  const handleDrawer = () => {
-    hidden = !hidden;
-  };
-
-  let backdropDivClass = twMerge('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
-
-  function clickOutsideWrapper(node: HTMLElement, callback: () => void) {
-    return activateClickOutside ? clickOutside(node, callback) : undefined;
-  }
-</script>
-
-{#if !hidden}
-  {#if backdrop && activateClickOutside}
-    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
-  {:else if backdrop && !activateClickOutside}
-    <div role="presentation" class={backdropDivClass} />
-  {/if}
-
-  <div use:clickOutsideWrapper={() => !hidden && handleDrawer()} {id} {...$$restProps} class={twMerge(divClass, width, position, placements[placement], $$props.class)} transition:multiple={transitionParams} tabindex="-1" aria-controls={id} aria-labelledby={id}>
-    <slot {hidden} />
-  </div>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activateClickOutside: boolean = true;
-@prop export let hidden: boolean = true;
-@prop export let position: 'fixed' | 'absolute' = 'fixed';
-@prop export let leftOffset: string = 'inset-y-0 left-0';
-@prop export let rightOffset: string = 'inset-y-0 right-0';
-@prop export let topOffset: string = 'inset-x-0 top-0';
-@prop export let bottomOffset: string = 'inset-x-0 bottom-0';
-@prop export let width: string = 'w-80';
-@prop export let backdrop: boolean = true;
-@prop export let bgColor: string = 'bg-gray-900';
-@prop export let bgOpacity: string = 'bg-opacity-75';
-@prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
-@prop export let id: string = 'drawer-example';
-@prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
-@prop export let transitionParams: drawerTransitionParamTypes = {};
-@prop export let transitionType: drawerTransitionTypes = 'fly';
--->

package/src/lib/dropdowns/Dropdown.svelte

@@ -1,81 +0,0 @@
-<script lang="ts" context="module">
-  export type DropdownType = {
-    activeClass: string;
-  };
-</script>
-
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import Popper from '$lib/utils/Popper.svelte';
-  import type { ComponentProps } from 'svelte';
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-
-  const activeUrlStore = writable('');
-
-  export let activeUrl: string = '';
-  export let open: boolean = false;
-  export let containerClass: string = 'divide-y z-50';
-  export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
-  export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
-  export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-
-  let activeCls = twMerge(activeClass, $$props.classActive);
-
-  setContext<DropdownType>('DropdownType', { activeClass: activeCls });
-
-  $: activeUrlStore.set(activeUrl);
-
-  setContext('activeUrl', activeUrlStore);
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Popper> {
-    open?: boolean;
-    containerClass?: string;
-    headerClass?: string;
-    footerClass?: string;
-    activeUrl?: string;
-  }
-
-  let containerCls: string = twMerge(containerClass, $$props.classContainer);
-  let headerCls: string = twMerge(headerClass, $$props.classHeader);
-  let ulCls: string = twMerge('py-1', $$props.class);
-  let footerCls: string = twMerge(footerClass, $$props.classFooter);
-
-  $: {
-    // set default values
-    $$restProps.arrow = $$restProps.arrow ?? false;
-    $$restProps.trigger = $$restProps.trigger ?? 'click';
-    $$restProps.placement = $$restProps.placement ?? 'bottom';
-    $$restProps.color = $$restProps.color ?? 'dropdown';
-    $$restProps.shadow = $$restProps.shadow ?? true;
-    $$restProps.rounded = $$restProps.rounded ?? true;
-  }
-</script>
-
-<Popper activeContent {...$$restProps} class={containerCls} on:show bind:open>
-  {#if $$slots.header}
-    <div class={headerCls}>
-      <slot name="header" />
-    </div>
-  {/if}
-  <ul class={ulCls}>
-    <slot />
-  </ul>
-  {#if $$slots.footer}
-    <div class={footerCls}>
-      <slot name="footer" />
-    </div>
-  {/if}
-</Popper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activeUrl: string = '';
-@prop export let open: boolean = false;
-@prop export let containerClass: string = 'divide-y z-50';
-@prop export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
-@prop export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
-@prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
--->

package/src/lib/dropdowns/DropdownDivider.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
-</script>
-
-<div {...$$restProps} class={twMerge(divClass, $$props.class)} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
--->

package/src/lib/dropdowns/DropdownHeader.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import DropdownDivider from './DropdownDivider.svelte';
-  export let divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
-  export let divider: boolean = true;
-</script>
-
-<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
-  <slot />
-</div>
-{#if divider}
-  <DropdownDivider />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
-@prop export let divider: boolean = true;
--->

package/src/lib/dropdowns/DropdownItem.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import Wrapper from '$lib/utils/Wrapper.svelte';
-  import { twMerge } from 'tailwind-merge';
-  import { getContext } from 'svelte';
-  import type { DropdownType } from './Dropdown.svelte';
-
-  export let defaultClass: string = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
-  export let href: string | undefined = undefined;
-  export let activeClass: string | undefined = undefined;
-  // export let active: boolean = false;
-
-  const context = getContext<DropdownType>('DropdownType') ?? {};
-  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
-
-  let sidebarUrl = '';
-  activeUrlStore.subscribe((value) => {
-    // console.log('value: ', value)
-    sidebarUrl = value;
-  });
-
-  $: active = sidebarUrl ? href === sidebarUrl : false;
-
-  // let liClass: string;
-  $: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', active && (activeClass ?? context.activeClass), $$props.class);
-  // twMerge(active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
-  // console.log('active: ', active)
-  let wrap: boolean = true;
-  function init(node: HTMLElement) {
-    wrap = node.parentElement?.tagName === 'UL';
-  }
-</script>
-
-<Wrapper tag="li" show={wrap} use={init}>
-  <svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} role={href ? 'link' : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
-    <slot />
-  </svelte:element>
-</Wrapper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let defaultClass: string = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
-@prop export let href: string | undefined = undefined;
-@prop export let activeClass: string | undefined = undefined;
-@prop export let active: boolean = false;
--->

package/src/lib/footer/Footer.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
-
-  let footerClass = twMerge(footerType === 'sitemap' && 'bg-gray-800', footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-gray-800', footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800', footerType === 'default' && 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800', $$props.class);
-</script>
-
-<footer {...$$restProps} class={footerClass}>
-  <slot />
-</footer>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
--->

package/src/lib/footer/FooterBrand.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let aClass: string = 'flex items-center';
-  export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-  export let imgClass: string = 'mr-3 h-8';
-  export let href: string = '';
-  export let src: string = '';
-  export let alt: string = '';
-  export let name: string = '';
-  export let target: string | undefined = undefined;
-
-  let aCls: string = twMerge(aClass, $$props.classA);
-  let spanCls: string = twMerge(spanClass, $$props.classSpan);
-  let imgCls: string = twMerge(imgClass, $$props.classImg);
-</script>
-
-{#if href}
-  <a {...$$restProps} {href} {target} class={aCls}>
-    <img {src} class={imgCls} {alt} />
-    <span class={spanCls}>{name}</span>
-    <slot />
-  </a>
-{:else}
-  <img {...$$restProps} {src} class={imgCls} {alt} />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let aClass: string = 'flex items-center';
-@prop export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-@prop export let imgClass: string = 'mr-3 h-8';
-@prop export let href: string = '';
-@prop export let src: string = '';
-@prop export let alt: string = '';
-@prop export let name: string = '';
-@prop export let target: string | undefined = undefined;
--->

package/src/lib/footer/FooterCopyright.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
-  export let aClass: string = 'hover:underline';
-  export let year: number = new Date().getFullYear();
-  export let href: string = '';
-  export let by: string = '';
-  export let target: string | undefined = undefined;
-  export let copyrightMessage: string = 'All Rights Reserved.';
-
-  let spanCls: string = twMerge(spanClass, $$props.classSpan);
-  let aCls: string = twMerge(aClass, $$props.classA);
-</script>
-
-<span class={spanCls}>
-  &copy; {year}
-  {#if href}
-    <a {...$$restProps} {href} {target} class={aCls}>
-      {by}
-    </a>
-  {:else}
-    <span class="ml-1">{by}</span>
-  {/if}
-  {copyrightMessage}
-</span>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
-@prop export let aClass: string = 'hover:underline';
-@prop export let year: number = new Date().getFullYear();
-@prop export let href: string = '';
-@prop export let by: string = '';
-@prop export let target: string | undefined = undefined;
-@prop export let copyrightMessage: string = 'All Rights Reserved.';
--->