@app-studio/web 0.8.78 → 0.8.80

package/dist/web.umd.development.js

@@ -143,7 +143,7 @@
   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: [],
@@ -2789,93 +2789,104 @@
    * - 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
@@ -2906,12 +2917,12 @@
       ,
       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, {
@@ -2921,37 +2932,22 @@
       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 {
@@ -2962,7 +2958,7 @@
         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",
@@ -2978,14 +2974,14 @@
     }, 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
@@ -3035,17 +3031,11 @@
       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',
@@ -3216,58 +3206,69 @@
     }
   };
   /**
-   * 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
@@ -3275,13 +3276,13 @@
       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
       ,
@@ -3291,29 +3292,8 @@
     }), 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);
@@ -3345,7 +3325,7 @@
     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 {
@@ -3368,7 +3348,7 @@
         // 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);
@@ -3560,6 +3540,9 @@
     ghost: {
       backgroundColor: 'transparent',
       color: color,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
       on: {
         hover: {
           backgroundColor: color + "10",
@@ -3603,7 +3586,7 @@
     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"];
@@ -3614,7 +3597,7 @@
         color = 'theme.loading',
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var {
       getColor,
       themeMode
@@ -3779,7 +3762,7 @@
   // 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;
@@ -3808,7 +3791,7 @@
         linkProps,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
       getColor,
       themeMode
@@ -3859,6 +3842,7 @@
       alignItems: "center",
       justifyContent: "center",
       "aria-label": ariaLabel,
+      backgroundColor: "transparent",
       borderRadius: ButtonShapes[shape],
       onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
       onMouseEnter: () => handleHover(true),
@@ -3926,97 +3910,95 @@
     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)
@@ -4034,7 +4016,7 @@
     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)
@@ -4052,7 +4034,7 @@
     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)
@@ -4070,11 +4052,12 @@
         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: {
@@ -4087,12 +4070,18 @@
     // 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, {
@@ -4403,19 +4392,19 @@
     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%",
@@ -5339,7 +5328,7 @@
     })));
   };
 
-  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,
@@ -5367,7 +5356,7 @@
         noDataIndicator,
         'aria-label': ariaLabel
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     // Use chart state hook
     var {
       animationProgress,
@@ -5697,12 +5686,12 @@
     };
   };
 
-  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,
@@ -5753,7 +5742,7 @@
         isDisabled = false,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
     var {
       triggerRef,
       contentId,
@@ -6036,7 +6025,7 @@
     }));
   };
 
-  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.
@@ -6051,7 +6040,7 @@
         onOpenChange,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
     var state = useContextMenuState({
       size,
       variant,
@@ -6103,7 +6092,7 @@
   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 {
@@ -6111,7 +6100,7 @@
         color,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     var {
       getColor,
       themeMode
@@ -6185,7 +6174,7 @@
     };
   };
 
-  var _excluded$f = ["children", "views"];
+  var _excluded$h = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
@@ -6193,7 +6182,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     return /*#__PURE__*/React__default.createElement(Text
     // Typography properties
     , Object.assign({
@@ -6219,7 +6208,7 @@
     }, views['helperText'], props), children);
   };
 
-  var _excluded$g = ["children", "helperText", "error", "views"];
+  var _excluded$i = ["children", "helperText", "error", "views"];
   var FieldContainer = _ref => {
     var {
         children,
@@ -6227,7 +6216,7 @@
         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({
@@ -6364,7 +6353,7 @@
     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,
@@ -6382,7 +6371,7 @@
           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
@@ -6411,12 +6400,12 @@
     }, 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,
@@ -6468,7 +6457,7 @@
     }
   };
 
-  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,
@@ -6484,7 +6473,7 @@
         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.
@@ -6516,7 +6505,7 @@
   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,
@@ -6527,7 +6516,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     return /*#__PURE__*/React__default.createElement(Label
     // Position properties
     , Object.assign({
@@ -6548,12 +6537,12 @@
     }, 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({
@@ -6586,7 +6575,7 @@
     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"];
@@ -6604,7 +6593,7 @@
         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
@@ -7103,7 +7092,7 @@
     }
   };
 
-  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));
@@ -7132,7 +7121,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     var handleToggle = event => {
       if (!isReadOnly) {
         setValue(!value);
@@ -7256,7 +7245,7 @@
     // 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,
@@ -7282,7 +7271,6 @@
         onBlur = () => {},
         onChange,
         onFocus,
-        onChangeText,
         setHint = () => {},
         setValue = () => {},
         setIsFocused = () => {},
@@ -7292,7 +7280,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     var showLabel = !!(isFocused && label);
     /**
      * Styles for the textarea field
@@ -7337,11 +7325,9 @@
     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);
       }
     };
@@ -7380,15 +7366,13 @@
       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.
@@ -7435,7 +7419,7 @@
     };
   };
 
-  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
    */
@@ -7481,7 +7465,7 @@
         onBlur = () => {},
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     var {
       getColor,
       themeMode
@@ -7739,7 +7723,7 @@
     }
   };
 
-  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,
@@ -7766,7 +7750,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -9352,11 +9336,11 @@
     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));
