fix(toast): component migration done

src/lib/components/atoms/Toast/Toast.spec.tsx

@@ -21,4 +21,4 @@ describe.concurrent('Components / Toast', () => {
   });
 });
 
-const toast = () => screen.getByTestId('flowbite-toast');
+const toast = () => screen.getByTestId('sui-toast');

src/lib/components/atoms/Toast/Toast.theme.tsx

@@ -1,19 +1,10 @@
 export type ToastTheme = {
   base: string;
-  closed: string;
-  removed: string;
-  toggle: {
-    base: string;
-    icon: string;
-  };
+  toggle: string;
 };
 
 export const TOAST_THEME: ToastTheme = {
-  base: 'flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow',
-  closed: 'opacity-0 ease-out',
-  removed: 'hidden',
-  toggle: {
-    base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300:bg-gray-700:text-white',
-    icon: 'h-5 w-5 shrink-0'
-  }
+  base: ' rounded-lg bg-white text-gray-500 shadow',
+  toggle:
+    'rounded-lg bg-white text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300:bg-gray-700:text-white'
 };

src/lib/components/atoms/Toast/Toast.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type { FC } from 'react';
 import { useState } from 'react';
-import { excludeClassName } from '../../../helpers/exclude';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import type { Duration } from './ToastContext';
 import { ToastContext } from './ToastContext';
 
-export interface ToastProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'className'>> {
+export interface ToastProps {
+  children?: React.ReactNode;
   duration?: Duration;
 }
 
@@ -21,24 +21,23 @@ const durationClasses: Record<Duration, string> = {
   1000: 'duration-1000'
 };
 
-export const Toast: FC<ToastProps> = ({ children, duration = 300, ...props }) => {
+export const Toast: FC<ToastProps> = ({ children, duration = 300 }) => {
   const [isClosed, setIsClosed] = useState(false);
   const [isRemoved, setIsRemoved] = useState(false);
 
   const theme = useTheme().theme.toast;
-  const theirProps = excludeClassName(props);
 
   return (
     <ToastContext.Provider value={{ duration, isClosed, isRemoved, setIsClosed, setIsRemoved }}>
       <div
-        data-testid="flowbite-toast"
+        data-testid="sui-toast"
         className={classNames(
+          'flex w-full max-w-xs items-center p-4',
           theme.base,
           durationClasses[duration],
-          { [theme.closed]: isClosed },
-          { [theme.removed]: isRemoved }
+          isClosed && 'opacity-0 ease-out',
+          isRemoved && 'hidden'
         )}
-        {...theirProps}
       >
         {children}
       </div>

src/lib/components/atoms/Toast/ToastToggle.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { HiX } from 'react-icons/hi';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
@@ -9,16 +10,21 @@ type ToastToggleProps = ComponentProps<'button'> & {
 
 export const ToastToggle: FC<ToastToggleProps> = ({ xIcon: XIcon = HiX }) => {
   const { duration, isClosed, isRemoved, setIsClosed, setIsRemoved } = useToastContext();
-  const theme = useTheme().theme.toast.toggle;
+  const theme = useTheme().theme.toast;
 
   const handleClick = () => {
     setIsClosed(!isClosed);
     setTimeout(() => setIsRemoved(!isRemoved), duration);
   };
 
   return (
-    <button aria-label="Close" onClick={handleClick} type="button" className={theme.base}>
-      <XIcon className={theme.icon} />
+    <button
+      aria-label="Close"
+      onClick={handleClick}
+      type="button"
+      className={classNames('-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 p-1.5', theme.toggle)}
+    >
+      <XIcon className="h-5 w-5 shrink-0" />
     </button>
   );
 };