@app-studio/web 0.8.85 → 0.8.87

package/dist/web.umd.development.js

@@ -1,10 +1,11 @@
 (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'), 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';
+  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('contrast'), 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', 'contrast', '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, global.contrast, 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, contrast, 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';
 
   var React__default = 'default' in React ? React['default'] : React;
+  contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
 
   function _objectWithoutPropertiesLoose(r, e) {
@@ -3351,18 +3352,21 @@
     };
     return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
       to: to,
-      target: isExternal ? '_blank' : '_self'
-    }, /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      target: isExternal ? '_blank' : '_self',
+      style: {
+        textDecoration: 'inherit',
+        color: 'inherit'
+      }
+    }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       onMouseEnter: handleHover,
       onMouseLeave: handleHover,
-      textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-    }, views.text, props), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 3,
       alignItems: "center",
-      flexWrap: "nowrap"
-    }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
+      flexWrap: "nowrap",
+      textDecoration: 'none'
+    }, views.text, props), children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
       widthHeight: IconSizes[iconSize]
-    }))));
+    })));
   };
 
   // Defines the 'LinkComponent' as a functional component with props typed to 'LinkProps'
@@ -3375,125 +3379,6 @@
   // Exports 'LinkComponent' as 'Link' for use in other parts of the application
   var Link = LinkComponent;
 
