flowbite-svelte 0.44.1 → 0.44.4

package/dist/carousels/CarouselTransition.svelte.d.ts

@@ -37,49 +37,30 @@ export type CarouselTransitionProps = typeof __propDef.props;
 export type CarouselTransitionEvents = typeof __propDef.events;
 export type CarouselTransitionSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
- * - Setup
- * - Default Carousel
- * - Loop
- * - Without thumbnails
- * - Without caption
- * - Without indicators
- * - Without slide controllers
- * - Custom slide controllers
- * - Carousel transition
- * - Loop
- * - Fly example
- * - Slide example
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop showIndicators: boolean = true;
- * @prop showCaptions: boolean = true;
- * @prop showThumbs: boolean = true;
- * @prop images: any[];
- * @prop slideControls: boolean = true;
- * @prop transitionType: TransitionTypes = 'fade';
- * @prop transitionParams: TransitionParamTypes = {};
- * @prop loop: boolean = false;
- * @prop duration: number = 2000;
- * @prop thumbClass: string = 'opacity-40';
- * ### Carousel
- * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
- * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
- * ### Caption
- * @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
- * ### Indicator
- * @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
- * ## Example
- * ```
- * <script>
- *   import { CarouselTransition } from 'flowbite-svelte'
- *   import { images } from './imageData/+server.js';
- * </script>
- *
- * <div class="max-w-4xl">
- *   <CarouselTransition {images} transitionType="fade" transitionParams="{{delay: 300, duration: 500}}"/>
- * </div>
- * ```
+ * @prop export let id: string = 'default-transition-carousel';
+ * @prop export let showIndicators: boolean = true;
+ * @prop export let showCaptions: boolean = true;
+ * @prop export let showThumbs: boolean = true;
+ * @prop export let images: any[];
+ * @prop export let slideControls: boolean = true;
+ * @prop export let transitionType: TransitionTypes = 'fade';
+ * @prop export let transitionParams: TransitionParamTypes = {};
+ * @prop export let loop: boolean = false;
+ * @prop export let duration: number = 2000;
+ * @prop export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+ * @prop export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+ * @prop export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+ * @prop export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+ * @prop export let slideClass: string = '';
+ * @prop export let transitionDivClass: string = 'h-full w-full';
+ * @prop export let imgFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
+ * @prop export let imgClass: string = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
+ * @prop export let thumbClass: string = 'opacity-40';
+ * @prop export let thumbDivClass: string = 'flex flex-row justify-center bg-gray-100 w-full';
+ * @prop export let thumbBtnClass: string = '';
+ * @prop export let slideClass: string = 'hidden';
  */
 export default class CarouselTransition extends SvelteComponentTyped<CarouselTransitionProps, CarouselTransitionEvents, CarouselTransitionSlots> {
 }

package/dist/carousels/CarouselTransition.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6KtE,QAAA,MAAM,SAAS;;;;;;;gBADmpB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CACzlB,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6KtE,QAAA,MAAM,SAAS;;;;;;;gBADmpB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CACzlB,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/carousels/Indicator.svelte

@@ -6,14 +6,12 @@ export let indicatorClass = '';
 <button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
 
 <!--
-  @component
-  ## Features
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop name: string = '';
-  @prop selected: boolean = false;
-  @prop indicatorClass: string = '';
-
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let name: string = '';
+@prop export let selected: boolean = false;
+@prop export let indicatorClass: string = '';
 -->
 
 <style>

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

@@ -16,12 +16,11 @@ export type IndicatorProps = typeof __propDef.props;
 export type IndicatorEvents = typeof __propDef.events;
 export type IndicatorSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop name: string = '';
- * @prop selected: boolean = false;
- * @prop indicatorClass: string = '';
+ * @prop export let name: string = '';
+ * @prop export let selected: boolean = false;
+ * @prop export let indicatorClass: string = '';
  */
 export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
 }

package/dist/carousels/Indicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/carousels/Slide.svelte

@@ -12,12 +12,12 @@ export let imgClass = '';
 </div>
 
 <!--
