flowbite-svelte 1.10.7 → 1.10.9

package/dist/device-mockups/Laptop.svelte

@@ -1,22 +1,34 @@
 <script lang="ts">
+  import { type LaptopProps } from "..";
+  import { themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { laptop } from ".";
-  import { type MockupBaseProps, cn } from "..";
 
-  let { children, divClass, div2Class, div3Class, div4Class, ...restProps }: MockupBaseProps = $props();
-  const { div, inner, bot, botCen } = laptop();
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: LaptopProps = $props();
+
+  themeDeprecated("Laptop", { divClass, div2Class, div3Class, div4Class });
+  let styling = $derived(
+    classes ?? {
+      inner: div2Class,
+      bot: div3Class,
+      botCen: div4Class
+    }
+  );
+
+  const { base, inner, bot, botCen } = laptop();
 </script>
 
 <div {...restProps}>
-  <div class={cn(div(), divClass)}>
-    <div class={cn(inner(), div2Class)}>
+  <div 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 class={cn(botCen(), div4Class)}></div>
+  <div class={bot({ class: clsx(styling.bot) })}>
+    <div class={botCen({ class: clsx(styling.botCen) })}></div>
   </div>
 </div>
 
@@ -24,9 +36,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L501)
+[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
 ## Props
 @prop children
+@prop class: className
+@prop classes
 @prop divClass
 @prop div2Class
 @prop div3Class

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

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

package/dist/device-mockups/Smartwatch.svelte

@@ -1,33 +1,47 @@
 <script lang="ts">
+  import { type SmartwatchProps } from "..";
+  import { themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { smartwatch } from ".";
-  import { type SmartwatchProps, cn } from "..";
 
-  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
 
-  const { div, top, rightTop, rightBot, bot, slot } = smartwatch();
+  themeDeprecated("Smartwatch", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class });
+  let styling = $derived(
+    classes ?? {
+      top: div2Class,
+      rightTop: div3Class,
+      rightBot: div4Class,
+      bot: div5Class,
+      slot: div6Class
+    }
+  );
+  const { base, top, rightTop, rightBot, bot, slot } = smartwatch();
 </script>
 
 <div {...restProps}>
-  <div class={cn(div(), divClass)}></div>
-  <div class={cn(top(), div2Class)}>
-    <div class={cn(rightTop(), div3Class)}></div>
-    <div class={cn(rightBot(), div4Class)}></div>
-    <div class={cn(slot(), div5Class)}>
+  <div class={base({ class: clsx(className ?? divClass) })}></div>
+  <div class={top({ class: clsx(styling.top) })}>
+    <div class={rightTop({ class: clsx(styling.rightTop) })}></div>
+    <div class={rightBot({ class: clsx(styling.rightBot) })}></div>
+    <div class={slot({ class: clsx(styling.slot) })}>
       {#if children}
         {@render children()}
       {/if}
     </div>
   </div>
-  <div class={cn(bot(), div6Class)}></div>
+  <div class={bot({ class: clsx(styling.bot) })}></div>
 </div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L540)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L525)
 ## Props
 @prop children
+@prop class: className
+@prop classes
 @prop divClass
 @prop div2Class
 @prop div3Class

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

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

package/dist/device-mockups/Tablet.svelte

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

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

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

package/dist/device-mockups/theme.d.ts

@@ -1,8 +1,11 @@
+import type { Classes } from "../theme/themeUtils";
+import { type VariantProps } from "tailwind-variants";
+export type AndroidVariants = VariantProps<typeof android> & Classes<typeof android>;
 declare const android: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -13,8 +16,8 @@ declare const android: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -23,7 +26,7 @@ declare const android: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
@@ -33,8 +36,8 @@ declare const android: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -43,7 +46,7 @@ declare const android: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
@@ -51,7 +54,7 @@ declare const android: import("tailwind-variants").TVReturnType<{
     leftBot: string;
     right: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
@@ -59,11 +62,12 @@ declare const android: import("tailwind-variants").TVReturnType<{
     leftBot: string;
     right: string;
 }, undefined, unknown, unknown, undefined>>;
+export type DefaultMockupVariants = VariantProps<typeof defaultMockup> & Classes<typeof defaultMockup>;
 declare const defaultMockup: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -73,8 +77,8 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -82,7 +86,7 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
@@ -91,8 +95,8 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -100,24 +104,25 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
     leftBot: string;
     right: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
     leftBot: string;
     right: string;
 }, undefined, unknown, unknown, undefined>>;
+export type DesktopVariants = VariantProps<typeof desktop> & Classes<typeof desktop>;
 declare const desktop: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             inner?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             botUnder?: import("tailwind-variants").ClassValue;
@@ -126,42 +131,43 @@ declare const desktop: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             inner?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             botUnder?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
+    base: string;
     inner: string;
     bot: string;
     botUnder: string;
