@app-studio/web 0.8.81 → 0.8.83

package/dist/web.cjs.development.js

@@ -34,6 +34,7 @@ require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
 require('core-js/modules/es.array.flat-map.js');
 require('core-js/modules/es.array.unscopables.flat-map.js');
+require('core-js/modules/es.string.trim.js');
 
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
@@ -2820,71 +2821,70 @@ var Icon = {
  * Get theme styles for different alert variants based on theme mode
  */
 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)'
+        backgroundColor: 'color.gray.50',
+        borderColor: 'color.gray.200',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
       },
       content: {
-        color: isDarkMode ? 'color.gray.300' : 'color.gray.700'
+        color: 'color.gray.700'
       },
       icon: {
-        color: isDarkMode ? 'color.gray.400' : 'color.gray.500'
+        color: 'color.gray.500'
       }
     },
     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)'
+        backgroundColor: 'color.blue.50',
+        borderColor: 'color.blue.200',
+        boxShadow: '0 1px 2px rgba(59, 130, 246, 0.05)'
       },
       content: {
-        color: isDarkMode ? 'color.blue.300' : 'color.blue.700'
+        color: 'color.blue.700'
       },
       icon: {
-        color: isDarkMode ? 'color.blue.400' : 'color.blue.500'
+        color: 'color.blue.500'
       }
     },
     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)'
+        backgroundColor: 'color.green.50',
+        borderColor: 'color.green.200',
+        boxShadow: '0 1px 2px rgba(34, 197, 94, 0.05)'
       },
       content: {
-        color: isDarkMode ? 'color.green.300' : 'color.green.700'
+        color: 'color.green.700'
       },
       icon: {
-        color: isDarkMode ? 'color.green.400' : 'color.green.500'
+        color: 'color.green.500'
       }
     },
     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)'
+        backgroundColor: 'color.red.50',
+        borderColor: 'color.red.200',
+        boxShadow: '0 1px 2px rgba(239, 68, 68, 0.05)'
       },
       content: {
-        color: isDarkMode ? 'color.red.300' : 'color.red.700'
+        color: 'color.red.700'
       },
       icon: {
-        color: isDarkMode ? 'color.red.400' : 'color.red.500'
+        color: 'color.red.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)'
+        backgroundColor: 'color.orange.50',
+        borderColor: 'color.orange.200',
+        boxShadow: '0 1px 2px rgba(249, 115, 22, 0.05)'
       },
       content: {
-        color: isDarkMode ? 'color.orange.300' : 'color.orange.700'
+        color: 'color.orange.700'
       },
       icon: {
-        color: isDarkMode ? 'color.orange.400' : 'color.orange.500'
+        color: 'color.orange.500'
       }
     }
   };
@@ -2907,8 +2907,7 @@ var AlertView = _ref => {
   var {
     themeMode
   } = appStudio.useTheme();
-  var currentThemeMode = elementMode || themeMode;
-  var themes = getThemes(currentThemeMode);
+  var themes = getThemes();
   // Select the appropriate icon based on the variant
   var getIcon = () => {
     var _views$icon$color, _views$icon;
@@ -3237,11 +3236,10 @@ var PositionStyles = {
  * Get badge variants with consistent styling based on theme mode
  */
 var getBadgeVariants = themeMode => {
-  var isDarkMode = themeMode === 'dark';
   return {
     filled: {
       backgroundColor: 'theme.primary',
-      color: isDarkMode ? 'color.gray.900' : 'color.white',
+      color: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'transparent',
@@ -3267,7 +3265,7 @@ var getBadgeVariants = themeMode => {
     },
     ghost: {
       backgroundColor: 'transparent',
-      color: isDarkMode ? 'color.gray.400' : 'color.gray.500',
+      color: 'color.gray.500',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'transparent',
@@ -3295,8 +3293,7 @@ var BadgeView = _ref => {
   var {
     themeMode
   } = appStudio.useTheme();
-  var currentThemeMode = elementMode || themeMode;
-  var variantStyles = getBadgeVariants(currentThemeMode)[variant];
+  var variantStyles = getBadgeVariants()[variant];
   // Combine styles for the badge
   var combinedStyles = Object.assign({
     // Base styles
@@ -3558,7 +3555,9 @@ var DefaultSpinner = _ref => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
+  var colorStyle = getColor(color, {
+    themeMode: elementMode ? elementMode : themeMode
+  });
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = React.useState(0);
   React.useEffect(() => {
@@ -3605,7 +3604,9 @@ var Dotted = _ref2 => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
+  var colorStyle = getColor(color, {
+    themeMode: elementMode ? elementMode : themeMode
+  });
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = React.useState(0);
   React.useEffect(() => {
@@ -3651,7 +3652,9 @@ var Quarter = _ref3 => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
+  var colorStyle = getColor(color, {
+    themeMode: elementMode ? elementMode : themeMode
+  });
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = React.useState(0);
   React.useEffect(() => {
@@ -3718,9 +3721,10 @@ 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$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"],
+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", "color", "backgroundColor"],
   _excluded2$3 = ["_hover", "_active"],
   _excluded3$3 = ["height"];
+// Using require for contrast as it seems to be a common pattern in your code
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -3742,13 +3746,16 @@ var ButtonView = _ref => {
       onClick = () => {},
       loaderProps = {},
       loaderPosition = 'left',
-      effect = 'default',
-      isHovered,
+      effect = 'default' // 'default', 'hover', 'reverse'
+      ,
       setIsHovered = () => {},
       isExternal = false,
       themeMode: elementMode,
+      // Allow overriding themeMode for this element
       views,
-      colorScheme = 'theme.primary'
+      color,
+      // Text color prop
+      backgroundColor = 'theme.primary' // Background color prop
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
@@ -3760,81 +3767,170 @@ var ButtonView = _ref => {
   var defaultNativeProps = {
     disabled: !isActive
   };
-  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';
-  // 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)'
+  // Determine the base background color key/value, considering disabled state
+  var buttonBackgroundColorKey = isActive ? backgroundColor : 'theme.disabled';
+  // --- Provided Color Logic ---
+  // Determine the effective theme mode for this button
+  var mode = elementMode != null ? elementMode : themeMode; // effective mode
+  // Resolve the base background color string
+  var bg = getColor(buttonBackgroundColorKey, {
+    themeMode: mode
+  });
+  // Resolve the background color string in the opposite theme mode (for reverse effect, though not directly used for ghost/outline text contrast)
+  // const bgHover = getColor(buttonBackgroundColorKey, {
+  //   themeMode: mode === 'light' ? 'dark' : 'light',
+  // }); // bgHover is not strictly needed for the text contrast logic below
+  // Check contrast of base background
+  var isBgLight = contrast(bg) === mode;
+  // Determine contrasting text color key for the base background
+  var txtOnBgKey = isBgLight ? 'color.black' : 'color.white';
+  // --- End Provided Color Logic ---
+  // Determine the default text color key/value if 'color' prop is not provided
+  // For filled buttons, default text color should contrast with the background (use txtOnBgKey).
+  // For outline/link/ghost, a theme-appropriate text color is usually better (e.g., theme.text or theme.primary).
+  var defaultTextColorKey;
+  if (variant === 'filled') {
+    defaultTextColorKey = txtOnBgKey; // Use the calculated contrasting color key
+  } else {
+    // For non-filled variants, default to theme's text color or primary color
+    defaultTextColorKey = 'theme.primary'; // Or 'theme.primary' depending on design system
+  }
+  // Determine the actual key/value for the base text color
+  // Use the provided 'color' prop if available, otherwise use the calculated default
+  var baseTextColorKey = color || defaultTextColorKey;
+  // Resolve the actual base text color string
+  var resolvedBaseTextColor = getColor(baseTextColorKey, {
+    themeMode: mode
+  });
+  // Resolve the contrasting color string for the base background (used for text in outline/ghost reverse)
+  var contrastingColorForBg = getColor(txtOnBgKey, {
+    themeMode: mode
+  });
+  // Resolve the contrasting color string for the base text color (used for text in ghost reverse)
+  var isBaseTextLight = contrast(resolvedBaseTextColor) === 'light';
+  var contrastingColorForBaseText = getColor(isBaseTextLight ? 'color.black' : 'color.white', {
+    themeMode: mode
+  });
+  // --- Button Variant Styles Function ---
+  // This function calculates the styles based on the current state (base, hover, active)
+  var getButtonVariantStyles = _ref2 => {
+    var {
+      currentVariant,
+      currentEffect,
+      resolvedBg,
+      // Resolved base background color string (bg)
+      resolvedBaseTextColor,
+      // Resolved base text color string
+      contrastingColorForBg,
+      // Resolved contrasting color string for resolvedBg
+      contrastingColorForBaseText,
+      // Resolved contrasting color string for resolvedBaseTextColor
+      resolvedBorderColor
+    } = _ref2;
+    // Define the base styles for each variant
+    var baseStyles = {
+      filled: {
+        backgroundColor: resolvedBg,
+        color: resolvedBaseTextColor,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'transparent'
       },
-      _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)'
+      outline: {
+        backgroundColor: 'transparent',
+        color: resolvedBaseTextColor,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: resolvedBorderColor
       },
-      _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'
+      link: {
+        backgroundColor: 'transparent',
+        color: resolvedBg,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent',
+        textDecoration: 'underline'
       },
-      _active: {
-        opacity: 0.8,
-        textDecorationThickness: '2px'
+      ghost: {
+        backgroundColor: 'transparent',
+        color: resolvedBaseTextColor,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent'
       }
-    },
-    ghost: {
-      backgroundColor: reverse ? buttonColor : 'transparent',
-      color: reverse ? 'white' : buttonColor,
-      borderWidth: 0,
-      borderStyle: 'none',
-      borderColor: 'transparent',
-      _hover: {
-        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
-        transform: 'translateY(-2px)'
+    };
+    // Define the styles applied on hover/active when effect is 'reverse'
+    var reverseHoverActiveStyles = {
+      filled: {
+        backgroundColor: 'transparent',
+        color: resolvedBg,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: resolvedBg
       },
-      _active: {
-        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
-        transform: 'translateY(0)'
+      outline: {
+        backgroundColor: resolvedBg,
+        color: contrastingColorForBg,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'transparent'
+      },
+      link: {
+        backgroundColor: 'transparent',
+        color: resolvedBg,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent',
+        textDecoration: 'none'
+      },
+      ghost: {
+        backgroundColor: resolvedBg,
+        color: contrastingColorForBaseText,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent'
       }
-    }
+    };
+    // General hover/active effects (transform, shadow, opacity, etc.)
+    var generalHoverStyles = {
+      transform: 'translateY(2px)',
+      boxShadow: currentVariant === 'link' ? undefined : '0 4px 8px rgba(0, 0, 0, 0.1)',
+      // opacity: currentVariant === 'link' ? 0.8 : undefined,
+      textDecorationThickness: currentVariant === 'link' ? '2px' : undefined
+    };
+    var generalActiveStyles = {
+      transform: 'translateY(-1px)',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+      opacity: currentVariant === 'link' ? 0.8 : undefined,
+      textDecorationThickness: currentVariant === 'link' ? '2px' : undefined
+    };
+    // Combine base styles with conditional hover/active overrides
+    return Object.assign({}, baseStyles[currentVariant], {
+      _hover: Object.assign({}, currentEffect === 'reverse' ? reverseHoverActiveStyles[currentVariant] : {}, currentEffect === 'hover' ? {
+        filter: 'brightness(0.85)'
+      } : {}, generalHoverStyles),
+      _active: Object.assign({}, currentEffect === 'reverse' ? reverseHoverActiveStyles[currentVariant] : {}, currentEffect === 'hover' ? {
+        filter: 'brightness(0.7)'
+      } : {}, generalActiveStyles)
+    });
   };
+  // Get the calculated variant styles for the current state
+  var buttonVariantStyles = getButtonVariantStyles({
+    currentVariant: variant,
+    currentEffect: effect,
+    resolvedBg: bg,
+    resolvedBaseTextColor: resolvedBaseTextColor,
+    contrastingColorForBg: contrastingColorForBg,
+    contrastingColorForBaseText: contrastingColorForBaseText,
+    resolvedBorderColor: bg
+  });
+  // Extract hover and active styles from the calculated styles
+  var {
+      _hover,
+      _active
+    } = buttonVariantStyles,
+    baseButtonVariantStyles = _objectWithoutPropertiesLoose(buttonVariantStyles, _excluded2$3);
   var buttonSizeStyles = ButtonSizes[size];
-  var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
     width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
   };
@@ -3847,62 +3943,68 @@ var ButtonView = _ref => {
     alignItems: "center",
     justifyContent: "center"
   }, views == null ? void 0 : views.container), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
-    size: size === 'xs' || size === 'sm' ? 'sm' : 'md'
+    size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
+    color: baseButtonVariantStyles.color
   }, loaderProps))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    color: baseButtonVariantStyles.color
   }, views == null ? void 0 : views.icon), icon)), children, icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    color: baseButtonVariantStyles.color
   }, views == null ? void 0 : views.icon), icon)), isLoading && loaderPosition === 'right' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
-    size: size === 'xs' || size === 'sm' ? 'sm' : 'md'
+    size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
+    color: baseButtonVariantStyles.color
   }, loaderProps))));
-  // Extract hover and active styles from buttonVariant
-  var _ref2 = buttonVariant || {},
-    {
-      _hover,
-      _active
-    } = _ref2,
-    baseButtonVariant = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  // Determine if the button should render as a Link or a button Element
+  var isLink = variant === 'link' && to;
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
-    as: "button",
-    type: "button",
+    as: isLink ? 'div' : 'button',
+    type: isLink ? undefined : 'button',
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     "aria-label": ariaLabel,
-    backgroundColor: "transparent",
+    // backgroundColor="transparent" // Remove this unless it's intended to override variant styles
     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)',
