@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/components/ui/feedback/skeleton.esm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types';
 
 // Base Skeleton Component
-const BaseSkeleton= ({
+const BaseSkeleton: React.FC<SkeletonProps> = ({
   width,
   height,
   variant = 'rectangular',
@@ -10,24 +10,31 @@ const BaseSkeleton= ({
   className = '',
   size = 'md'
 }) => {
-  // Note= () => {
+  // Note: theme and colors not needed as we're using semantic CSS classes
+
+  const getDefaultDimensions = () => {
     if (width && height) return { width, height };
 
     switch (variant) {
-      case 'circular') {
-          case 'sm', height};
-          case 'lg', height};
-          default, height};
+      case 'circular':
+        switch (size) {
+          case 'sm': return { width: '2rem', height: '2rem' };
+          case 'lg': return { width: '4rem', height: '4rem' };
+          default: return { width: '3rem', height: '3rem' };
         }
-      case 'text') {
-          case 'sm', height};
-          case 'lg', height};
-          default, height};
+      case 'text':
+        switch (size) {
+          case 'sm': return { width: '100%', height: '0.875rem' };
+          case 'lg': return { width: '100%', height: '1.25rem' };
+          default: return { width: '100%', height: '1rem' };
         }
-      case 'rectangular') {
-          case 'sm', height};
-          case 'lg', height};
-          default, height};
+      case 'rectangular':
+      case 'rounded':
+      default:
+        switch (size) {
+          case 'sm': return { width: '100%', height: '2rem' };
+          case 'lg': return { width: '100%', height: '4rem' };
+          default: return { width: '100%', height: '3rem' };
         }
     }
   };
@@ -38,8 +45,9 @@ const BaseSkeleton= ({
     <div
       className={`skeleton__base skeleton__base--${variant} skeleton__base--${animation} skeleton__base--${size} ${className}`}
       style={{
-        width,
-        height}}
+        width: dimensions.width,
+        height: dimensions.height
+      }}
       aria-busy="true"
       role="progressbar"
       aria-label="Loading content"
@@ -48,7 +56,7 @@ const BaseSkeleton= ({
 };
 
 // Skeleton Text Component
-export const SkeletonText= ({
+export const SkeletonText: React.FC<SkeletonTextProps> = ({
   lines = 3,
   lineHeight,
   lastLineWidth,
@@ -59,9 +67,9 @@ export const SkeletonText= ({
   const getLineHeight = () => {
     if (lineHeight) return lineHeight;
     switch (props.size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm': return '0.875rem';
+      case 'lg': return '1.25rem';
+      default: return '1rem';
     }
   };
 
@@ -72,14 +80,15 @@ export const SkeletonText= ({
 
   return (
     <div className={`skeleton__text skeleton__text--spacing-${spacing} ${className}`}>
-      {Array.from({ length}).map((_, index) => (
+      {Array.from({ length: lines }).map((_, index) => (
         <div
           key={index}
           className={`skeleton__text-line skeleton__text-line--${props.size || 'md'} skeleton__base--${props.animation || 'pulse'} ${
-            index === lines - 1 ? 'skeleton__text-line--last' }`}
+            index === lines - 1 ? 'skeleton__text-line--last' : ''
+          }`}
           style={{
-            width=== lines - 1 ? getLastLineWidth() ,
-            height)
+            width: index === lines - 1 ? getLastLineWidth() : '100%',
+            height: getLineHeight()
           }}
           aria-busy="true"
         />
@@ -89,7 +98,7 @@ export const SkeletonText= ({
 };
 
 // Skeleton Avatar Component
-export const SkeletonAvatar= ({
+export const SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({
   size = 'md',
   shape = 'circular',
   className = '',
@@ -106,7 +115,7 @@ export const SkeletonAvatar= ({
 };
 
 // Skeleton Button Component
-export const SkeletonButton= ({
+export const SkeletonButton: React.FC<SkeletonButtonProps> = ({
   size = 'md',
   variant = 'contained',
   fullWidth = false,
@@ -116,7 +125,8 @@ export const SkeletonButton= ({
   return (
     <div
       className={`skeleton__button skeleton__button--${size} skeleton__button--${variant} ${
-        fullWidth ? 'skeleton__button--full-width' } skeleton__base--${props.animation || 'pulse'} ${className}`}
+        fullWidth ? 'skeleton__button--full-width' : ''
+      } skeleton__base--${props.animation || 'pulse'} ${className}`}
       aria-busy="true"
       role="progressbar"
       aria-label="Loading button"
@@ -125,7 +135,7 @@ export const SkeletonButton= ({
 };
 
 // Main Skeleton Component
-export const Skeleton= ({
+export const Skeleton: React.FC<SkeletonProps> = ({
   width,
   height,
   variant = 'rectangular',
@@ -144,7 +154,7 @@ export const Skeleton= ({
   if (rows > 1) {
     return (
       <div className={`skeleton__container skeleton__container--spacing-${spacing} ${className}`}>
-        {Array.from({ length}).map((_, index) => (
+        {Array.from({ length: rows }).map((_, index) => (
           <BaseSkeleton
             key={index}
             width={width}

package/dist/components/ui/feedback/skeleton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types';
 
 // Base Skeleton Component
-const BaseSkeleton= ({
+const BaseSkeleton: React.FC<SkeletonProps> = ({
   width,
   height,
   variant = 'rectangular',
@@ -10,24 +10,31 @@ const BaseSkeleton= ({
   className = '',
   size = 'md'
 }) => {
-  // Note= () => {
+  // Note: theme and colors not needed as we're using semantic CSS classes
+
+  const getDefaultDimensions = () => {
     if (width && height) return { width, height };
 
     switch (variant) {
-      case 'circular') {
-          case 'sm', height};
-          case 'lg', height};
-          default, height};
+      case 'circular':
+        switch (size) {
+          case 'sm': return { width: '2rem', height: '2rem' };
+          case 'lg': return { width: '4rem', height: '4rem' };
+          default: return { width: '3rem', height: '3rem' };
         }
-      case 'text') {
-          case 'sm', height};
-          case 'lg', height};
-          default, height};
+      case 'text':
+        switch (size) {
+          case 'sm': return { width: '100%', height: '0.875rem' };
+          case 'lg': return { width: '100%', height: '1.25rem' };
+          default: return { width: '100%', height: '1rem' };
         }
-      case 'rectangular') {
-          case 'sm', height};
-          case 'lg', height};
-          default, height};
+      case 'rectangular':
+      case 'rounded':
+      default:
+        switch (size) {
+          case 'sm': return { width: '100%', height: '2rem' };
+          case 'lg': return { width: '100%', height: '4rem' };
+          default: return { width: '100%', height: '3rem' };
         }
     }
   };
@@ -38,8 +45,9 @@ const BaseSkeleton= ({
     <div
       className={`skeleton__base skeleton__base--${variant} skeleton__base--${animation} skeleton__base--${size} ${className}`}
       style={{
-        width,
-        height}}
+        width: dimensions.width,
+        height: dimensions.height
+      }}
       aria-busy="true"
       role="progressbar"
       aria-label="Loading content"
@@ -48,7 +56,7 @@ const BaseSkeleton= ({
 };
 
 // Skeleton Text Component
-export const SkeletonText= ({
+export const SkeletonText: React.FC<SkeletonTextProps> = ({
   lines = 3,
   lineHeight,
   lastLineWidth,
@@ -59,9 +67,9 @@ export const SkeletonText= ({
   const getLineHeight = () => {
     if (lineHeight) return lineHeight;
     switch (props.size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm': return '0.875rem';
+      case 'lg': return '1.25rem';
+      default: return '1rem';
     }
   };
 
@@ -72,14 +80,15 @@ export const SkeletonText= ({
 
   return (
     <div className={`skeleton__text skeleton__text--spacing-${spacing} ${className}`}>
-      {Array.from({ length}).map((_, index) => (
+      {Array.from({ length: lines }).map((_, index) => (
         <div
           key={index}
           className={`skeleton__text-line skeleton__text-line--${props.size || 'md'} skeleton__base--${props.animation || 'pulse'} ${
-            index === lines - 1 ? 'skeleton__text-line--last' }`}
+            index === lines - 1 ? 'skeleton__text-line--last' : ''
+          }`}
           style={{
-            width=== lines - 1 ? getLastLineWidth() ,
-            height)
+            width: index === lines - 1 ? getLastLineWidth() : '100%',
+            height: getLineHeight()
           }}
           aria-busy="true"
         />
@@ -89,7 +98,7 @@ export const SkeletonText= ({
 };
 
 // Skeleton Avatar Component
-export const SkeletonAvatar= ({
+export const SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({
   size = 'md',
   shape = 'circular',
   className = '',
@@ -106,7 +115,7 @@ export const SkeletonAvatar= ({
 };
 
 // Skeleton Button Component
-export const SkeletonButton= ({
+export const SkeletonButton: React.FC<SkeletonButtonProps> = ({
   size = 'md',
   variant = 'contained',
   fullWidth = false,
@@ -116,7 +125,8 @@ export const SkeletonButton= ({
   return (
     <div
       className={`skeleton__button skeleton__button--${size} skeleton__button--${variant} ${
-        fullWidth ? 'skeleton__button--full-width' } skeleton__base--${props.animation || 'pulse'} ${className}`}
+        fullWidth ? 'skeleton__button--full-width' : ''
+      } skeleton__base--${props.animation || 'pulse'} ${className}`}
       aria-busy="true"
       role="progressbar"
       aria-label="Loading button"
@@ -125,7 +135,7 @@ export const SkeletonButton= ({
 };
 
 // Main Skeleton Component
-export const Skeleton= ({
+export const Skeleton: React.FC<SkeletonProps> = ({
   width,
   height,
   variant = 'rectangular',
@@ -144,7 +154,7 @@ export const Skeleton= ({
   if (rows > 1) {
     return (
       <div className={`skeleton__container skeleton__container--spacing-${spacing} ${className}`}>
-        {Array.from({ length}).map((_, index) => (
+        {Array.from({ length: rows }).map((_, index) => (
           <BaseSkeleton
             key={index}
             width={width}

package/dist/components/ui/feedback/toast.esm.js

@@ -2,75 +2,97 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ToastProps, ToastAction, ToastContainerProps } from './types';
 
 // Simple icon components
-const CheckCircleIcon}> = ({ className = '' }) => (
+const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
   </svg>
 );
 
-const ExclamationTriangleIcon}> = ({ className = '' }) => (
+const ExclamationTriangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
   </svg>
 );
 
-const XCircleIcon}> = ({ className = '' }) => (
+const XCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
   </svg>
 );
 
-const InformationCircleIcon}> = ({ className = '' }) => (
+const InformationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
   </svg>
 );
 
-const XMarkIcon}> = ({ className = '' }) => (
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
   </svg>
 );
 
 // Get icon for toast type
-const getToastIcon = (type], className) => {
+const getToastIcon = (type: ToastProps['type'], className: string) => {
   switch (type) {
-    case 'success'={className} />;
-    case 'warning'={className} />;
-    case 'error'={className} />;
-    case 'info'={className} />;
-    default;
+    case 'success':
+      return <CheckCircleIcon className={className} />;
+    case 'warning':
+      return <ExclamationTriangleIcon className={className} />;
+    case 'error':
+      return <XCircleIcon className={className} />;
+    case 'info':
+      return <InformationCircleIcon className={className} />;
+    default:
+      return null;
   }
 };
 
-// Note= (type], colors) => {
+// Note: getToastColors function removed as we're using semantic CSS classes
+/*
+const getToastColors = (type: ToastProps['type'], colors: any) => {
   switch (type) {
-    case 'success',
-        border,
-        text,
-        icon};
-    case 'warning',
-        border,
-        text,
-        icon};
-    case 'error',
-        border,
-        text,
-        icon};
-    case 'info',
-        border,
-        text,
-        icon};
-    default,
-        border,
-        text,
-        icon};
+    case 'success':
+      return {
+        background: colors.semantic.success + '10',
+        border: colors.semantic.success + '30',
+        text: colors.semantic.success,
+        icon: colors.semantic.success
+      };
+    case 'warning':
+      return {
+        background: colors.semantic.warning + '10',
+        border: colors.semantic.warning + '30',
+        text: colors.semantic.warning,
+        icon: colors.semantic.warning
+      };
+    case 'error':
+      return {
+        background: colors.semantic.error + '10',
+        border: colors.semantic.error + '30',
+        text: colors.semantic.error,
+        icon: colors.semantic.error
+      };
+    case 'info':
+      return {
+        background: colors.semantic.info + '10',
+        border: colors.semantic.info + '30',
+        text: colors.semantic.info,
+        icon: colors.semantic.info
+      };
+    default:
+      return {
+        background: colors.surface.surface,
+        border: colors.surface.border,
+        text: colors.text.primary,
+        icon: colors.text.secondary
+      };
   }
 };
 */
 
 // Toast Action Button Component
-const ToastActionButton= ({
+const ToastActionButton: React.FC<ToastAction> = ({
   label,
   action,
   variant = 'primary'
@@ -87,7 +109,7 @@ const ToastActionButton= ({
 };
 
 // Individual Toast Component
-export const Toast= ({
+export const Toast: React.FC<ToastProps> = ({
   title,
   message,
   type = 'default',
@@ -104,7 +126,9 @@ export const Toast= ({
   variant = 'default',
   className = '',
 }) => {
-  // Note, setIsVisible] = useState(true);
+  // Note: theme and colors not needed as we're using semantic CSS classes
+  
+  const [isVisible, setIsVisible] = useState(true);
   const [progressValue, setProgressValue] = useState(100);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const progressRef = useRef<NodeJS.Timeout | null>(null);
@@ -190,7 +214,7 @@ export const Toast= ({
         <div className="toast__progress">
           <div
             className={`toast__progress-bar toast__progress-bar--${type}`}
-            style={{ width}%` }}
+            style={{ width: `${progressValue}%` }}
           />
         </div>
       )}
@@ -208,7 +232,7 @@ export const Toast= ({
           </h3>
         )}
 
-        <div className={`toast__message ${!title ? 'toast__message--only' }`}>
+        <div className={`toast__message ${!title ? 'toast__message--only' : ''}`}>
           {message}
         </div>
 
@@ -239,7 +263,7 @@ export const Toast= ({
 };
 
 // Toast Container Component
-export const ToastContainer}> = ({
+export const ToastContainer: React.FC<ToastContainerProps & { children: React.ReactNode }> = ({
   position = 'top-right',
   className = '',
   children

package/dist/components/ui/feedback/toast.js

@@ -2,75 +2,97 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ToastProps, ToastAction, ToastContainerProps } from './types';
 
 // Simple icon components
-const CheckCircleIcon}> = ({ className = '' }) => (
+const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
   </svg>
 );
 
-const ExclamationTriangleIcon}> = ({ className = '' }) => (
+const ExclamationTriangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
   </svg>
 );
 
-const XCircleIcon}> = ({ className = '' }) => (
+const XCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
   </svg>
 );
 
-const InformationCircleIcon}> = ({ className = '' }) => (
+const InformationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
   </svg>
 );
 
-const XMarkIcon}> = ({ className = '' }) => (
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={className} fill="currentColor" viewBox="0 0 20 20">
     <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
   </svg>
 );
 
 // Get icon for toast type
-const getToastIcon = (type], className) => {
+const getToastIcon = (type: ToastProps['type'], className: string) => {
   switch (type) {
-    case 'success'={className} />;
-    case 'warning'={className} />;
-    case 'error'={className} />;
-    case 'info'={className} />;
-    default;
+    case 'success':
+      return <CheckCircleIcon className={className} />;
+    case 'warning':
+      return <ExclamationTriangleIcon className={className} />;
+    case 'error':
+      return <XCircleIcon className={className} />;
+    case 'info':
+      return <InformationCircleIcon className={className} />;
+    default:
+      return null;
   }
 };
 
-// Note= (type], colors) => {
+// Note: getToastColors function removed as we're using semantic CSS classes
+/*
+const getToastColors = (type: ToastProps['type'], colors: any) => {
   switch (type) {
-    case 'success',
-        border,
-        text,
-        icon};
-    case 'warning',
-        border,
-        text,
-        icon};
-    case 'error',
-        border,
-        text,
-        icon};
-    case 'info',
-        border,
-        text,
-        icon};
-    default,
-        border,
-        text,
-        icon};
+    case 'success':
+      return {
+        background: colors.semantic.success + '10',
+        border: colors.semantic.success + '30',
+        text: colors.semantic.success,
+        icon: colors.semantic.success
+      };
+    case 'warning':
+      return {
+        background: colors.semantic.warning + '10',
+        border: colors.semantic.warning + '30',
+        text: colors.semantic.warning,
+        icon: colors.semantic.warning
+      };
+    case 'error':
+      return {
+        background: colors.semantic.error + '10',
+        border: colors.semantic.error + '30',
+        text: colors.semantic.error,
+        icon: colors.semantic.error
+      };
+    case 'info':
+      return {
+        background: colors.semantic.info + '10',
+        border: colors.semantic.info + '30',
+        text: colors.semantic.info,
+        icon: colors.semantic.info
+      };
+    default:
+      return {
+        background: colors.surface.surface,
+        border: colors.surface.border,
+        text: colors.text.primary,
+        icon: colors.text.secondary
+      };
   }
 };
 */
 
 // Toast Action Button Component
-const ToastActionButton= ({
+const ToastActionButton: React.FC<ToastAction> = ({
   label,
   action,
   variant = 'primary'
@@ -87,7 +109,7 @@ const ToastActionButton= ({
 };
 
 // Individual Toast Component
-export const Toast= ({
+export const Toast: React.FC<ToastProps> = ({
   title,
   message,
   type = 'default',
@@ -104,7 +126,9 @@ export const Toast= ({
   variant = 'default',
   className = '',
 }) => {
-  // Note, setIsVisible] = useState(true);
+  // Note: theme and colors not needed as we're using semantic CSS classes
+  
+  const [isVisible, setIsVisible] = useState(true);
   const [progressValue, setProgressValue] = useState(100);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const progressRef = useRef<NodeJS.Timeout | null>(null);
@@ -190,7 +214,7 @@ export const Toast= ({
         <div className="toast__progress">
           <div
             className={`toast__progress-bar toast__progress-bar--${type}`}
-            style={{ width}%` }}
+            style={{ width: `${progressValue}%` }}
           />
         </div>
       )}
@@ -208,7 +232,7 @@ export const Toast= ({
           </h3>
         )}
 
-        <div className={`toast__message ${!title ? 'toast__message--only' }`}>
+        <div className={`toast__message ${!title ? 'toast__message--only' : ''}`}>
           {message}
         </div>
 
@@ -239,7 +263,7 @@ export const Toast= ({
 };
 
 // Toast Container Component
-export const ToastContainer}> = ({
+export const ToastContainer: React.FC<ToastContainerProps & { children: React.ReactNode }> = ({
   position = 'top-right',
   className = '',
   children