flowbite-svelte 0.44.2 → 0.44.4

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

@@ -16,11 +16,11 @@ export type IndicatorProps = typeof __propDef.props;
 export type IndicatorEvents = typeof __propDef.events;
 export type IndicatorSlots = typeof __propDef.slots;
 /**
- * [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/Slide.svelte

@@ -12,11 +12,12 @@ export let imgClass = '';
 </div>
 
 <!--
-  @component
-  [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,12 +16,13 @@ export type SlideProps = typeof __propDef.props;
 export type SlideEvents = typeof __propDef.events;
 export type SlideSlots = typeof __propDef.slots;
 /**
- * [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/Slide.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/carousels/Thumbnail.svelte

@@ -14,16 +14,17 @@ export let thumbBtnClass = '';
 </button>
 
 <!--
-  @component
-  [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,14 +21,16 @@ export type ThumbnailProps = typeof __propDef.props;
 export type ThumbnailEvents = typeof __propDef.events;
 export type ThumbnailSlots = typeof __propDef.slots;
 /**
- * [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;;;;;;;;;GASG;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,25 +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 Carousel](https://flowbite-svelte.com/docs/components/charts)
-  ## Props
-  @prop options: ApexOptions;
-
--->
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let options: ApexOptions;
+-->

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

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

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;AA2B9C,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"}
+{"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
-  [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,12 +17,10 @@ export type DarkModeProps = typeof __propDef.props;
 export type DarkModeEvents = typeof __propDef.events;
 export type DarkModeSlots = typeof __propDef.slots;
 /**
- * [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;;;;;;;GAOG;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,13 +12,12 @@ export let androidRight;
 <div class={androidRight} />
 
 <!--
-  @component
-  [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;
-
+@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,13 +16,13 @@ export type AndroidProps = typeof __propDef.props;
 export type AndroidEvents = typeof __propDef.events;
 export type AndroidSlots = typeof __propDef.slots;
 /**
- * [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;
+ * @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/DefaultMockup.svelte

@@ -10,12 +10,11 @@ export let defaultRight;
 <div class={defaultRight} />
 
 <!--
-  @component
-  [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;
-  
+@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,12 +15,12 @@ export type DefaultMockupProps = typeof __propDef.props;
 export type DefaultMockupEvents = typeof __propDef.events;
 export type DefaultMockupSlots = typeof __propDef.slots;
 /**
- * [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;
+ * @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/DeviceMockup.svelte

@@ -167,97 +167,50 @@ const slotClasses = {
 {/if}
 
 <!--
-  @component
-  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
-  ## Props
-  @prop device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' =
-    'default';
-  ### Android
-  @prop 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 androidSlot: string =
-    'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-  @prop androidTop: string =
-    'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-  @prop androidLeftTop: string =
-    'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-  @prop androidLeftMid: string =
-    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  @prop androidLeftBot: string =
-    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  @prop androidRight: string =
-    'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-  ### Default
-  @prop 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 defaultSlot: string =
-    'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-  @prop defaultTop: string =
-    'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-  @prop defaultLeftTop: string =
-    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  @prop defaultLeftBot: string =
-    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  @prop defaultRight: string =
-    'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-  ### Desktop
-  @prop desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-  @prop 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 desktopBotUnder: string =
-    'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
-  @prop 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 desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-  ### ios
-  @prop 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 iosSlot: string =
-    'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-  @prop iosTop: string =
-    'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-  @prop iosLeftTop: string =
-    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  @prop iosLeftBot: string =
-    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  @prop iosRight: string =
-    'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-  ### Laptop    
-  @prop 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 laptopSlot: string =
-    'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-  @prop laptopInner: string =
-    'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-  @prop 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 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
-  @prop smartwatchDiv: string =
-    'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-  @prop smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-  @prop smartRightTop: string =
-    'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-  @prop smartRightBot: string =
-    'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-  @prop 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 smartBot: string =
-    'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
-  @prop smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-  ### Tablet
-  @prop 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 tabletSlot: string =
-    'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-  @prop tabletLeftTop: string =
-    'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-  @prop tabletLeftMid: string =
-    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-  @prop tabletLeftBot: string =
-    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-  @prop tabletRight: string =
-    'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-    
+@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';
 -->