diff --git a/.prettierignore b/.prettierignore
index 17b0db15e..d41b9248a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,6 +1,8 @@
-*.md
-.gitignore
-build/
-coverage/
+**/*.md
+**/build/
+**/coverage/
+docs/
 lib/
-docs/
\ No newline at end of file
+
+!src/docs/
+!src/lib/
diff --git a/src/lib/components/Carousel/index.tsx b/src/lib/components/Carousel/index.tsx
index 487bbd865..9a8a72a48 100644
--- a/src/lib/components/Carousel/index.tsx
+++ b/src/lib/components/Carousel/index.tsx
@@ -142,14 +142,14 @@ const DefaultLeftControl: FC = () => {
     <span className={theme.control.base}>
       <HiOutlineChevronLeft className={theme.control.icon} />
     </span>
-  )
+  );
 };
 
 const DefaultRightControl: FC = () => {
   const theme = useTheme().theme.carousel;
   return (
-  <span className={theme.control.base}>
-    <HiOutlineChevronRight className={theme.control.icon} />
-  </span>
-  )
-};
\ No newline at end of file
+    <span className={theme.control.base}>
+      <HiOutlineChevronRight className={theme.control.icon} />
+    </span>
+  );
+};
diff --git a/src/lib/components/Dropdown/index.tsx b/src/lib/components/Dropdown/index.tsx
index f0ef5d58f..56296810f 100644
--- a/src/lib/components/Dropdown/index.tsx
+++ b/src/lib/components/Dropdown/index.tsx
@@ -14,9 +14,9 @@ import { DropdownItem } from './DropdownItem';
 export interface DropdownProps extends PropsWithChildren<Pick<FloatingProps, 'placement' | 'trigger'>>, ButtonProps {
   label: ReactNode;
   inline?: boolean;
-  floatingArrow?: boolean;  
+  floatingArrow?: boolean;
   arrowIcon?: boolean;
-};
+}
 
 const icons: Record<string, FC<ComponentProps<'svg'>>> = {
   top: HiOutlineChevronUp,
@@ -28,8 +28,8 @@ const icons: Record<string, FC<ComponentProps<'svg'>>> = {
 const DropdownComponent: FC<DropdownProps> = ({ children, ...props }) => {
   const theme = useTheme().theme.dropdown;
   const theirProps = excludeClassName(props) as DropdownProps;
-  const { 
-    placement = props.inline ? 'bottom-start' : 'bottom', 
+  const {
+    placement = props.inline ? 'bottom-start' : 'bottom',
     trigger = 'click',
     label,
     inline,
diff --git a/src/lib/components/Floating/index.tsx b/src/lib/components/Floating/index.tsx
index 7cc6394f6..edb837f89 100644
--- a/src/lib/components/Floating/index.tsx
+++ b/src/lib/components/Floating/index.tsx
@@ -143,4 +143,4 @@ export const Floating: FC<FloatingProps> = ({
       </div>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
index daa34ba0d..34b304c6b 100644
--- a/src/lib/components/Flowbite/FlowbiteTheme.ts
+++ b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -1,4 +1,4 @@
-import type { DeepPartial } from '../../helpers/deep-partial';
+import { DeepPartial } from '..';
 import type { AlertColors } from '../Alert';
 import type { AvatarSizes } from '../Avatar';
 import type { BadgeColors, BadgeSizes } from '../Badge';
@@ -11,7 +11,15 @@ import type {
 } from '../Button';
 import type { PositionInButtonGroup } from '../Button/ButtonGroup';
 import type { FlowbiteFloatingTheme } from '../Floating';
-import type { HelperColors, LabelColors, SelectColors, SelectSizes, TextareaColors, TextInputColors, TextInputSizes } from '../FormControls';
+import type {
+  HelperColors,
+  LabelColors,
+  SelectColors,
+  SelectSizes,
+  TextareaColors,
+  TextInputColors,
+  TextInputSizes,
+} from '../FormControls';
 import type { ModalPositions, ModalSizes } from '../Modal';
 import type { ProgressColor, ProgressSizes } from '../Progress';
 import type { StarSizes } from '../Rating';
@@ -147,10 +155,10 @@ export interface FlowbiteTheme {
       base: string;
       wrapper: string;
     };
-    control:{
+    control: {
       base: string;
       icon: string;
-    },
+    };
     leftControl: string;
     rightControl: string;
     scrollContainer: {
@@ -470,7 +478,7 @@ export interface FlowbiteTheme {
     content: string;
     inlineWrapper: string;
     arrowIcon: string;
-  }
+  };
 }
 
 export interface FlowbiteBoolean {
diff --git a/src/lib/components/Flowbite/index.tsx b/src/lib/components/Flowbite/index.tsx
index b99b2f8b8..498f0e363 100644
--- a/src/lib/components/Flowbite/index.tsx
+++ b/src/lib/components/Flowbite/index.tsx
@@ -1,6 +1,6 @@
 import type { FC, HTMLAttributes } from 'react';
 import { useEffect, useMemo } from 'react';
-import type { DeepPartial } from '../../helpers/deep-partial';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import windowExists from '../../helpers/window-exists';
 import defaultTheme from '../../theme/default';
diff --git a/src/lib/components/Footer/FooterCopyright.tsx b/src/lib/components/Footer/FooterCopyright.tsx
index 0b644c603..d59549772 100644
--- a/src/lib/components/Footer/FooterCopyright.tsx
+++ b/src/lib/components/Footer/FooterCopyright.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export interface CopyrightProps extends Omit<PropsWithChildren<ComponentProps<'span'>>,'className'> {
+export interface CopyrightProps extends Omit<PropsWithChildren<ComponentProps<'span'>>, 'className'> {
   href?: string;
   by: string;
   year?: number;
diff --git a/src/lib/components/Footer/FooterLink.tsx b/src/lib/components/Footer/FooterLink.tsx
index ea743cb79..b994e112b 100644
--- a/src/lib/components/Footer/FooterLink.tsx
+++ b/src/lib/components/Footer/FooterLink.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export interface FooterLinkProps extends Omit<PropsWithChildren<ComponentProps<'a'>>,'className'>{
+export interface FooterLinkProps extends Omit<PropsWithChildren<ComponentProps<'a'>>, 'className'> {
   href: string;
 }
 
diff --git a/src/lib/components/Footer/FooterTitle.tsx b/src/lib/components/Footer/FooterTitle.tsx
index a41d3212f..bab829a62 100644
--- a/src/lib/components/Footer/FooterTitle.tsx
+++ b/src/lib/components/Footer/FooterTitle.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export interface FooterTitleProps extends Omit<PropsWithChildren<ComponentProps<'h2'>>,'className'>{
+export interface FooterTitleProps extends Omit<PropsWithChildren<ComponentProps<'h2'>>, 'className'> {
   title: string;
 }
 
diff --git a/src/lib/components/FormControls/Radio.tsx b/src/lib/components/FormControls/Radio.tsx
index a4322cadf..8fc9ae99a 100644
--- a/src/lib/components/FormControls/Radio.tsx
+++ b/src/lib/components/FormControls/Radio.tsx
@@ -5,7 +5,7 @@ import { useTheme } from '../Flowbite/ThemeContext';
 
 export type RadioProps = Omit<ComponentProps<'input'>, 'type' | 'className' | 'ref'>;
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps> ((props, ref) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const theme = useTheme().theme.formControls.radio;
   const theirProps = excludeClassName(props);
   return <input ref={ref} className={theme.base} type="radio" {...theirProps} />;
diff --git a/src/lib/components/FormControls/Select.tsx b/src/lib/components/FormControls/Select.tsx
index 3e1543a3c..81a4b9630 100644
--- a/src/lib/components/FormControls/Select.tsx
+++ b/src/lib/components/FormControls/Select.tsx
@@ -1,9 +1,8 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, ReactNode } from 'react';
-import {forwardRef} from 'react';
-import type { FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import { forwardRef } from 'react';
 import { excludeClassName } from '../../helpers/exclude';
-import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import HelperText from './HelperText';
 
@@ -22,50 +21,39 @@ export interface SelectProps extends Omit<ComponentProps<'select'>, 'className'
   addon?: ReactNode;
   icon?: FC<ComponentProps<'svg'>>;
   color?: keyof SelectColors;
-};
+}
 
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(({
-  children,
-  sizing = 'md',
-  shadow,
-  helperText,
-  addon,
-  icon: Icon,
-  color = 'gray',
-  ...props
-}, ref) => {
-  const theme = useTheme().theme.formControls.select;
-  const theirProps = excludeClassName(props);
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ children, sizing = 'md', shadow, helperText, addon, icon: Icon, color = 'gray', ...props }, ref) => {
+    const theme = useTheme().theme.formControls.select;
+    const theirProps = excludeClassName(props);
 
-  return (
-    <div className={theme.base}>
-      {addon && (
-        <span className={theme.addon}>
-          {addon}
-        </span>
-      )}
-      <div className={theme.field.base}>
-        {Icon && (
-          <div className={theme.field.icon.base}>
-            <Icon className={theme.field.icon.svg} />
-          </div>
-        )}
-        <select
-          className={classNames(
-            theme.field.select.base,
-            theme.field.select.colors[color],
-            theme.field.select.withIcon[Icon ? 'on' : 'off'],
-            theme.field.select.withAddon[addon ? 'on' : 'off'],
-            theme.field.select.withShadow[shadow ? 'on' : 'off'],
-            theme.field.select.sizes[sizing],
+    return (
+      <div className={theme.base}>
+        {addon && <span className={theme.addon}>{addon}</span>}
+        <div className={theme.field.base}>
+          {Icon && (
+            <div className={theme.field.icon.base}>
+              <Icon className={theme.field.icon.svg} />
+            </div>
           )}
-          {...theirProps}
-          ref={ref}
-        >
-          {children}
-        </select>
-        {helperText && <HelperText color={color}>{helperText}</HelperText>}
+          <select
+            className={classNames(
+              theme.field.select.base,
+              theme.field.select.colors[color],
+              theme.field.select.withIcon[Icon ? 'on' : 'off'],
+              theme.field.select.withAddon[addon ? 'on' : 'off'],
+              theme.field.select.withShadow[shadow ? 'on' : 'off'],
+              theme.field.select.sizes[sizing],
+            )}
+            {...theirProps}
+            ref={ref}
+          >
+            {children}
+          </select>
+          {helperText && <HelperText color={color}>{helperText}</HelperText>}
+        </div>
       </div>
-    </div>
-  )
-});
+    );
+  },
+);
diff --git a/src/lib/components/FormControls/Textarea.tsx b/src/lib/components/FormControls/Textarea.tsx
index 0d820340c..30aac2838 100644
--- a/src/lib/components/FormControls/Textarea.tsx
+++ b/src/lib/components/FormControls/Textarea.tsx
@@ -16,19 +16,21 @@ export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'classNa
   color?: keyof TextareaColors;
 }
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ shadow, helperText, color = 'gray', ...props }, ref) => {
-  const theme = useTheme().theme.formControls.textarea;
-  const theirProps = excludeClassName(props)
-  return (
-    <>
-      <textarea 
-        ref={ref}
-        className={classNames(theme.base, theme.colors[color], theme.withShadow[shadow ? 'on' : 'off'])}
-        {...theirProps}
-      />
-      {helperText && <HelperText color={color}>{helperText}</HelperText>}
-    </>
-  )
-});
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ shadow, helperText, color = 'gray', ...props }, ref) => {
+    const theme = useTheme().theme.formControls.textarea;
+    const theirProps = excludeClassName(props);
+    return (
+      <>
+        <textarea
+          ref={ref}
+          className={classNames(theme.base, theme.colors[color], theme.withShadow[shadow ? 'on' : 'off'])}
+          {...theirProps}
+        />
+        {helperText && <HelperText color={color}>{helperText}</HelperText>}
+      </>
+    );
+  },
+);
 
 Textarea.displayName = 'Textarea';
diff --git a/src/lib/components/Navbar/NavbarBrand.tsx b/src/lib/components/Navbar/NavbarBrand.tsx
index d1d0b0df6..caa83b7b9 100644
--- a/src/lib/components/Navbar/NavbarBrand.tsx
+++ b/src/lib/components/Navbar/NavbarBrand.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { excludeClassName } from '../../helpers/exclude';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export type NavbarBrandProps = Omit<PropsWithChildren<ComponentProps<'a'>>, 'className'>
+export type NavbarBrandProps = Omit<PropsWithChildren<ComponentProps<'a'>>, 'className'>;
 
 export const NavbarBrand: FC<NavbarBrandProps> = ({ children, href, ...props }) => {
   const theme = useTheme().theme.navbar;
@@ -11,5 +11,5 @@ export const NavbarBrand: FC<NavbarBrandProps> = ({ children, href, ...props })
     <a href={href} className={theme.brand} {...theirProps}>
       {children}
     </a>
-  )
+  );
 };
