flowbite-svelte 1.8.6 → 1.10.0

package/dist/datepicker/Datepicker.svelte

@@ -1,44 +1,15 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { fade } from "svelte/transition";
   import { Button, ToolbarButton, type DatepickerProps, cn } from "..";
-  import { datepicker } from "./theme";
-
-  let {
-    value = $bindable(),
-    defaultDate = null,
-    range = false,
-    rangeFrom = $bindable(),
-    rangeTo = $bindable(),
-    availableFrom = null,
-    availableTo = null,
-    locale = "default",
-    translationLocale = locale, // NEW: Separate locale for translations, defaults to locale for backward compatibility
-    firstDayOfWeek = 0,
-    dateFormat,
-    placeholder = "Select date",
-    disabled = false,
-    required = false,
-    inputClass = "",
-    color = "primary",
-    inline = false,
-    autohide = true,
-    showActionButtons = false,
-    title = "",
-    onselect,
-    onclear,
-    onapply,
-    btnClass,
-    inputmode = "none",
-    classes,
-    monthColor = "alternative",
-    monthBtnSelected = "bg-primary-500 text-white",
-    monthBtn = "text-gray-700 dark:text-gray-300",
-    class: className,
-    elementRef = $bindable() // NEW: Add elementRef prop
-  }: DatepickerProps & { translationLocale?: string; elementRef?: HTMLInputElement } = $props();
+  import { datepicker, type DatepickerTheme } from "./theme";
+  import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", translationLocale = locale, firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className, elementRef = $bindable() }: DatepickerProps = $props();
+
+  const theme = getTheme("datepicker");
 
   const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
 
@@ -70,39 +41,19 @@
   });
 
   function getDaysInMonth(date: Date): Date[] {
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const firstDay = new Date(year, month, 0);
-    const lastDay = new Date(year, month + 1, 0);
-    const daysArray: Date[] = [];
-
-    // Add days from previous month to fill the first week
-    let start = firstDay.getDay() - firstDayOfWeek;
-    if (start < 0) start += 7;
-    for (let i = 0; i < start; i++) {
-      daysArray.unshift(new Date(year, month, -i));
-    }
-
-    // Add days of the current month
-    for (let i = 1; i <= lastDay.getDate(); i++) {
-      daysArray.push(new Date(year, month, i));
-    }
-
-    // Add days from next month to fill the last week
-    const remainingDays = 7 - (daysArray.length % 7);
-    if (remainingDays < 7) {
-      for (let i = 1; i <= remainingDays; i++) {
-        daysArray.push(new Date(year, month + 1, i));
-      }
-    }
+    const monthStart = startOfMonth(date);
+    const monthEnd = endOfMonth(date);
+    const calendarStart = startOfWeek(monthStart, { weekStartsOn: firstDayOfWeek });
+    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: firstDayOfWeek });
 
-    return daysArray;
+    return eachDayOfInterval({ start: calendarStart, end: calendarEnd });
   }
 
   // MODIFIED: Use translationLocale for weekday names
   const getWeekdayNames = (): string[] => {
     return Array.from({ length: 7 }, (_, i) => new Date(1970, 0, 5 + i + firstDayOfWeek).toLocaleDateString(translationLocale, { weekday: "short" }));
   };
+
   let weekdays = $derived(getWeekdayNames());
 
   // MODIFIED: Use translationLocale for month names
@@ -111,7 +62,7 @@
   };
   let monthNames = $derived(getMonthNames());
 
-  const addDay = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth(), date.getDate() + increment);
+  const addDay = (date: Date, increment: number): Date => addDays(date, increment);
 
   function changeMonth(increment: number) {
     currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
@@ -169,13 +120,61 @@
     }
   }
 