@@ -9595,7 +9579,7 @@
     };
   };
 
-  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));
@@ -9628,7 +9612,7 @@
         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);
@@ -9715,7 +9699,7 @@
     }, props, textFieldStates);
   };
 
-  var _excluded$t = ["visibleIcon", "hiddenIcon"],
+  var _excluded$v = ["visibleIcon", "hiddenIcon"],
     _excluded2$9 = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
@@ -9726,7 +9710,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     var _usePasswordState = usePasswordState(props),
       {
         isVisible,
@@ -9780,7 +9764,7 @@
     };
   };
 
-  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 {
@@ -9805,7 +9789,7 @@
         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 => {
@@ -9917,7 +9901,7 @@
     }))))))))))));
   };
 
-  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 {
@@ -9933,7 +9917,7 @@
         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 (
@@ -10238,7 +10222,7 @@
     };
   };
 
-  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: [],
@@ -10292,7 +10276,7 @@
         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
@@ -10522,7 +10506,7 @@
   };
   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: () => {},
@@ -10538,7 +10522,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -10586,7 +10570,7 @@
     }, /*#__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':
@@ -10625,7 +10609,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     var focus = useFormFocus();
     var {
       touched,
@@ -10669,13 +10653,13 @@
     } : {});
   };
 
-  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));
@@ -10733,11 +10717,11 @@
    */
   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));
   };
   /**
@@ -10745,7 +10729,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$B = ["visibleIcon", "hiddenIcon"],
+  var _excluded$D = ["visibleIcon", "hiddenIcon"],
     _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -10756,7 +10740,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -10781,14 +10765,14 @@
    */
   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
@@ -11012,17 +10996,22 @@
     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: {
@@ -11064,7 +11053,7 @@
     }
   };
 
-  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 {
@@ -11107,7 +11096,7 @@
           tooltip: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
     var {
       getColor,
       themeMode
@@ -11480,7 +11469,7 @@
     useMessageStore.getState().hide();
   };
 
-  var Themes$1 = {
+  var Themes = {
     info: {
       container: {
         backgroundColor: 'color.blue.200',
@@ -11578,7 +11567,7 @@
       }
       return;
     }, []);
-    var Theme = theme != null ? theme : Themes$1;
+    var Theme = theme != null ? theme : Themes;
     var showAction = !!(action && actionText);
     var containerStyle = {
       borderWidth: 1,
@@ -11827,7 +11816,8 @@
       renderError = _ref2 => {
         var {
           errorMessage,
-          errorMessageProps
+          errorMessageProps,
+          themeMode: elementMode
         } = _ref2;
         return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           color: "red",
@@ -11978,7 +11968,7 @@
     }, 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 = '*/*',
@@ -11991,7 +11981,7 @@
         progress = 0,
         fileType
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
     var {
       previewUrl,
       thumbnailUrl,
@@ -12182,7 +12172,7 @@
     }
   };
 
-  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"],
@@ -12197,7 +12187,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -12268,17 +12258,12 @@
       } = _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",
@@ -12498,7 +12483,7 @@
     }
   };
 
-  var _excluded$G = ["href", "children", "views"];
+  var _excluded$I = ["href", "children", "views"];
   // Create context for the NavigationMenu
   var NavigationMenuContext = /*#__PURE__*/React.createContext({
     activeItemId: null,
@@ -12733,7 +12718,7 @@
         children,
         views
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$G);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
     var {
       itemValue,
       isDisabled
@@ -12782,7 +12767,8 @@
       items,
       orientation,
       //size, variant,
-      views
+      views,
+      themeMode: elementMode
     } = _ref7;
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     if (!items || items.length === 0) {
@@ -12799,7 +12785,7 @@
     })))));
   };
 
