format

packages/ui/src/components/Carousel/theme.ts

@@ -23,8 +23,8 @@ export const carouselTheme: FlowbiteCarouselTheme = createTheme({
     },
   },
   control: {
-    base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10",
-    icon: "h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6",
+    base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70",
+    icon: "h-5 w-5 text-white sm:h-6 sm:w-6 dark:text-gray-800",
   },
   scrollContainer: {
     base: "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg",

packages/ui/src/components/Footer/theme.ts

@@ -3,7 +3,7 @@ import type { FlowbiteFooterTheme } from "./Footer";
 
 export const footerTheme: FlowbiteFooterTheme = createTheme({
   root: {
-    base: "w-full rounded-lg bg-white shadow dark:bg-gray-800 md:flex md:items-center md:justify-between",
+    base: "w-full rounded-lg bg-white shadow md:flex md:items-center md:justify-between dark:bg-gray-800",
     container: "w-full p-6",
     bgDark: "bg-gray-800",
   },
@@ -23,10 +23,10 @@ export const footerTheme: FlowbiteFooterTheme = createTheme({
     base: "mb-6 text-sm font-semibold uppercase text-gray-500 dark:text-white",
   },
   divider: {
-    base: "my-6 w-full border-gray-200 dark:border-gray-700 sm:mx-auto lg:my-8",
+    base: "my-6 w-full border-gray-200 sm:mx-auto lg:my-8 dark:border-gray-700",
   },
   copyright: {
-    base: "text-sm text-gray-500 dark:text-gray-400 sm:text-center",
+    base: "text-sm text-gray-500 sm:text-center dark:text-gray-400",
     href: "ml-1 hover:underline",
     span: "ml-1",
   },

packages/ui/src/components/HR/theme.ts

@@ -6,7 +6,7 @@ export const hrTheme: FlowbiteHRTheme = createTheme({
     base: "my-8 h-px border-0 bg-gray-200 dark:bg-gray-700",
   },
   trimmed: {
-    base: "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 dark:bg-gray-700 md:my-10",
+    base: "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 md:my-10 dark:bg-gray-700",
   },
   icon: {
     base: "inline-flex w-full items-center justify-center",
@@ -22,6 +22,6 @@ export const hrTheme: FlowbiteHRTheme = createTheme({
     text: "absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-gray-900 dark:text-white",
   },
   square: {
-    base: "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 dark:bg-gray-700 md:my-12",
+    base: "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 md:my-12 dark:bg-gray-700",
   },
 });

packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx

@@ -19,7 +19,7 @@ const Template: StoryFn<MegaMenuProps> = (args) => (
     <div className="order-2 hidden items-center md:flex">
       <a
         href="#"
-        className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5"
+        className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 md:mr-2 md:px-5 md:py-2.5 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
       >
         Login
       </a>

packages/ui/src/components/Navbar/theme.ts

@@ -3,7 +3,7 @@ import type { FlowbiteNavbarTheme } from "./Navbar";
 
 export const navbarTheme: FlowbiteNavbarTheme = createTheme({
   root: {
-    base: "bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4",
+    base: "bg-white px-2 py-2.5 sm:px-4 dark:border-gray-700 dark:bg-gray-800",
     rounded: {
       on: "rounded",
       off: "",
@@ -34,16 +34,16 @@ export const navbarTheme: FlowbiteNavbarTheme = createTheme({
   link: {
     base: "block py-2 pl-3 pr-4 md:p-0",
     active: {
-      on: "bg-cyan-700 text-white dark:text-white md:bg-transparent md:text-cyan-700",
-      off: "border-b border-gray-100 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:hover:bg-transparent md:hover:text-cyan-700 md:dark:hover:bg-transparent md:dark:hover:text-white",
+      on: "bg-cyan-700 text-white md:bg-transparent md:text-cyan-700 dark:text-white",
+      off: "border-b border-gray-100 text-gray-700 hover:bg-gray-50 md:border-0 md:hover:bg-transparent md:hover:text-cyan-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-white",
     },
     disabled: {
       on: "text-gray-400 hover:cursor-not-allowed dark:text-gray-600",
       off: "",
     },
   },
   toggle: {
-    base: "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden",
+    base: "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
     icon: "h-6 w-6 shrink-0",
   },
 });

packages/ui/src/components/Timeline/theme.ts

@@ -31,7 +31,7 @@ export const timelineTheme: FlowbiteTimelineTheme = createTheme({
     },
     point: {
       horizontal: "flex items-center",
-      line: "hidden h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",
+      line: "hidden h-0.5 w-full bg-gray-200 sm:flex dark:bg-gray-700",
       marker: {
         base: {
           horizontal: