@app-studio/web 0.8.78 → 0.8.81

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);
@@ -3545,75 +3525,6 @@ var IconSizes$1 = {
     padding: 14
   }
 };
-/**
- * Button variants with consistent styling
- */
-var getButtonVariants = (color, isLight) => ({
-  filled: {
-    backgroundColor: color,
-    color: isLight ? 'color.gray.900' : 'color.white',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    on: {
-      hover: {
-        filter: 'brightness(0.9)',
-        transform: 'translateY(-1px)'
-      },
-      active: {
-        filter: 'brightness(0.85)',
-        transform: 'translateY(0)'
-      }
-    },
-    transition: 'all 0.2s ease'
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: color,
-    color: color,
-    on: {
-      hover: {
-        backgroundColor: color + "10",
-        transform: 'translateY(-1px)'
-      },
-      active: {
-        backgroundColor: color + "20",
-        transform: 'translateY(0)'
-      }
-    },
-    transition: 'all 0.2s ease'
-  },
-  ghost: {
-    backgroundColor: 'transparent',
-    color: color,
-    on: {
-      hover: {
-        backgroundColor: color + "10",
-        transform: 'translateY(-1px)'
-      },
-      active: {
-        backgroundColor: color + "20",
-        transform: 'translateY(0)'
-      }
-    },
-    transition: 'all 0.2s ease'
-  },
-  link: {
-    backgroundColor: 'transparent',
-    color: color,
-    textDecoration: 'underline',
-    textUnderlineOffset: 2,
-    on: {
-      hover: {
-        textDecoration: 'underline',
-        textDecorationThickness: 2
-      }
-    },
-    transition: 'all 0.2s ease'
-  }
-});
 
 // Defines a mapping of spinning speed labels to their respective duration in seconds for the Loader component animations.
 // Sets up a scale of sizes, mapping size labels to numerical values to be used for Loader component dimensions.
@@ -3631,7 +3542,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 +3553,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 +3718,9 @@ 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", "views", "colorScheme"],
+  _excluded2$3 = ["_hover", "_active"],
+  _excluded3$3 = ["height"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -3830,13 +3743,14 @@ var ButtonView = _ref => {
       loaderProps = {},
       loaderPosition = 'left',
       effect = 'default',
+      isHovered,
       setIsHovered = () => {},
       isExternal = false,
       themeMode: elementMode,
-      linkProps,
-      views
+      views,
+      colorScheme = 'theme.primary'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
     getColor,
     themeMode
@@ -3846,13 +3760,79 @@ var ButtonView = _ref => {
   var defaultNativeProps = {
     disabled: !isActive
   };
-  var buttonColor = isActive ? 'theme.primary' : 'theme.disabled';
-  // We'll handle hover effects through CSS transitions in the style
+  var buttonColor = isActive ? colorScheme : 'theme.disabled';
+  var hovering = isHovered && effect === 'hover';
+  var reverse = isHovered && effect === 'reverse';
   // Determine if the button color is light or dark for proper contrast
   var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
-  // Get button variants based on color and light/dark status
-  var ButtonVariants = getButtonVariants(buttonColor, isLight);
-  // Note: Effects are now handled through CSS transitions in the style definitions
+  // Define button variants with effect support
+  var ButtonVariants = {
+    filled: {
+      backgroundColor: reverse ? 'transparent' : buttonColor,
+      color: reverse ? isLight ? 'white' : buttonColor : isLight ? buttonColor : 'white',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : 'transparent',
+      _hover: {
+        backgroundColor: reverse ? buttonColor + "10" : "" + buttonColor,
+        transform: 'translateY(-2px)',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
+      },
+      _active: {
+        backgroundColor: reverse ? buttonColor + "20" : "" + buttonColor,
+        transform: 'translateY(0)',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+      }
+    },
+    outline: {
+      backgroundColor: reverse ? buttonColor : 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : colorScheme,
+      color: reverse ? 'white' : buttonColor,
+      _hover: {
+        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
+        transform: 'translateY(-2px)',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.05)'
+      },
+      _active: {
+        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
+        transform: 'translateY(0)',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
+      }
+    },
+    link: {
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      color: buttonColor,
+      textDecoration: reverse ? 'none' : 'underline',
+      _hover: {
+        opacity: 0.8,
+        textDecorationThickness: '2px'
+      },
+      _active: {
+        opacity: 0.8,
+        textDecorationThickness: '2px'
+      }
+    },
+    ghost: {
+      backgroundColor: reverse ? buttonColor : 'transparent',
+      color: reverse ? 'white' : buttonColor,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      _hover: {
+        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
+        transform: 'translateY(-2px)'
+      },
+      _active: {
+        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
+        transform: 'translateY(0)'
+      }
+    }
+  };
   var buttonSizeStyles = ButtonSizes[size];
   var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
@@ -3879,6 +3859,13 @@ var ButtonView = _ref => {
   }, views == null ? void 0 : views.icon), icon)), isLoading && loaderPosition === 'right' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
     size: size === 'xs' || size === 'sm' ? 'sm' : 'md'
   }, loaderProps))));