-  @component
-  ## Features
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop image: string = '';
-  @prop altTag: string = '';
-  @prop attr: string = '';
-  @prop slideClass: string = '';
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let image: string = '';
+@prop export let altTag: string = '';
+@prop export let attr: string = '';
+@prop export let slideClass: string = '';
+@prop export let imgClass: string = '';
 -->

package/dist/carousels/Slide.svelte.d.ts

@@ -16,13 +16,13 @@ export type SlideProps = typeof __propDef.props;
 export type SlideEvents = typeof __propDef.events;
 export type SlideSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop image: string = '';
- * @prop altTag: string = '';
- * @prop attr: string = '';
- * @prop slideClass: string = '';
+ * @prop export let image: string = '';
+ * @prop export let altTag: string = '';
+ * @prop export let attr: string = '';
+ * @prop export let slideClass: string = '';
+ * @prop export let imgClass: string = '';
  */
 export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
 }

package/dist/carousels/Thumbnail.svelte

@@ -14,17 +14,17 @@ export let thumbBtnClass = '';
 </button>
 
 <!--
-  @component
-  ## Features
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop thumbImg: string = '';
-  @prop altTag: string = '';
-  @prop titleLink: string = '';
-  @prop id: number;
-  @prop thumbWidth: number;
-  @prop selected: boolean = false;
-
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let thumbImg: string = '';
+@prop export let altTag: string = '';
+@prop export let titleLink: string = '';
+@prop export let id: number;
+@prop export let thumbWidth: number = 100;
+@prop export let selected: boolean = false;
+@prop export let thumbClass: string = '';
+@prop export let thumbBtnClass: string = '';
 -->
 
 <style>

package/dist/carousels/Thumbnail.svelte.d.ts

@@ -21,15 +21,16 @@ export type ThumbnailProps = typeof __propDef.props;
 export type ThumbnailEvents = typeof __propDef.events;
 export type ThumbnailSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop thumbImg: string = '';
- * @prop altTag: string = '';
- * @prop titleLink: string = '';
- * @prop id: number;
- * @prop thumbWidth: number;
- * @prop selected: boolean = false;
+ * @prop export let thumbImg: string = '';
+ * @prop export let altTag: string = '';
+ * @prop export let titleLink: string = '';
+ * @prop export let id: number;
+ * @prop export let thumbWidth: number = 100;
+ * @prop export let selected: boolean = false;
+ * @prop export let thumbClass: string = '';
+ * @prop export let thumbBtnClass: string = '';
  */
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }

package/dist/carousels/Thumbnail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;YAD6O,MAAM;;;;;;;;;;;;CAC3M,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;YAD6O,MAAM;;;;;;;;;;;;CAC3M,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/charts/Chart.svelte

@@ -1,17 +1,28 @@
-<script>import { onMount, onDestroy } from 'svelte';
-let chartNode, chart;
-export let options;
-onMount(async () => {
-    const ApexCharts = (await import('apexcharts')).default;
-    chart = new ApexCharts(chartNode, options);
-    chart.render();
-});
-$: if (chart && options)
-    chart.updateOptions(options);
-onDestroy(() => {
-    if (chart)
-        chart.destroy();
-});
+<script>export let options;
+function initChart(node, options) {
+    let chart;
+    async function asyncInitChart() {
+        const ApexCharts = (await import('apexcharts')).default;
+        chart = new ApexCharts(node, options);
+        chart.render();
+    }
+    asyncInitChart();
+    return {
+        update(options) {
+            chart && chart.updateOptions(options);
+        },
+        destroy() {
+            chart && chart.destroy();
+        }
+    };
+}
 </script>
 
-<div bind:this={chartNode} class={$$props.class} />
+<div use:initChart={options} class={$$props.class} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let options: ApexOptions;
+-->

package/dist/charts/Chart.svelte.d.ts

@@ -13,6 +13,11 @@ declare const __propDef: {
 export type ChartProps = typeof __propDef.props;
 export type ChartEvents = typeof __propDef.events;
 export type ChartSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let options: ApexOptions;
+ */
 export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
 }
 export {};