-  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.
@@ -12816,7 +12802,7 @@
         onItemActivate,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
     var {
       activeItemId,
       setActiveItemId,
@@ -13016,7 +13002,8 @@
       data,
       columns,
       footer,
-      caption
+      caption,
+      themeMode: elementMode
     } = _ref;
     return /*#__PURE__*/React__default.createElement(TableContainer, {
       role: "Table"
@@ -13283,7 +13270,7 @@
     };
   };
 
-  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,
@@ -13297,7 +13284,7 @@
         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 = {
@@ -13340,7 +13327,7 @@
     }, 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 {
@@ -13352,7 +13339,7 @@
         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,
@@ -13559,7 +13546,8 @@
       draggedIndex,
       itemRefs,
       handleDragStart,
-      views
+      views,
+      themeMode: elementMode
     } = _ref;
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       overflow: "hidden",
@@ -13742,11 +13730,11 @@
     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,
@@ -13780,7 +13768,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
     var {
       isOpen,
       setIsOpen
@@ -13940,7 +13928,7 @@
     }));
   };
 
-  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.
    */
@@ -13955,7 +13943,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
     var {
       isOpen,
       setIsOpen,
@@ -14153,7 +14141,7 @@
     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({
@@ -14192,7 +14180,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
     var {
       openCard,
       closeCard,
@@ -14279,7 +14267,7 @@
     }, 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.
@@ -14291,7 +14279,7 @@
         openDelay,
         closeDelay
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
     var hoverCardState = useHoverCardState({
       openDelay,
       closeDelay
@@ -14421,7 +14409,7 @@
     };
   };
 
-  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,
@@ -14455,7 +14443,7 @@
         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",
@@ -14602,7 +14590,8 @@
       orientation,
       size,
       variant,
-      views
+      views,
+      themeMode: elementMode
     } = _ref8;
     return /*#__PURE__*/React__default.createElement(MenubarRoot, {
       orientation: orientation,
@@ -14640,7 +14629,7 @@
     })))))));
   };
 
-  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.
    */
@@ -14654,7 +14643,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -14810,7 +14799,7 @@
     }
   };
 
-  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,
@@ -14841,7 +14830,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -14960,7 +14949,7 @@
     }, 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.
    */
@@ -14981,7 +14970,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15017,11 +15006,16 @@
   /**
    * 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
@@ -15046,7 +15040,7 @@
     }
   };
 
-  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',
@@ -15058,9 +15052,11 @@
         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];
@@ -15216,37 +15212,42 @@
   /**
    * 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
    */
@@ -15289,10 +15290,10 @@
     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,
@@ -15322,7 +15323,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
     var {
       isExpanded,
       toggleExpanded,
@@ -15477,7 +15478,7 @@
     }))));
   };
 
-  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.
    */
@@ -15499,7 +15500,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
     var {
       isExpanded,
       toggleExpanded,
@@ -15915,35 +15916,40 @@
     };
     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',
@@ -15959,7 +15965,7 @@
     }
   };
 
-  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
@@ -16004,7 +16010,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
     var {
       orientation,
       registerPanel,
@@ -16219,7 +16225,7 @@
     }, 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.
    */
@@ -16239,7 +16245,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
     var {
       isResizing,
       setIsResizing,
@@ -16304,7 +16310,7 @@
    * Theme configurations for the Toast component
    * Following the design system color palette
    */
-  var Themes$2 = {
+  var Themes$1 = {
     info: {
       container: {
         backgroundColor: 'color.blue.50',
@@ -16497,10 +16503,11 @@
       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
@@ -16880,29 +16887,34 @@
       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',
@@ -16998,7 +17010,7 @@
     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"],
@@ -17030,7 +17042,7 @@
         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(() => {
@@ -17218,7 +17230,7 @@
     })))), 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.
    */
@@ -17236,7 +17248,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var {
       search,
       setSearch,
@@ -17393,23 +17405,28 @@
       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',
@@ -17518,9 +17535,9 @@
     }
   };
 
-  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,
@@ -17554,7 +17571,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
     var {
       openTooltip,
       closeTooltip,
@@ -17647,7 +17664,7 @@
     }, 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.
@@ -17667,7 +17684,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,