-  function handleInputChange() {
-    const date = new Date(inputElement?.value ?? "");
-    if (!isNaN(date.getTime())) {
-      handleDaySelect(date);
+  function handleInputChangeWithDateFns() {
+    const inputValue = inputElement?.value?.trim();
+    if (!inputValue) return;
+
+    // Get the actual format pattern
+    const formatPattern = getDateFormatPattern();
+
+    try {
+      // Parse with the exact format expected
+      const parsedDate = parse(inputValue, formatPattern, new Date());
+
+      if (!isValid(parsedDate)) {
+        inputElement?.setCustomValidity(`Please enter date in format: ${formatPattern}`);
+        return;
+      }
+
+      inputElement?.setCustomValidity("");
+
+      if (!isDateAvailable(parsedDate)) {
+        inputElement?.setCustomValidity("Selected date is not available");
+        return;
+      }
+
+      handleDaySelect(parsedDate);
+    } catch (error) {
+      inputElement?.setCustomValidity(`Please enter date in format: ${formatPattern}`);
     }
   }
 
+  function getDateFormatPattern(): string {
+    // Test with a known date to determine format
+    const testDate = new Date(2025, 0, 15); // January 15, 2025
+    const formatted = formatDate(testDate);
+
+    // Map common formats to date-fns patterns
+    if (formatted.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)) {
+      // Could be DD/MM/YYYY or MM/DD/YYYY, need to determine
+      const testDate2 = new Date(2025, 11, 3); // December 3, 2025
+      const formatted2 = formatDate(testDate2);
+
+      if (formatted2.startsWith("3/") || formatted2.startsWith("03/")) {
+        return "d/M/yyyy"; // DD/MM/YYYY format
+      } else {
+        return "M/d/yyyy"; // MM/DD/YYYY format
+      }
+    }
+
+    if (formatted.match(/^\d{4}-\d{1,2}-\d{1,2}$/)) {
+      return "yyyy-M-d"; // ISO format
+    }
+
+    // Add more patterns as needed
+    return "M/d/yyyy"; // Default fallback
+  }
+
   function handleClickOutside(event: MouseEvent) {
     if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target as Node)) {
       isOpen = false;
@@ -185,9 +184,9 @@
 
   // MODIFIED: Use locale for formatting (not translationLocale)
   const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? "";
-  const isSameDate = (date1?: Date, date2?: Date): boolean => date1?.toDateString() === date2?.toDateString();
+  const isSameDate = (date1?: Date, date2?: Date): boolean => (date1 && date2 ? isSameDay(date1, date2) : false);
   const isToday = (day: Date): boolean => isSameDate(day, new Date());
-  const isInRange = (day: Date): boolean => !!(range && rangeFrom && rangeTo && day > rangeFrom && day < rangeTo);
+  const isInRange = (day: Date): boolean => !!(range && rangeFrom && rangeTo && isWithinInterval(day, { start: rangeFrom, end: rangeTo }));
 
   let isSelected = $derived((day: Date): boolean => (range ? isSameDate(day, rangeFrom) || isSameDate(day, rangeTo) : isSameDate(day, value)));
 
@@ -275,8 +274,8 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class={cn(input({ color }), inputClass)} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChange} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
-      <button type="button" class={cn(button({ class: clsx(classes?.button) }), btnClass)} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+      <input bind:this={inputElement} type="text" class={cn(input({ color }), inputClass, (theme as DatepickerTheme)?.input)} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
+      <button type="button" class={cn(button({ class: clsx(classes?.button) }), btnClass, (theme as DatepickerTheme)?.button)} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
         <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
           <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
         </svg>