-  /**
-   * Button Styles
-   *
-   * Defines the styles for the Button component following the design guidelines:
-   * - Typography: Inter/Geist font, specific sizes/weights
-   * - Spacing: 4px grid system
-   * - Colors: Neutral palette with semantic colors
-   * - Rounded corners: Consistent border radius
-   * - Transitions: Subtle animations
-   */
-  /**
-   * Button sizes following the 4px grid system
-   */
-  var ButtonSizes = {
-    xs: {
-      // Height: 24px (6 × 4px)
-      height: 24,
-      paddingTop: 2,
-      paddingBottom: 2,
-      paddingLeft: 6,
-      paddingRight: 6,
-      // Typography
-      fontSize: 12,
-      fontWeight: '500',
-      lineHeight: 20,
-      letterSpacing: '-0.01em'
-    },
-    sm: {
-      // Height: 32px (8 × 4px)
-      height: 32,
-      paddingTop: 6,
-      paddingBottom: 6,
-      paddingLeft: 12,
-      paddingRight: 12,
-      // Typography
-      fontSize: 14,
-      fontWeight: '500',
-      lineHeight: 20,
-      letterSpacing: '-0.01em'
-    },
-    md: {
-      // Height: 40px (10 × 4px) - standard height for interactive elements
-      height: 40,
-      paddingTop: 8,
-      paddingBottom: 8,
-      paddingLeft: 16,
-      paddingRight: 16,
-      // Typography
-      fontSize: 14,
-      fontWeight: '500',
-      lineHeight: 24,
-      letterSpacing: '-0.01em'
-    },
-    lg: {
-      // Height: 48px (12 × 4px)
-      height: 48,
-      paddingTop: 12,
-      paddingBottom: 12,
-      paddingLeft: 20,
-      paddingRight: 20,
-      // Typography
-      fontSize: 16,
-      fontWeight: '500',
-      lineHeight: 24,
-      letterSpacing: '-0.01em'
-    },
-    xl: {
-      // Height: 60px (15 × 4px)
-      height: 60,
-      paddingTop: 16,
-      paddingBottom: 16,
-      paddingLeft: 28,
-      paddingRight: 28,
-      // Typography
-      fontSize: 18,
-      fontWeight: '500',
-      lineHeight: 28,
-      letterSpacing: '-0.01em'
-    }
-  };
-  /**
-   * Button shapes with consistent border radius
-   */
-  var ButtonShapes = {
-    sharp: 0,
-    rounded: 8,
-    pillShaped: 999
-  };
-  /**
-   * Icon sizes for different button sizes
-   */
-  var IconSizes$1 = {
-    xs: {
-      width: 16,
-      height: 16,
-      padding: 6
-    },
-    sm: {
-      width: 20,
-      height: 20,
-      padding: 6
-    },
-    md: {
-      width: 24,
-      height: 24,
-      padding: 8
-    },
-    lg: {
-      width: 24,
-      height: 24,
-      padding: 12
-    },
-    xl: {
-      width: 28,
-      height: 28,
-      padding: 14
-    }
-  };
-
   // Defines a mapping of spinning speed labels to their respective duration in seconds for the Loader component animations.
   // Sets up a scale of sizes, mapping size labels to numerical values to be used for Loader component dimensions.
   var DefaultSizes = {
@@ -3692,290 +3577,312 @@
   // 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", "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');
+  /**
+   * Button Styles
+   *
+   * Defines the styles for the Button component following the design guidelines:
+   * - Typography: Inter/Geist font, specific sizes/weights
+   * - Spacing: 4px grid system
+   * - Colors: Neutral palette with semantic colors
+   * - Rounded corners: Consistent border radius
+   * - Transitions: Subtle animations
+   */
+  /**
+   * Button sizes following the 4px grid system
+   */
+  var ButtonSizes = {
+    xs: {
+      // Height: 24px (6 × 4px)
+      minHeight: 4 * 4,
+      paddingTop: 2,
+      paddingBottom: 2,
+      paddingLeft: 4,
+      paddingRight: 4,
+      // Typography
+      fontSize: 12,
+      fontWeight: '500',
+      lineHeight: 20,
+      letterSpacing: '-0.01em'
+    },
+    sm: {
+      // Height: 32px (8 × 4px)
+      minHeight: 6 * 4,
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 12,
+      paddingRight: 12,
+      // Typography
+      fontSize: 12,
+      fontWeight: '500',
+      lineHeight: 12,
+      letterSpacing: '-0.01em'
+    },
+    md: {
+      // Height: 40px (10 × 4px) - standard height for interactive elements
+      minHeight: 8 * 4,
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+      // Typography
+      fontSize: 16,
+      fontWeight: '500',
+      lineHeight: 16,
+      letterSpacing: '-0.01em'
+    },
+    lg: {
+      minHeight: 10 * 4,
+      paddingTop: 10,
+      paddingBottom: 10,
+      paddingLeft: 20,
+      paddingRight: 20,
+      // Typography
+      fontSize: 16,
+      fontWeight: '500',
+      lineHeight: 20,
+      letterSpacing: '-0.01em'
+    },
+    xl: {
+      // Height: 60px (15 × 4px)
+      minHeight: 12 * 4,
+      paddingTop: 12,
+      paddingBottom: 12,
+      paddingLeft: 24,
+      paddingRight: 24,
+      // Typography
+      fontSize: 18,
+      fontWeight: '500',
+      lineHeight: 24,
+      letterSpacing: '-0.01em'
+    }
+  };
+  /**
+   * Button shapes with consistent border radius
+   */
+  var ButtonShapes = {
+    sharp: 0,
+    rounded: 8,
+    pillShaped: 999
+  };
+  /**
+   * Icon sizes for different button sizes
+   */
+  var IconSizes$1 = {
+    xs: {
+      width: 16,
+      height: 16,
+      padding: 6
+    },
+    sm: {
+      width: 20,
+      height: 20,
+      padding: 6
+    },
+    md: {
+      width: 24,
+      height: 24,
+      padding: 8
+    },
+    lg: {
+      width: 24,
+      height: 24,
+      padding: 12
+    },
+    xl: {
+      width: 28,
+      height: 28,
+      padding: 14
+    }
+  };
+  var getButtonVariants = (color, isLight) => ({
+    filled: {
+      backgroundColor: color,
+      color: isLight ? 'color.black' : 'color.white',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      _hover: {
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
+      },
+      _active: {
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
+      },
+      transition: 'all 0.2s ease'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: color,
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'light.black' : 'light.white',
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'light.black' : 'light.white',
+        transform: 'translateY(0)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
+      },
+      transition: 'all 0.2s ease'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'light.black' : 'light.white',
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'light.black' : 'light.white',
+        transform: 'translateY(0)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
+      },
+      transition: 'all 0.2s ease'
+    },
+    link: {
+      backgroundColor: 'transparent',
+      color: isLight ? color : 'light.black',
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px',
+      _hover: {
+        textDecorationThickness: '2px'
+      },
+      _active: {
+        textDecorationThickness: '2px'
+      },
+      transition: 'all 0.2s ease'
+    }
+  });
+
+  var _excluded$a = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "themeMode"];
   var ButtonView = _ref => {
-    var _props$onClick;
+    var _ref2;
     var {
-        icon,
-        shadow,
-        children,
-        ariaLabel,
-        to,
-        isAuto = false,
-        isFilled = false,
-        isIconRounded = false,
-        isLoading = false,
-        isDisabled = false,
-        size = 'md',
+        /* behaviour */
         variant = 'filled',
-        iconPosition = 'left',
+        size = 'md',
         shape = 'rounded',
-        onClick = () => {},
-        loaderProps = {},
+        iconPosition = 'left',
         loaderPosition = 'left',
-        effect = 'default' // 'default', 'hover', 'reverse'
+        backgroundColor,
+        // primary candidate for main color
+        color // 2nd candidate for main color (NOT text‑color)
         ,
-        setIsHovered = () => {},
-        isExternal = false,
-        themeMode: elementMode,
-        // Allow overriding themeMode for this element
-        views,
-        color,
-        // Text color prop
-        backgroundColor = 'theme.primary' // Background color prop
+        isDisabled,
+        isLoading,
+        isIconRounded,
+        /* content */
+        icon,
+        children,
+        /* nav */
+        to,
+        isExternal,
+        /* misc */
+        shadow,
+        onClick,
+        views = {},
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    /* theme helpers */
     var {
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var handleHover = over => setIsHovered(over);
-    var isActive = !(isDisabled || isLoading);
-    var defaultNativeProps = {
-      disabled: !isActive
-    };
-    // 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', {
+    var mode = elementMode != null ? elementMode : themeMode;
+    /* MAIN COLOR – determines the entire palette */
+    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
+    var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
       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'
-        },
-        outline: {
-          backgroundColor: 'transparent',
-          color: resolvedBaseTextColor,
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: resolvedBorderColor
-        },
-        link: {
-          backgroundColor: 'transparent',
-          color: resolvedBg,
-          borderWidth: 0,
-          borderStyle: 'none',
-          borderColor: 'transparent',
-          textDecoration: 'underline'
-        },
-        ghost: {
-          backgroundColor: 'transparent',
-          color: resolvedBaseTextColor,
-          borderWidth: 0,
-          borderStyle: 'none',
-          borderColor: 'transparent'
-        }
-      };
-      // Define the styles applied on hover/active when effect is 'reverse'
-      var reverseHoverActiveStyles = {
-        filled: {
-          backgroundColor: 'transparent',
-          color: resolvedBg,
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: resolvedBg
-        },
-        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 scaleWidth = {
-      width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
-    };
-    var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
-    // Use Horizontal or Vertical container based on icon position
-    var Container = ['left', 'right'].includes(iconPosition) ? appStudio.Horizontal : appStudio.Vertical;
-    // Create the button content with proper spacing and alignment
-    var content = /*#__PURE__*/React__default.createElement(Container, Object.assign({
+    var tone = contrast(mainTone);
+    /* variant palette */
+    var palette = React.useMemo(() => getButtonVariants(mainTone, tone == 'light'), [mainTone, tone]);
+    var base = palette[variant];
+    /* layout helpers */
+    var Wrapper = ['left', 'right'].includes(iconPosition) ? appStudio.Horizontal : appStudio.Vertical;
+    var sizeStyles = ButtonSizes[size];
+    var iconPad = isIconRounded ? IconSizes$1[size] : {};
+    var content = /*#__PURE__*/React__default.createElement(Wrapper, Object.assign({
       gap: 8,
       alignItems: "center",
-      justifyContent: "center"
-    }, views == null ? void 0 : views.content), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
+      justifyContent: "center",
+      color: 'inherit',
+      _hover: {
+        color: 'inherit'
+      }
+    }, sizeStyles, views == null ? void 0 : views.content), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
       size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
-      color: baseButtonVariantStyles.color
+      color: 'inherit',
+      _hover: {
+        color: 'inherit'
+      }
     }, views == null ? void 0 : views.loader))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: baseButtonVariantStyles.color
+      color: 'inherit',
+      _hover: {
+        color: 'inherit'
+      }
     }, 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",