+  // Extract hover and active styles from buttonVariant
+  var _ref2 = buttonVariant || {},
+    {
+      _hover,
+      _active
+    } = _ref2,
+    baseButtonVariant = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
@@ -3887,17 +3874,28 @@ 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),
     onMouseLeave: () => handleHover(false),
     cursor: isActive ? 'pointer' : 'default',
+    filter: hovering && effect === 'hover' ? 'brightness(0.85)' : 'brightness(1)',
+    transition: "all 0.2s ease",
+    transform: hovering && effect === 'hover' && !isDisabled ? 'translateY(-5px)' : '',
     // Apply consistent styling according to design guidelines
     // Apply shadow if provided
     boxShadow: shadow ? shadow : undefined
-  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, props, views == null ? void 0 : views.container), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+  }, defaultNativeProps, (_ref3 => {
+    var rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+    return rest;
+  })(props), buttonSizeStyles, baseButtonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, {
+    // Apply hover and active styles
+    _hover: _hover,
+    _active: _active
+  }, views == null ? void 0 : views.container), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
     to: to,
-    textDecorationColor: 'theme.primary',
+    textDecorationColor: colorScheme,
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     transition: "all 0.2s ease",
@@ -3905,7 +3903,7 @@ var ButtonView = _ref => {
     _hover: {
       textDecorationThickness: '2px'
     }
-  }, linkProps, views == null ? void 0 : views.link), content)) : content);
+  }, views == null ? void 0 : views.link), content)) : content);
 };
 
 // Importing a custom hook to manage the state specific to the button component.
