@app-studio/web 0.8.77 → 0.8.80

package/dist/web.esm.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { View, Horizontal, Vertical, Element, Center, Image, useTheme, Typography, Input, Form, Text as Text$1 } from 'app-studio';
+import { View, Horizontal, Vertical, Element, Center, useTheme, Image, Typography, Input, Form, Text as Text$1 } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.parse-float.js';
 import { Link as Link$1 } from 'react-router-dom';
@@ -164,7 +164,7 @@ var AccordionVariants = {
 var _excluded = ["value", "children", "isDisabled", "views"],
   _excluded2 = ["children", "value", "isExpanded", "isDisabled", "triggerId", "contentId", "views", "asChild"],
   _excluded3 = ["children", "isExpanded", "isDisabled", "triggerId", "contentId", "views"],
-  _excluded4 = ["children", "shape", "variant", "views", "baseId", "type", "collapsible"];
+  _excluded4 = ["children", "shape", "variant", "views", "baseId", "type", "collapsible", "themeMode"];
 // Create context for the Accordion
 var AccordionContext = /*#__PURE__*/createContext({
   expandedItems: [],
@@ -463,12 +463,7 @@ var FontSizes = {
   sm: '14px',
   md: '16px',
   lg: '18px',
-  xl: '20px',
-  '2xl': '24px',
-  '3xl': '30px',
-  '4xl': '36px',
-  '5xl': '48px',
-  '6xl': '60px'
+  xl: '20px'
 };
 /**
  * Line heights following typography guidelines
@@ -478,12 +473,7 @@ var LineHeights = {
   sm: '20px',
   md: '24px',
   lg: '28px',
-  xl: '28px',
-  '2xl': '32px',
-  '3xl': '36px',
-  '4xl': '40px',
-  '5xl': '60px',
-  '6xl': '72px'
+  xl: '28px'
 };
 /**
  * Font weights following typography guidelines
@@ -724,9 +714,12 @@ var IconWrapper = _ref => {
 };
 // Utility function to handle fill and stroke based on 'filled' prop
 var getSvgProps = (filled, color, strokeWidth) => {
+  var {
+    getColor
+  } = useTheme();
   return {
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
+    fill: filled ? getColor(color) : 'none',
+    stroke: filled ? 'none' : getColor(color),
     strokeWidth,
     strokeLinecap: 'round',
     strokeLinejoin: 'round'
@@ -1192,7 +1185,7 @@ var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2817,93 +2810,104 @@ var Icon = {
  * - Transitions: Subtle animations
  */
 /**
- * Theme styles for different alert variants
+ * Get theme styles for different alert variants based on theme mode
  */
-var Themes = {
-  default: {
-    container: {
-      backgroundColor: 'color.gray.50',
-      borderColor: 'color.gray.200',
-      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
-    },
-    content: {
-      color: 'color.gray.700'
-    },
-    icon: {
-      color: 'color.gray.500'
-    }
-  },
-  info: {
-    container: {
-      backgroundColor: 'color.blue.50',
-      borderColor: 'color.blue.200',
-      boxShadow: '0 1px 2px rgba(59, 130, 246, 0.05)'
-    },
-    content: {
-      color: 'color.blue.700'
-    },
-    icon: {
-      color: 'color.blue.500'
-    }
-  },
-  success: {
-    container: {
-      backgroundColor: 'color.green.50',
-      borderColor: 'color.green.200',
-      boxShadow: '0 1px 2px rgba(34, 197, 94, 0.05)'
-    },
-    content: {
-      color: 'color.green.700'
-    },
-    icon: {
-      color: 'color.green.500'
-    }
-  },
-  error: {
-    container: {
-      backgroundColor: 'color.red.50',
-      borderColor: 'color.red.200',
-      boxShadow: '0 1px 2px rgba(239, 68, 68, 0.05)'
+var getThemes = themeMode => {
+  var isDarkMode = themeMode === 'dark';
+  return {
+    default: {
+      container: {
+        backgroundColor: isDarkMode ? 'color.gray.800' : 'color.gray.50',
+        borderColor: isDarkMode ? 'color.gray.700' : 'color.gray.200',
+        boxShadow: isDarkMode ? '0 1px 2px rgba(0, 0, 0, 0.2)' : '0 1px 2px rgba(0, 0, 0, 0.05)'
+      },
+      content: {
+        color: isDarkMode ? 'color.gray.300' : 'color.gray.700'
+      },
+      icon: {
+        color: isDarkMode ? 'color.gray.400' : 'color.gray.500'
+      }
     },
-    content: {
-      color: 'color.red.700'
+    info: {
+      container: {
+        backgroundColor: isDarkMode ? 'color.blue.900' : 'color.blue.50',
+        borderColor: isDarkMode ? 'color.blue.800' : 'color.blue.200',
+        boxShadow: isDarkMode ? '0 1px 2px rgba(59, 130, 246, 0.2)' : '0 1px 2px rgba(59, 130, 246, 0.05)'
+      },
+      content: {
+        color: isDarkMode ? 'color.blue.300' : 'color.blue.700'
+      },
+      icon: {
+        color: isDarkMode ? 'color.blue.400' : 'color.blue.500'
+      }
     },
-    icon: {
-      color: 'color.red.500'
-    }
-  },
-  warning: {
-    container: {
-      backgroundColor: 'color.orange.50',
-      borderColor: 'color.orange.200',
-      boxShadow: '0 1px 2px rgba(249, 115, 22, 0.05)'
+    success: {
+      container: {
+        backgroundColor: isDarkMode ? 'color.green.900' : 'color.green.50',
+        borderColor: isDarkMode ? 'color.green.800' : 'color.green.200',
+        boxShadow: isDarkMode ? '0 1px 2px rgba(34, 197, 94, 0.2)' : '0 1px 2px rgba(34, 197, 94, 0.05)'
+      },
+      content: {
+        color: isDarkMode ? 'color.green.300' : 'color.green.700'
+      },
+      icon: {
+        color: isDarkMode ? 'color.green.400' : 'color.green.500'
+      }
     },
-    content: {
-      color: 'color.orange.700'
+    error: {
+      container: {
+        backgroundColor: isDarkMode ? 'color.red.900' : 'color.red.50',
+        borderColor: isDarkMode ? 'color.red.800' : 'color.red.200',
+        boxShadow: isDarkMode ? '0 1px 2px rgba(239, 68, 68, 0.2)' : '0 1px 2px rgba(239, 68, 68, 0.05)'
+      },
+      content: {
+        color: isDarkMode ? 'color.red.300' : 'color.red.700'
+      },
+      icon: {
+        color: isDarkMode ? 'color.red.400' : 'color.red.500'
+      }
     },
-    icon: {
-      color: 'color.orange.500'
+    warning: {
+      container: {
+        backgroundColor: isDarkMode ? 'color.orange.900' : 'color.orange.50',
+        borderColor: isDarkMode ? 'color.orange.800' : 'color.orange.200',
+        boxShadow: isDarkMode ? '0 1px 2px rgba(249, 115, 22, 0.2)' : '0 1px 2px rgba(249, 115, 22, 0.05)'
+      },
+      content: {
+        color: isDarkMode ? 'color.orange.300' : 'color.orange.700'
+      },
+      icon: {
+        color: isDarkMode ? 'color.orange.400' : 'color.orange.500'
+      }
     }
-  }
+  };
 };
 
+var _excluded$4 = ["icon", "title", "views", "description", "variant", "themeMode"];
 /**
  * Alert component that displays important messages to users
  */
 var AlertView = _ref => {
   var {
-    icon,
-    title,
-    views,
-    description,
-    variant = 'default'
-  } = _ref;
+      icon,
+      title,
+      views,
+      description,
+      variant = 'default',
+      themeMode: elementMode
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var {
+    themeMode
+  } = useTheme();
+  var currentThemeMode = elementMode || themeMode;
+  var themes = getThemes(currentThemeMode);
   // Select the appropriate icon based on the variant
   var getIcon = () => {
     var _views$icon$color, _views$icon;
     if (icon) return icon;
-    // Use the theme color directly from Themes
-    var iconColor = (_views$icon$color = views == null || (_views$icon = views.icon) == null ? void 0 : _views$icon.color) != null ? _views$icon$color : Themes[variant].icon.color;
+    // Use the theme color directly from themes
+    var iconColor = (_views$icon$color = views == null || (_views$icon = views.icon) == null ? void 0 : _views$icon.color) != null ? _views$icon$color : themes[variant].icon.color;
     var iconProps = {
       size: 20,
       color: iconColor
@@ -2934,12 +2938,12 @@ var AlertView = _ref => {
     ,
     borderWidth: "1px",
     borderStyle: "solid",
-    borderColor: Themes[variant].container.borderColor,
-    backgroundColor: Themes[variant].container.backgroundColor,
-    boxShadow: Themes[variant].container.boxShadow,
+    borderColor: themes[variant].container.borderColor,
+    backgroundColor: themes[variant].container.backgroundColor,
+    boxShadow: themes[variant].container.boxShadow,
     // Animation
     transition: "all 0.2s ease"
-  }, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(View, Object.assign({
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(View, Object.assign({
     alignSelf: "flex-start",
     marginTop: "2px"
   }, views == null ? void 0 : views.icon), getIcon()), /*#__PURE__*/React.createElement(Vertical, {
@@ -2949,37 +2953,22 @@ var AlertView = _ref => {
     fontWeight: "600" // Semi-bold
     ,
     lineHeight: "24px",
-    color: Themes[variant].content.color
+    color: themes[variant].content.color
   }, views == null ? void 0 : views.title), title), /*#__PURE__*/React.createElement(Text, Object.assign({
     fontSize: "14px",
     fontWeight: "400" // Regular
     ,
     lineHeight: "20px",
-    color: Themes[variant].content.color
+    color: themes[variant].content.color
   }, views == null ? void 0 : views.description), description)));
 };
 
-// Definition of the AlertComponent functional component with destructured props.
-var AlertComponent = _ref => {
-  var {
-    icon,
-    title,
-    views,
-    description,
-    variant
-  } = _ref;
-  return /*#__PURE__*/React.createElement(AlertView, {
-    icon: icon,
-    title: title,
-    views: views,
-    description: description,
-    variant: variant
-  });
-};
+// Definition of the AlertComponent functional component with props.
+var AlertComponent = props => /*#__PURE__*/React.createElement(AlertView, Object.assign({}, props));
 // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
-var _excluded$4 = ["ratio", "children", "views"];
+var _excluded$5 = ["ratio", "children", "views"];
 // Declaration of a functional component named AspectRatioView.
 var AspectRatioView = _ref => {
   var {
@@ -2990,7 +2979,7 @@ var AspectRatioView = _ref => {
       views
       // Spread the rest of the props to inherit additional properties.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return /*#__PURE__*/React.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -3006,14 +2995,14 @@ var AspectRatioView = _ref => {
   }, views == null ? void 0 : views.view), children));
 };
 
-var _excluded$5 = ["ratio", "children"];
+var _excluded$6 = ["ratio", "children"];
 // Declaration of the AspectRatioComponent functional component with destructured props.
 var AspectRatioComponent = _ref => {
   var {
       ratio,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   // Beginning of the return statement in the functional component.
   return /*#__PURE__*/React.createElement(AspectRatioView, Object.assign({
     ratio: ratio
@@ -3063,17 +3052,11 @@ var DefaultAvatarStyles = {
     borderColor: 'transparent',
     backgroundColor: 'color.gray.100',
     boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-    transition: 'all 0.2s ease',
-    '@media (prefers-color-scheme: dark)': {
-      backgroundColor: 'color.gray.700'
-    }
+    transition: 'all 0.2s ease'
   },
   fallback: {
     fontWeight: '500',
-    color: 'color.gray.600',
-    '@media (prefers-color-scheme: dark)': {
-      color: 'color.gray.300'
-    }
+    color: 'color.gray.600'
   },
   image: {
     objectFit: 'cover',
@@ -3244,58 +3227,69 @@ var PositionStyles = {
   }
 };
 /**
- * Badge variants with consistent styling
+ * Get badge variants with consistent styling based on theme mode
  */
-var BadgeVariants = {
-  filled: {
-    backgroundColor: 'theme.primary',
-    color: 'color.white',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    transition: 'all 0.2s ease'
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'theme.primary',
-    color: 'theme.primary',
-    transition: 'all 0.2s ease'
-  },
-  link: {
-    backgroundColor: 'transparent',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    color: 'theme.primary',
-    textDecoration: 'underline',
-    textUnderlineOffset: '2px',
-    transition: 'all 0.2s ease'
-  },
-  ghost: {
-    backgroundColor: 'transparent',
-    color: 'color.gray.500',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    transition: 'all 0.2s ease'
-  }
+var getBadgeVariants = themeMode => {
+  var isDarkMode = themeMode === 'dark';
+  return {
+    filled: {
+      backgroundColor: 'theme.primary',
+      color: isDarkMode ? 'color.gray.900' : 'color.white',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      transition: 'all 0.2s ease'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'theme.primary',
+      color: 'theme.primary',
+      transition: 'all 0.2s ease'
+    },
+    link: {
+      backgroundColor: 'transparent',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      color: 'theme.primary',
+      textDecoration: 'underline',
+      textUnderlineOffset: '2px',
+      transition: 'all 0.2s ease'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      color: isDarkMode ? 'color.gray.400' : 'color.gray.500',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      transition: 'all 0.2s ease'
+    }
+  };
 };
 
+var _excluded$7 = ["content", "position", "shape", "variant", "size", "views", "themeMode"];
 // No need to import ViewProps as it's not used directly
 /**
  * Badge View Component
  */
 var BadgeView = _ref => {
   var {
-    content,
-    position,
-    shape = 'pillShaped',
-    variant = 'filled',
-    size = 'md',
-    views
-  } = _ref;
+      content,
+      position,
+      shape = 'pillShaped',
+      variant = 'filled',
+      size = 'md',
+      views,
+      themeMode: elementMode
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var {
+    themeMode
+  } = useTheme();
+  var currentThemeMode = elementMode || themeMode;
+  var variantStyles = getBadgeVariants(currentThemeMode)[variant];
   // Combine styles for the badge
   var combinedStyles = Object.assign({
     // Base styles
@@ -3303,13 +3297,13 @@ var BadgeView = _ref => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgrounColor: 'color.black',
+    backgroundColor: 'color.black',
     // Apply shape, size, and variant styles
     borderRadius: BadgeShapes[shape]
-  }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, views == null ? void 0 : views.container);
+  }, BadgeSizes[size], variantStyles, position ? PositionStyles[position] : {}, views == null ? void 0 : views.container);
   return /*#__PURE__*/React.createElement(Center, Object.assign({
     role: "badge"
-  }, combinedStyles), /*#__PURE__*/React.createElement(Text, Object.assign({
+  }, combinedStyles, props), /*#__PURE__*/React.createElement(Text, Object.assign({
     role: "badgeText",
     fontWeight: "500" // Medium weight for better readability
     ,
@@ -3319,29 +3313,8 @@ var BadgeView = _ref => {
   }), content || ''));
 };
 
-// Importing type definitions for BadgeProps that will be used to type-check the Badge component's props.
-var Badge = _ref => {
-  var {
-    // Importing the BadgeView component which is the presentation component for Badge.
-    content,
-    // Exporting the Badge as a functional component from this module.
-    shape,
-    // Destructuring the props in the component function parameter list, to directly access individual properties.
-    position,
-    // Passing all the destructured props to the BadgeView component to maintain the same API surface.
-    variant,
-    size,
-    views
-  } = _ref;
-  return /*#__PURE__*/React.createElement(BadgeView, {
-    content: content,
-    shape: shape,
-    position: position,
-    variant: variant,
-    size: size,
-    views: views
-  });
-};
+// Badge component that displays a small indicator, typically used for counts or status
+var Badge = props => /*#__PURE__*/React.createElement(BadgeView, Object.assign({}, props));
 
 var useButtonState = () => {
   var [isHovered, setIsHovered] = React.useState(false);
@@ -3370,15 +3343,10 @@ var IconSizes = {
   sm: 14,
   md: 16,
   lg: 18,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 30,
-  '4xl': 36,
-  '5xl': 48,
-  '6xl': 64
+  xl: 20
 };
 
-var _excluded$6 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
+var _excluded$8 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
 // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
 var LinkView = _ref => {
   var {
@@ -3401,7 +3369,7 @@ var LinkView = _ref => {
       // Setter function for the hover state, noop function provided by default.
       setIsHovered = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   // Function to handle mouse enter/leave events to toggle hover state.
   var handleHover = () => {
     if (underline === 'hover') setIsHovered(true);
@@ -3593,6 +3561,9 @@ var getButtonVariants = (color, isLight) => ({
   ghost: {
     backgroundColor: 'transparent',
     color: color,
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderColor: 'transparent',
     on: {
       hover: {
         backgroundColor: color + "10",
@@ -3627,12 +3598,7 @@ var DefaultSizes = {
   sm: 18,
   md: 22,
   lg: 26,
-  xl: 30,
-  '2xl': 40,
-  '3xl': 50,
-  '4xl': 60,
-  '5xl': 70,
-  '6xl': 80
+  xl: 30
 };
 // Specifies a mapping of spinning speed labels to numerical millisecond values, determining the speed of the Loader component's animation cycles.
 var DefaultSpeeds = {
@@ -3641,7 +3607,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$7 = ["size", "speed", "color", "themeMode"],
+var _excluded$9 = ["size", "speed", "color", "themeMode"],
   _excluded2$2 = ["size", "speed", "color", "themeMode"],
   _excluded3$2 = ["size", "speed", "color", "themeMode"],
   _excluded4$2 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition", "views"];
@@ -3652,7 +3618,7 @@ var DefaultSpinner = _ref => {
       color = 'theme.loading',
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var {
     getColor,
     themeMode
@@ -3817,7 +3783,7 @@ React.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$8 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps", "views"];
+var _excluded$a = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps", "views"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -3846,7 +3812,7 @@ var ButtonView = _ref => {
       linkProps,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
     getColor,
     themeMode
@@ -3897,6 +3863,7 @@ var ButtonView = _ref => {
     alignItems: "center",
     justifyContent: "center",
     "aria-label": ariaLabel,
+    backgroundColor: "transparent",
     borderRadius: ButtonShapes[shape],
     onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
     onMouseEnter: () => handleHover(true),
@@ -3964,97 +3931,95 @@ var CardShapes = {
   pillShaped: '16px'
 };
 /**
- * Card variants with consistent styling
+ * Get card variants with consistent styling based on theme mode
  */
-var CardVariants = {
-  default: {
-    backgroundColor: 'white',
-    border: 'none',
-    transition: 'all 0.2s ease'
-  },
-  outlined: {
-    backgroundColor: 'white',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.200',
-    transition: 'all 0.2s ease',
-    _hover: {
-      borderColor: 'color.gray.300'
-    }
-  },
-  elevated: {
-    backgroundColor: 'white',
-    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.08)',
-    border: 'none',
-    transition: 'all 0.2s ease',
-    _hover: {
-      boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.12)',
-      transform: 'translateY(-2px)'
+var getCardVariants = themeMode => {
+  var isDarkMode = themeMode === 'dark';
+  return {
+    default: {
+      backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+      border: 'none',
+      transition: 'all 0.2s ease'
+    },
+    outlined: {
+      backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: isDarkMode ? 'color.gray.700' : 'color.gray.200',
+      transition: 'all 0.2s ease',
+      _hover: {
+        borderColor: isDarkMode ? 'color.gray.600' : 'color.gray.300'
+      }
+    },
+    elevated: {
+      backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+      boxShadow: isDarkMode ? '0px 2px 8px rgba(0, 0, 0, 0.2)' : '0px 2px 8px rgba(0, 0, 0, 0.08)',
+      border: 'none',
+      transition: 'all 0.2s ease',
+      _hover: {
+        boxShadow: isDarkMode ? '0px 4px 12px rgba(0, 0, 0, 0.25)' : '0px 4px 12px rgba(0, 0, 0, 0.12)',
+        transform: 'translateY(-2px)'
+      }
     }
-  }
+  };
 };
 /**
  * Function to get default styles for Card components
- * @param theme - Theme object (not used directly but kept for compatibility)
+ * @param theme - Theme object from useTheme hook
  */
-var getDefaultCardStyles = _theme => ({
-  container: {
-    backgroundColor: 'white',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    transition: 'all 0.2s ease',
-    '@media (prefers-color-scheme: dark)': {
-      backgroundColor: 'color.gray.800',
-      color: 'color.gray.100'
-    }
-  },
-  header: {
-    padding: '16px',
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: 'color.gray.200',
-    '@media (prefers-color-scheme: dark)': {
-      borderBottomColor: 'color.gray.700'
-    }
-  },
-  content: {
-    padding: '16px',
-    '@media (prefers-color-scheme: dark)': {
-      color: 'color.gray.100'
-    }
-  },
-  footer: {
-    padding: '16px',
-    borderTopWidth: '1px',
-    borderTopStyle: 'solid',
-    borderTopColor: 'color.gray.200',
-    '@media (prefers-color-scheme: dark)': {
-      borderTopColor: 'color.gray.700'
+var getDefaultCardStyles = theme => {
+  var {
+    themeMode
+  } = theme;
+  var isDarkMode = themeMode === 'dark';
+  return {
+    container: {
+      backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+      color: isDarkMode ? 'color.gray.100' : 'color.gray.900',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      transition: 'all 0.2s ease'
+    },
+    header: {
+      padding: '16px',
+      borderBottomWidth: '1px',
+      borderBottomStyle: 'solid',
+      borderBottomColor: isDarkMode ? 'color.gray.700' : 'color.gray.200'
+    },
+    content: {
+      padding: '16px',
+      color: isDarkMode ? 'color.gray.100' : 'color.gray.900'
+    },
+    footer: {
+      padding: '16px',
+      borderTopWidth: '1px',
+      borderTopStyle: 'solid',
+      borderTopColor: isDarkMode ? 'color.gray.700' : 'color.gray.200'
     }
-  }
-});
+  };
+};
 
 var CardContext = /*#__PURE__*/createContext({});
 var useCardContext = () => {
   return useContext(CardContext);
 };
 
-var _excluded$9 = ["children", "views", "style"],
-  _excluded2$3 = ["children", "views", "style"],
-  _excluded3$3 = ["children", "views", "style"],
-  _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style"];
+var _excluded$b = ["children", "views", "style", "themeMode"],
+  _excluded2$3 = ["children", "views", "style", "themeMode"],
+  _excluded3$3 = ["children", "views", "style", "themeMode"],
+  _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
 var CardHeader = _ref => {
   var _contextStyles$header;
   var {
       children,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var theme = useTheme();
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles().header;
+  var defaultStyles = getDefaultCardStyles(theme).header;
   // Merge styles: Default < Context Override < Direct Props/Style
   var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.header, props, {
     style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$header = contextStyles.header) == null ? void 0 : _contextStyles$header.style, style)
@@ -4072,7 +4037,7 @@ var CardContent = _ref2 => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles().content;
+  var defaultStyles = getDefaultCardStyles(theme).content;
   // Merge styles: Default < Context Override < Direct Props/Style
   var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.content, props, {
     style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$conten = contextStyles.content) == null ? void 0 : _contextStyles$conten.style, style)
@@ -4090,7 +4055,7 @@ var CardFooter = _ref3 => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles().footer;
+  var defaultStyles = getDefaultCardStyles(theme).footer;
   // Merge styles: Default < Context Override < Direct Props/Style
   var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.footer, props, {
     style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$footer = contextStyles.footer) == null ? void 0 : _contextStyles$footer.style, style)
@@ -4108,11 +4073,12 @@ var CardView = _ref4 => {
       footer,
       isFullWidth = false,
       views,
-      style
+      style,
+      themeMode: elementMode
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var theme = useTheme();
-  var defaultStyles = getDefaultCardStyles();
+  var defaultStyles = getDefaultCardStyles(theme);
   // Prepare context value, merging default styles with user's `views` overrides
   var contextValue = useMemo(() => ({
     styles: {
@@ -4125,12 +4091,18 @@ var CardView = _ref4 => {
   // Determine if we have explicit Card.Header, Card.Content, Card.Footer components
   // or if we need to wrap children in a default layout
   var hasExplicitStructure = React.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && (child.type === CardHeader || child.type === CardContent || child.type === CardFooter));
+  // Get the appropriate variant styles based on theme mode
+  var {
+    themeMode
+  } = theme;
+  var currentThemeMode = elementMode || themeMode;
+  var variantStyles = getCardVariants(currentThemeMode)[variant];
   // Merge styles for the root element
   var mergedRootProps = Object.assign({
     width: isFullWidth ? '100%' : 'auto',
     borderRadius: CardShapes[shape],
     overflow: 'hidden'
-  }, CardVariants[variant], contextValue.styles.container, props, {
+  }, variantStyles, contextValue.styles.container, props, {
     style: Object.assign({}, (_contextValue$styles$ = contextValue.styles.container) == null ? void 0 : _contextValue$styles$.style, style)
   });
   return /*#__PURE__*/React.createElement(CardContext.Provider, {
@@ -4441,19 +4413,19 @@ var useCarouselContext = () => {
   return context;
 };
 
-var _excluded$a = ["children", "isActive", "views"],
+var _excluded$c = ["children", "isActive", "views"],
   _excluded2$4 = ["views", "children"],
   _excluded3$4 = ["views", "children"],
   _excluded4$4 = ["children", "views"],
   _excluded5$1 = ["children", "views", "style"],
-  _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views"];
+  _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "themeMode"];
 var CarouselSlide = _ref => {
   var {
       children,
       isActive,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     flexShrink: 0,
     width: "100%",
@@ -5377,7 +5349,7 @@ var PieChart = _ref => {
   })));
 };
 
-var _excluded$b = ["type", "data", "dataPoints", "title", "showLegend", "legendPosition", "showGrid", "showTooltips", "animated", "animationDuration", "responsive", "aspectRatio", "width", "height", "views", "onDataPointClick", "onSeriesClick", "isLoading", "error", "noData", "loadingIndicator", "errorIndicator", "noDataIndicator", "aria-label"];
+var _excluded$d = ["type", "data", "dataPoints", "title", "showLegend", "legendPosition", "showGrid", "showTooltips", "animated", "animationDuration", "responsive", "aspectRatio", "width", "height", "views", "onDataPointClick", "onSeriesClick", "isLoading", "error", "noData", "loadingIndicator", "errorIndicator", "noDataIndicator", "aria-label", "themeMode"];
 var ChartView = _ref => {
   var {
       type,
@@ -5405,7 +5377,7 @@ var ChartView = _ref => {
       noDataIndicator,
       'aria-label': ariaLabel
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   // Use chart state hook
   var {
     animationProgress,
@@ -5735,12 +5707,12 @@ var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menu
   };
 };
 
-var _excluded$c = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
+var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
   _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
   _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
   _excluded4$5 = ["views"],
   _excluded5$2 = ["views"],
-  _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views"];
+  _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
 // Create context for the ContextMenu
 var ContextMenuContext = /*#__PURE__*/createContext({
   isOpen: false,
@@ -5791,7 +5763,7 @@ var ContextMenuTrigger = _ref2 => {
       isDisabled = false,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
   var {
     triggerRef,
     contentId,
@@ -6074,7 +6046,7 @@ var ContextMenuView = _ref7 => {
   }));
 };
 
-var _excluded$d = ["children", "items", "size", "variant", "disableNativeContextMenu", "onOpenChange", "views"];
+var _excluded$f = ["children", "items", "size", "variant", "disableNativeContextMenu", "onOpenChange", "views"];
 /**
  * ContextMenu component for displaying a custom context menu on right-click.
  * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -6089,7 +6061,7 @@ var ContextMenuComponent = _ref => {
       onOpenChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var state = useContextMenuState({
     size,
     variant,
@@ -6141,7 +6113,7 @@ ContextMenu.Item = ContextMenuItem;
 ContextMenu.Divider = ContextMenuDivider;
 ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
-var _excluded$e = ["src", "color", "views", "themeMode"],
+var _excluded$g = ["src", "color", "views", "themeMode"],
   _excluded2$6 = ["path"];
 var FileSVG = _ref => {
   var {
@@ -6149,7 +6121,7 @@ var FileSVG = _ref => {
       color,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var {
     getColor,
     themeMode
@@ -6223,7 +6195,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$f = ["children", "views"];
+var _excluded$h = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -6231,7 +6203,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return /*#__PURE__*/React.createElement(Text
   // Typography properties
   , Object.assign({
@@ -6257,7 +6229,7 @@ var HelperText = _ref => {
   }, views['helperText'], props), children);
 };
 
-var _excluded$g = ["children", "helperText", "error", "views"];
+var _excluded$i = ["children", "helperText", "error", "views"];
 var FieldContainer = _ref => {
   var {
       children,
@@ -6265,7 +6237,7 @@ var FieldContainer = _ref => {
       error = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React.createElement(Vertical
   // Layout properties
   , Object.assign({
@@ -6273,9 +6245,9 @@ var FieldContainer = _ref => {
     gap: 8,
     position: "relative",
     width: "100%"
-  }, props), children, !error && helperText && (/*#__PURE__*/React.createElement(HelperText, Object.assign({
+  }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React.createElement(HelperText, Object.assign({
     marginTop: 4
-  }, views), helperText)), error && (/*#__PURE__*/React.createElement(Text, {
+  }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React.createElement(Text, Object.assign({
     size: "xs",
     marginTop: 4,
     marginHorizontal: 0,
@@ -6283,7 +6255,7 @@ var FieldContainer = _ref => {
     ,
     color: "color.red.500",
     transition: "all 0.2s ease"
-  }, error)));
+  }, views == null ? void 0 : views.error), error)));
 };
 
 /**
@@ -6402,7 +6374,7 @@ var PaddingWithoutLabel = {
   paddingRight: '16px'
 };
 
-var _excluded$h = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "showLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
+var _excluded$j = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "showLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
 var FieldContent = _ref => {
   var {
       shadow,
@@ -6420,7 +6392,7 @@ var FieldContent = _ref => {
         pickerBox: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   // Determine if the field is in an interactive state
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   // Set the appropriate color based on state
@@ -6449,12 +6421,12 @@ var FieldContent = _ref => {
   }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
 };
 
-var _excluded$i = ["children"];
+var _excluded$k = ["children"];
 var FieldIcons = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -6506,7 +6478,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$j = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = _ref => {
   var {
       children,
@@ -6522,7 +6494,7 @@ var LabelView = _ref => {
       size = 'sm'
       // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -6554,7 +6526,7 @@ React.createElement(LabelView, Object.assign({}, props))
 var Label = LabelComponent;
 // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-var _excluded$k = ["children", "size", "error", "color", "views", "helperText"];
+var _excluded$m = ["children", "size", "error", "color", "views", "helperText"];
 var FieldLabel = _ref => {
   var {
       children,
@@ -6565,7 +6537,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React.createElement(Label
   // Position properties
   , Object.assign({
@@ -6586,12 +6558,12 @@ var FieldLabel = _ref => {
   }, views['label'], props), children);
 };
 
-var _excluded$l = ["children"];
+var _excluded$n = ["children"];
 var FieldWrapper = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return /*#__PURE__*/React.createElement(Vertical
   // Layout properties
   , Object.assign({
@@ -6624,7 +6596,7 @@ var IconSizes$2 = {
   xl: 28
 };
 
-var _excluded$m = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
   _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$6 = ["option", "size", "removeOption"],
   _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
@@ -6642,7 +6614,7 @@ var Item = _ref => {
       callback = () => {},
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   // Handles the click event on an option by invoking the callback with the selected option's value
   var handleOptionClick = option => callback(option);
   // Toggles the hover state on the item
@@ -7062,26 +7034,6 @@ var KnobSizes = {
   xl: {
     height: '28px',
     width: '28px'
-  },
-  '2xl': {
-    height: '32px',
-    width: '32px'
-  },
-  '3xl': {
-    height: '36px',
-    width: '36px'
-  },
-  '4xl': {
-    height: '40px',
-    width: '40px'
-  },
-  '5xl': {
-    height: '44px',
-    width: '44px'
-  },
-  '6xl': {
-    height: '48px',
-    width: '48px'
   }
 };
 /**
@@ -7108,26 +7060,6 @@ var SliderSizes = {
   xl: {
     height: '40px',
     width: '72px'
-  },
-  '2xl': {
-    height: '44px',
-    width: '80px'
-  },
-  '3xl': {
-    height: '48px',
-    width: '88px'
-  },
-  '4xl': {
-    height: '52px',
-    width: '96px'
-  },
-  '5xl': {
-    height: '56px',
-    width: '104px'
-  },
-  '6xl': {
-    height: '60px',
-    width: '112px'
   }
 };
 /**
@@ -7154,26 +7086,6 @@ var SliderPadding = {
   xl: {
     paddingVertical: 4,
     paddingHorizontal: 4
-  },
-  '2xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '3xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '4xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '5xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '6xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
   }
 };
 /**
@@ -7201,7 +7113,7 @@ var ColorSchemes = {
   }
 };
 
-var _excluded$n = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
+var _excluded$p = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
 var SwitchContent = props => /*#__PURE__*/React.createElement(Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -7230,7 +7142,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var handleToggle = event => {
     if (!isReadOnly) {
       setValue(!value);
@@ -7354,7 +7266,7 @@ var useTextAreaState = _ref => {
   // Export of the useTextAreaState hook for external usage.
 };
 
-var _excluded$o = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
+var _excluded$q = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
 var TextAreaView = _ref => {
   var {
       id,
@@ -7380,20 +7292,16 @@ var TextAreaView = _ref => {
       onBlur = () => {},
       onChange,
       onFocus,
-      onChangeText,
       setHint = () => {},
       setValue = () => {},
       setIsFocused = () => {},
       setIsHovered = () => {},
       views = {
-        box: {},
-        text: {},
         label: {},
-        helperText: {},
-        field: {}
+        helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var showLabel = !!(isFocused && label);
   /**
    * Styles for the textarea field
@@ -7401,11 +7309,11 @@ var TextAreaView = _ref => {
   var fieldStyles = Object.assign({
     // Layout properties
     margin: 0,
-    paddingVertical: 12,
-    paddingHorizontal: 0,
+    paddingVertical: 2,
+    paddingHorizontal: 2,
     width: '100%',
-    height: '100%',
-    minHeight: '80px',
+    maxHeight: 'calc(100vh - 100px)',
+    height: 'calc(5em)',
     border: 'none',
     resize: 'vertical',
     // Focus state
@@ -7416,7 +7324,7 @@ var TextAreaView = _ref => {
     },
     // Typography properties
     fontSize: Typography.fontSizes[size],
-    lineHeight: '1.5',
+    lineHeight: Typography.fontSizes[size] * 1.5,
     letterSpacing: '-0.01em',
     // Visual properties
     backgroundColor: 'transparent',
@@ -7424,11 +7332,7 @@ var TextAreaView = _ref => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'text',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field']);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => {
@@ -7442,19 +7346,17 @@ var TextAreaView = _ref => {
   var handleChange = event => {
     if (typeof event === 'string') {
       setValue(event);
-      if (onChangeText) onChangeText(event);
       if (onChange) onChange(event);
     } else {
       setValue(event.target.value);
-      if (onChangeText) onChangeText(event.target.value);
       if (onChange) onChange(event.target.value);
     }
   };
-  return /*#__PURE__*/React.createElement(FieldContainer, {
+  return /*#__PURE__*/React.createElement(FieldContainer, Object.assign({
     helperText: helperText,
     error: error,
     views: views
-  }, /*#__PURE__*/React.createElement(FieldContent, {
+  }, props), /*#__PURE__*/React.createElement(FieldContent, Object.assign({
     label: label,
     size: size,
     error: error,
@@ -7471,11 +7373,11 @@ var TextAreaView = _ref => {
     showLabel: showLabel,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
+  }, views == null ? void 0 : views.content), /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
     error: error
-  }, views), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -7485,15 +7387,13 @@ var TextAreaView = _ref => {
     readOnly: isReadOnly,
     disabled: isDisabled,
     autoFocus: isAutoFocus,
-    editable: isEditable,
+    editable: !!isEditable.toString(),
     placeholder: hint,
     onBlur: handleBlur,
     onFocus: handleFocus,
-    multiline: isMultiline
-  }, fieldStyles, props, {
-    onChange: handleChange,
-    onChangeText: handleChange
-  })))));
+    multiline: !!isMultiline.toString(),
+    onChange: handleChange
+  }, fieldStyles, views == null ? void 0 : views.textarea)))));
 };
 
 // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
@@ -7540,7 +7440,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$p = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
+var _excluded$r = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
 /**
  * Input component for text fields
  */
@@ -7561,7 +7461,7 @@ var TextFieldView = _ref => {
       onChangeText,
       shadow = {},
       views = {
-        box: {},
+        container: {},
         field: {},
         label: {},
         helperText: {},
@@ -7586,7 +7486,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var {
     getColor,
     themeMode
@@ -7761,26 +7661,6 @@ var Sizes = {
   xl: {
     height: '32px',
     width: '32px'
-  },
-  '2xl': {
-    height: '36px',
-    width: '36px'
-  },
-  '3xl': {
-    height: '40px',
-    width: '40px'
-  },
-  '4xl': {
-    height: '44px',
-    width: '44px'
-  },
-  '5xl': {
-    height: '48px',
-    width: '48px'
-  },
-  '6xl': {
-    height: '52px',
-    width: '52px'
   }
 };
 /**
@@ -7792,12 +7672,7 @@ var IconSizes$3 = {
   sm: 14,
   md: 16,
   lg: 20,
-  xl: 24,
-  '2xl': 28,
-  '3xl': 32,
-  '4xl': 36,
-  '5xl': 40,
-  '6xl': 44
+  xl: 24
 };
 /**
  * Variant styles for the Checkbox component
@@ -7869,7 +7744,7 @@ var StateStyles = {
   }
 };
 
-var _excluded$q = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
+var _excluded$s = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
 var CheckboxView = _ref => {
   var {
       id,
@@ -7896,7 +7771,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -9482,11 +9357,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$r = ["size"],
+var _excluded$t = ["size"],
   _excluded2$8 = ["size"],
   _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
 var CountryList = _ref => {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "ul"
   }, props));
@@ -9593,8 +9468,7 @@ var CountryPickerView = _ref5 => {
         icon: {},
         label: {},
         dropDown: {},
-        helperText: {},
-        box: {}
+        helperText: {}
       },
       themeMode: elementMode
     } = _ref5,
@@ -9726,7 +9600,7 @@ var useDatePickerState = () => {
   };
 };
 
-var _excluded$s = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$u = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = props => /*#__PURE__*/React.createElement(Input, Object.assign({
   type: "date"
 }, props));
@@ -9742,7 +9616,7 @@ var DatePickerView = _ref => {
       variant = 'default',
       shape = 'default',
       views = {
-        box: {},
+        container: {},
         label: {},
         helperText: {},
         text: {},
@@ -9759,7 +9633,7 @@ var DatePickerView = _ref => {
       onChange,
       onChangeText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var showLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -9846,7 +9720,7 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$t = ["visibleIcon", "hiddenIcon"],
+var _excluded$v = ["visibleIcon", "hiddenIcon"],
   _excluded2$9 = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
@@ -9857,7 +9731,7 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -9911,7 +9785,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-var _excluded$u = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
+var _excluded$w = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
 // Defines the functional component 'ComboBoxView' with destructured props.
 var ComboBoxView = _ref => {
   var {
@@ -9936,7 +9810,7 @@ var ComboBoxView = _ref => {
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   // Sets up an effect to handle clicking outside the dropdown to close it.
   useEffect(() => {
     var handleClickOutside = event => {
@@ -10025,7 +9899,7 @@ var ComboBoxView = _ref => {
       widthHeight: 12
     }),
     views: {
-      box: Object.assign({
+      container: Object.assign({
         width: '100%',
         padding: '6px 12px',
         borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
@@ -10048,7 +9922,7 @@ var ComboBoxView = _ref => {
   }))))))))))));
 };
 
-var _excluded$v = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+var _excluded$x = ["id", "name", "items", "placeholder", "searchPlaceholder"];
 // Defines the ComboBoxComponent functional component with ComboBoxProps
 var ComboBoxComponent = _ref => {
   var {
@@ -10064,7 +9938,7 @@ var ComboBoxComponent = _ref => {
       searchPlaceholder
       // Destructures the rest of the props not explicitly defined
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   // Initializes ComboBox state using custom hook with items and placeholders
   var state = useComboBoxState(items, placeholder, searchPlaceholder);
   return (
@@ -10369,7 +10243,7 @@ var useOTPInputState = _ref => {
   };
 };
 
-var _excluded$w = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+var _excluded$y = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
 // Create a context for OTP input slots
 var OTPInputContext = /*#__PURE__*/createContext({
   slots: [],
@@ -10395,14 +10269,7 @@ var OTPInputView = _ref => {
       length = 6,
       helperText,
       placeholder = '',
-      views = {
-        container: {},
-        input: {},
-        box: {},
-        text: {},
-        label: {},
-        helperText: {}
-      },
+      views = {},
       size = 'md',
       shape = 'rounded',
       variant = 'outline',
@@ -10430,7 +10297,7 @@ var OTPInputView = _ref => {
       onFocus = () => {}
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   useTheme(); // Initialize theme context
   var showLabel = !!label;
   // Create context value for slots
@@ -10508,7 +10375,7 @@ var OTPInputView = _ref => {
       width: "100%",
       position: "relative",
       height: size === 'xs' ? '32px' : size === 'sm' ? '36px' : size === 'md' ? '40px' : size === 'lg' ? '48px' : '56px'
-    }, views.box), slot.char ? (/*#__PURE__*/React.createElement(View, Object.assign({
+    }, views.container), slot.char ? (/*#__PURE__*/React.createElement(View, Object.assign({
       textAlign: "center",
       fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
       fontWeight: "medium"
@@ -10660,7 +10527,7 @@ var OTPInputComponent = props => {
 };
 var OTPInput = OTPInputComponent;
 
-var _excluded$x = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$z = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/createContext({
   active: false,
   focusNextInput: () => {},
@@ -10676,7 +10543,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var formik = useFormikContext();
   useEffect(() => {
     onChange(formik.values);
@@ -10724,7 +10591,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React.createElement(Form, Object.assign({}, props), children));
 };
 
-var _excluded$y = ["name", "type"];
+var _excluded$A = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -10763,7 +10630,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var focus = useFormFocus();
   var {
     touched,
@@ -10807,13 +10674,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$z = ["value"];
+var _excluded$B = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$z);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$B);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -10871,11 +10738,11 @@ var TextAreaComponent$1 = props => {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$A = ["value"];
+var _excluded$C = ["value"];
 var TextFieldComponent$1 = props => {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$A);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$C);
   return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -10883,7 +10750,7 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$B = ["visibleIcon", "hiddenIcon"],
+var _excluded$D = ["visibleIcon", "hiddenIcon"],
   _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
@@ -10894,7 +10761,7 @@ var PasswordComponent$1 = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
@@ -10919,14 +10786,14 @@ var PasswordComponent$1 = _ref => {
  */
 var FormikPassword = PasswordComponent$1;
 
-var _excluded$C = ["items", "placeholder", "searchPlaceholder"];
+var _excluded$E = ["items", "placeholder", "searchPlaceholder"];
 var ComboBoxComponent$1 = _ref => {
   var {
       items,
       placeholder,
       searchPlaceholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -11150,17 +11017,22 @@ var SliderShapes = {
   rounded: 4,
   pillShaped: 24
 };
-var SliderVariants = {
-  default: {
-    backgroundColor: 'color.blueGray.200'
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'color.blueGray.300'
-  }
+var getSlider = themeMode => {
+  return {
+    default: {
+      backgroundColor: 'color.blueGray.200'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'color.blueGray.300'
+    }
+  };
+  // Add dark mode conditional styling here
 };
+// For backward compatibility
+var SliderVariants = /*#__PURE__*/getSlider();
 // Maps Size enum to track height/width and thumb size for the new implementation
 var EnhancedSliderSizes = {
   xs: {
@@ -11202,7 +11074,7 @@ var OrientationStyles = {
   }
 };
 
-var _excluded$D = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "colorScheme", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+var _excluded$F = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "colorScheme", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
 var SliderView = _ref => {
   var _views$tooltip, _views$tooltip2;
   var {
@@ -11245,7 +11117,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var {
     getColor,
     themeMode
@@ -11618,7 +11490,7 @@ var hideMessage = () => {
   useMessageStore.getState().hide();
 };
 
-var Themes$1 = {
+var Themes = {
   info: {
     container: {
       backgroundColor: 'color.blue.200',
@@ -11716,7 +11588,7 @@ var MessageView = _ref => {
     }
     return;
   }, []);
-  var Theme = theme != null ? theme : Themes$1;
+  var Theme = theme != null ? theme : Themes;
   var showAction = !!(action && actionText);
   var containerStyle = {
     borderWidth: 1,
@@ -11965,7 +11837,8 @@ var UploadView = _ref => {
     renderError = _ref2 => {
       var {
         errorMessage,
-        errorMessageProps
+        errorMessageProps,
+        themeMode: elementMode
       } = _ref2;
       return /*#__PURE__*/React.createElement(Text$1, Object.assign({
         color: "red",
@@ -12116,7 +11989,7 @@ var UploadView = _ref => {
   }, views == null ? void 0 : views.view)));
 };
 
-var _excluded$E = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress", "fileType"];
+var _excluded$G = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress", "fileType"];
 var Uploader = _ref => {
   var {
       accept = '*/*',
@@ -12129,7 +12002,7 @@ var Uploader = _ref => {
       progress = 0,
       fileType
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var {
     previewUrl,
     thumbnailUrl,
@@ -12276,23 +12149,19 @@ var OverlayAlignments = {
   },
   top: {
     justifyContent: 'center',
-    alignItems: 'flex-start',
-    paddingTop: '64px'
+    alignItems: 'flex-start'
   },
   right: {
     justifyContent: 'flex-end',
-    alignItems: 'center',
-    paddingRight: '32px'
+    alignItems: 'center'
   },
   bottom: {
     justifyContent: 'center',
-    alignItems: 'flex-end',
-    paddingBottom: '64px'
+    alignItems: 'flex-end'
   },
   left: {
     justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingLeft: '32px'
+    alignItems: 'center'
   }
 };
 /**
@@ -12324,7 +12193,7 @@ var ModalTypography = {
   }
 };
 
-var _excluded$F = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
   _excluded2$b = ["children", "shadow", "isFullScreen", "shape", "views"],
   _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
@@ -12339,7 +12208,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -12410,17 +12279,12 @@ var ModalHeader = _ref3 => {
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
   var onClose = props.onClose ? props.onClose : hideModal;
-  var buttonIcon = /*#__PURE__*/React.createElement(Button, {
-    onClick: onClose,
-    icon: /*#__PURE__*/React.createElement(CloseIcon, {
-      widthHeight: HeaderIconSizes[iconSize],
-      color: buttonColor
-    }),
-    padding: 0,
-    margin: 0,
-    filter: "none",
-    width: 0
-  });
+  var buttonIcon = /*#__PURE__*/React.createElement(View, {
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    widthHeight: HeaderIconSizes[iconSize],
+    color: buttonColor
+  }));
   return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
     alignItems: "center",
@@ -12640,7 +12504,7 @@ var NavigationMenuItemStates = {
   }
 };
 
-var _excluded$G = ["href", "children", "views"];
+var _excluded$I = ["href", "children", "views"];
 // Create context for the NavigationMenu
 var NavigationMenuContext = /*#__PURE__*/createContext({
   activeItemId: null,
@@ -12875,7 +12739,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
   var {
     itemValue,
     isDisabled
@@ -12924,7 +12788,8 @@ var NavigationMenuView = _ref7 => {
     items,
     orientation,
     //size, variant,
-    views
+    views,
+    themeMode: elementMode
   } = _ref7;
   var Container = orientation === 'horizontal' ? Horizontal : Vertical;
   if (!items || items.length === 0) {
@@ -12941,7 +12806,7 @@ var NavigationMenuView = _ref7 => {
   })))));
 };
 
-var _excluded$H = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
+var _excluded$J = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
 /**
  * NavigationMenu component for creating navigation menus with optional nested items.
  * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -12958,7 +12823,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var {
     activeItemId,
     setActiveItemId,
@@ -13158,7 +13023,8 @@ var TableView = _ref => {
     data,
     columns,
     footer,
-    caption
+    caption,
+    themeMode: elementMode
   } = _ref;
   return /*#__PURE__*/React.createElement(TableContainer, {
     role: "Table"
@@ -13425,7 +13291,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-var _excluded$I = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+var _excluded$K = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
 var ToggleView = _ref => {
   var {
       children,
@@ -13439,7 +13305,7 @@ var ToggleView = _ref => {
       onToggle,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var toggleVariants = {
@@ -13482,7 +13348,7 @@ var ToggleView = _ref => {
   }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
 };
 
-var _excluded$J = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$L = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -13494,7 +13360,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -13701,7 +13567,8 @@ var DragAndDropView = _ref => {
     draggedIndex,
     itemRefs,
     handleDragStart,
-    views
+    views,
+    themeMode: elementMode
   } = _ref;
   return /*#__PURE__*/React.createElement(View, Object.assign({
     overflow: "hidden",
@@ -13884,11 +13751,11 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
   return positions[side];
 };
 
-var _excluded$K = ["children", "views"],
+var _excluded$M = ["children", "views"],
   _excluded2$c = ["items", "side", "align", "views"],
   _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
-  _excluded5$4 = ["trigger", "items", "side", "align", "views"];
+  _excluded5$4 = ["trigger", "items", "side", "align", "views", "themeMode"];
 // Create context for the DropdownMenu
 var DropdownMenuContext = /*#__PURE__*/createContext({
   isOpen: false,
@@ -13922,7 +13789,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
   var {
     isOpen,
     setIsOpen
@@ -14082,7 +13949,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-var _excluded$L = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+var _excluded$N = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
 /**
  * DropdownMenu component for displaying a menu when clicking on a trigger element.
  */
@@ -14097,7 +13964,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var {
     isOpen,
     setIsOpen,
@@ -14295,7 +14162,7 @@ var useRect = ref => {
   return rect;
 };
 
-var _excluded$M = ["children", "views", "asChild"],
+var _excluded$O = ["children", "views", "asChild"],
   _excluded2$d = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/createContext({
@@ -14334,7 +14201,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
   var {
     openCard,
     closeCard,
@@ -14421,7 +14288,7 @@ var HoverCardContent = _ref3 => {
   }, views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$N = ["children", "views", "openDelay", "closeDelay"];
+var _excluded$P = ["children", "views", "openDelay", "closeDelay"];
 /**
  * HoverCard component displays floating content when hovering over a trigger element.
  * Supports configurable open and close delays for a smoother user experience.
@@ -14433,7 +14300,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -14563,7 +14430,7 @@ var getMenubarContentPosition = orientation => {
   };
 };
 
-var _excluded$O = ["children", "orientation", "size", "variant", "views"];
+var _excluded$Q = ["children", "orientation", "size", "variant", "views"];
 // Create context for the Menubar
 var MenubarContext = /*#__PURE__*/createContext({
   activeMenuId: null,
@@ -14597,7 +14464,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
   var Container = orientation === 'horizontal' ? Horizontal : Vertical;
   return /*#__PURE__*/React.createElement(Container, Object.assign({
     role: "menubar",
@@ -14744,7 +14611,8 @@ var MenubarView = _ref8 => {
     orientation,
     size,
     variant,
-    views
+    views,
+    themeMode: elementMode
   } = _ref8;
   return /*#__PURE__*/React.createElement(MenubarRoot, {
     orientation: orientation,
@@ -14782,7 +14650,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-var _excluded$P = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+var _excluded$R = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
 /**
  * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
  */
@@ -14796,7 +14664,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -14952,7 +14820,7 @@ var DisabledButtonStyles = {
   }
 };
 
-var _excluded$Q = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+var _excluded$S = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
 var PaginationView = _ref => {
   var {
       currentPage,
@@ -14983,7 +14851,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -15102,7 +14970,7 @@ var PaginationView = _ref => {
   }, option.label))))));
 };
 
-var _excluded$R = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+var _excluded$T = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
 /**
  * Pagination component for navigating through pages of content.
  */
@@ -15123,7 +14991,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15159,11 +15027,16 @@ var Pagination = PaginationComponent;
 /**
  * Variant configurations for the Separator component
  */
-var SeparatorVariants = {
-  solid: 'solid',
-  dashed: 'dashed',
-  dotted: 'dotted'
+var getSeparator = themeMode => {
+  return {
+    solid: 'solid',
+    dashed: 'dashed',
+    dotted: 'dotted'
+  };
+  // Add dark mode conditional styling here
 };
+// For backward compatibility
+var SeparatorVariants = /*#__PURE__*/getSeparator();
 /**
  * Thickness configurations for the Separator component
  * Following the 4px grid system
@@ -15188,21 +15061,23 @@ var DefaultSeparatorStyles = {
   }
 };
 
-var _excluded$S = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views"];
+var _excluded$U = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
 var SeparatorView = _ref => {
   var {
       orientation = 'horizontal',
       variant = 'solid',
       thickness = 'thin',
       color,
-      spacing = '16px',
+      spacing = '0px',
       label,
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   // Access theme if needed for future enhancements
-  var {} = useTheme();
+  var {
+    themeMode
+  } = useTheme();
   // Use provided color or default from theme
   var separatorColor = color || 'color.gray.200';
   var borderStyle = SeparatorVariants[variant];
@@ -15220,7 +15095,7 @@ var SeparatorView = _ref => {
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      margin: spacing
+      padding: spacing
     }, ariaProps, props), /*#__PURE__*/React.createElement(View, Object.assign({
       height: "0px",
       flexGrow: 1,
@@ -15243,7 +15118,7 @@ var SeparatorView = _ref => {
       borderTopWidth: borderWidth,
       borderTopStyle: borderStyle,
       borderTopColor: separatorColor,
-      margin: spacing
+      padding: spacing
     }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
   }
   // For vertical separator
@@ -15253,7 +15128,7 @@ var SeparatorView = _ref => {
     borderLeftWidth: borderWidth,
     borderLeftStyle: borderStyle,
     borderLeftColor: separatorColor,
-    margin: spacing
+    padding: spacing
   }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
 };
 
@@ -15358,37 +15233,42 @@ var SidebarSizes = {
 /**
  * Variant styles for the Sidebar component
  */
-var SidebarVariants = {
-  default: {
-    backgroundColor: 'white',
-    color: 'color.gray.800',
-    transition: 'all 0.2s ease'
-  },
-  filled: {
-    backgroundColor: 'color.gray.100',
-    color: 'color.gray.800',
-    transition: 'all 0.2s ease'
-  },
-  outline: {
-    backgroundColor: 'white',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.200',
-    color: 'color.gray.800',
-    transition: 'all 0.2s ease'
-  },
-  subtle: {
-    backgroundColor: 'color.gray.50',
-    color: 'color.gray.800',
-    transition: 'all 0.2s ease'
-  },
-  elevated: {
-    backgroundColor: 'white',
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-    color: 'color.gray.800',
-    transition: 'all 0.2s ease'
-  }
+var getSidebar = themeMode => {
+  return {
+    default: {
+      backgroundColor: 'white',
+      color: 'color.gray.800',
+      transition: 'all 0.2s ease'
+    },
+    filled: {
+      backgroundColor: 'color.gray.100',
+      color: 'color.gray.800',
+      transition: 'all 0.2s ease'
+    },
+    outline: {
+      backgroundColor: 'white',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'color.gray.200',
+      color: 'color.gray.800',
+      transition: 'all 0.2s ease'
+    },
+    subtle: {
+      backgroundColor: 'color.gray.50',
+      color: 'color.gray.800',
+      transition: 'all 0.2s ease'
+    },
+    elevated: {
+      backgroundColor: 'white',
+      boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+      color: 'color.gray.800',
+      transition: 'all 0.2s ease'
+    }
+  };
+  // Add dark mode conditional styling here
 };
+// For backward compatibility
+var SidebarVariants = /*#__PURE__*/getSidebar();
 /**
  * Position styles for the Sidebar component
  */
@@ -15431,10 +15311,10 @@ var SidebarTransitions = {
   bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
 };
 
-var _excluded$T = ["children", "showToggleButton", "views"],
+var _excluded$V = ["children", "showToggleButton", "views"],
   _excluded2$e = ["children", "views"],
   _excluded3$a = ["children", "views"],
-  _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views"];
+  _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
 // Create context for the Sidebar
 var SidebarContext = /*#__PURE__*/createContext({
   isExpanded: true,
@@ -15464,7 +15344,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
   var {
     isExpanded,
     toggleExpanded,
@@ -15619,7 +15499,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-var _excluded$U = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+var _excluded$W = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
 /**
  * Sidebar component for creating collapsible, themeable and customizable sidebars.
  */
@@ -15641,7 +15521,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   var {
     isExpanded,
     toggleExpanded,
@@ -16057,35 +15937,40 @@ var getHandleSizeStyles = (size, orientation) => {
   };
   return sizes[size];
 };
-var HandleVariants = {
-  default: {
-    backgroundColor: 'transparent',
-    _hover: {
-      backgroundColor: 'color.gray.200'
-    },
-    _active: {
-      backgroundColor: 'color.gray.300'
-    }
-  },
-  subtle: {
-    backgroundColor: 'transparent',
-    _hover: {
-      backgroundColor: 'color.gray.100'
+var getHandle = themeMode => {
+  return {
+    default: {
+      backgroundColor: 'transparent',
+      _hover: {
+        backgroundColor: 'color.gray.200'
+      },
+      _active: {
+        backgroundColor: 'color.gray.300'
+      }
     },
-    _active: {
-      backgroundColor: 'color.gray.200'
-    }
-  },
-  prominent: {
-    backgroundColor: 'color.gray.100',
-    _hover: {
-      backgroundColor: 'color.gray.200'
+    subtle: {
+      backgroundColor: 'transparent',
+      _hover: {
+        backgroundColor: 'color.gray.100'
+      },
+      _active: {
+        backgroundColor: 'color.gray.200'
+      }
     },
-    _active: {
-      backgroundColor: 'color.gray.300'
+    prominent: {
+      backgroundColor: 'color.gray.100',
+      _hover: {
+        backgroundColor: 'color.gray.200'
+      },
+      _active: {
+        backgroundColor: 'color.gray.300'
+      }
     }
-  }
+  };
+  // Add dark mode conditional styling here
 };
+// For backward compatibility
+var HandleVariants = /*#__PURE__*/getHandle();
 var HandleIconStyles = {
   horizontal: {
     width: '2px',
@@ -16101,7 +15986,7 @@ var HandleIconStyles = {
   }
 };
 
-var _excluded$V = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
   _excluded2$f = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
   _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "views"];
 // Create context for the Resizable component
@@ -16146,7 +16031,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
   var {
     orientation,
     registerPanel,
@@ -16361,7 +16246,7 @@ var ResizableView = _ref4 => {
   }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$W = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+var _excluded$Y = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
 /**
  * Resizable component for creating resizable panel groups and layouts.
  */
@@ -16381,7 +16266,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     isResizing,
     setIsResizing,
@@ -16446,7 +16331,7 @@ Resizable.Handle = ResizableHandle;
  * Theme configurations for the Toast component
  * Following the design system color palette
  */
-var Themes$2 = {
+var Themes$1 = {
   info: {
     container: {
       backgroundColor: 'color.blue.50',
@@ -16639,10 +16524,11 @@ var ToastView = _ref => {
     render,
     icon: customIcon,
     id,
-    isVisible = true
+    isVisible = true,
+    themeMode: elementMode
   } = _ref;
   // We don't need the auto-close timer here anymore as it's handled in the store
-  var Theme = theme != null ? theme : Themes$2;
+  var Theme = theme != null ? theme : Themes$1;
   // Get the appropriate icon based on the variant
   var getIcon = () => {
     // If a custom icon is provided, use it
@@ -17022,29 +16908,34 @@ var CommandSizes = {
     maxHeight: '500px'
   }
 };
-var CommandVariants = {
-  default: {
-    backgroundColor: 'white',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.200',
-    boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
-  },
-  filled: {
-    backgroundColor: 'color.gray.50',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.200',
-    boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
-  },
-  outline: {
-    backgroundColor: 'white',
-    borderWidth: '2px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.300',
-    boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
-  }
+var getCommand = themeMode => {
+  return {
+    default: {
+      backgroundColor: 'white',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'color.gray.200',
+      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
+    },
+    filled: {
+      backgroundColor: 'color.gray.50',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'color.gray.200',
+      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
+    },
+    outline: {
+      backgroundColor: 'white',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: 'color.gray.300',
+      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
+    }
+  };
+  // Add dark mode conditional styling here
 };
+// For backward compatibility
+var CommandVariants = /*#__PURE__*/getCommand();
 var CommandInputStyles = {
   display: 'flex',
   alignItems: 'center',
@@ -17140,7 +17031,7 @@ var CommandFooterStyles = {
   color: 'color.gray.500'
 };
 
-var _excluded$X = ["value", "onValueChange", "placeholder", "views"],
+var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
   _excluded2$g = ["children", "views"],
   _excluded3$c = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
@@ -17172,7 +17063,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
   var inputRef = useRef(null);
   // Focus input when component mounts
   React.useEffect(() => {
@@ -17360,7 +17251,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React.createElement(View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
 };
 
-var _excluded$Y = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+var _excluded$_ = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
 /**
  * Command component for displaying a command palette with search functionality.
  */
@@ -17378,7 +17269,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     search,
     setSearch,
@@ -17535,23 +17426,28 @@ var TooltipSizes = {
     maxWidth: '300px'
   }
 };
-var TooltipVariants = {
-  default: {
-    backgroundColor: 'color.gray.800',
-    color: 'color.white'
-  },
-  light: {
-    backgroundColor: 'color.white',
-    color: 'color.gray.800',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.200'
-  },
-  dark: {
-    backgroundColor: 'color.black',
-    color: 'color.white'
-  }
+var getTooltip = themeMode => {
+  return {
+    default: {
+      backgroundColor: 'color.gray.800',
+      color: 'color.white'
+    },
+    light: {
+      backgroundColor: 'color.white',
+      color: 'color.gray.800',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'color.gray.200'
+    },
+    dark: {
+      backgroundColor: 'color.black',
+      color: 'color.white'
+    }
+  };
+  // Add dark mode conditional styling here
 };
+// For backward compatibility
+var TooltipVariants = /*#__PURE__*/getTooltip();
 var getTooltipPositionStyles = (position, align) => {
   var baseStyles = {
     position: 'absolute',
@@ -17660,9 +17556,9 @@ var getArrowStyles = position => {
   }
 };
 
-var _excluded$Z = ["children", "views", "asChild"],
+var _excluded$$ = ["children", "views", "asChild"],
   _excluded2$h = ["children", "views"],
-  _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views"];
+  _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/createContext({
   isOpen: false,
@@ -17696,7 +17592,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
   var {
     openTooltip,
     closeTooltip,
@@ -17789,7 +17685,7 @@ var TooltipView = _ref4 => {
   }, TooltipSizes[size], TooltipVariants[variant], positionStyles, views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React.createElement(Text$1, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React.createElement(View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)))));
 };
 
-var _excluded$_ = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+var _excluded$10 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
 /**
  * Tooltip component for displaying additional information when hovering over an element.
  * Supports configurable positions, delays, and styling.
@@ -17809,7 +17705,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,