package/dist/charts/Chart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/charts/Chart.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA0B9C,QAAA,MAAM,SAAS;;;iBADiC,WAAW;;;;;;CACmB,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/charts/Chart.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAmC9C,QAAA,MAAM,SAAS;;;iBADiC,WAAW;;;;;;CACmB,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/darkmode/DarkMode.svelte

@@ -46,12 +46,9 @@ const toggleTheme = () => {
 </button>
 
 <!--
-  @component
-  ## Features
-  [Go to Darkmode](https://flowbite-svelte.com/docs/components/darkmode)
-  ## Props
-  @prop initialTheme: string = 'light';
-  @prop btnClass: string =
-    'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
-  @prop size: 'sm' | 'md' | 'lg' = 'md';
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -17,13 +17,10 @@ export type DarkModeProps = typeof __propDef.props;
 export type DarkModeEvents = typeof __propDef.events;
 export type DarkModeSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Darkmode](https://flowbite-svelte.com/docs/components/darkmode)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop initialTheme: string = 'light';
- * @prop btnClass: string =
- *   'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
- * @prop size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+ * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  */
 export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
 }

package/dist/darkmode/DarkMode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/datepicker/Datepicker.svelte

@@ -49,17 +49,15 @@ $: setAttribute = (node, params) => {
 {/if}
 
 <!--
-  @component
-  **EXPERIMENTAL**
-  ## Features
-  [Go to Datepicker](https://flowbite-svelte.com/docs/experimental/datepicker)
-  ## Props
-  @prop range: boolean = false;
-  @prop datepickerButtons: boolean = false;
-  @prop datepickerFormat: string = 'mm/dd/yyyy';
-  @prop datepickerOrientation: string = 'bottom';
-  @prop datepickerTitle: string = 'Flowbite datepicker';
-  @prop attribute: string = '';
-  @prop inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm: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';
-
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let range: boolean = false;
+@prop export let autoHide: boolean = false;
+@prop export let datepickerButtons: boolean = false;
+@prop export let datepickerFormat: string = 'mm/dd/yyyy';
+@prop export let datepickerOrientation: string = 'bottom';
+@prop export let datepickerTitle: string = 'Flowbite datepicker';
+@prop export let attribute: string = '';
+@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm: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';
 -->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -21,17 +21,16 @@ export type DatepickerProps = typeof __propDef.props;
 export type DatepickerEvents = typeof __propDef.events;
 export type DatepickerSlots = typeof __propDef.slots;
 /**
- * **EXPERIMENTAL**
- * ## Features
- * [Go to Datepicker](https://flowbite-svelte.com/docs/experimental/datepicker)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop range: boolean = false;
- * @prop datepickerButtons: boolean = false;
- * @prop datepickerFormat: string = 'mm/dd/yyyy';
- * @prop datepickerOrientation: string = 'bottom';
- * @prop datepickerTitle: string = 'Flowbite datepicker';
- * @prop attribute: string = '';
- * @prop inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm: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 range: boolean = false;
+ * @prop export let autoHide: boolean = false;
+ * @prop export let datepickerButtons: boolean = false;
+ * @prop export let datepickerFormat: string = 'mm/dd/yyyy';
+ * @prop export let datepickerOrientation: string = 'bottom';
+ * @prop export let datepickerTitle: string = 'Flowbite datepicker';
+ * @prop export let attribute: string = '';
+ * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm: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 default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
 }

package/dist/datepicker/Datepicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/device-mockup/Android.svelte

@@ -12,30 +12,12 @@ export let androidRight;
 <div class={androidRight} />
 
 <!--
-  @component
-  ## Features
-  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
-  ## Props
-  @prop androidTop: string;
-  @prop androidLeftTop: string;
-  @prop androidLeftMid: string;
-  @prop androidLeftBot: string;
-  @prop androidRight: string;
-  ## Example
-  ```
-  <script>
-    import { DeviceMockup } from 'flowbite-svelte';
-  </script>
-
-  <DeviceMockup device="android">
-    <img
-      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
-      class="dark:hidden w-[272px] h-[572px]"
-      alt="android example 1" />
-    <img
-      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
-      class="hidden dark:block w-[272px] h-[572px]"
-      alt="android example 2" />
-  </DeviceMockup>
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let androidTop: string;
+@prop export let androidLeftTop: string;
+@prop export let androidLeftMid: string;
+@prop export let androidLeftBot: string;
+@prop export let androidRight: string;
 -->

package/dist/device-mockup/Android.svelte.d.ts

@@ -16,31 +16,13 @@ export type AndroidProps = typeof __propDef.props;
 export type AndroidEvents = typeof __propDef.events;
 export type AndroidSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop androidTop: string;
- * @prop androidLeftTop: string;
- * @prop androidLeftMid: string;
- * @prop androidLeftBot: string;
- * @prop androidRight: string;
- * ## Example
- * ```
- * <script>
- *   import { DeviceMockup } from 'flowbite-svelte';
- * </script>
- *
- * <DeviceMockup device="android">
- *   <img
- *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
- *     class="dark:hidden w-[272px] h-[572px]"
- *     alt="android example 1" />
- *   <img
- *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
- *     class="hidden dark:block w-[272px] h-[572px]"
- *     alt="android example 2" />
- * </DeviceMockup>
- * ```
+ * @prop export let androidTop: string;
+ * @prop export let androidLeftTop: string;
+ * @prop export let androidLeftMid: string;
+ * @prop export let androidLeftBot: string;
+ * @prop export let androidRight: string;
  */
 export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
 }

package/dist/device-mockup/Android.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;oBAD0K,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CACtO,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;oBAD0K,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CACtO,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/device-mockup/DefaultMockup.svelte

@@ -10,29 +10,11 @@ export let defaultRight;
 <div class={defaultRight} />
 
 <!--
-  @component
-  ## Features
-  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
-  ## Props
-  @prop defaultTop: string;
-  @prop defaultLeftTop: string;
-  @prop defaultLeftBot: string;
-  @prop defaultRight: string;
-  ## Example
-  ```
-  <script>
-    import { DeviceMockup } from 'flowbite-svelte';
-  </script>
-
-  <DeviceMockup>
-    <img
-      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
-      class="dark:hidden w-[272px] h-[572px]"
-      alt="default example 1" />
-    <img
-      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
-      class="hidden dark:block w-[272px] h-[572px]"
-      alt="default example 2" />
-  </DeviceMockup>
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let defaultTop: string;
+@prop export let defaultLeftTop: string;
+@prop export let defaultLeftBot: string;
+@prop export let defaultRight: string;
 -->

package/dist/device-mockup/DefaultMockup.svelte.d.ts

@@ -15,30 +15,12 @@ export type DefaultMockupProps = typeof __propDef.props;
 export type DefaultMockupEvents = typeof __propDef.events;
 export type DefaultMockupSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop defaultTop: string;
- * @prop defaultLeftTop: string;
- * @prop defaultLeftBot: string;
- * @prop defaultRight: string;
- * ## Example
- * ```
- * <script>
- *   import { DeviceMockup } from 'flowbite-svelte';
- * </script>
- *
- * <DeviceMockup>
- *   <img
- *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
- *     class="dark:hidden w-[272px] h-[572px]"
- *     alt="default example 1" />
- *   <img
- *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
- *     class="hidden dark:block w-[272px] h-[572px]"
- *     alt="default example 2" />
- * </DeviceMockup>
- * ```
+ * @prop export let defaultTop: string;
+ * @prop export let defaultLeftTop: string;
+ * @prop export let defaultLeftBot: string;
+ * @prop export let defaultRight: string;
  */
 export default class DefaultMockup extends SvelteComponentTyped<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
 }

package/dist/device-mockup/DefaultMockup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;oBADyI,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CAC7K,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;oBADyI,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CAC7K,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}