-      color: baseButtonVariantStyles.color
+      color: 'inherit',
+      _hover: {
+        color: 'inherit'
+      }
     }, views == null ? void 0 : views.icon), icon)), isLoading && loaderPosition === 'right' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
       size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
-      color: baseButtonVariantStyles.color
+      color: 'inherit',
+      _hover: {
+        color: 'inherit'
+      }
     }, views == null ? void 0 : views.loader))));
-    // 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: isLink ? 'div' : 'button',
-      type: isLink ? undefined : 'button',
+      as: variant === 'link' && to ? 'div' : 'button',
+      type: variant === 'link' && to ? undefined : 'button',
+      disabled: Boolean(isDisabled || isLoading)
+    }, sizeStyles, iconPad, {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      "aria-label": ariaLabel,
-      // backgroundColor="transparent" // Remove this unless it's intended to override variant styles
+      // width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined}
+      /* visuals */
       borderRadius: ButtonShapes[shape],
-      onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
-      onMouseEnter: () => handleHover(true),
-      onMouseLeave: () => handleHover(false),
-      cursor: isActive ? isLink ? 'pointer' : 'pointer' : 'default',
+      boxShadow: shadow,
       transition: "all 0.2s ease",
-      // 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, 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
-    }, props, views == null ? void 0 : views.container), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+      cursor: isDisabled ? 'default' : 'pointer',
+      onClick: onClick
+    }, base, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
       to: to,
       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",