diff --git a/src/lib/components/Navbar/NavbarCollapse.tsx b/src/lib/components/Navbar/NavbarCollapse.tsx
index 49e88bf8c..dfb451878 100644
--- a/src/lib/components/Navbar/NavbarCollapse.tsx
+++ b/src/lib/components/Navbar/NavbarCollapse.tsx
@@ -4,11 +4,11 @@ import { excludeClassName } from '../../helpers/exclude';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
 
-export type NavbarCollapseProps = Omit<PropsWithChildren<ComponentProps<'div'>>, 'className'>
+export type NavbarCollapseProps = Omit<PropsWithChildren<ComponentProps<'div'>>, 'className'>;
 
 export const NavbarCollapse: FC<NavbarCollapseProps> = ({ children, ...props }): JSX.Element => {
   const { isOpen } = useNavbarContext();
-  
+
   const theme = useTheme().theme.navbar.collapse;
   const theirProps = excludeClassName(props);
 
diff --git a/src/lib/components/Navbar/NavbarLink.tsx b/src/lib/components/Navbar/NavbarLink.tsx
index 156533740..c8e217b4d 100644
--- a/src/lib/components/Navbar/NavbarLink.tsx
+++ b/src/lib/components/Navbar/NavbarLink.tsx
@@ -7,23 +7,24 @@ export interface NavbarLinkProps extends Omit<PropsWithChildren<ComponentProps<'
   active?: boolean;
   disabled?: boolean;
   href?: string;
-};
+}
 
 export const NavbarLink: FC<NavbarLinkProps> = ({ active, disabled, href, children, ...props }) => {
   const theme = useTheme().theme.navbar.link;
-  const theirProps = excludeClassName(props)
+  const theirProps = excludeClassName(props);
 
   return (
     <li>
       <a
         href={href}
-        className={classNames(theme.base,
+        className={classNames(
+          theme.base,
           {
             [theme.active.on]: active,
-            [theme.active.off]:
-              !active && !disabled
+            [theme.active.off]: !active && !disabled,
           },
-          theme.disabled[disabled ? 'on' : 'off'])}
+          theme.disabled[disabled ? 'on' : 'off'],
+        )}
         {...theirProps}
       >
         {children}
diff --git a/src/lib/components/Navbar/NavbarToggle.tsx b/src/lib/components/Navbar/NavbarToggle.tsx
index a75d9caba..9a54dc1ee 100644
--- a/src/lib/components/Navbar/NavbarToggle.tsx
+++ b/src/lib/components/Navbar/NavbarToggle.tsx
@@ -19,12 +19,7 @@ export const NavbarToggle: FC<NavbarToggleProps> = ({ barIcon: BarIcon = GoThree
   const theirProps = excludeClassName(props);
 
   return (
-    <button
-      className={theme.base}
-      data-testid="navbar-toggle"
-      onClick={handleClick}
-      {...theirProps}
-    >
+    <button className={theme.base} data-testid="navbar-toggle" onClick={handleClick} {...theirProps}>
       <span className="sr-only">Open main menu</span>
       <BarIcon className={theme.icon} />
     </button>
diff --git a/src/lib/components/Navbar/index.tsx b/src/lib/components/Navbar/index.tsx
index d7b6647f7..9ad9304a7 100644
--- a/src/lib/components/Navbar/index.tsx
+++ b/src/lib/components/Navbar/index.tsx
@@ -15,9 +15,16 @@ export interface NavbarComponentProps extends Omit<PropsWithChildren<ComponentPr
   fluid?: boolean;
   rounded?: boolean;
   border?: boolean;
-};
+}
 
-const NavbarComponent: FC<NavbarComponentProps> = ({ children, menuOpen, fluid = false, rounded, border, ...props }) => {
+const NavbarComponent: FC<NavbarComponentProps> = ({
+  children,
+  menuOpen,
+  fluid = false,
+  rounded,
+  border,
+  ...props
+}) => {
   const [isOpen, setIsOpen] = useState(menuOpen);
 
   const theme = useTheme().theme.navbar;
@@ -29,11 +36,7 @@ const NavbarComponent: FC<NavbarComponentProps> = ({ children, menuOpen, fluid =
         className={classNames(theme.base, theme.bordered[border ? 'on' : 'off'], theme.rounded[rounded ? 'on' : 'off'])}
         {...theirProps}
       >
-        <div
-          className={classNames(theme.inner.base, theme.inner.fuild[fluid ? 'on' : 'off'])}
-        >
-          {children}
-        </div>
+        <div className={classNames(theme.inner.base, theme.inner.fuild[fluid ? 'on' : 'off'])}>{children}</div>
       </nav>
     </NavbarContext.Provider>
   );
diff --git a/src/lib/components/Tooltip/index.tsx b/src/lib/components/Tooltip/index.tsx
index 01051f201..63bdc62a5 100644
--- a/src/lib/components/Tooltip/index.tsx
+++ b/src/lib/components/Tooltip/index.tsx
@@ -43,4 +43,4 @@ export const Tooltip: FC<TooltipProps> = ({
       {children}
     </Floating>
   );
-};
\ No newline at end of file
+};
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 0f3bc61c4..61033917d 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -9,6 +9,7 @@ export * from './Carousel';
 export * from './DarkThemeToggle';
 export * from './Dropdown';
 export * from './Flowbite';
+export type { CustomFlowbiteTheme } from './Flowbite/FlowbiteTheme';
 export * from './Footer';
 export * from './FormControls';
 export * from './ListGroup';
@@ -24,3 +25,9 @@ export * from './Table';
 export * from './Timeline';
 export * from './Toast';
 export * from './Tooltip';
+
+export type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
diff --git a/src/lib/helpers/deep-partial.d.ts b/src/lib/helpers/deep-partial.d.ts
deleted file mode 100644
index 6ac64c68d..000000000
--- a/src/lib/helpers/deep-partial.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>;
-    }
-  : T;
diff --git a/src/lib/helpers/floating.ts b/src/lib/helpers/floating.ts
index 66e57a321..77fab4ed1 100644
--- a/src/lib/helpers/floating.ts
+++ b/src/lib/helpers/floating.ts
@@ -1,41 +1,41 @@
-import type { Middleware } from '@floating-ui/react-dom-interactions';
-import type { Placement } from "@floating-ui/react-dom";
-import type { RefObject } from "react";
 import { arrow, autoPlacement, shift } from '@floating-ui/core';
+import type { Placement } from '@floating-ui/react-dom';
+import type { Middleware } from '@floating-ui/react-dom-interactions';
 import { flip, offset } from '@floating-ui/react-dom-interactions';
+import type { RefObject } from 'react';
 
 /**
  * @see https://floating-ui.com/docs/middleware
  */
 export const getMiddleware = ({
-    arrowRef,
-    placement,
+  arrowRef,
+  placement,
 }: {
-    arrowRef: RefObject<HTMLDivElement>;
-    placement: 'auto' | Placement;
+  arrowRef: RefObject<HTMLDivElement>;
+  placement: 'auto' | Placement;
 }): Middleware[] => {
-    const middleware = [];
+  const middleware = [];
 
-    middleware.push(offset(8));
-    middleware.push(placement === 'auto' ? autoPlacement() : flip());
-    middleware.push(shift({ padding: 8 }));
+  middleware.push(offset(8));
+  middleware.push(placement === 'auto' ? autoPlacement() : flip());
+  middleware.push(shift({ padding: 8 }));
 
-    if (arrowRef.current) {
-        middleware.push(arrow({ element: arrowRef.current }));
-    }
+  if (arrowRef.current) {
+    middleware.push(arrow({ element: arrowRef.current }));
+  }
 
-    return middleware;
+  return middleware;
 };
 
 export const getPlacement = ({ placement }: { placement: 'auto' | Placement }): Placement | undefined => {
-    return placement === 'auto' ? undefined : placement;
+  return placement === 'auto' ? undefined : placement;
 };
 
 export const getArrowPlacement = ({ placement }: { placement: Placement }): Placement => {
-    return {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-    }[placement.split('-')[0]] as Placement;
-};
\ No newline at end of file
+  return {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+  }[placement.split('-')[0]] as Placement;
+};
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 07635cbbc..445e5ae6a 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './theme/default';
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index 051e7d016..083aac5e9 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -253,7 +253,7 @@ export default {
       base: 'absolute top-1/2 left-1/2 block w-full -translate-x-1/2 -translate-y-1/2',
       wrapper: 'w-full flex-shrink-0 transform cursor-grab snap-center',
     },
-    control:{
+    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',
     },
@@ -268,6 +268,32 @@ export default {
     base: 'rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
     icon: 'h-5 w-5',
   },
+  dropdown: {
+    floating: {
+      target: 'w-fit',
+      base: 'z-10 w-fit rounded divide-y divide-gray-100 shadow',
+      animation: 'transition-opacity',
+      hidden: 'invisible opacity-0',
+      style: {
+        dark: 'bg-gray-900 text-white dark:bg-gray-700',
+        light: 'border border-gray-200 bg-white text-gray-900',
+        auto: 'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
+      },
+      content: 'py-1 text-sm text-gray-700 dark:text-gray-200',
+      arrow: {
+        base: 'absolute z-10 h-2 w-2 rotate-45',
+        style: {
+          dark: 'bg-gray-900 dark:bg-gray-700',
+          light: 'bg-white',
+          auto: 'bg-white dark:bg-gray-700',
+        },
+        placement: '-4px',
+      },
+    },
+    arrowIcon: 'ml-2 h-4 w-4',
+    inlineWrapper: 'flex items-center',
+    content: 'py-1',
+  },
   footer: {
     base: 'w-full rounded-lg bg-white shadow dark:bg-gray-800 md:flex md:items-center md:justify-between',
     container: 'w-full p-6',
@@ -301,7 +327,6 @@ export default {
       span: 'self-center whitespace-nowrap text-2xl font-semibold text-gray-800 dark:text-white',
     },
   },
-
   formControls: {
     helperText: {
       base: 'mt-2 text-sm',
@@ -430,7 +455,8 @@ export default {
     },
     select: {
       base: 'flex',
-      addon: 'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400',
+      addon:
+        'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400',
       field: {
         base: 'relative w-full',
         icon: {
@@ -560,7 +586,7 @@ export default {
       hidden: {
         on: 'hidden',
         off: '',
-      },      
+      },
     },
     link: {
       base: 'block py-2 pr-4 pl-3 md:p-0',
@@ -834,30 +860,4 @@ export default {
       placement: '-4px',
     },
   },
-  dropdown: {
-    floating: {
-      target: 'w-fit',
-      base: 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm',
-      animation: 'transition-opacity',
-      hidden: 'invisible opacity-0',
-      style: {
-        dark: 'bg-gray-900 text-white dark:bg-gray-700',
-        light: 'border border-gray-200 bg-white text-gray-900',
-        auto: 'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
-      },
-      content: 'relative z-20',
-      arrow: {
-        base: 'absolute z-10 h-2 w-2 rotate-45',
-        style: {
-          dark: 'bg-gray-900 dark:bg-gray-700',
-          light: 'bg-white',
-          auto: 'bg-white dark:bg-gray-700',
-        },
-        placement: '-4px',
-      },
-    },
-    arrowIcon: 'ml-2 h-4 w-4',
-    inlineWrapper: 'flex items-center',
-    content: 'py-1',
-  },
 };