-    div: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             inner?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             botUnder?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
+    base: string;
     inner: string;
     bot: string;
     botUnder: string;
-    div: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
     inner: string;
     bot: string;
     botUnder: string;
-    div: string;
 }, undefined, unknown, unknown, undefined>>;
+export type IosVariants = VariantProps<typeof ios> & Classes<typeof ios>;
 declare const ios: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -171,8 +177,8 @@ declare const ios: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -180,7 +186,7 @@ declare const ios: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
@@ -189,8 +195,8 @@ declare const ios: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
@@ -198,24 +204,25 @@ declare const ios: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
     leftBot: string;
     right: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
-    div: string;
+    base: string;
     slot: string;
     top: string;
     leftTop: string;
     leftBot: string;
     right: string;
 }, undefined, unknown, unknown, undefined>>;
+export type LaptopVariants = VariantProps<typeof laptop> & Classes<typeof laptop>;
 declare const laptop: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             inner?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             botCen?: import("tailwind-variants").ClassValue;
@@ -224,42 +231,43 @@ declare const laptop: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             inner?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             botCen?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     inner: string;
     bot: string;
     botCen: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             inner?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             botCen?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     inner: string;
     bot: string;
     botCen: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
-    div: string;
+    base: string;
     inner: string;
     bot: string;
     botCen: string;
 }, undefined, unknown, unknown, undefined>>;
+export type SmartwatchVariants = VariantProps<typeof smartwatch> & Classes<typeof smartwatch>;
 declare const smartwatch: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             rightTop?: import("tailwind-variants").ClassValue;
@@ -269,8 +277,8 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             rightTop?: import("tailwind-variants").ClassValue;
@@ -278,7 +286,7 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     rightTop: string;
     rightBot: string;
@@ -287,8 +295,8 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             top?: import("tailwind-variants").ClassValue;
             bot?: import("tailwind-variants").ClassValue;
             rightTop?: import("tailwind-variants").ClassValue;
@@ -296,25 +304,26 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     rightTop: string;
     rightBot: string;
     top: string;
     bot: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
-    div: string;
+    base: string;
     slot: string;
     rightTop: string;
     rightBot: string;
     top: string;
     bot: string;
 }, undefined, unknown, unknown, undefined>>;
+export type TabletVariants = VariantProps<typeof tablet> & Classes<typeof tablet>;
 declare const tablet: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
             leftMid?: import("tailwind-variants").ClassValue;
@@ -324,8 +333,8 @@ declare const tablet: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
             leftMid?: import("tailwind-variants").ClassValue;
@@ -333,7 +342,7 @@ declare const tablet: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     leftTop: string;
     leftMid: string;
@@ -342,8 +351,8 @@ declare const tablet: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             slot?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             right?: import("tailwind-variants").ClassValue;
             leftTop?: import("tailwind-variants").ClassValue;
             leftMid?: import("tailwind-variants").ClassValue;
@@ -351,14 +360,14 @@ declare const tablet: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}, {
-    div: string;
+    base: string;
     slot: string;
     leftTop: string;
     leftMid: string;
     leftBot: string;
     right: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
-    div: string;
+    base: string;
     slot: string;
     leftTop: string;
     leftMid: string;

package/dist/device-mockups/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 // Android
 const android = tv({
     slots: {
-        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl",
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl",
         slot: "rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
         top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
         leftTop: "h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
@@ -14,7 +14,7 @@ const android = tv({
 // DefaultMockup
 const defaultMockup = tv({
     slots: {
-        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]",
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]",
         slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
         top: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
         leftTop: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
@@ -25,16 +25,16 @@ const defaultMockup = tv({
 // Desktop
 const desktop = tv({
     slots: {
+        base: "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]",
         inner: "rounded-xl overflow-hidden h-[140px] md:h-[262px]",
         bot: "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]",
-        botUnder: "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]",
-        div: "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]"
+        botUnder: "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]"
     }
 });
 // ios
 const ios = tv({
     slots: {
-        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl",
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl",
         slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
         top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
         leftTop: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
@@ -45,7 +45,7 @@ const ios = tv({
 // laptop
 const laptop = tv({
     slots: {
-        div: "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]",
+        base: "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]",
         inner: "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800",
         bot: "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]",
         botCen: "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"
@@ -54,7 +54,7 @@ const laptop = tv({
 // smartwatch
 const smartwatch = tv({
     slots: {
-        div: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]",
+        base: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]",
         slot: "rounded-[2rem] overflow-hidden h-[193px] w-[188px]",
         rightTop: "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg",
         rightBot: "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg",
@@ -65,7 +65,7 @@ const smartwatch = tv({
 // tablet
 const tablet = tv({
     slots: {
-        div: "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]",
+        base: "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]",
         slot: "rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800",
         leftTop: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
         leftMid: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",