@app-studio/web 0.8.77 → 0.8.80

package/dist/web.cjs.development.js

@@ -171,7 +171,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__*/React.createContext({
   expandedItems: [],
@@ -470,12 +470,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
@@ -485,12 +480,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
@@ -731,9 +721,12 @@ var IconWrapper = _ref => {
 };
 // Utility function to handle fill and stroke based on 'filled' prop
 var getSvgProps = (filled, color, strokeWidth) => {
+  var {
+    getColor
+  } = appStudio.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'
@@ -1199,7 +1192,7 @@ var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2824,93 +2817,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
+  } = appStudio.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
@@ -2941,12 +2945,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__default.createElement(appStudio.View, Object.assign({
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     alignSelf: "flex-start",
     marginTop: "2px"
   }, views == null ? void 0 : views.icon), getIcon()), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
@@ -2956,37 +2960,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__default.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__default.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__default.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 {
@@ -2997,7 +2986,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__default.createElement(appStudio.Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -3013,14 +3002,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__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
@@ -3070,17 +3059,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',
@@ -3251,58 +3234,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
+  } = appStudio.useTheme();
+  var currentThemeMode = elementMode || themeMode;
+  var variantStyles = getBadgeVariants(currentThemeMode)[variant];
   // Combine styles for the badge
   var combinedStyles = Object.assign({
     // Base styles
@@ -3310,13 +3304,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__default.createElement(appStudio.Center, Object.assign({
     role: "badge"
-  }, combinedStyles), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, combinedStyles, props), /*#__PURE__*/React__default.createElement(Text, Object.assign({
     role: "badgeText",
     fontWeight: "500" // Medium weight for better readability
     ,
@@ -3326,29 +3320,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__default.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__default.createElement(BadgeView, Object.assign({}, props));
 
 var useButtonState = () => {
   var [isHovered, setIsHovered] = React__default.useState(false);
@@ -3377,15 +3350,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 {
@@ -3408,7 +3376,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);
@@ -3600,6 +3568,9 @@ var getButtonVariants = (color, isLight) => ({
   ghost: {
     backgroundColor: 'transparent',
     color: color,
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderColor: 'transparent',
     on: {
       hover: {
         backgroundColor: color + "10",
@@ -3634,12 +3605,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 = {
@@ -3648,7 +3614,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"];
@@ -3659,7 +3625,7 @@ var DefaultSpinner = _ref => {
       color = 'theme.loading',
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var {
     getColor,
     themeMode
@@ -3824,7 +3790,7 @@ React__default.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;
@@ -3853,7 +3819,7 @@ var ButtonView = _ref => {
       linkProps,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
     getColor,
     themeMode
@@ -3904,6 +3870,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),
@@ -3971,97 +3938,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__*/React.createContext({});
 var useCardContext = () => {
   return React.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 = appStudio.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)
@@ -4079,7 +4044,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)
@@ -4097,7 +4062,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)
@@ -4115,11 +4080,12 @@ var CardView = _ref4 => {
       footer,
       isFullWidth = false,
       views,
-      style
+      style,
+      themeMode: elementMode
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var theme = appStudio.useTheme();
-  var defaultStyles = getDefaultCardStyles();
+  var defaultStyles = getDefaultCardStyles(theme);
   // Prepare context value, merging default styles with user's `views` overrides
   var contextValue = React.useMemo(() => ({
     styles: {
@@ -4132,12 +4098,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__default.Children.toArray(children).some(child => /*#__PURE__*/React__default.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__default.createElement(CardContext.Provider, {
@@ -4448,19 +4420,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__default.createElement(appStudio.View, Object.assign({
     flexShrink: 0,
     width: "100%",
@@ -5384,7 +5356,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,
@@ -5412,7 +5384,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,
@@ -5742,12 +5714,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__*/React.createContext({
   isOpen: false,
@@ -5798,7 +5770,7 @@ var ContextMenuTrigger = _ref2 => {
       isDisabled = false,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
   var {
     triggerRef,
     contentId,
@@ -6081,7 +6053,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.
@@ -6096,7 +6068,7 @@ var ContextMenuComponent = _ref => {
       onOpenChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var state = useContextMenuState({
     size,
     variant,
@@ -6148,7 +6120,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 {
@@ -6156,7 +6128,7 @@ var FileSVG = _ref => {
       color,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var {
     getColor,
     themeMode
@@ -6230,7 +6202,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$f = ["children", "views"];
+var _excluded$h = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -6238,7 +6210,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return /*#__PURE__*/React__default.createElement(Text
   // Typography properties
   , Object.assign({
@@ -6264,7 +6236,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,
@@ -6272,7 +6244,7 @@ var FieldContainer = _ref => {
       error = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(appStudio.Vertical
   // Layout properties
   , Object.assign({
@@ -6280,9 +6252,9 @@ var FieldContainer = _ref => {
     gap: 8,
     position: "relative",
     width: "100%"
-  }, props), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
+  }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
     marginTop: 4
-  }, views), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, {
+  }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginTop: 4,
     marginHorizontal: 0,
@@ -6290,7 +6262,7 @@ var FieldContainer = _ref => {
     ,
     color: "color.red.500",
     transition: "all 0.2s ease"
-  }, error)));
+  }, views == null ? void 0 : views.error), error)));
 };
 
 /**
@@ -6409,7 +6381,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,
@@ -6427,7 +6399,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
@@ -6456,12 +6428,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__default.createElement(appStudio.Center, Object.assign({
     gap: 10,
     right: 16,
@@ -6513,7 +6485,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,
@@ -6529,7 +6501,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.
@@ -6561,7 +6533,7 @@ React__default.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,
@@ -6572,7 +6544,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(Label
   // Position properties
   , Object.assign({
@@ -6593,12 +6565,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__default.createElement(appStudio.Vertical
   // Layout properties
   , Object.assign({
@@ -6631,7 +6603,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"];
@@ -6649,7 +6621,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
@@ -7069,26 +7041,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'
   }
 };
 /**
@@ -7115,26 +7067,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'
   }
 };
 /**
@@ -7161,26 +7093,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
   }
 };
 /**
@@ -7208,7 +7120,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__default.createElement(appStudio.Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -7237,7 +7149,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var handleToggle = event => {
     if (!isReadOnly) {
       setValue(!value);
@@ -7361,7 +7273,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,
@@ -7387,20 +7299,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
@@ -7408,11 +7316,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
@@ -7423,7 +7331,7 @@ var TextAreaView = _ref => {
     },
     // Typography properties
     fontSize: appStudio.Typography.fontSizes[size],
-    lineHeight: '1.5',
+    lineHeight: appStudio.Typography.fontSizes[size] * 1.5,
     letterSpacing: '-0.01em',
     // Visual properties
     backgroundColor: 'transparent',
@@ -7431,11 +7339,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 = () => {
@@ -7449,19 +7353,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__default.createElement(FieldContainer, {
+  return /*#__PURE__*/React__default.createElement(FieldContainer, Object.assign({
     helperText: helperText,
     error: error,
     views: views
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, props), /*#__PURE__*/React__default.createElement(FieldContent, Object.assign({
     label: label,
     size: size,
     error: error,
@@ -7478,11 +7380,11 @@ var TextAreaView = _ref => {
     showLabel: showLabel,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, views == null ? void 0 : views.content), /*#__PURE__*/React__default.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
     error: error
-  }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -7492,15 +7394,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.
@@ -7547,7 +7447,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
  */
@@ -7568,7 +7468,7 @@ var TextFieldView = _ref => {
       onChangeText,
       shadow = {},
       views = {
-        box: {},
+        container: {},
         field: {},
         label: {},
         helperText: {},
@@ -7593,7 +7493,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var {
     getColor,
     themeMode
@@ -7768,26 +7668,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'
   }
 };
 /**
@@ -7799,12 +7679,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
@@ -7876,7 +7751,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,
@@ -7903,7 +7778,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) {
@@ -9489,11 +9364,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__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
   }, props));
@@ -9600,8 +9475,7 @@ var CountryPickerView = _ref5 => {
         icon: {},
         label: {},
         dropDown: {},
-        helperText: {},
-        box: {}
+        helperText: {}
       },
       themeMode: elementMode
     } = _ref5,
@@ -9733,7 +9607,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__default.createElement(appStudio.Input, Object.assign({
   type: "date"
 }, props));
@@ -9749,7 +9623,7 @@ var DatePickerView = _ref => {
       variant = 'default',
       shape = 'default',
       views = {
-        box: {},
+        container: {},
         label: {},
         helperText: {},
         text: {},
@@ -9766,7 +9640,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);
@@ -9853,7 +9727,7 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$t = ["visibleIcon", "hiddenIcon"],
+var _excluded$v = ["visibleIcon", "hiddenIcon"],
   _excluded2$9 = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
@@ -9864,7 +9738,7 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -9918,7 +9792,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 {
@@ -9943,7 +9817,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.
   React.useEffect(() => {
     var handleClickOutside = event => {
@@ -10032,7 +9906,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'
@@ -10055,7 +9929,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 {
@@ -10071,7 +9945,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 (
@@ -10376,7 +10250,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__*/React.createContext({
   slots: [],
@@ -10402,14 +10276,7 @@ var OTPInputView = _ref => {
       length = 6,
       helperText,
       placeholder = '',
-      views = {
-        container: {},
-        input: {},
-        box: {},
-        text: {},
-        label: {},
-        helperText: {}
-      },
+      views = {},
       size = 'md',
       shape = 'rounded',
       variant = 'outline',
@@ -10437,7 +10304,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);
   appStudio.useTheme(); // Initialize theme context
   var showLabel = !!label;
   // Create context value for slots
@@ -10515,7 +10382,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__default.createElement(appStudio.View, Object.assign({
+    }, views.container), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       textAlign: "center",
       fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
       fontWeight: "medium"
@@ -10667,7 +10534,7 @@ var OTPInputComponent = props => {
 };
 var OTPInput = OTPInputComponent;
 
-var _excluded$x = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$z = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/React.createContext({
   active: false,
   focusNextInput: () => {},
@@ -10683,7 +10550,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -10731,7 +10598,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
 };
 
-var _excluded$y = ["name", "type"];
+var _excluded$A = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -10770,7 +10637,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var focus = useFormFocus();
   var {
     touched,
@@ -10814,13 +10681,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__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -10878,11 +10745,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__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -10890,7 +10757,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 {
@@ -10901,7 +10768,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),
     {
@@ -10926,14 +10793,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
@@ -11157,17 +11024,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: {
@@ -11209,7 +11081,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 {
@@ -11252,7 +11124,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var {
     getColor,
     themeMode
@@ -11625,7 +11497,7 @@ var hideMessage = () => {
   useMessageStore.getState().hide();
 };
 
-var Themes$1 = {
+var Themes = {
   info: {
     container: {
       backgroundColor: 'color.blue.200',
@@ -11723,7 +11595,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,
@@ -11972,7 +11844,8 @@ var UploadView = _ref => {
     renderError = _ref2 => {
       var {
         errorMessage,
-        errorMessageProps
+        errorMessageProps,
+        themeMode: elementMode
       } = _ref2;
       return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         color: "red",
@@ -12123,7 +11996,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 = '*/*',
@@ -12136,7 +12009,7 @@ var Uploader = _ref => {
       progress = 0,
       fileType
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var {
     previewUrl,
     thumbnailUrl,
@@ -12283,23 +12156,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'
   }
 };
 /**
@@ -12331,7 +12200,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"],
@@ -12346,7 +12215,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -12417,17 +12286,12 @@ var ModalHeader = _ref3 => {
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
   var onClose = props.onClose ? props.onClose : hideModal;
-  var buttonIcon = /*#__PURE__*/React__default.createElement(Button, {
-    onClick: onClose,
-    icon: /*#__PURE__*/React__default.createElement(CloseIcon, {
-      widthHeight: HeaderIconSizes[iconSize],
-      color: buttonColor
-    }),
-    padding: 0,
-    margin: 0,
-    filter: "none",
-    width: 0
-  });
+  var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    widthHeight: HeaderIconSizes[iconSize],
+    color: buttonColor
+  }));
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
     alignItems: "center",
@@ -12647,7 +12511,7 @@ var NavigationMenuItemStates = {
   }
 };
 
-var _excluded$G = ["href", "children", "views"];
+var _excluded$I = ["href", "children", "views"];
 // Create context for the NavigationMenu
 var NavigationMenuContext = /*#__PURE__*/React.createContext({
   activeItemId: null,
@@ -12882,7 +12746,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
   var {
     itemValue,
     isDisabled
@@ -12931,7 +12795,8 @@ var NavigationMenuView = _ref7 => {
     items,
     orientation,
     //size, variant,
-    views
+    views,
+    themeMode: elementMode
   } = _ref7;
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   if (!items || items.length === 0) {
@@ -12948,7 +12813,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.
@@ -12965,7 +12830,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var {
     activeItemId,
     setActiveItemId,
@@ -13165,7 +13030,8 @@ var TableView = _ref => {
     data,
     columns,
     footer,
-    caption
+    caption,
+    themeMode: elementMode
   } = _ref;
   return /*#__PURE__*/React__default.createElement(TableContainer, {
     role: "Table"
@@ -13432,7 +13298,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,
@@ -13446,7 +13312,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 = {
@@ -13489,7 +13355,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 {
@@ -13501,7 +13367,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,
@@ -13708,7 +13574,8 @@ var DragAndDropView = _ref => {
     draggedIndex,
     itemRefs,
     handleDragStart,
-    views
+    views,
+    themeMode: elementMode
   } = _ref;
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     overflow: "hidden",
@@ -13891,11 +13758,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__*/React.createContext({
   isOpen: false,
@@ -13929,7 +13796,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
   var {
     isOpen,
     setIsOpen
@@ -14089,7 +13956,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.
  */
@@ -14104,7 +13971,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var {
     isOpen,
     setIsOpen,
@@ -14302,7 +14169,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__*/React.createContext({
@@ -14341,7 +14208,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
   var {
     openCard,
     closeCard,
@@ -14428,7 +14295,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.
@@ -14440,7 +14307,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -14570,7 +14437,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__*/React.createContext({
   activeMenuId: null,
@@ -14604,7 +14471,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     role: "menubar",
@@ -14751,7 +14618,8 @@ var MenubarView = _ref8 => {
     orientation,
     size,
     variant,
-    views
+    views,
+    themeMode: elementMode
   } = _ref8;
   return /*#__PURE__*/React__default.createElement(MenubarRoot, {
     orientation: orientation,
@@ -14789,7 +14657,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.
  */
@@ -14803,7 +14671,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -14959,7 +14827,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,
@@ -14990,7 +14858,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;
@@ -15109,7 +14977,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.
  */
@@ -15130,7 +14998,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15166,11 +15034,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
@@ -15195,21 +15068,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 {} = appStudio.useTheme();
+  var {
+    themeMode
+  } = appStudio.useTheme();
   // Use provided color or default from theme
   var separatorColor = color || 'color.gray.200';
   var borderStyle = SeparatorVariants[variant];
@@ -15227,7 +15102,7 @@ var SeparatorView = _ref => {
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      margin: spacing
+      padding: spacing
     }, ariaProps, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "0px",
       flexGrow: 1,
@@ -15250,7 +15125,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
@@ -15260,7 +15135,7 @@ var SeparatorView = _ref => {
     borderLeftWidth: borderWidth,
     borderLeftStyle: borderStyle,
     borderLeftColor: separatorColor,
-    margin: spacing
+    padding: spacing
   }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
 };
 
@@ -15365,37 +15240,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
  */
@@ -15438,10 +15318,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__*/React.createContext({
   isExpanded: true,
@@ -15471,7 +15351,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
   var {
     isExpanded,
     toggleExpanded,
@@ -15626,7 +15506,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.
  */
@@ -15648,7 +15528,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   var {
     isExpanded,
     toggleExpanded,
@@ -16064,35 +15944,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',
@@ -16108,7 +15993,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
@@ -16153,7 +16038,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
   var {
     orientation,
     registerPanel,
@@ -16368,7 +16253,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.
  */
@@ -16388,7 +16273,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     isResizing,
     setIsResizing,
@@ -16453,7 +16338,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',
@@ -16646,10 +16531,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
@@ -17029,29 +16915,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',
@@ -17147,7 +17038,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"],
@@ -17179,7 +17070,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
   var inputRef = React.useRef(null);
   // Focus input when component mounts
   React__default.useEffect(() => {
@@ -17367,7 +17258,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.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.
  */
@@ -17385,7 +17276,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     search,
     setSearch,
@@ -17542,23 +17433,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',
@@ -17667,9 +17563,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__*/React.createContext({
   isOpen: false,
@@ -17703,7 +17599,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
   var {
     openTooltip,
     closeTooltip,
@@ -17796,7 +17692,7 @@ var TooltipView = _ref4 => {
   }, TooltipSizes[size], TooltipVariants[variant], positionStyles, views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.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.
@@ -17816,7 +17712,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,