@@ -3954,97 +3952,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$4 = ["children", "views", "style", "themeMode"],
+  _excluded3$4 = ["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)
@@ -4057,12 +4053,12 @@ var CardContent = _ref2 => {
       children,
       style
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var theme = appStudio.useTheme();
   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)
@@ -4075,12 +4071,12 @@ var CardFooter = _ref3 => {
       children,
       style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var theme = appStudio.useTheme();
   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 +4094,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 +4112,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 +4434,19 @@ var useCarouselContext = () => {
   return context;
 };
 
-var _excluded$a = ["children", "isActive", "views"],
-  _excluded2$4 = ["views", "children"],
-  _excluded3$4 = ["views", "children"],
+var _excluded$c = ["children", "isActive", "views"],
+  _excluded2$5 = ["views", "children"],
+  _excluded3$5 = ["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%",
@@ -4459,7 +4462,7 @@ var CarouselPreviousComponent = _ref2 => {
       children // Allow custom content/icon
       // Spread remaining ButtonProps
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   var {
     goToPrevious,
     canGoPrevious,
@@ -4482,7 +4485,7 @@ var CarouselNextComponent = _ref3 => {
       views,
       children
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
   var {
     goToNext,
     canGoNext,
@@ -5367,7 +5370,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 +5398,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 +5728,12 @@ var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menu
   };
 };
 
-var _excluded$c = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-  _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
-  _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
+var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
+  _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
+  _excluded3$6 = ["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 +5784,7 @@ var ContextMenuTrigger = _ref2 => {
       isDisabled = false,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
   var {
     triggerRef,
     contentId,
@@ -5835,7 +5838,7 @@ var ContextMenuContent = _ref3 => {
       views,
       style // Capture user-provided style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
   var {
     isOpen,
     position: contextPosition,
@@ -5906,7 +5909,7 @@ var ContextMenuItem = _ref4 => {
       isDisabled = false,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -6064,7 +6067,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 +6082,7 @@ var ContextMenuComponent = _ref => {
       onOpenChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var state = useContextMenuState({
     size,
     variant,
@@ -6131,15 +6134,15 @@ ContextMenu.Item = ContextMenuItem;
 ContextMenu.Divider = ContextMenuDivider;
 ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
-var _excluded$e = ["src", "color", "views", "themeMode"],
-  _excluded2$6 = ["path"];
+var _excluded$g = ["src", "color", "views", "themeMode"],
+  _excluded2$7 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
       color,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var {
     getColor,
     themeMode
@@ -6162,7 +6165,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -6213,7 +6216,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$f = ["children", "views"];
+var _excluded$h = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -6221,7 +6224,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 +6250,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 +6258,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 +6395,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 +6413,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 +6442,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 +6499,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 +6515,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 +6547,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 +6558,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 +6579,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,9 +6617,9 @@ var IconSizes$2 = {
   xl: 28
 };
 
-var _excluded$m = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3$6 = ["option", "size", "removeOption"],
+var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+  _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded3$7 = ["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"];
 /**
  * Item Component
@@ -6632,7 +6635,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
@@ -6737,7 +6740,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -6842,7 +6845,7 @@ var MultiSelect = _ref6 => {
       size = 'md',
       removeOption = () => {}
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     gap: 8,
@@ -7131,7 +7134,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 +7163,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 +7287,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 +7313,6 @@ var TextAreaView = _ref => {
       onBlur = () => {},
       onChange,
       onFocus,
-      onChangeText,
       setHint = () => {},
       setValue = () => {},
       setIsFocused = () => {},
@@ -7320,7 +7322,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 +7367,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 +7408,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 +7461,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 +7507,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var {
     getColor,
     themeMode
@@ -7767,7 +7765,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 +7792,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 +9378,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$r = ["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 _excluded$t = ["size"],
+  _excluded2$9 = ["size"],
+  _excluded3$8 = ["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));
@@ -9393,7 +9391,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -9495,7 +9493,7 @@ var CountryPickerView = _ref5 => {
       },
       themeMode: elementMode
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
   var {
     getColor,
     themeMode
@@ -9623,7 +9621,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 +9654,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,8 +9741,8 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$t = ["visibleIcon", "hiddenIcon"],
-  _excluded2$9 = ["isVisible", "setIsVisible"];
+var _excluded$v = ["visibleIcon", "hiddenIcon"],
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -9754,13 +9752,13 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -9808,7 +9806,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 +9831,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 +9943,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 +9959,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 +10264,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 +10318,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 +10548,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 +10564,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 +10612,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 +10651,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var focus = useFormFocus();
   var {
     touched,
@@ -10697,13 +10695,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 +10759,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,8 +10771,8 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$B = ["visibleIcon", "hiddenIcon"],
-  _excluded2$a = ["isVisible", "setIsVisible"];
+var _excluded$D = ["visibleIcon", "hiddenIcon"],
+  _excluded2$b = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -10784,14 +10782,14 @@ 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),
     {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -10809,14 +10807,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 +11038,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 +11095,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 +11138,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var {
     getColor,
     themeMode
@@ -11508,7 +11511,7 @@ var hideMessage = () => {
   useMessageStore.getState().hide();
 };
 
-var Themes$1 = {
+var Themes = {
   info: {
     container: {
       backgroundColor: 'color.blue.200',
@@ -11606,7 +11609,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 +11858,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 +12010,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 +12023,7 @@ var Uploader = _ref => {
       progress = 0,
       fileType
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var {
     previewUrl,
     thumbnailUrl,
@@ -12210,9 +12214,9 @@ var ModalTypography = {
   }
 };
 
-var _excluded$F = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$b = ["children", "shadow", "isFullScreen", "shape", "views"],
-  _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views"],
+  _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
   _excluded5$3 = ["children", "views"];
 var ModalOverlay = _ref => {
@@ -12225,7 +12229,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -12261,7 +12265,7 @@ var ModalContainer = _ref2 => {
       shape = 'rounded',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$b);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$c);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)'
   } : {
@@ -12294,19 +12298,14 @@ var ModalHeader = _ref3 => {
       buttonPosition = 'right',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
   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 +12525,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 +12760,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
   var {
     itemValue,
     isDisabled
@@ -12810,7 +12809,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 +12827,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 +12844,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var {
     activeItemId,
     setActiveItemId,
@@ -13044,7 +13044,8 @@ var TableView = _ref => {
     data,
     columns,
     footer,
-    caption
+    caption,
+    themeMode: elementMode
   } = _ref;
   return /*#__PURE__*/React__default.createElement(TableContainer, {
     role: "Table"
@@ -13311,7 +13312,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 +13326,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 +13369,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 +13381,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 +13588,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 +13772,11 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
   return positions[side];
 };
 
-var _excluded$K = ["children", "views"],
-  _excluded2$c = ["items", "side", "align", "views"],
-  _excluded3$9 = ["item", "views"],
+var _excluded$M = ["children", "views"],
+  _excluded2$d = ["items", "side", "align", "views"],
+  _excluded3$a = ["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 +13810,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
   var {
     isOpen,
     setIsOpen
@@ -13833,7 +13835,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
   var {
     isOpen,
     //activeSubmenuId, setActiveSubmenuId, size,
@@ -13869,7 +13871,7 @@ var DropdownMenuItem = _ref4 => {
       item,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$9);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -13968,7 +13970,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 +13985,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var {
     isOpen,
     setIsOpen,
@@ -14181,8 +14183,8 @@ var useRect = ref => {
   return rect;
 };
 
-var _excluded$M = ["children", "views", "asChild"],
-  _excluded2$d = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+var _excluded$O = ["children", "views", "asChild"],
+  _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -14220,7 +14222,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
   var {
     openCard,
     closeCard,
@@ -14268,7 +14270,7 @@ var HoverCardContent = _ref3 => {
       minWidth = '200px',
       maxWidth = '300px'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
   var {
     isOpen,
     cancelCloseTimer,
@@ -14307,7 +14309,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 +14321,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -14449,7 +14451,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 +14485,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 +14632,8 @@ var MenubarView = _ref8 => {
     orientation,
     size,
     variant,
-    views
+    views,
+    themeMode: elementMode
   } = _ref8;
   return /*#__PURE__*/React__default.createElement(MenubarRoot, {
     orientation: orientation,
@@ -14668,7 +14671,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 +14685,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -14838,7 +14841,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 +14872,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 +14991,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 +15012,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 +15048,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 +15082,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 +15094,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 +15254,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 +15332,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"],
-  _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"];
+var _excluded$V = ["children", "showToggleButton", "views"],
+  _excluded2$f = ["children", "views"],
+  _excluded3$b = ["children", "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 +15365,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
   var {
     isExpanded,
     toggleExpanded,
@@ -15417,7 +15432,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
   var {
     isExpanded
   } = useSidebarContext();
@@ -15435,7 +15450,7 @@ var SidebarFooter = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
   var {
     isExpanded
   } = useSidebarContext();
@@ -15505,7 +15520,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 +15542,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   var {
     isExpanded,
     toggleExpanded,
@@ -15943,35 +15958,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,9 +16007,9 @@ var HandleIconStyles = {
   }
 };
 
-var _excluded$V = ["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"];
+var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
   orientation: 'horizontal',
@@ -16032,7 +16052,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
   var {
     orientation,
     registerPanel,
@@ -16096,7 +16116,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
   var {
     orientation,
     size,
@@ -16236,7 +16256,7 @@ var ResizableView = _ref4 => {
       containerRef,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     ref: containerRef,
@@ -16247,7 +16267,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 +16287,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     isResizing,
     setIsResizing,
@@ -16332,7 +16352,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 +16545,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 +16929,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,9 +17052,9 @@ var CommandFooterStyles = {
   color: 'color.gray.500'
 };
 
-var _excluded$X = ["value", "onValueChange", "placeholder", "views"],
-  _excluded2$g = ["children", "views"],
-  _excluded3$c = ["heading", "children", "views"],
+var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
+  _excluded2$h = ["children", "views"],
+  _excluded3$d = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
   _excluded5$5 = ["children", "views"],
   _excluded6$3 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
@@ -17058,7 +17084,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(() => {
@@ -17090,7 +17116,7 @@ var CommandList = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
 };
 // Command Group component
@@ -17100,7 +17126,7 @@ var CommandGroup = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandGroupStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, CommandGroupHeadingStyles, views == null ? void 0 : views.heading), heading), children);
 };
 // Command Item component
@@ -17246,7 +17272,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 +17290,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     search,
     setSearch,
@@ -17421,23 +17447,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 +17577,9 @@ var getArrowStyles = position => {
   }
 };
 
-var _excluded$Z = ["children", "views", "asChild"],
-  _excluded2$h = ["children", "views"],
-  _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views"];
+var _excluded$$ = ["children", "views", "asChild"],
+  _excluded2$i = ["children", "views"],
+  _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -17582,7 +17613,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
   var {
     openTooltip,
     closeTooltip,
@@ -17618,7 +17649,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
   var {
     isOpen,
     contentRef,
@@ -17648,7 +17679,7 @@ var TooltipView = _ref4 => {
       showArrow = true,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
   var {
     isOpen,
     // openTooltip,
@@ -17675,7 +17706,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 +17726,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,