+    cursor: isActive ? isLink ? 'pointer' : 'pointer' : 'default',
     transition: "all 0.2s ease",
-    transform: hovering && effect === 'hover' && !isDisabled ? 'translateY(-5px)' : '',
-    // Apply consistent styling according to design guidelines
+    // filter and transform are now handled within _hover/_active styles
     // Apply shadow if provided
     boxShadow: shadow ? shadow : undefined
   }, 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, {
+  })(props), buttonSizeStyles, baseButtonVariantStyles, 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 ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
     to: to,
-    textDecorationColor: colorScheme,
-    textDecorationThickness: "1px",
+    isExternal: isExternal,
+    // Link styles should inherit from the button's calculated styles or be defined here
+    // Let's apply relevant styles from the button variant to the Link
+    color: baseButtonVariantStyles.color,
+    textDecoration: baseButtonVariantStyles.textDecoration,
+    textDecorationColor: baseButtonVariantStyles.color,
+    textDecorationThickness: "1px" // Base thickness
+    ,
     textUnderlineOffset: "2px",
     transition: "all 0.2s ease",
-    isExternal: isExternal,
-    _hover: {
+    // Apply Link-specific hover/active styles if needed, or let Element's _hover/_active handle it
+    _hover: Object.assign({}, _hover, {
       textDecorationThickness: '2px'
-    }
+    }),
+    _active: Object.assign({}, _active, {
+      textDecorationThickness: '2px'
+    })
   }, views == null ? void 0 : views.link), content)) : content);
 };
 
