@app-studio/web 0.8.78 → 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: [],
@@ -2817,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
@@ -2934,12 +2945,12 @@ var AlertView = _ref => {
     ,
     borderWidth: "1px",
     borderStyle: "solid",
-    borderColor: Themes[variant].container.borderColor,
-    backgroundColor: Themes[variant].container.backgroundColor,
-    boxShadow: Themes[variant].container.containerShadow,
+    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, {
@@ -2949,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 {
@@ -2990,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",
@@ -3006,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
@@ -3063,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',
@@ -3244,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
@@ -3303,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
     ,
@@ -3319,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);
@@ -3373,7 +3353,7 @@ var IconSizes = {
   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 {
@@ -3396,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);
@@ -3588,6 +3568,9 @@ var getButtonVariants = (color, isLight) => ({
   ghost: {
     backgroundColor: 'transparent',
     color: color,
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderColor: 'transparent',
     on: {
       hover: {
         backgroundColor: color + "10",
@@ -3631,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"];
@@ -3642,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
@@ -3807,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;
@@ -3836,7 +3819,7 @@ var ButtonView = _ref => {
       linkProps,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
     getColor,
     themeMode
@@ -3887,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),
@@ -3954,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)
@@ -4062,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)
@@ -4080,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)
@@ -4098,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: {
@@ -4115,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, {
@@ -4431,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%",
@@ -5367,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,
@@ -5395,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,
@@ -5725,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,
@@ -5781,7 +5770,7 @@ var ContextMenuTrigger = _ref2 => {
       isDisabled = false,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
   var {
     triggerRef,
     contentId,
@@ -6064,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.
@@ -6079,7 +6068,7 @@ var ContextMenuComponent = _ref => {
       onOpenChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var state = useContextMenuState({
     size,
     variant,
@@ -6131,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 {
@@ -6139,7 +6128,7 @@ var FileSVG = _ref => {
       color,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var {
     getColor,
     themeMode
@@ -6213,7 +6202,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$f = ["children", "views"];
+var _excluded$h = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -6221,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({
@@ -6247,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,
@@ -6255,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({
@@ -6392,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,
@@ -6410,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
@@ -6439,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,
@@ -6496,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,
@@ -6512,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.
@@ -6544,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,
@@ -6555,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({
@@ -6576,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({
@@ -6614,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"];
@@ -6632,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
@@ -7131,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));
@@ -7160,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);
@@ -7284,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,
@@ -7310,7 +7299,6 @@ var TextAreaView = _ref => {
       onBlur = () => {},
       onChange,
       onFocus,
-      onChangeText,
       setHint = () => {},
       setValue = () => {},
       setIsFocused = () => {},
@@ -7320,7 +7308,7 @@ var TextAreaView = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var showLabel = !!(isFocused && label);
   /**
    * Styles for the textarea field
@@ -7365,11 +7353,9 @@ 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);
     }
   };
@@ -7408,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, {
-    onChange: handleChange,
-    onChangeText: handleChange
-  }, views == null ? void 0 : views.textarea)))));
+    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.
@@ -7463,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
  */
@@ -7509,7 +7493,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var {
     getColor,
     themeMode
@@ -7767,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,
@@ -7794,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) {
@@ -9380,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));
@@ -9623,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));
@@ -9656,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);
@@ -9743,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 {
@@ -9754,7 +9738,7 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -9808,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 {
@@ -9833,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 => {
@@ -9945,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 {
@@ -9961,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 (
@@ -10266,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: [],
@@ -10320,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
@@ -10550,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: () => {},
@@ -10566,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);
@@ -10614,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':
@@ -10653,7 +10637,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var focus = useFormFocus();
   var {
     touched,
@@ -10697,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));
@@ -10761,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));
 };
 /**
@@ -10773,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 {
@@ -10784,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),
     {
@@ -10809,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
@@ -11040,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: {
@@ -11092,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 {
@@ -11135,7 +11124,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var {
     getColor,
     themeMode
@@ -11508,7 +11497,7 @@ var hideMessage = () => {
   useMessageStore.getState().hide();
 };
 
-var Themes$1 = {
+var Themes = {
   info: {
     container: {
       backgroundColor: 'color.blue.200',
@@ -11606,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,
@@ -11855,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",
@@ -12006,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 = '*/*',
@@ -12019,7 +12009,7 @@ var Uploader = _ref => {
       progress = 0,
       fileType
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var {
     previewUrl,
     thumbnailUrl,
@@ -12210,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"],
@@ -12225,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();
   };
@@ -12296,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",
@@ -12526,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,
@@ -12761,7 +12746,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
   var {
     itemValue,
     isDisabled
@@ -12810,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) {
@@ -12827,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.
@@ -12844,7 +12830,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var {
     activeItemId,
     setActiveItemId,
@@ -13044,7 +13030,8 @@ var TableView = _ref => {
     data,
     columns,
     footer,
-    caption
+    caption,
+    themeMode: elementMode
   } = _ref;
   return /*#__PURE__*/React__default.createElement(TableContainer, {
     role: "Table"
@@ -13311,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,
@@ -13325,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 = {
@@ -13368,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 {
@@ -13380,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,
@@ -13587,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",
@@ -13770,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,
@@ -13808,7 +13796,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
   var {
     isOpen,
     setIsOpen
@@ -13968,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.
  */
@@ -13983,7 +13971,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var {
     isOpen,
     setIsOpen,
@@ -14181,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({
@@ -14220,7 +14208,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
   var {
     openCard,
     closeCard,
@@ -14307,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.
@@ -14319,7 +14307,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -14449,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,
@@ -14483,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",
@@ -14630,7 +14618,8 @@ var MenubarView = _ref8 => {
     orientation,
     size,
     variant,
-    views
+    views,
+    themeMode: elementMode
   } = _ref8;
   return /*#__PURE__*/React__default.createElement(MenubarRoot, {
     orientation: orientation,
@@ -14668,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.
  */
@@ -14682,7 +14671,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -14838,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,
@@ -14869,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;
@@ -14988,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.
  */
@@ -15009,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);
@@ -15045,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
@@ -15074,7 +15068,7 @@ 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',
@@ -15086,9 +15080,11 @@ var SeparatorView = _ref => {
       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];
@@ -15244,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
  */
@@ -15317,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,
@@ -15350,7 +15351,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
   var {
     isExpanded,
     toggleExpanded,
@@ -15505,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.
  */
@@ -15527,7 +15528,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   var {
     isExpanded,
     toggleExpanded,
@@ -15943,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',
@@ -15987,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
@@ -16032,7 +16038,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
   var {
     orientation,
     registerPanel,
@@ -16247,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.
  */
@@ -16267,7 +16273,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     isResizing,
     setIsResizing,
@@ -16332,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',
@@ -16525,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
@@ -16908,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',
@@ -17026,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"],
@@ -17058,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(() => {
@@ -17246,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.
  */
@@ -17264,7 +17276,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     search,
     setSearch,
@@ -17421,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',
@@ -17546,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,
@@ -17582,7 +17599,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
   var {
     openTooltip,
     closeTooltip,
@@ -17675,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.
@@ -17695,7 +17712,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,