@app-studio/web 0.8.81 → 0.8.83

package/dist/web.umd.development.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.ends-with.js'), 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')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.ends-with.js'), 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')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js'], factory) :
   (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, global.reactRouterDom, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand));
 }(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, reactRouterDom, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
@@ -2792,71 +2792,70 @@
    * 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'
         }
       }
     };
@@ -2879,8 +2878,7 @@
     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;
@@ -3209,11 +3207,10 @@
    * 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',
@@ -3239,7 +3236,7 @@
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: isDarkMode ? 'color.gray.400' : 'color.gray.500',
+        color: 'color.gray.500',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'transparent',
@@ -3267,8 +3264,7 @@
     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
@@ -3530,7 +3526,9 @@
       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(() => {
@@ -3577,7 +3575,9 @@
       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(() => {
@@ -3623,7 +3623,9 @@
       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(() => {
@@ -3690,9 +3692,10 @@
   // 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;
@@ -3714,13 +3717,16 @@
         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 {
@@ -3732,81 +3738,170 @@
     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
     };
@@ -3819,62 +3914,68 @@
       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);
   };
 
@@ -3927,30 +4028,29 @@
    * 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)'
         }
       }
@@ -3961,14 +4061,10 @@
    * @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'
@@ -3977,17 +4073,18 @@
         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'
       }
     };
   };
@@ -4012,7 +4109,7 @@
     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)
@@ -4030,7 +4127,7 @@
     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)
@@ -4048,7 +4145,7 @@
     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)
@@ -4071,7 +4168,7 @@
       } = _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: {
@@ -4084,12 +4181,7 @@
     // 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',
@@ -4336,7 +4428,7 @@
     },
     number: {
       backgroundColor: 'theme.primary',
-      color: 'white'
+      color: 'color.white'
     }
   };
   var NavigationButtonStyles = {
@@ -4411,7 +4503,7 @@
     _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,
@@ -4781,7 +4873,7 @@
   // 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)',
@@ -5618,7 +5710,7 @@
   };
   var ContextMenuVariants = {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       color: 'color.gray.800'
     },
     filled: {
@@ -5626,7 +5718,7 @@
       color: 'color.gray.800'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -6296,7 +6388,7 @@
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       transition: 'all 0.2s ease',
       _hover: {
         borderColor: 'color.gray.300'
@@ -6304,17 +6396,6 @@
       _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: {
@@ -6323,23 +6404,13 @@
       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: {
@@ -6471,7 +6542,7 @@
     }
   };
 
-  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,
@@ -6681,11 +6752,7 @@
       // 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 :
@@ -6744,9 +6811,7 @@
   var DropDown = _ref5 => {
     var {
       size,
-      views = {
-        dropDown: {}
-      },
+      views = {},
       options,
       callback = () => {},
       highlightedIndex,
@@ -6775,7 +6840,7 @@
       ,
       overflowY: "auto",
       zIndex: 1000,
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       borderRadius: "8px" // Consistent with design system (rounded-md)
       ,
       borderWidth: "1px",
@@ -6796,7 +6861,7 @@
           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'],
@@ -7106,7 +7171,7 @@
     }
   };
 
-  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));
@@ -7484,7 +7549,9 @@
       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
@@ -7513,11 +7580,7 @@
       // 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);
@@ -7674,19 +7737,19 @@
     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'
     }
   };
   /**
@@ -9420,7 +9483,7 @@
       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,
@@ -9470,7 +9533,9 @@
       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 => {
@@ -9498,8 +9563,8 @@
     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',
@@ -9847,7 +9912,7 @@
       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",
@@ -9869,7 +9934,7 @@
     }, 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",
@@ -9963,6 +10028,12 @@
       onChange,
       onChangeText,
       onComplete,
+      onKeyDown,
+      onKeyPress,
+      onBlur,
+      onFocus,
+      isReadOnly,
+      isDisabled,
       pattern,
       stepValues,
       pasteTransformer
@@ -10076,6 +10147,16 @@
     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;
@@ -10232,11 +10313,12 @@
       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: [],
@@ -10244,7 +10326,7 @@
     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 {
@@ -10492,7 +10574,8 @@
       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;
@@ -10514,6 +10597,7 @@
       handleFocus: handleFocus,
       handleBlur: handleBlur,
       handleKeyDown: handleKeyDown,
+      handleKeyPress: handleKeyPress,
       handlePaste: handlePaste,
       stepValues: props.stepValues
     }));
@@ -11067,7 +11151,7 @@
     }
   };
 
-  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 {
@@ -11083,7 +11167,7 @@
         isDisabled = false,
         showValue = false,
         showTooltip = false,
-        colorScheme = 'theme.primary',
+        backgroundColor = 'theme.primary',
         label,
         helperText,
         themeMode: elementMode,
@@ -11115,9 +11199,15 @@
       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,
@@ -11187,7 +11277,7 @@
       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',
@@ -11931,12 +12021,12 @@
     } = _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",
@@ -12187,7 +12277,7 @@
   };
 
   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"];
@@ -12255,7 +12345,7 @@
     };
     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,
@@ -13073,7 +13163,9 @@
           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
     };
@@ -13660,7 +13752,7 @@
   };
   var DropdownMenuVariants = {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       color: 'color.gray.800'
     },
     filled: {
@@ -13668,7 +13760,7 @@
       color: 'color.gray.800'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -14548,7 +14640,7 @@
       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"
@@ -14800,7 +14892,7 @@
   };
   var ActivePageButtonStyles = {
     backgroundColor: 'color.blue.500',
-    color: 'white',
+    color: 'color.white',
     _hover: {
       backgroundColor: 'color.blue.600'
     }
@@ -14953,7 +15045,7 @@
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: "color.gray.200",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       cursor: "pointer",
       value: pageSize,
       onChange: handlePageSizeChange
@@ -15229,7 +15321,7 @@
   var getSidebar = themeMode => {
     return {
       default: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         color: 'color.gray.800',
         transition: 'all 0.2s ease'
       },
@@ -15239,7 +15331,7 @@
         transition: 'all 0.2s ease'
       },
       outline: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'color.gray.200',
@@ -15252,7 +15344,7 @@
         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'
@@ -15981,7 +16073,7 @@
 
   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',
@@ -16777,6 +16869,16 @@
   // 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,
@@ -16785,46 +16887,36 @@
       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;
@@ -16874,6 +16966,9 @@
     React.useEffect(() => {
       if (open) {
         setSelectedIndex(0);
+      } else {
+        // Clear search when closed
+        setSearch('');
       }
     }, [open]);
     return {
@@ -16882,7 +16977,7 @@
       selectedIndex,
       setSelectedIndex,
       filteredCommands,
-      filteredGroups: filteredGroups(),
+      filteredGroups,
       listRef
     };
   };
@@ -16904,7 +16999,7 @@
   var getCommand = themeMode => {
     return {
       default: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'color.gray.200',
@@ -16918,7 +17013,7 @@
         boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
       },
       outline: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         borderWidth: '2px',
         borderStyle: 'solid',
         borderColor: 'color.gray.300',
@@ -17151,26 +17246,21 @@
       } = _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;