@@ -3955,30 +4057,29 @@ var CardShapes = {
  * Get card variants with consistent styling based on theme mode
  */
 var getCardVariants = themeMode => {
-  var isDarkMode = themeMode === 'dark';
   return {
     default: {
-      backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+      backgroundColor: 'color.white',
       border: 'none',
       transition: 'all 0.2s ease'
     },
     outlined: {
-      backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: isDarkMode ? 'color.gray.700' : 'color.gray.200',
+      borderColor: 'color.gray.200',
       transition: 'all 0.2s ease',
       _hover: {
-        borderColor: isDarkMode ? 'color.gray.600' : 'color.gray.300'
+        borderColor: '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)',
+      backgroundColor: 'color.white',
+      boxShadow: '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)',
+        boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.12)',
         transform: 'translateY(-2px)'
       }
     }
@@ -3989,14 +4090,10 @@ var getCardVariants = themeMode => {
  * @param theme - Theme object from useTheme hook
  */
 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',
+      backgroundColor: 'color.white',
+      color: 'color.black',
       borderRadius: '8px',
       overflow: 'hidden',
       transition: 'all 0.2s ease'
@@ -4005,17 +4102,18 @@ var getDefaultCardStyles = theme => {
       padding: '16px',
       borderBottomWidth: '1px',
       borderBottomStyle: 'solid',
-      borderBottomColor: isDarkMode ? 'color.gray.700' : 'color.gray.200'
+      borderBottomColor: 'color.gray.200',
+      color: 'color.black'
     },
     content: {
       padding: '16px',
-      color: isDarkMode ? 'color.gray.100' : 'color.gray.900'
+      color: 'color.black'
     },
     footer: {
       padding: '16px',
       borderTopWidth: '1px',
       borderTopStyle: 'solid',
-      borderTopColor: isDarkMode ? 'color.gray.700' : 'color.gray.200'
+      borderTopColor: 'color.gray.200'
     }
   };
 };
@@ -4040,7 +4138,7 @@ var CardHeader = _ref => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles(theme).header;
+  var defaultStyles = getDefaultCardStyles().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)
@@ -4058,7 +4156,7 @@ var CardContent = _ref2 => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles(theme).content;
+  var defaultStyles = getDefaultCardStyles().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)
@@ -4076,7 +4174,7 @@ var CardFooter = _ref3 => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles(theme).footer;
+  var defaultStyles = getDefaultCardStyles().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)
@@ -4099,7 +4197,7 @@ var CardView = _ref4 => {
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var theme = appStudio.useTheme();
-  var defaultStyles = getDefaultCardStyles(theme);
+  var defaultStyles = getDefaultCardStyles();
   // Prepare context value, merging default styles with user's `views` overrides
   var contextValue = React.useMemo(() => ({
     styles: {
@@ -4112,12 +4210,7 @@ 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];
+  var variantStyles = getCardVariants()[variant];
   // Merge styles for the root element
   var mergedRootProps = Object.assign({
     width: isFullWidth ? '100%' : 'auto',
@@ -4364,7 +4457,7 @@ var ActiveIndicatorStyles = {
   },
   number: {
     backgroundColor: 'theme.primary',
-    color: 'white'
+    color: 'color.white'
   }
 };
 var NavigationButtonStyles = {
@@ -4439,7 +4532,7 @@ var _excluded$c = ["children", "isActive", "views"],
   _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", "themeMode"];
+  _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
 var CarouselSlide = _ref => {
   var {
       children,
@@ -4809,7 +4902,7 @@ var LegendTextStyles = {
 // Default styles for tooltip
 var TooltipStyles = {
   position: 'absolute',
-  backgroundColor: 'white',
+  backgroundColor: 'color.white',
   padding: '8px 12px',
   borderRadius: '4px',
   boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
@@ -5646,7 +5739,7 @@ var ContextMenuSizes = {
 };
 var ContextMenuVariants = {
   default: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     color: 'color.gray.800'
   },
   filled: {
@@ -5654,7 +5747,7 @@ var ContextMenuVariants = {
     color: 'color.gray.800'
   },
   outline: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
@@ -6324,7 +6417,7 @@ var InputVariants = {
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     transition: 'all 0.2s ease',
     _hover: {
       borderColor: 'color.gray.300'
@@ -6332,17 +6425,6 @@ var InputVariants = {
     _focus: {
       borderColor: 'theme.primary',
       boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.2)'
-    },
-    '@media (prefers-color-scheme: dark)': {
-      backgroundColor: 'color.gray.800',
-      borderColor: 'color.gray.700',
-      _hover: {
-        borderColor: 'color.gray.600'
-      },
-      _focus: {
-        borderColor: 'theme.primary',
-        boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.4)'
-      }
     }
   },
   default: {
@@ -6351,23 +6433,13 @@ var InputVariants = {
     borderBottomStyle: 'solid',
     borderBottomColor: 'color.gray.200',
     borderRadius: 0,
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     transition: 'all 0.2s ease',
     _hover: {
       borderBottomColor: 'color.gray.300'
     },
     _focus: {
       borderBottomColor: 'theme.primary'
-    },
-    '@media (prefers-color-scheme: dark)': {
-      backgroundColor: 'color.gray.800',
-      borderBottomColor: 'color.gray.700',
-      _hover: {
-        borderBottomColor: 'color.gray.600'
-      },
-      _focus: {
-        borderBottomColor: 'theme.primary'
-      }
     }
   },
   none: {
@@ -6499,7 +6571,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
 var LabelView = _ref => {
   var {
       children,
@@ -6709,11 +6781,7 @@ var SelectBox = _ref2 => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field'], views['text']);
   var option = options.length > 0 && options.find(option => option.value === value);
   return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
@@ -6772,9 +6840,7 @@ var HiddenSelect = _ref4 => {
 var DropDown = _ref5 => {
   var {
     size,
-    views = {
-      dropDown: {}
-    },
+    views = {},
     options,
     callback = () => {},
     highlightedIndex,
@@ -6803,7 +6869,7 @@ var DropDown = _ref5 => {
     ,
     overflowY: "auto",
     zIndex: 1000,
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     borderRadius: "8px" // Consistent with design system (rounded-md)
     ,
     borderWidth: "1px",
@@ -6824,7 +6890,7 @@ var DropDown = _ref5 => {
         borderRadius: '4px'
       }
     }
-  }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+  }, shadow, views == null ? void 0 : views.dropDown), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
     key: option.value,
     size: size,
     style: views['text'],
@@ -7134,7 +7200,7 @@ var ColorSchemes = {
   }
 };
 
-var _excluded$p = ["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", "isChecked", "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));
@@ -7512,7 +7578,9 @@ var TextFieldView = _ref => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
+  var IconColor = getColor('color.blueGray.700', {
+    themeMode: elementMode ? elementMode : themeMode
+  });
   var showLabel = !!(isFocused && label);
   /**
    * Styles for the input field
@@ -7541,11 +7609,7 @@ var TextFieldView = _ref => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'text',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field']);
   var handleFocus = () => {
     setIsFocused(true);
@@ -7702,19 +7766,19 @@ var VariantStyles = {
   selected: {
     backgroundColor: 'theme.primary',
     borderColor: 'theme.primary',
-    color: 'white'
+    color: 'color.white'
   },
   unselected: {
-    backgroundColor: 'transparent',
+    backgroundColor: 'color.white',
     borderWidth: '2px',
     borderStyle: 'solid',
     borderColor: 'color.gray.300',
-    color: 'transparent'
+    color: 'color.black'
   },
   indeterminate: {
     backgroundColor: 'theme.primary',
     borderColor: 'theme.primary',
-    color: 'white'
+    color: 'color.white'
   }
 };
 /**
@@ -9448,7 +9512,7 @@ var DropDown$1 = _ref4 => {
     borderRadius: 4,
     position: "absolute",
     flexDirection: "column",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
   }, views['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
     key: option.code,
@@ -9498,7 +9562,9 @@ var CountryPickerView = _ref5 => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
+  var IconColor = getColor('color.blueGray.700', {
+    themeMode: elementMode ? elementMode : themeMode
+  });
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
   var handleCallback = option => {
@@ -9526,8 +9592,8 @@ var CountryPickerView = _ref5 => {
   var showLabel = !!(label && (isFocused || value));
   var fieldStyles = Object.assign({
     margin: 0,
-    paddingVerical: 8,
-    paddingHorizonatl: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
     width: '100%',
     heigth: '100%',
     border: 'none',
@@ -9875,7 +9941,7 @@ var ComboBoxView = _ref => {
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     cursor: "pointer",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
     padding: "12px",
     display: "flex",
@@ -9897,7 +9963,7 @@ var ComboBoxView = _ref => {
   }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     id: "combobox-dropdown",
     position: "absolute",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     boxShadow: "rgba(0, 0 ,0 ,0.16) 0px 1px 4px",
     width: "100%",
     overflowY: "auto",
@@ -9991,6 +10057,12 @@ var useOTPInputState = _ref => {
     onChange,
     onChangeText,
     onComplete,
+    onKeyDown,
+    onKeyPress,
+    onBlur,
+    onFocus,
+    isReadOnly,
+    isDisabled,
     pattern,
     stepValues,
     pasteTransformer
@@ -10104,6 +10176,16 @@ var useOTPInputState = _ref => {
   var handleKeyDown = React.useCallback(_ => {
     // Handle special keys like backspace, arrows, etc.
     // This is handled by the browser for the single input
+    if (onKeyDown) {
+      onKeyDown(_);
+    }
+  }, []);
+  var handleKeyPress = React.useCallback(e => {
+    // Handle key press events
+    // This is handled by the browser for the single input
+    if (onKeyPress) {
+      onKeyPress(e);
+    }
   }, []);
   var handlePaste = React.useCallback(e => {
     var input = inputRef.current;
@@ -10260,11 +10342,12 @@ var useOTPInputState = _ref => {
     handleFocus,
     handleBlur,
     handleKeyDown,
+    handleKeyPress,
     handlePaste
   };
 };
 
-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"];
+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", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
 // Create a context for OTP input slots
 var OTPInputContext = /*#__PURE__*/React.createContext({
   slots: [],
@@ -10272,7 +10355,7 @@ var OTPInputContext = /*#__PURE__*/React.createContext({
   isHovering: false
 });
 // CSS for noscript fallback
-var NOSCRIPT_CSS_FALLBACK = "\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}";
+var NOSCRIPT_CSS_FALLBACK = "\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n";
 // Helper function to safely insert CSS rules
 function safeInsertRule(sheet, rule) {
   try {
@@ -10520,7 +10603,8 @@ var OTPInputComponent = props => {
     handleFocus,
     handleBlur,
     handleKeyDown,
-    handlePaste
+    handlePaste,
+    handleKeyPress
   } = useOTPInputState(props);
   // Use the controlled value if it exists, otherwise use the internal state value
   var displayValue = controlledValue !== undefined ? controlledValue : value;
@@ -10542,6 +10626,7 @@ var OTPInputComponent = props => {
     handleFocus: handleFocus,
     handleBlur: handleBlur,
     handleKeyDown: handleKeyDown,
+    handleKeyPress: handleKeyPress,
     handlePaste: handlePaste,
     stepValues: props.stepValues
   }));
@@ -11095,7 +11180,7 @@ var OrientationStyles = {
   }
 };
 
-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 _excluded$F = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
 var SliderView = _ref => {
   var _views$tooltip, _views$tooltip2;
   var {
@@ -11111,7 +11196,7 @@ var SliderView = _ref => {
       isDisabled = false,
       showValue = false,
       showTooltip = false,
-      colorScheme = 'theme.primary',
+      backgroundColor = 'theme.primary',
       label,
       helperText,
       themeMode: elementMode,
@@ -11143,9 +11228,15 @@ var SliderView = _ref => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var themeColor = getColor(colorScheme, elementMode || themeMode);
-  var disabledColor = getColor('theme.disabled', elementMode || themeMode);
-  var trackColor = getColor(SliderVariants[variant].backgroundColor, elementMode || themeMode);
+  var themeColor = getColor(backgroundColor, {
+    themeMode: elementMode || themeMode
+  });
+  var disabledColor = getColor('theme.disabled', {
+    themeMode: elementMode || themeMode
+  });
+  var trackColor = getColor(SliderVariants[variant].backgroundColor, {
+    themeMode: elementMode || themeMode
+  });
   var isVertical = orientation === 'vertical';
   var {
     trackCrossAxisSize,
@@ -11215,7 +11306,7 @@ var SliderView = _ref => {
     top: "50%",
     left: thumbPositionPercent + "%",
     borderRadius: "50%",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
     border: "2px solid " + (isDisabled ? disabledColor : themeColor),
     transition: isDragging ? 'none' : 'transform 0.1s ease-in-out',
@@ -11959,12 +12050,12 @@ var UploadView = _ref => {
   } = _ref;
   var finalPreviewUrl = externalPreviewUrl || previewUrl;
   // Debug log to help troubleshoot
-  console.log('Uploader state:', {
-    fileType,
-    finalPreviewUrl,
-    selectedFile: selectedFile == null ? void 0 : selectedFile.name,
-    progress
-  });
+  // console.log('Uploader state:', {
+  //   fileType,
+  //   finalPreviewUrl,
+  //   selectedFile: selectedFile?.name,
+  //   progress,
+  // });
   return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     onClick: handleClick,
     cursor: "pointer",
@@ -12215,7 +12306,7 @@ var ModalTypography = {
 };
 
 var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views"],
+  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
   _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
   _excluded5$3 = ["children", "views"];
@@ -12283,7 +12374,7 @@ var ModalContainer = _ref2 => {
   };
   return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     cursor: "default",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     width: isFullScreen ? '100%' : 600,
     height: isFullScreen ? '100%' : 'fit-content',
     onClick: handleClick,
@@ -13101,7 +13192,9 @@ var useTabsState = (propTabs, initialTabValue) => {
         return foundTab;
       }
       // Warn if initialTabValue is provided but not found
-      console.warn("Tabs: initialTabValue \"" + initialTabValue + "\" not found in tabs. Defaulting to the first tab.");
+      // console.warn(
+      //   `Tabs: initialTabValue "${initialTabValue}" not found in tabs. Defaulting to the first tab.`
+      // );
     }
     return propTabs[0]; // Default to the first tab
   };
@@ -13688,7 +13781,7 @@ var DropdownMenuSizes = {
 };
 var DropdownMenuVariants = {
   default: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     color: 'color.gray.800'
   },
   filled: {
@@ -13696,7 +13789,7 @@ var DropdownMenuVariants = {
     color: 'color.gray.800'
   },
   outline: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
@@ -14576,7 +14669,7 @@ var MenubarContent = _ref5 => {
     position: "absolute",
     zIndex: 1000,
     minWidth: "200px",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     borderRadius: 4,
     boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
     overflow: "hidden"
@@ -14828,7 +14921,7 @@ var PaginationShapes = {
 };
 var ActivePageButtonStyles = {
   backgroundColor: 'color.blue.500',
-  color: 'white',
+  color: 'color.white',
   _hover: {
     backgroundColor: 'color.blue.600'
   }
@@ -14981,7 +15074,7 @@ var PaginationView = _ref => {
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: "color.gray.200",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     cursor: "pointer",
     value: pageSize,
     onChange: handlePageSizeChange
@@ -15257,7 +15350,7 @@ var SidebarSizes = {
 var getSidebar = themeMode => {
   return {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       color: 'color.gray.800',
       transition: 'all 0.2s ease'
     },
@@ -15267,7 +15360,7 @@ var getSidebar = themeMode => {
       transition: 'all 0.2s ease'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -15280,7 +15373,7 @@ var getSidebar = themeMode => {
       transition: 'all 0.2s ease'
     },
     elevated: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
       color: 'color.gray.800',
       transition: 'all 0.2s ease'
@@ -16009,7 +16102,7 @@ var HandleIconStyles = {
 
 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"];
+  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
   orientation: 'horizontal',
@@ -16805,6 +16898,16 @@ var Toast = /*#__PURE__*/Object.assign(ToastComponent, {
 // Export the hook for component usage
 var useToast$1 = useToast;
 
+// Default filter function defined outside the hook to avoid recreating it on each render
+var defaultFilterFn = (value, item) => {
+  var _item$description, _item$keywords;
+  if (!value) return true;
+  var searchValue = value.toLowerCase();
+  var matchesName = item.name.toLowerCase().includes(searchValue);
+  var matchesDescription = ((_item$description = item.description) == null ? void 0 : _item$description.toLowerCase().includes(searchValue)) || false;
+  var matchesKeywords = ((_item$keywords = item.keywords) == null ? void 0 : _item$keywords.some(keyword => keyword.toLowerCase().includes(searchValue))) || false;
+  return matchesName || matchesDescription || matchesKeywords;
+};
 var useCommandState = _ref => {
   var {
     open,
@@ -16813,46 +16916,36 @@ var useCommandState = _ref => {
     commands = [],
     filter
   } = _ref;
-  // Combine commands from groups and flat list
-  var allCommands = React.useCallback(() => {
-    var groupCommands = groups.flatMap(group => group.commands);
-    return [...groupCommands, ...commands];
-  }, [groups, commands]);
   // State for search input
   var [search, setSearch] = React.useState('');
   // State for selected item index
   var [selectedIndex, setSelectedIndex] = React.useState(0);
   // Ref for the command list element
   var listRef = React.useRef(null);
-  // Default filter function
-  var defaultFilter = (value, item) => {
-    var _item$description, _item$keywords;
-    if (!value) return true;
-    var searchValue = value.toLowerCase();
-    var matchesName = item.name.toLowerCase().includes(searchValue);
-    var matchesDescription = ((_item$description = item.description) == null ? void 0 : _item$description.toLowerCase().includes(searchValue)) || false;
-    var matchesKeywords = ((_item$keywords = item.keywords) == null ? void 0 : _item$keywords.some(keyword => keyword.toLowerCase().includes(searchValue))) || false;
-    return matchesName || matchesDescription || matchesKeywords;
-  };
-  // Filter commands based on search
-  var filterCommands = React.useCallback(searchValue => {
-    var filterFn = filter || defaultFilter;
-    return allCommands().filter(item => filterFn(searchValue, item));
-  }, [allCommands, filter, defaultFilter]);
-  // Filtered commands based on search
-  var [filteredCommands, setFilteredCommands] = React.useState(allCommands());
-  // Filtered groups based on search
-  var filteredGroups = React.useCallback(() => {
+  // Use the provided filter or fall back to the default
+  var filterFn = React.useMemo(() => filter || defaultFilterFn, [filter]);
+  // Combine and memoize all commands from groups and flat list
+  var allCommands = React.useMemo(() => {
+    var groupCommands = groups.flatMap(group => group.commands);
+    return [...groupCommands, ...commands];
+  }, [groups, commands]);
+  // Filter and memoize commands based on search
+  var filteredCommands = React.useMemo(() => {
+    if (!search.trim()) return allCommands;
+    return allCommands.filter(item => filterFn(search, item));
+  }, [allCommands, search, filterFn]);
+  // Filter and memoize groups based on search
+  var filteredGroups = React.useMemo(() => {
     if (!search) return groups;
-    return groups.map(group => Object.assign({}, group, {
-      commands: group.commands.filter(command => (filter || defaultFilter)(search, command))
-    })).filter(group => group.commands.length > 0);
-  }, [groups, search, filter, defaultFilter]);
-  // Update filtered commands when search changes
+    var filterFn = filter || defaultFilterFn;
+    return groups.map(g => Object.assign({}, g, {
+      commands: g.commands.filter(c => filterFn(search, c))
+    })).filter(g => g.commands.length);
+  }, [groups, search, filter]);
+  // Reset selected index when filtered commands change
   React.useEffect(() => {
-    setFilteredCommands(filterCommands(search));
     setSelectedIndex(0);
-  }, [search, filterCommands]);
+  }, [filteredCommands.length]);
   // Handle keyboard navigation
   var handleKeyDown = React.useCallback(e => {
     if (!open) return;
@@ -16902,6 +16995,9 @@ var useCommandState = _ref => {
   React.useEffect(() => {
     if (open) {
       setSelectedIndex(0);
+    } else {
+      // Clear search when closed
+      setSearch('');
     }
   }, [open]);
   return {
@@ -16910,7 +17006,7 @@ var useCommandState = _ref => {
     selectedIndex,
     setSelectedIndex,
     filteredCommands,
-    filteredGroups: filteredGroups(),
+    filteredGroups,
     listRef
   };
 };
@@ -16932,7 +17028,7 @@ var CommandSizes = {
 var getCommand = themeMode => {
   return {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -16946,7 +17042,7 @@ var getCommand = themeMode => {
       boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '2px',
       borderStyle: 'solid',
       borderColor: 'color.gray.300',
@@ -17179,26 +17275,21 @@ var CommandView = _ref7 => {
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded6$3);
   if (!open) return null;
-  var handleItemSelect = item => {
-    if (!item.disabled) {
-      item.onSelect();
-      onOpenChange(false);
-      setSearch('');
-    }
-  };
-  var handleBackdropClick = e => {
-    if (e.target === e.currentTarget) {
-      onOpenChange(false);
-    }
-  };
-  var contextValue = {
+  var handleItemSelect = React__default.useCallback(item => {
+    if (item.disabled) return;
+    item.onSelect();
+    onOpenChange(false);
+    setSearch('');
+  }, [onOpenChange, setSearch]);
+  var handleBackdropClick = React__default.useCallback(e => e.target === e.currentTarget && onOpenChange(false), [onOpenChange]);
+  var contextValue = React__default.useMemo(() => ({
     search,
     setSearch,
     selectedIndex,
     setSelectedIndex,
     filteredCommands,
     onSelect: handleItemSelect
-  };
+  }), [search, selectedIndex, filteredCommands, handleItemSelect, setSearch, setSelectedIndex]);
   var hasGroups = groups.length > 0;
   // const hasCommands = commands.length > 0;
   var isEmpty = filteredCommands.length === 0;