-      // 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'
-      })
+      color: 'inherit',
+      textDecoration: 'inherit',
+      textDecorationColor: 'inherit'
     }, views == null ? void 0 : views.link), content)) : content);
   };
 
@@ -4095,8 +4002,8 @@
   };
 
   var _excluded$b = ["children", "views", "style", "themeMode"],
-    _excluded2$4 = ["children", "views", "style", "themeMode"],
-    _excluded3$4 = ["children", "views", "style", "themeMode"],
+    _excluded2$3 = ["children", "views", "style", "themeMode"],
+    _excluded3$3 = ["children", "views", "style", "themeMode"],
     _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
   var CardHeader = _ref => {
     var _contextStyles$header;
@@ -4122,7 +4029,7 @@
         children,
         style
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
     var theme = appStudio.useTheme();
     var {
       styles: contextStyles
@@ -4140,7 +4047,7 @@
         children,
         style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
     var theme = appStudio.useTheme();
     var {
       styles: contextStyles
@@ -4499,8 +4406,8 @@
   };
 
   var _excluded$c = ["children", "isActive", "views"],
-    _excluded2$5 = ["views", "children"],
-    _excluded3$5 = ["views", "children"],
+    _excluded2$4 = ["views", "children"],
+    _excluded3$4 = ["views", "children"],
     _excluded4$4 = ["children", "views"],
     _excluded5$1 = ["children", "views", "style"],
     _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
@@ -4526,7 +4433,7 @@
         children // Allow custom content/icon
         // Spread remaining ButtonProps
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
     var {
       goToPrevious,
       canGoPrevious,
@@ -4549,7 +4456,7 @@
         views,
         children
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
     var {
       goToNext,
       canGoNext,
@@ -5793,8 +5700,8 @@
   };
 
   var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-    _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
-    _excluded3$6 = ["item", "children", "onSelect", "isDisabled", "views"],
+    _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
+    _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
     _excluded4$5 = ["views"],
     _excluded5$2 = ["views"],
     _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
@@ -5902,7 +5809,7 @@
         views,
         style // Capture user-provided style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
     var {
       isOpen,
       position: contextPosition,
@@ -5973,7 +5880,7 @@
         isDisabled = false,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
     var {
       activeSubmenuId,
       setActiveSubmenuId,
@@ -6199,7 +6106,7 @@
   ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
   var _excluded$g = ["src", "color", "views", "themeMode"],
-    _excluded2$7 = ["path"];
+    _excluded2$6 = ["path"];
   var FileSVG = _ref => {
     var {
         src,
@@ -6229,7 +6136,7 @@
     var {
         path
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
     return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
       src: path
     }, props));
@@ -6661,8 +6568,8 @@
   };
 
   var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-    _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-    _excluded3$7 = ["option", "size", "removeOption"],
+    _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+    _excluded3$6 = ["option", "size", "removeOption"],
     _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
   /**
    * Item Component
@@ -6779,7 +6686,7 @@
         isReadOnly = false,
         options = []
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
     var handleChange = event => {
       if (onChange) onChange(event);
     };
@@ -6882,7 +6789,7 @@
         size = 'md',
         removeOption = () => {}
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
     var handleClick = () => removeOption(option);
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       gap: 8,
@@ -9414,8 +9321,8 @@
   };
 
   var _excluded$t = ["size"],
-    _excluded2$9 = ["size"],
-    _excluded3$8 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
+    _excluded2$8 = ["size"],
+    _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
   var CountryList = _ref => {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -9426,7 +9333,7 @@
     type: "country"
   }, props)));
   var CountryItem = _ref2 => {
-    var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
+    var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "li"
     }, props));
@@ -9528,7 +9435,7 @@
         },
         themeMode: elementMode
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
     var {
       getColor,
       themeMode
@@ -9779,7 +9686,7 @@
   };
 
   var _excluded$v = ["visibleIcon", "hiddenIcon"],
-    _excluded2$a = ["isVisible", "setIsVisible"];
+    _excluded2$9 = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -9795,7 +9702,7 @@
         isVisible,
         setIsVisible
       } = _usePasswordState,
-      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
+      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
       type: isVisible ? 'text' : 'password',
       isClearable: false,
@@ -10828,7 +10735,7 @@
   var FormikTextField = TextFieldComponent$1;
 
   var _excluded$D = ["visibleIcon", "hiddenIcon"],
-    _excluded2$b = ["isVisible", "setIsVisible"];
+    _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -10845,7 +10752,7 @@
         isVisible,
         setIsVisible
       } = _usePasswordState,
-      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
+      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
       type: isVisible ? 'text' : 'password',
       isClearable: false,
@@ -12277,8 +12184,8 @@
   };
 
   var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-    _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
-    _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+    _excluded2$b = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
+    _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
     _excluded4$7 = ["children", "views"],
     _excluded5$3 = ["children", "views"];
   var ModalOverlay = _ref => {
@@ -12327,7 +12234,7 @@
         shape = 'rounded',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$c);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$b);
     var defaultShadow = typeof document !== undefined ? {
       boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)'
     } : {
@@ -12360,7 +12267,7 @@
         buttonPosition = 'right',
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
     var onClose = props.onClose ? props.onClose : hideModal;
     var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
       onClick: onClose
@@ -13837,8 +13744,8 @@
   };
 
   var _excluded$M = ["children", "views"],
-    _excluded2$d = ["items", "side", "align", "views"],
-    _excluded3$a = ["item", "views"],
+    _excluded2$c = ["items", "side", "align", "views"],
+    _excluded3$9 = ["item", "views"],
     _excluded4$8 = ["views"],
     _excluded5$4 = ["trigger", "items", "side", "align", "views", "themeMode"];
   // Create context for the DropdownMenu
@@ -13899,7 +13806,7 @@
         align = 'start',
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
     var {
       isOpen,
       //activeSubmenuId, setActiveSubmenuId, size,
@@ -13935,7 +13842,7 @@
         item,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$9);
     var {
       activeSubmenuId,
       setActiveSubmenuId,
@@ -13984,8 +13891,8 @@
     }, item.label), hasSubmenu && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       marginLeft: 8
     }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement("svg", {
-      width: "16",
-      height: "16",
+      width: "16px",
+      height: "16px",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
@@ -14248,7 +14155,7 @@
   };
 
   var _excluded$O = ["children", "views", "asChild"],
-    _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+    _excluded2$d = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
   // Create context for the HoverCard
   var HoverCardContext = /*#__PURE__*/React.createContext({
     isOpen: false,
@@ -14334,7 +14241,7 @@
         minWidth = '200px',
         maxWidth = '300px'
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
     var {
       isOpen,
       cancelCloseTimer,
@@ -15397,8 +15304,8 @@
   };
 
   var _excluded$V = ["children", "showToggleButton", "views"],
-    _excluded2$f = ["children", "views"],
-    _excluded3$b = ["children", "views"],
+    _excluded2$e = ["children", "views"],
+    _excluded3$a = ["children", "views"],
     _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
   // Create context for the Sidebar
   var SidebarContext = /*#__PURE__*/React.createContext({
@@ -15496,7 +15403,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
     var {
       isExpanded
     } = useSidebarContext();
@@ -15514,7 +15421,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
     var {
       isExpanded
     } = useSidebarContext();
@@ -16072,8 +15979,8 @@
   };
 
   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", "autoSaveId", "views"];
+    _excluded2$f = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+    _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
   // Create context for the Resizable component
   var ResizableContext = /*#__PURE__*/React.createContext({
     orientation: 'horizontal',
@@ -16180,7 +16087,7 @@
         collapseTarget,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
     var {
       orientation,
       size,
@@ -16320,7 +16227,7 @@
         containerRef,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       ref: containerRef,
@@ -17120,8 +17027,8 @@
   };
 
   var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
-    _excluded2$h = ["children", "views"],
-    _excluded3$d = ["heading", "children", "views"],
+    _excluded2$g = ["children", "views"],
+    _excluded3$c = ["heading", "children", "views"],
     _excluded4$a = ["item", "selected", "onSelect", "views"],
     _excluded5$5 = ["children", "views"],
     _excluded6$3 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
@@ -17183,7 +17090,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
   };
   // Command Group component
@@ -17193,7 +17100,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandGroupStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, CommandGroupHeadingStyles, views == null ? void 0 : views.heading), heading), children);
   };
   // Command Item component
@@ -17640,8 +17547,8 @@
   };
 
   var _excluded$$ = ["children", "views", "asChild"],
-    _excluded2$i = ["children", "views"],
-    _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
+    _excluded2$h = ["children", "views"],
+    _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
   var TooltipContext = /*#__PURE__*/React.createContext({
     isOpen: false,
@@ -17711,7 +17618,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
     var {
       isOpen,
       contentRef,
@@ -17741,7 +17648,7 @@
         showArrow = true,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
     var {
       isOpen,
       // openTooltip,