flowbite-svelte 1.10.6 → 1.10.8

package/dist/carousel/CarouselIndicators.svelte.d.ts

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

package/dist/carousel/ControlButton.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
 ## Props
 @prop children
 @prop forward

package/dist/carousel/ControlButton.svelte.d.ts

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

package/dist/carousel/Controls.svelte

@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L394)
 ## Props
 @prop children
 @prop class: className

package/dist/carousel/Controls.svelte.d.ts

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

package/dist/carousel/Slide.svelte

@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L411)
 ## Props
 @prop image
 @prop transition

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

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

package/dist/carousel/Thumbnail.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L436)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L398)
 ## Props
 @prop selected
 @prop class: className

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

@@ -2,7 +2,7 @@ import { type ThumbnailProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L436)
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L398)
  * ## Props
  * @prop selected
  * @prop class: className

package/dist/carousel/Thumbnails.svelte

@@ -67,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L402)
 ## Props
 @prop children
 @prop images = []

package/dist/carousel/Thumbnails.svelte.d.ts

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

package/dist/clipboard/Clipboard.svelte

@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L423)
 ## Props
 @prop children
 @prop embedded = false

package/dist/clipboard/Clipboard.svelte.d.ts

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

package/dist/darkmode/DarkMode.svelte

@@ -64,7 +64,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
 ## Props
 @prop class: className
 @prop lightIcon

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

@@ -2,7 +2,7 @@ import { type DarkmodeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
  * ## Props
  * @prop class: className
  * @prop lightIcon

package/dist/datepicker/Datepicker.svelte

@@ -11,14 +11,13 @@
 
   const theme = getTheme("datepicker");
 
-  const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
+  // If translationLocale is not explicitly provided, it will default to the value of locale. This ensures reactivity as both are directly exposed as props.
+  translationLocale = translationLocale ?? locale;
 
-  // Internal state
   let isOpen: boolean = $state(inline);
   let showMonthSelector: boolean = $state(false);
   let inputElement: HTMLInputElement | null = $state(null);
 
-  // Update elementRef when inputElement changes
   $effect(() => {
     if (inputElement) {
       elementRef = inputElement;
@@ -49,14 +48,12 @@
     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
   const getMonthNames = (): string[] => {
     return Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(translationLocale, { month: "short" }));
   };
@@ -124,55 +121,123 @@
     const inputValue = inputElement?.value?.trim();
     if (!inputValue) return;
 
-    // Get the actual format pattern
-    const formatPattern = getDateFormatPattern();
+    inputElement?.setCustomValidity("");
+
+    const parsedDate = tryParseDate(inputValue);
+
+    if (!parsedDate || !isValid(parsedDate)) {
+      const formatPattern = getDateFormatPattern();
+      inputElement?.setCustomValidity(`Please enter date in format: ${formatPattern}`);
+      return;
+    }
+
+    if (!isDateAvailable(parsedDate)) {
+      inputElement?.setCustomValidity("Selected date is not available");
+      return;
+    }
 
+    handleDaySelect(parsedDate);
+  }
+
+  function tryParseDate(inputValue: string): Date | null {
+    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;
+      if (isValid(parsedDate)) {
+        return parsedDate;
       }
+    } catch (error) {
+      // Continue to next strategy
+    }
 
-      inputElement?.setCustomValidity("");
-
-      if (!isDateAvailable(parsedDate)) {
-        inputElement?.setCustomValidity("Selected date is not available");
-        return;
+    const commonFormats = [
+      "d.M.yyyy", // German: 17.7.2025
+      "dd.MM.yyyy", // German: 17.07.2025
+      "M/d/yyyy", // US: 7/17/2025
+      "MM/dd/yyyy", // US: 07/17/2025
+      "d/M/yyyy", // UK: 17/7/2025
+      "dd/MM/yyyy", // UK: 17/07/2025
+      "yyyy-MM-dd", // ISO: 2025-07-17
+      "yyyy-M-d", // ISO: 2025-7-17
+      "M-d-yyyy", // US with dashes: 7-17-2025
+      "d-M-yyyy" // EU with dashes: 17-7-2025
+    ];
+
+    for (const format of commonFormats) {
+      try {
+        const parsedDate = parse(inputValue, format, new Date());
+        if (isValid(parsedDate)) {
+          return parsedDate;
+        }
+      } catch (error) {
+        // Continue to next format
       }
+    }
 
-      handleDaySelect(parsedDate);
+    try {
+      const nativeDate = new Date(inputValue);
+      if (isValid(nativeDate) && !isNaN(nativeDate.getTime())) {
+        return nativeDate;
+      }
     } catch (error) {
-      inputElement?.setCustomValidity(`Please enter date in format: ${formatPattern}`);
+      // Continue
     }
+
+    return null;
   }
 
   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);
+    const actualLocale = locale === "default" ? navigator.language : locale;
 
-    // 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
+    // Create a test date and format it to understand the pattern
+    const testDate = new Date(2025, 0, 15); // January 15, 2025
+    const formatted = testDate.toLocaleDateString(actualLocale, dateFormat || { year: "numeric", month: "numeric", day: "numeric" });
+
+    // Analyze the formatted string to determine the pattern
+    if (formatted.includes(".")) {
+      // German/European format with dots
+      if (formatted.startsWith("15.")) {
+        return "d.M.yyyy";
+      } else if (formatted.startsWith("01.")) {
+        return "M.d.yyyy";
+      }
+      return "d.M.yyyy"; // Default to day first
+    } else if (formatted.includes("/")) {
+      // US/UK format with slashes
+      if (formatted.startsWith("1/")) {
+        return "M/d/yyyy"; // US format
+      } else if (formatted.startsWith("15/")) {
+        return "d/M/yyyy"; // UK format
+      }
+      // Additional check with different test date
       const testDate2 = new Date(2025, 11, 3); // December 3, 2025
-      const formatted2 = formatDate(testDate2);
-
+      const formatted2 = testDate2.toLocaleDateString(actualLocale, dateFormat || { year: "numeric", month: "numeric", day: "numeric" });
       if (formatted2.startsWith("3/") || formatted2.startsWith("03/")) {
-        return "d/M/yyyy"; // DD/MM/YYYY format
+        return "d/M/yyyy";
+      } else {
+        return "M/d/yyyy";
+      }
+    } else if (formatted.includes("-")) {
+      // ISO or other dash format
+      if (formatted.startsWith("2025-")) {
+        return "yyyy-M-d";
+      } else if (formatted.startsWith("1-")) {
+        return "M-d-yyyy";
       } else {
-        return "M/d/yyyy"; // MM/DD/YYYY format
+        return "d-M-yyyy";
       }
     }
 
-    if (formatted.match(/^\d{4}-\d{1,2}-\d{1,2}$/)) {
-      return "yyyy-M-d"; // ISO format
+    // Default fallback - try to detect based on locale
+    if (actualLocale.startsWith("en-US")) {
+      return "M/d/yyyy";
+    } else if (actualLocale.startsWith("de") || actualLocale.startsWith("at") || actualLocale.startsWith("ch")) {
+      return "d.M.yyyy";
+    } else if (actualLocale.startsWith("en-GB") || actualLocale.startsWith("en-AU")) {
+      return "d/M/yyyy";
     }
 
-    // Add more patterns as needed
-    return "M/d/yyyy"; // Default fallback
+    return "M/d/yyyy";
   }
 
   function handleClickOutside(event: MouseEvent) {
@@ -274,7 +339,7 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class={input({ color, class: clsx((theme as DatepickerTheme)?.input, inputClass) })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
+      <input bind:this={inputElement} type="text" class={input({ color, class: clsx((theme as DatepickerTheme)?.input, inputClass) })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} onchange={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
       <button type="button" class={button({ class: clsx(btnClass, (theme as DatepickerTheme)?.button, classes?.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>
@@ -284,7 +349,7 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline, class: clsx((theme as DatepickerTheme)?.base, classes?.base, className) })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline, class: clsx((theme as DatepickerTheme)?.base, className) })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
       {#if title}
         <h2 class={titleVariant({ class: clsx((theme as DatepickerTheme)?.titleVariant, classes?.titleVariant) })}>{title}</h2>
       {/if}
@@ -313,10 +378,8 @@
           {/each}
         </div>
       {:else}
-        <!-- Regular Calendar View -->
         <div class={nav({ class: clsx(classes?.nav) })}>
           {@render navButton(false)}
-          <!-- MODIFIED: Use translationLocale for month/year display -->
           <Button type="button" class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", classes?.polite) })} aria-live="polite" onclick={(event: MouseEvent) => toggleMonthSelector(event)}>
             {currentMonth.toLocaleString(translationLocale, { month: "long", year: "numeric" })}
           </Button>
@@ -368,7 +431,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L442)
 ## Props
 @prop value = $bindable()
 @prop defaultDate = null

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

@@ -2,7 +2,7 @@ import { type DatepickerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L442)
  * ## Props
  * @prop value = $bindable()
  * @prop defaultDate = null

package/dist/datepicker/theme.d.ts

@@ -1,11 +1,7 @@
+import type { Classes } from "../theme/themeUtils";
 import type { ClassValue } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
-export type DatepickerClasses = Partial<{
-    [K in keyof (typeof datepicker)["slots"]]: ClassValue;
-}>;
-export type DatepickerVariants = VariantProps<typeof datepicker> & {
-    classes?: DatepickerClasses;
-};
+export type DatepickerVariants = VariantProps<typeof datepicker> & Classes<typeof datepicker>;
 export declare const datepicker: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {

package/dist/device-mockups/Android.svelte

@@ -1,19 +1,33 @@
 <script lang="ts">
+  import { type AndroidProps } from "..";
+  import { themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { android } from ".";
-  import { type AndroidProps, cn } from "..";
 
-  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
-  const { div, slot, top, leftTop, leftMid, leftBot, right } = android();
+  themeDeprecated("Android", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class });
+  let styling = $derived(
+    classes ?? {
+      top: div2Class,
+      leftTop: div3Class,
+      leftMid: div4Class,
+      leftBot: div5Class,
+      right: div6Class,
+      slot: div7Class
+    }
+  );
+
+  const { base, slot, top, leftTop, leftMid, leftBot, right } = android();
 </script>
 
-<div {...restProps} class={cn(div(), divClass)}>
-  <div class={cn(top(), div2Class)}></div>
-  <div class={cn(leftTop(), div3Class)}></div>
-  <div class={cn(leftMid(), div4Class)}></div>
-  <div class={cn(leftBot(), div5Class)}></div>
-  <div class={cn(right(), div6Class)}></div>
-  <div class={cn(slot(), div7Class)}>
+<div {...restProps} class={base({ class: clsx(className ?? divClass) })}>
+  <div class={top({ class: clsx(styling.top) })}></div>
+  <div class={leftTop({ class: clsx(styling.leftTop) })}></div>
+  <div class={leftMid({ class: clsx(styling.leftMid) })}></div>
+  <div class={leftBot({ class: clsx(styling.leftBot) })}></div>
+  <div class={right({ class: clsx(styling.right) })}></div>
+  <div class={slot({ class: clsx(styling.slot) })}>
     {#if children}
       {@render children()}
     {/if}
@@ -24,9 +38,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L496)
 ## Props
 @prop children
+@prop class: className
+@prop classes
 @prop divClass
 @prop div2Class
 @prop div3Class

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

@@ -2,9 +2,11 @@ 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#L526)
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L496)
  * ## Props
  * @prop children
+ * @prop class: className
+ * @prop classes
  * @prop divClass
  * @prop div2Class
  * @prop div3Class

package/dist/device-mockups/DefaultMockup.svelte

@@ -1,18 +1,31 @@
 <script lang="ts">
+  import { type DefaultMockupProps } from "..";
+  import { themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { defaultMockup } from ".";
-  import { type DefaultMockupProps, cn } from "..";
 
-  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
-  const { div, slot, top, leftTop, leftBot, right } = defaultMockup();
+  themeDeprecated("DefaultMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class });
+  let styling = $derived(
+    classes ?? {
+      top: div2Class,
+      leftTop: div3Class,
+      leftBot: div4Class,
+      right: div5Class,
+      slot: div6Class
+    }
+  );
+
+  const { base, slot, top, leftTop, leftBot, right } = defaultMockup();
 </script>
 
-<div {...restProps} class={cn(div(), divClass)}>
-  <div class={cn(top(), div2Class)}></div>
-  <div class={cn(leftTop(), div3Class)}></div>
-  <div class={cn(leftBot(), div4Class)}></div>
-  <div class={cn(right(), div5Class)}></div>
-  <div class={cn(slot(), div6Class)}>
+<div {...restProps} class={base({ class: clsx(className ?? divClass) })}>
+  <div class={top({ class: clsx(styling.top) })}></div>
+  <div class={leftTop({ class: clsx(styling.leftTop) })}></div>
+  <div class={leftBot({ class: clsx(styling.leftBot) })}></div>
+  <div class={right({ class: clsx(styling.right) })}></div>
+  <div class={slot({ class: clsx(styling.slot) })}>
     {#if children}
       {@render children()}
     {/if}
@@ -23,9 +36,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L537)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L507)
 ## Props
 @prop children
+@prop class: className
+@prop classes
 @prop divClass
 @prop div2Class
 @prop div3Class

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

@@ -2,9 +2,11 @@ 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#L537)
+ * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L507)
  * ## Props
  * @prop children
+ * @prop class: className
+ * @prop classes
  * @prop divClass
  * @prop div2Class
  * @prop div3Class

package/dist/device-mockups/Desktop.svelte

@@ -1,29 +1,42 @@
 <script lang="ts">
+  import { type DesktopProps } from "..";
+  import { themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { desktop } from ".";
-  import { type MockupBaseProps, cn } from "..";
 
-  let { children, divClass, div2Class, div3Class, div4Class, ...restProps }: MockupBaseProps = $props();
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: DesktopProps = $props();
 
-  const { div, inner, bot, botUnder } = desktop();
+  themeDeprecated("DesktopMockup", { divClass, div2Class, div3Class, div4Class });
+  let styling = $derived(
+    classes ?? {
+      inner: div2Class,
+      bot: div3Class,
+      botUnder: div4Class
+    }
+  );
+
+  const { base, inner, bot, botUnder } = desktop();
 </script>
 
-<div {...restProps} class={cn(div(), divClass)}>
-  <div class={cn(inner(), div2Class)}>
+<div {...restProps} class={base({ class: clsx(className ?? divClass) })}>
+  <div class={inner({ class: clsx(styling.inner) })}>
     {#if children}
       {@render children()}
     {/if}
   </div>
 </div>
-<div class={cn(bot(), div3Class)}></div>
-<div class={cn(botUnder(), div4Class)}></div>
+<div class={bot({ class: clsx(styling.bot) })}></div>
+<div class={botUnder({ class: clsx(styling.botUnder) })}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
+[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
 ## Props
 @prop children
+@prop class: className
+@prop classes
 @prop divClass
 @prop div2Class
 @prop div3Class

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

@@ -1,16 +1,18 @@
-import { type MockupBaseProps } from "..";
+import { type DesktopProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
+ * [DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
  * ## Props
  * @prop children
+ * @prop class: className
+ * @prop classes
  * @prop divClass
  * @prop div2Class
  * @prop div3Class
  * @prop div4Class
  * @prop ...restProps
  */
-declare const Desktop: import("svelte").Component<MockupBaseProps, {}, "">;
+declare const Desktop: import("svelte").Component<DesktopProps, {}, "">;
 type Desktop = ReturnType<typeof Desktop>;
 export default Desktop;

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#L513)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L475)
 ## 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#L513)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L475)
  * ## Props
  * @prop children
  * @prop device = "default"