feat(/theme/default): finish migrating components to use a root theme

Follow up to themesberg#500

BREAKING CHANGE: Like in themesberg#500, this version permanently changes the `FlowbiteTheme` for numerous
components.

The philosophy is that themes will more clearly reflect the component's structure.

For example, an `<Accordion>` can contain any number of `<Accordion.Title>` or `<Accordion.Content>`
sections. The theme used to look like:

```js
accordion: {
  base: "..",
  content: "..",
  flush: "..",
  title: "..",
}
```

And now, the theme for an `<Accordion>` looks like:

```
js
accordion: {
  root: {
    base: "..",
    flush: "..",
  },
  content: "..",
  title: "..",
}
```

So now the options in the theme which apply to the `<Accordion>` itself will always be found under
`root`. Likewise, `<Accordion.Content>` can be themed via the `content` subsection.

This ultimately will apply to all components.

src/docs/pages/ThemePage.tsx

@@ -8,7 +8,7 @@ import { Flowbite } from '../../lib/components';
 import type { CustomFlowbiteTheme } from '../../lib/components/Flowbite/FlowbiteTheme';
 
 const ThemePage: FC = () => {
-  const theme: CustomFlowbiteTheme = { alert: { root: { color: { info: 'bg-primary' } } } };
+  const theme: CustomFlowbiteTheme = { alert: { color: { info: 'bg-primary' } } };
 
   return (
     <div className="flex flex-col max-w-4xl gap-8 mx-auto dark:text-white">

src/index.tsx

@@ -10,8 +10,10 @@ if (container) {
   const root = createRoot(container);
   const theme = {
     sidebar: {
-      base: 'h-full bg-inherit',
-      inner: 'h-full overflow-y-auto overflow-x-hidden rounded bg-inherit py-4 px-3',
+      root: {
+        base: 'h-full bg-inherit',
+        inner: 'h-full overflow-y-auto overflow-x-hidden rounded bg-inherit py-4 px-3',
+      },
     },
   };
 

src/lib/components/Toast/Toast.tsx

@@ -1,15 +1,19 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useState } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 import type { Duration } from './ToastContext';
 import { ToastContext } from './ToastContext';
 import { ToastToggle } from './ToastToggle';
 
 export interface FlowbiteToastTheme {
-  base: string;
-  closed: string;
-  removed: string;
+  root: {
+    base: string;
+    closed: string;
+    removed: string;
+  };
   toggle: {
     base: string;
     icon: string;
@@ -18,6 +22,7 @@ export interface FlowbiteToastTheme {
 
 export interface ToastProps extends PropsWithChildren<ComponentProps<'div'>> {
   duration?: Duration;
+  theme?: DeepPartial<FlowbiteToastTheme>;
 }
 
 const durationClasses: Record<Duration, string> = {
@@ -31,21 +36,21 @@ const durationClasses: Record<Duration, string> = {
   1000: 'duration-1000',
 };
 
-const ToastComponent: FC<ToastProps> = ({ children, duration = 300, className, ...props }) => {
+const ToastComponent: FC<ToastProps> = ({ children, className, duration = 300, theme: customTheme = {}, ...props }) => {
   const [isClosed, setIsClosed] = useState(false);
   const [isRemoved, setIsRemoved] = useState(false);
 
-  const theme = useTheme().theme.toast;
+  const theme = mergeDeep(useTheme().theme.toast, customTheme);
 
   return (
     <ToastContext.Provider value={{ duration, isClosed, isRemoved, setIsClosed, setIsRemoved }}>
       <div
         data-testid="flowbite-toast"
         className={classNames(
-          theme.base,
+          theme.root.base,
           durationClasses[duration],
-          { [theme.closed]: isClosed },
-          { [theme.removed]: isRemoved },
+          { [theme.root.closed]: isClosed },
+          { [theme.root.removed]: isRemoved },
           className,
         )}
         {...props}