@@ -285,23 +284,23 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={cn(base({ inline, class: clsx(classes?.base) }), className)} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div bind:this={calendarRef} id="datepicker-dropdown" class={cn(base({ inline, class: clsx(classes?.base) }), className, (theme as DatepickerTheme)?.base)} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
       {#if title}
-        <h2 class={titleVariant({ class: clsx(classes?.titleVariant) })}>{title}</h2>
+        <h2 class={cn(titleVariant({ class: clsx(classes?.titleVariant) }), (theme as DatepickerTheme)?.titleVariant)}>{title}</h2>
       {/if}
 
       {#if showMonthSelector}
         <!-- Month/Year Selector View -->
-        <div class={nav({ class: clsx(classes?.nav) })}>
+        <div class={cn(nav({ class: clsx(classes?.nav) }), (theme as DatepickerTheme)?.nav)}>
           {@render yearNavButton(false)}
-          <h3 class={polite({ class: clsx(classes?.polite) })} aria-live="polite">
+          <h3 class={cn(polite({ class: clsx(classes?.polite) }), (theme as DatepickerTheme)?.polite)} aria-live="polite">
             {currentMonth.getFullYear()}
           </h3>
           {@render yearNavButton(true)}
         </div>
         <div class="grid grid-cols-4 gap-2 p-4">
           {#each monthNames as month, index}
-            <Button type="button" color={monthColor} class={twMerge(monthButton(), currentMonth.getMonth() === index ? clsx(monthBtnSelected) : clsx(monthBtn), clsx(classes?.monthButton))} onclick={(event: MouseEvent) => selectMonth(index, event)}>
+            <Button type="button" color={monthColor} class={cn(monthButton(), currentMonth.getMonth() === index ? clsx(monthBtnSelected) : clsx(monthBtn), clsx(classes?.monthButton), (theme as DatepickerTheme)?.monthButton)} onclick={(event: MouseEvent) => selectMonth(index, event)}>
               {month}
             </Button>
           {/each}
@@ -316,9 +315,9 @@
           </Button>
           {@render navButton(true)}
         </div>
-        <div class={grid({ class: clsx(classes?.grid) })} role="grid">
+        <div class={cn(grid({ class: clsx(classes?.grid) }), (theme as DatepickerTheme)?.grid)} role="grid">
           {#each weekdays as day}
-            <div class={columnHeader({ class: clsx(classes?.columnHeader) })} role="columnheader">{day}</div>
+            <div class={cn(columnHeader({ class: clsx(classes?.columnHeader) }), (theme as DatepickerTheme)?.columnHeader)} role="columnheader">{day}</div>
           {/each}
           {#each daysInMonth as day}
             {@const current = day.getMonth() !== currentMonth.getMonth()}
@@ -326,13 +325,16 @@
             <Button
               type="button"
               color={isSelected(day) ? color : "alternative"}
-              class={dayButton({
-                current,
-                today: isToday(day),
-                color: isInRange(day) ? color : undefined,
-                unavailable: !available,
-                class: clsx(classes?.dayButton, !available && "cursor-not-allowed opacity-50")
-              })}
+              class={cn(
+                dayButton({
+                  current,
+                  today: isToday(day),
+                  color: isInRange(day) ? color : undefined,
+                  unavailable: !available,
+                  class: clsx(classes?.dayButton, !available && "cursor-not-allowed opacity-50")
+                }),
+                (theme as DatepickerTheme)?.dayButton
+              )}
               onclick={() => handleDaySelect(day)}
               onkeydown={handleCalendarKeydown}
               aria-label={day.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
@@ -348,7 +350,7 @@
       {/if}
 
       {#if showActionButtons && !showMonthSelector}
-        <div class={actionButtons({ class: clsx(classes?.actionButtons) })}>
+        <div class={cn(actionButtons({ class: clsx(classes?.actionButtons) }), (theme as DatepickerTheme)?.actionButtons)}>
           <Button onclick={() => handleDaySelect(new Date())} {color} size="sm" disabled={!isDateAvailable(new Date())}>Today</Button>
           <Button onclick={handleClear} color="red" size="sm">Clear</Button>
           <Button onclick={handleApply} {color} size="sm">Apply</Button>
@@ -357,3 +359,42 @@
     </div>
   {/if}
 </div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+## Props
+@prop value = $bindable()
+@prop defaultDate = null
+@prop range = false
+@prop rangeFrom = $bindable()
+@prop rangeTo = $bindable()
+@prop availableFrom = null
+@prop availableTo = null
+@prop locale = "default"
+@prop translationLocale = locale
+@prop firstDayOfWeek = 0
+@prop dateFormat
+@prop placeholder = "Select date"
+@prop disabled = false
+@prop required = false
+@prop inputClass = ""
+@prop color = "primary"
+@prop inline = false
+@prop autohide = true
+@prop showActionButtons = false
+@prop title = ""
+@prop onselect
+@prop onclear
+@prop onapply
+@prop btnClass
+@prop inputmode = "none"
+@prop classes
+@prop monthColor = "alternative"
+@prop monthBtnSelected = "bg-primary-500 text-white"
+@prop monthBtn = "text-gray-700 dark:text-gray-300"
+@prop class: className
+@prop elementRef = $bindable()
+-->

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

@@ -1,8 +1,41 @@
 import { type DatepickerProps } from "..";
-type $$ComponentProps = DatepickerProps & {
-    translationLocale?: string;
-    elementRef?: HTMLInputElement;
-};
-declare const Datepicker: import("svelte").Component<$$ComponentProps, {}, "value" | "elementRef" | "rangeFrom" | "rangeTo">;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+ * ## Props
+ * @prop value = $bindable()
+ * @prop defaultDate = null
+ * @prop range = false
+ * @prop rangeFrom = $bindable()
+ * @prop rangeTo = $bindable()
+ * @prop availableFrom = null
+ * @prop availableTo = null
+ * @prop locale = "default"
+ * @prop translationLocale = locale
+ * @prop firstDayOfWeek = 0
+ * @prop dateFormat
+ * @prop placeholder = "Select date"
+ * @prop disabled = false
+ * @prop required = false
+ * @prop inputClass = ""
+ * @prop color = "primary"
+ * @prop inline = false
+ * @prop autohide = true
+ * @prop showActionButtons = false
+ * @prop title = ""
+ * @prop onselect
+ * @prop onclear
+ * @prop onapply
+ * @prop btnClass
+ * @prop inputmode = "none"
+ * @prop classes
+ * @prop monthColor = "alternative"
+ * @prop monthBtnSelected = "bg-primary-500 text-white"
+ * @prop monthBtn = "text-gray-700 dark:text-gray-300"
+ * @prop class: className
+ * @prop elementRef = $bindable()
+ */
+declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "rangeFrom" | "rangeTo" | "elementRef">;
 type Datepicker = ReturnType<typeof Datepicker>;
 export default Datepicker;

package/dist/datepicker/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Datepicker } from "./Datepicker.svelte";
-export { datepicker } from "./theme";
+export { datepicker, type DatepickerTheme } from "./theme";

package/dist/datepicker/theme.d.ts

@@ -388,3 +388,5 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     dayButton: string;
     monthButton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type DatepickerSlots = keyof typeof datepicker.slots;
+export type DatepickerTheme = Partial<Record<DatepickerSlots, string>>;

package/dist/device-mockups/Android.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L531)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
 ## Props
 @prop children
 @prop divClass

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

@@ -2,7 +2,7 @@ import { type AndroidProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L531)
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/DefaultMockup.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L542)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L537)
 ## Props
 @prop children
 @prop divClass

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

@@ -2,7 +2,7 @@ import { type DefaultMockupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L542)
+ * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L537)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Desktop.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L523)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Desktop.svelte.d.ts

@@ -2,7 +2,7 @@ import { type MockupBaseProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L523)
+ * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/DeviceMockup.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L513)
 ## Props
 @prop children
 @prop device = "default"

package/dist/device-mockups/DeviceMockup.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DeviceMockupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L513)
  * ## Props
  * @prop children
  * @prop device = "default"

package/dist/device-mockups/Ios.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L552)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Ios.svelte.d.ts

@@ -2,7 +2,7 @@ import { type IosProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L552)
+ * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Laptop.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L523)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Laptop.svelte.d.ts

@@ -2,7 +2,7 @@ import { type MockupBaseProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L523)
+ * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Smartwatch.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L562)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Smartwatch.svelte.d.ts

@@ -2,7 +2,7 @@ import { type SmartwatchProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L562)
+ * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Tablet.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L572)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L567)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Tablet.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TabletProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L572)
+ * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L567)
  * ## Props
  * @prop children
  * @prop divClass