@app-studio/web 0.9.46 → 0.9.48

package/dist/web.umd.development.js

@@ -4797,65 +4797,42 @@
    * - Rounded corners: Consistent border radius
    * - Transitions: Subtle animations
    */
+  var ButtonFontSize = {
+    xs: 10,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20
+  };
+  var ButtonLineHeight = {
+    xs: 14,
+    sm: 20,
+    md: 24,
+    lg: 28,
+    xl: 32
+  };
+  var getButtonSize = size => {
+    return {
+      minHeight: ButtonLineHeight[size] * 2,
+      paddingHorizontal: ButtonLineHeight[size] / 2,
+      fontSize: ButtonFontSize[size],
+      fontWeight: 500,
+      lineHeight: ButtonLineHeight[size],
+      letterSpacing: '-0.01em',
+      paddingInline: ButtonLineHeight[size],
+      paddingBlock: ButtonLineHeight[size] / 2,
+      outlineWidth: 'medium'
+    };
+  };
   /**
    * Button sizes following the 4px grid system
    */
   var ButtonSizes = {
-    xs: {
-      minHeight: 3 * 4,
-      paddingTop: 1,
-      paddingBottom: 1,
-      paddingLeft: 2,
-      paddingRight: 2,
-      fontSize: 10,
-      fontWeight: '500',
-      lineHeight: 14,
-      letterSpacing: '-0.01em'
-    },
-    sm: {
-      minHeight: 4 * 4,
-      paddingTop: 4,
-      paddingBottom: 4,
-      paddingLeft: 8,
-      paddingRight: 8,
-      fontSize: 12,
-      fontWeight: '500',
-      lineHeight: 16,
-      letterSpacing: '-0.01em'
-    },
-    md: {
-      minHeight: 6 * 4,
-      paddingTop: 6,
-      paddingBottom: 6,
-      paddingLeft: 12,
-      paddingRight: 12,
-      fontSize: 14,
-      fontWeight: '500',
-      lineHeight: 18,
-      letterSpacing: '-0.01em'
-    },
-    lg: {
-      minHeight: 8 * 4,
-      paddingTop: 8,
-      paddingBottom: 8,
-      paddingLeft: 16,
-      paddingRight: 16,
-      fontSize: 16,
-      fontWeight: '500',
-      lineHeight: 18,
-      letterSpacing: '-0.01em'
-    },
-    xl: {
-      minHeight: 10 * 4,
-      paddingTop: 10,
-      paddingBottom: 10,
-      paddingLeft: 20,
-      paddingRight: 20,
-      fontSize: 20,
-      fontWeight: '500',
-      lineHeight: 22,
-      letterSpacing: '-0.01em'
-    }
+    xs: /*#__PURE__*/getButtonSize('xs'),
+    sm: /*#__PURE__*/getButtonSize('sm'),
+    md: /*#__PURE__*/getButtonSize('md'),
+    lg: /*#__PURE__*/getButtonSize('lg'),
+    xl: /*#__PURE__*/getButtonSize('xl')
   };
   /**
    * Button shapes with consistent border radius
@@ -4895,142 +4872,387 @@
       padding: 14
     }
   };
-  var getButtonVariants = (color, isLight) => ({
-    filled: {
-      backgroundColor: color,
-      color: isLight ? 'color.black' : 'color.white',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: 'transparent',
-      _hover: {
-        opacity: 0.9
-      },
-      _active: {
-        opacity: 0.95
-      },
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
-      },
-      transition: 'background-color 0.2s ease, opacity 0.2s ease'
-    },
-    outline: {
-      backgroundColor: 'transparent',
-      color: color,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: color,
-      _hover: {
-        backgroundColor: color,
-        color: isLight ? 'color.black' : 'color.white',
-        opacity: 0.9
-      },
-      _active: {
+  var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight) {
+    var textColor = isLight ? '#000000' : '#FFFFFF';
+    return {
+      filled: {
         backgroundColor: color,
-        color: isLight ? 'color.black' : 'color.white',
-        opacity: 0.95
+        color: textColor,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        _hover: {
+          opacity: 0.9,
+          color: textColor
+        },
+        _active: {
+          opacity: 0.95,
+          color: textColor
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color,
+          color: textColor
+        },
+        transition: 'background-color 0.2s ease, opacity 0.2s ease'
       },
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+      outline: {
+        backgroundColor: 'transparent',
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color,
+        _hover: {
+          backgroundColor: color,
+          color: textColor,
+          opacity: 0.9
+        },
+        _active: {
+          backgroundColor: color,
+          color: textColor,
+          opacity: 0.95
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease'
       },
-      transition: 'background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease'
-    },
-    ghost: {
-      backgroundColor: 'transparent',
-      color: color,
-      borderWidth: 0,
-      borderStyle: 'none',
-      borderColor: 'transparent',
-      _hover: {
-        backgroundColor: isLight ? 'color.gray.100' : 'color.gray.800',
-        opacity: 0.9
+      ghost: {
+        backgroundColor: 'transparent',
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        _hover: {
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: color,
+          color: color,
+          opacity: 0.9
+        },
+        _active: {
+          color: color,
+          opacity: 0.95
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'background-color 0.2s ease, opacity 0.2s ease'
       },
-      _active: {
-        backgroundColor: isLight ? 'color.gray.200' : 'color.gray.700',
-        opacity: 0.95
+      link: {
+        backgroundColor: 'transparent',
+        color: color,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent',
+        textDecoration: 'underline',
+        textUnderlineOffset: '2px',
+        textDecorationThickness: '1px',
+        textDecorationColor: color,
+        _hover: {
+          color: color,
+          opacity: 0.8
+        },
+        _active: {
+          color: color,
+          opacity: 0.9
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'opacity 0.2s ease'
       },
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+      borderMoving: {
+        position: 'relative',
+        backgroundColor: 'black',
+        color: textColor,
+        overflow: 'hidden',
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent',
+        _hover: {
+          color: textColor
+        },
+        _active: {
+          color: textColor
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.8)'
+        },
+        transition: 'opacity 0.2s ease'
       },
-      transition: 'background-color 0.2s ease, opacity 0.2s ease'
-    },
-    link: {
-      backgroundColor: 'transparent',
-      color: isLight ? color : 'color.black',
-      borderWidth: 0,
-      borderStyle: 'none',
-      borderColor: 'transparent',
-      textDecoration: 'underline',
-      textUnderlineOffset: '2px',
-      textDecorationThickness: '1px',
-      _hover: {
-        opacity: 0.8
+      animatedStroke: {
+        display: 'inline-block',
+        margin: '0 auto',
+        textAlign: 'center',
+        textDecoration: 'none',
+        position: 'relative',
+        cursor: 'pointer',
+        backgroundColor: 'transparent',
+        color: color,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent',
+        _hover: {
+          color: color
+        },
+        _active: {
+          color: color
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'opacity 0.2s ease'
+      }
+    };
+  };
+
+  var _excluded$d = ["shape", "size", "isDisabled", "onClick", "views", "mainTone", "tone", "borderMovingGradientColors", "borderMovingDuration", "content", "shadow"],
+    _excluded2$3 = ["to", "onClick", "views", "children", "size", "accentColor", "textColor", "getColor", "shadow"],
+    _excluded3$3 = ["variant", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size"],
+    _excluded4$3 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "themeMode", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
+  // --- Helper: Button Content ---
+  // Renders the inner content: Loader, Icon, and Children.
+  var ButtonContent = _ref => {
+    var {
+      children,
+      icon,
+      isLoading,
+      iconPosition = 'left',
+      loaderPosition = 'left',
+      size = 'md',
+      resolvedTextColor,
+      isIconRounded,
+      views
+    } = _ref;
+    var Wrapper = ['left', 'right'].includes(iconPosition) ? appStudio.Horizontal : appStudio.Vertical;
+    var sizeStyles = ButtonSizes[size];
+    var iconPad = isIconRounded ? IconSizes$1[size] : {};
+    return /*#__PURE__*/React__default.createElement(Wrapper, Object.assign({
+      gap: 8,
+      alignItems: "center",
+      justifyContent: "center"
+    }, sizeStyles, iconPad, views == null ? void 0 : views.content), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
+      size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
+      color: 'currentColor'
+    }, views == null ? void 0 : views.loader))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      color: 'currentColor'
+    }, views == null ? void 0 : views.icon), icon)), children, icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      color: 'currentColor'
+    }, 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: 'currentColor'
+    }, views == null ? void 0 : views.loader))));
+  };
+  // --- Variant: Border Moving ---
+  var BorderMovingButton = _ref2 => {
+    var {
+        shape = 'rounded',
+        size = 'md',
+        isDisabled,
+        onClick,
+        views,
+        mainTone,
+        tone,
+        borderMovingGradientColors,
+        borderMovingDuration,
+        content,
+        shadow
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
+    var sizeStyles = ButtonSizes[size];
+    var borderWidth = 3;
+    var numericWidth = typeof sizeStyles.width === 'number' ? sizeStyles.width : 300;
+    var numericHeight = typeof sizeStyles.height === 'number' ? sizeStyles.height : 64;
+    var numericBorderRadius = (() => {
+      var shapeValue = ButtonShapes[shape];
+      if (typeof shapeValue === 'number') {
+        return shapeValue;
+      }
+      if (typeof shapeValue === 'string') {
+        return parseInt(shapeValue, 10) || 50;
+      }
+      return 50;
+    })();
+    var containerBg = mainTone;
+    // Use high contrast text color for this variant
+    var borderMovingTextColor = tone === 'light' ? '#000000' : '#FFFFFF';
+    // Create gradient string for border animation
+    var gradientColors = borderMovingGradientColors.join(', ');
+    // Animation sequence for the moving border effect
+    var borderAnimation = {
+      from: {
+        backgroundPosition: '0% 50%'
       },
-      _active: {
-        opacity: 0.9
+      to: {
+        backgroundPosition: '200% 50%'
       },
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+      duration: borderMovingDuration + "s",
+      timingFunction: 'linear',
+      iterationCount: 'infinite'
+    };
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: ButtonShapes[shape],
+      cursor: isDisabled ? 'default' : 'pointer',
+      onClick: onClick,
+      boxShadow: shadow,
+      padding: borderWidth,
+      background: "linear-gradient(90deg, " + borderMovingGradientColors[0] + ", " + borderMovingGradientColors[1] + ", " + borderMovingGradientColors[2] + ", " + borderMovingGradientColors[0] + ")",
+      backgroundSize: "200% 100%",
+      animate: borderAnimation
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: containerBg,
+      borderRadius: Math.max(0, numericBorderRadius - borderWidth),
+      width: "100%",
+      height: "100%",
+      minWidth: numericWidth - borderWidth * 2,
+      minHeight: numericHeight - borderWidth * 2,
+      color: borderMovingTextColor,
+      fontSize: 14,
+      cursor: "pointer"
+    }, content));
+  };
+  // --- Variant: Animated Stroke ---
+  var AnimatedStrokeButton = _ref3 => {
+    var {
+        to,
+        onClick,
+        views,
+        children,
+        size = 'md',
+        accentColor,
+        textColor,
+        getColor,
+        shadow
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+    var resolvedAccentColor = getColor(accentColor);
+    var resolvedTextColor = getColor(textColor);
+    var sizeStyles = ButtonSizes[size];
+    var numericWidth = typeof sizeStyles.width === 'number' ? sizeStyles.width : 300;
+    var numericHeight = typeof sizeStyles.height === 'number' ? sizeStyles.height : 60;
+    var strokeAnimation = {
+      from: {
+        strokeWidth: '8px',
+        strokeDasharray: '0 500',
+        strokeDashoffset: -454
       },
-      transition: 'opacity 0.2s ease'
-    },
-    borderMoving: {
-      position: 'relative',
-      backgroundColor: 'black',
-      overflow: 'hidden',
-      color: 'white',
-      borderWidth: 0,
-      borderStyle: 'none',
-      borderColor: 'transparent',
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.8)'
+      to: {
+        strokeWidth: '3px',
+        strokeDasharray: '760',
+        strokeDashoffset: 0
       },
-      transition: 'opacity 0.2s ease'
-    },
-    animatedStroke: {
-      display: 'inline-block',
-      maxWidth: '20rem',
-      margin: '0 auto',
-      textAlign: 'center',
-      textDecoration: 'none',
-      position: 'relative',
-      cursor: 'pointer',
-      backgroundColor: 'transparent',
-      borderWidth: 0,
-      borderStyle: 'none',
-      borderColor: 'transparent',
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
-      },
-      transition: 'opacity 0.2s ease'
-    }
-  });
-  /**
-   * Generate offset path for border animation
-   */
-  function generateOffsetPath(width, height, borderRadius) {
-    var radius;
-    if (typeof borderRadius === 'string' && borderRadius.endsWith('%')) {
-      var percentage = parseFloat(borderRadius) / 100;
-      radius = Math.min(width, height) * percentage;
-    } else {
-      radius = parseFloat(borderRadius.toString());
-    }
-    radius = Math.min(radius, width / 2, height / 2);
-    if (radius === 0) {
-      return "M 0,0 H " + width + " V " + height + " H 0 Z";
-    }
-    return "\n    M " + radius + ",0\n    H " + (width - radius) + "\n    A " + radius + "," + radius + " 0 0 1 " + width + "," + radius + "\n    V " + (height - radius) + "\n    A " + radius + "," + radius + " 0 0 1 " + (width - radius) + "," + height + "\n    H " + radius + "\n    A " + radius + "," + radius + " 0 0 1 0," + (height - radius) + "\n    V " + radius + "\n    A " + radius + "," + radius + " 0 0 1 " + radius + ",0\n    Z\n  ";
-  }
-
-  var _excluded$d = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "themeMode", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
-  var ButtonView = _ref => {
-    var _ref2;
+      duration: '0.9s',
+      timingFunction: 'ease-in',
+      fillMode: 'forwards'
+    };
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      as: to ? 'a' : 'div',
+      href: to ? to : undefined,
+      onClick: onClick,
+      display: "inline-block",
+      maxWidth: "20rem",
+      margin: "0 auto",
+      textAlign: "center",
+      textDecoration: "none",
+      position: "relative",
+      cursor: "pointer",
+      boxShadow: shadow
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "svg",
+      display: "block",
+      height: numericHeight,
+      width: numericWidth,
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "rect",
+      height: numericHeight,
+      width: numericWidth,
+      fill: "transparent",
+      stroke: resolvedAccentColor,
+      strokeWidth: "8px",
+      strokeDasharray: "0 500",
+      strokeDashoffset: -454,
+      on: {
+        hover: {
+          animate: strokeAnimation
+        }
+      }
+    })), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      pointerEvents: "none",
+      userSelect: "none",
+      color: resolvedTextColor
+    }, sizeStyles), children));
+  };
+  // --- Variant: Standard Button ---
+  var StandardButton = _ref4 => {
+    var {
+        variant,
+        to,
+        isDisabled,
+        isLoading,
+        isAuto,
+        isFilled,
+        isExternal,
+        shape = 'rounded',
+        shadow,
+        onClick,
+        views,
+        baseStyles,
+        sizeStyles,
+        iconPad,
+        content // Destructure size to avoid passing it to Element
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$3);
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      as: variant === 'link' && to ? 'div' : 'button',
+      type: variant === 'link' && to ? undefined : 'button',
+      disabled: Boolean(isDisabled || isLoading)
+    }, sizeStyles, iconPad, {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: isAuto ? 'fit-content' : isFilled ? '100%' : undefined,
+      /* visuals */
+      borderRadius: ButtonShapes[shape],
+      boxShadow: shadow,
+      transition: "all 0.2s ease",
+      cursor: isDisabled ? 'default' : 'pointer',
+      onClick: onClick
+    }, baseStyles, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+      to: to,
+      isExternal: isExternal,
+      color: "currentColor",
+      textDecoration: "inherit",
+      _hover: {
+        color: 'currentColor'
+      }
+    }, views == null ? void 0 : views.link), content)) : content);
+  };
+  // --- Main Component ---
+  var ButtonView = _ref5 => {
+    var _ref6, _base$color;
     var {
         /* behaviour */
         variant = 'filled',
@@ -5040,8 +5262,10 @@
         loaderPosition = 'left',
         backgroundColor,
         // primary candidate for main color
-        color // 2nd candidate for main color (NOT text‑color)
-        ,
+        color,
+        // 2nd candidate for main color (NOT text‑color)
+        isAuto = true,
+        isFilled,
         isDisabled,
         isLoading,
         isIconRounded,
@@ -5061,8 +5285,8 @@
         borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'],
         animatedStrokeAccentColor = '#705CFF',
         animatedStrokeTextColor = '#333333'
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$3);
     /* theme helpers */
     var {
       getColor,
@@ -5070,237 +5294,78 @@
     } = appStudio.useTheme();
     var mode = elementMode != null ? elementMode : themeMode;
     /* MAIN COLOR – determines the entire palette */
-    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
+    var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.primary';
     var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
       themeMode: mode
     });
     var tone = contrast(mainTone);
+    /* text color with mixBlendMode for maximum visibility */
+    var textColor = tone === 'light' ? '#000000' : '#FFFFFF';
     /* variant palette */
-    var palette = React.useMemo(() => getButtonVariants(mainTone, tone == 'light'), [mainTone, tone]);
+    var palette = React.useMemo(() => getButtonVariants(mainTone, tone === 'light'), [mainTone, tone, mode]);
     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",
-      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: 'inherit',
-      _hover: {
-        color: 'inherit'
-      }
-    }, views == null ? void 0 : views.loader))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      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({
-      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: 'inherit',
-      _hover: {
-        color: 'inherit'
-      }
-    }, views == null ? void 0 : views.loader))));
-    // Handle special effect variants
+    var resolvedTextColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : textColor;
+    // Render content logic safely
+    var content = /*#__PURE__*/React__default.createElement(ButtonContent, {
+      icon: icon,
+      isLoading: isLoading,
+      iconPosition: iconPosition,
+      loaderPosition: loaderPosition,
+      size: size,
+      resolvedTextColor: resolvedTextColor,
+      isIconRounded: isIconRounded,
+      views: views
+    }, children);
+    // Dispatch to the correct variant component
     if (variant === 'borderMoving') {
-      var borderWidth = 5;
-      var numericWidth = typeof sizeStyles.width === 'number' ? sizeStyles.width : 300;
-      var numericHeight = typeof sizeStyles.height === 'number' ? sizeStyles.height : 64;
-      var numericBorderRadius = (() => {
-        var shapeValue = ButtonShapes[shape];
-        if (typeof shapeValue === 'number') {
-          return shapeValue;
-        }
-        if (typeof shapeValue === 'string') {
-          return parseInt(shapeValue, 10) || 50;
-        }
-        return 50;
-      })();
-      var path = generateOffsetPath(numericWidth, numericHeight, numericBorderRadius);
-      // Determine background color from props or use mainTone
-      var containerBg = mainTone;
-      // Calculate text color with proper contrast
-      var borderMovingTextColor = tone === 'light' ? '#000000' : '#FFFFFF';
-      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-        width: numericWidth,
-        height: numericHeight,
-        position: "relative",
-        backgroundColor: containerBg,
-        overflow: "hidden",
-        borderRadius: ButtonShapes[shape],
-        cursor: isDisabled ? 'default' : 'pointer',
-        onClick: onClick
-      }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement("svg", {
-        width: numericWidth,
-        height: numericHeight,
-        style: {
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          zIndex: 1
-        }
-      }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
-        id: "circleGradient",
-        x1: "0%",
-        y1: "100%",
-        x2: "100%",
-        y2: "100%"
-      }, /*#__PURE__*/React__default.createElement("stop", {
-        offset: "0%",
-        stopColor: "transparent"
-      }), /*#__PURE__*/React__default.createElement("stop", {
-        offset: "30%",
-        stopColor: borderMovingGradientColors[0]
-      }), /*#__PURE__*/React__default.createElement("stop", {
-        offset: "60%",
-        stopColor: borderMovingGradientColors[1]
-      }), /*#__PURE__*/React__default.createElement("stop", {
-        offset: "100%",
-        stopColor: borderMovingGradientColors[2]
-      })), /*#__PURE__*/React__default.createElement("path", {
-        id: "uniqueId",
-        d: path,
-        fill: "none",
-        stroke: "transparent"
-      })), /*#__PURE__*/React__default.createElement("circle", {
-        r: "30",
-        fill: "url(#circleGradient)"
-      }, /*#__PURE__*/React__default.createElement("animateMotion", {
-        dur: borderMovingDuration + 's',
-        repeatCount: "indefinite",
-        path: path
-      }))), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        position: "absolute",
-        backgroundColor: containerBg,
-        borderRadius: Math.max(0, numericBorderRadius - 1),
-        top: borderWidth,
-        bottom: borderWidth,
-        left: borderWidth,
-        right: borderWidth,
-        zIndex: 2
-      }), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: borderMovingTextColor,
-        fontSize: 14,
-        zIndex: 3,
-        style: {
-          cursor: 'pointer'
-        }
-      }, content));
+      return /*#__PURE__*/React__default.createElement(BorderMovingButton, Object.assign({
+        variant: variant,
+        shape: shape,
+        size: size,
+        isDisabled: isDisabled,
+        onClick: onClick,
+        views: views,
+        mainTone: mainTone,
+        tone: tone,
+        borderMovingGradientColors: borderMovingGradientColors,
+        borderMovingDuration: borderMovingDuration,
+        content: content
+      }, props));
     }
     if (variant === 'animatedStroke') {
-      var resolvedAccentColor = getColor(animatedStrokeAccentColor);
-      var resolvedTextColor = getColor(animatedStrokeTextColor);
-      var _numericWidth = typeof sizeStyles.width === 'number' ? sizeStyles.width : 300;
-      var _numericHeight = typeof sizeStyles.height === 'number' ? sizeStyles.height : 60;
-      var strokeAnimation = {
-        from: {
-          strokeWidth: '8px',
-          strokeDasharray: '0 500',
-          strokeDashoffset: -454
-        },
-        to: {
-          strokeWidth: '3px',
-          strokeDasharray: '760',
-          strokeDashoffset: 0
-        },
-        duration: '0.9s',
-        timingFunction: 'ease-in',
-        fillMode: 'forwards'
-      };
-      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-        as: to ? 'a' : 'div',
-        href: to ? to : undefined,
+      return /*#__PURE__*/React__default.createElement(AnimatedStrokeButton, Object.assign({
+        variant: variant,
+        to: to,
         onClick: onClick,
-        display: "inline-block",
-        maxWidth: "20rem",
-        margin: "0 auto",
-        textAlign: "center",
-        textDecoration: "none",
-        position: "relative",
-        cursor: "pointer"
-      }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        as: "svg",
-        display: "block",
-        height: _numericHeight,
-        width: _numericWidth,
-        xmlns: "http://www.w3.org/2000/svg"
-      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
-        as: "rect",
-        height: _numericHeight,
-        width: _numericWidth,
-        fill: "transparent",
-        stroke: resolvedAccentColor,
-        strokeWidth: "8px",
-        strokeDasharray: "120 500",
-        strokeDashoffset: -454,
-        on: {
-          hover: {
-            animate: strokeAnimation
-          }
-        }
-      })), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingX: 16,
-        paddingY: 8,
-        fontSize: "22px",
-        lineHeight: "1.3",
-        letterSpacing: "0.3rem",
-        textAlign: "center",
-        textTransform: "uppercase",
-        whiteSpace: "normal",
-        wordBreak: "break-word",
-        pointerEvents: "none",
-        userSelect: "none",
-        color: resolvedTextColor
-      }, children));
+        views: views,
+        size: size,
+        accentColor: animatedStrokeAccentColor,
+        textColor: animatedStrokeTextColor,
+        getColor: getColor
+      }, props), children);
     }
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      as: variant === 'link' && to ? 'div' : 'button',
-      type: variant === 'link' && to ? undefined : 'button',
-      disabled: Boolean(isDisabled || isLoading)
-    }, sizeStyles, iconPad, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      // width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined}
-      /* visuals */
-      borderRadius: ButtonShapes[shape],
-      boxShadow: shadow,
-      transition: "all 0.2s ease",
-      cursor: isDisabled ? 'default' : 'pointer',
-      onClick: onClick
-    }, base, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+    // Standard variants (filled, outline, ghost, link)
+    var sizeStyles = ButtonSizes[size];
+    var iconPad = isIconRounded ? IconSizes$1[size] : {};
+    return /*#__PURE__*/React__default.createElement(StandardButton, Object.assign({
+      variant: variant,
       to: to,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      isAuto: isAuto,
+      isFilled: isFilled,
       isExternal: isExternal,
-      color: 'inherit',
-      textDecoration: 'inherit',
-      textDecorationColor: 'inherit'
-    }, views == null ? void 0 : views.link), content)) : content);
+      shape: shape,
+      shadow: shadow,
+      onClick: onClick,
+      views: views,
+      baseStyles: base,
+      sizeStyles: sizeStyles,
+      iconPad: iconPad,
+      resolvedTextColor: resolvedTextColor,
+      content: content,
+      size: size
+    }, props));
   };
 
   // Importing a custom hook to manage the state specific to the button component.
@@ -5436,9 +5501,9 @@
   };
 
   var _excluded$e = ["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"];
+    _excluded2$4 = ["children", "views", "style", "themeMode"],
+    _excluded3$4 = ["children", "views", "style", "themeMode"],
+    _excluded4$4 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
   var CardHeader = _ref => {
     var _contextStyles$header;
     var {
@@ -5463,7 +5528,7 @@
         children,
         style
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
     var theme = appStudio.useTheme();
     var {
       styles: contextStyles
@@ -5481,7 +5546,7 @@
         children,
         style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
     var theme = appStudio.useTheme();
     var {
       styles: contextStyles
@@ -5507,7 +5572,7 @@
         style,
         themeMode: elementMode
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
     var theme = appStudio.useTheme();
     var defaultStyles = getDefaultCardStyles();
     // Prepare context value, merging default styles with user's `views` overrides
@@ -5840,9 +5905,9 @@
   };
 
   var _excluded$f = ["children", "isActive", "views"],
-    _excluded2$4 = ["views", "children"],
-    _excluded3$4 = ["views", "children"],
-    _excluded4$4 = ["children", "views"],
+    _excluded2$5 = ["views", "children"],
+    _excluded3$5 = ["views", "children"],
+    _excluded4$5 = ["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"];
   var CarouselSlide = _ref => {
@@ -5867,7 +5932,7 @@
         children // Allow custom content/icon
         // Spread remaining ButtonProps
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
     var {
       goToPrevious,
       canGoPrevious,
@@ -5890,7 +5955,7 @@
         views,
         children
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
     var {
       goToNext,
       canGoNext,
@@ -5913,7 +5978,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$5);
     var {
       registerSlide,
       unregisterSlide,
@@ -7658,9 +7723,9 @@
   // using viewport-aware algorithms in the ContextMenu component
 
   var _excluded$i = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-    _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
-    _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
-    _excluded4$5 = ["views"],
+    _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
+    _excluded3$6 = ["item", "children", "onSelect", "isDisabled", "views"],
+    _excluded4$6 = ["views"],
     _excluded5$2 = ["views"],
     _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
   // Create context for the ContextMenu
@@ -7767,7 +7832,7 @@
         views,
         style // Capture user-provided style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
     var {
       isOpen,
       position: contextPosition,
@@ -7882,7 +7947,7 @@
         isDisabled = false,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
     var {
       activeSubmenuId,
       setActiveSubmenuId,
@@ -8011,7 +8076,7 @@
     var {
         views
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$5);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$6);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "1px",
       backgroundColor: "color.gray.200",
@@ -8127,7 +8192,7 @@
   ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
   var _excluded$k = ["src", "color", "views", "themeMode"],
-    _excluded2$6 = ["path"];
+    _excluded2$7 = ["path"];
   var FileSVG = _ref => {
     var {
         src,
@@ -8157,7 +8222,7 @@
     var {
         path
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
     return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
       src: path
     }, props));
@@ -8633,9 +8698,9 @@
   };
 
   var _excluded$s = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-    _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-    _excluded3$6 = ["option", "size", "removeOption"],
-    _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
+    _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+    _excluded3$7 = ["option", "size", "removeOption"],
+    _excluded4$7 = ["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
    *
@@ -8758,7 +8823,7 @@
         isReadOnly = false,
         options = []
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
     var handleChange = event => {
       if (onChange) onChange(event);
     };
@@ -8843,7 +8908,7 @@
         size = 'md',
         removeOption = () => {}
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
     var handleClick = () => removeOption(option);
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       gap: 8,
@@ -8904,7 +8969,7 @@
         setHighlightedIndex,
         highlightedIndex
       } = _ref7,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded4$6);
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded4$7);
     var {
       ref: triggerRef,
       relation,
@@ -12093,8 +12158,8 @@
   };
 
   var _excluded$y = ["size"],
-    _excluded2$8 = ["size"],
-    _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
+    _excluded2$9 = ["size"],
+    _excluded3$8 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
   var CountryList = _ref => {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -12105,7 +12170,7 @@
     type: "country"
   }, props)));
   var CountryItem = _ref2 => {
-    var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+    var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "li"
     }, props));
@@ -12207,7 +12272,7 @@
         },
         themeMode: elementMode
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
     var {
       getColor,
       themeMode
@@ -12458,7 +12523,7 @@
   };
 
   var _excluded$A = ["visibleIcon", "hiddenIcon"],
-    _excluded2$9 = ["isVisible", "setIsVisible"];
+    _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -12474,7 +12539,7 @@
         isVisible,
         setIsVisible
       } = _usePasswordState,
-      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
+      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
       type: isVisible ? 'text' : 'password',
       isClearable: false,
@@ -14603,7 +14668,7 @@
   };
 
   var _excluded$J = ["children", "views", "asChild"],
-    _excluded2$a = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+    _excluded2$b = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
   // Create context for the HoverCard
   var HoverCardContext = /*#__PURE__*/React.createContext({
     isOpen: false,
@@ -14689,7 +14754,7 @@
         minWidth = '50px',
         maxWidth = '300px'
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$a);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$b);
     var {
       isOpen,
       cancelCloseTimer,
@@ -15811,7 +15876,7 @@
   var FormikSwitch = SwitchComponent$1;
 
   var _excluded$N = ["name"],
-    _excluded2$b = ["tags"];
+    _excluded2$c = ["tags"];
   /**
    * Formik-integrated TagInput component
    */
@@ -15854,7 +15919,7 @@
     var {
         tags
       } = tagInputState,
-      stateWithoutTags = _objectWithoutPropertiesLoose(tagInputState, _excluded2$b);
+      stateWithoutTags = _objectWithoutPropertiesLoose(tagInputState, _excluded2$c);
     // Render the view component with combined props and state
     return /*#__PURE__*/React__default.createElement(TagInputView, Object.assign({}, stateWithoutTags, restProps, {
       tags: tags,
@@ -15890,7 +15955,7 @@
   var FormikTextField = TextFieldComponent$1;
 
   var _excluded$P = ["visibleIcon", "hiddenIcon"],
-    _excluded2$c = ["isVisible", "setIsVisible"];
+    _excluded2$d = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -15907,7 +15972,7 @@
         isVisible,
         setIsVisible
       } = _usePasswordState,
-      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$c);
+      passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$d);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
       type: isVisible ? 'text' : 'password',
       isClearable: false,
@@ -17024,9 +17089,9 @@
   };
 
   var _excluded$T = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-    _excluded2$d = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
-    _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
-    _excluded4$7 = ["children", "views"],
+    _excluded2$e = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
+    _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+    _excluded4$8 = ["children", "views"],
     _excluded5$3 = ["children", "views"];
   var ModalOverlay = _ref => {
     var {
@@ -17074,7 +17139,7 @@
         shape = 'rounded',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$d);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$e);
     var defaultShadow = typeof document !== undefined ? {
       boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)'
     } : {
@@ -17115,7 +17180,7 @@
         buttonPosition = 'right',
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
     var onClose = props.onClose ? props.onClose : hideModal;
     var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
       onClick: onClose
@@ -17144,7 +17209,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$7);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$8);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       paddingVertical: 16,
       paddingHorizontal: 24,
@@ -17287,9 +17352,9 @@
   };
 
   var _excluded$U = ["isOpen", "onClose", "isClosePrevented", "blur", "children"],
-    _excluded2$e = ["placement", "size", "children"],
-    _excluded3$9 = ["children", "onClose", "buttonPosition"],
-    _excluded4$8 = ["children"],
+    _excluded2$f = ["placement", "size", "children"],
+    _excluded3$a = ["children", "onClose", "buttonPosition"],
+    _excluded4$9 = ["children"],
     _excluded5$4 = ["children"];
   var DrawerOverlay = _ref => {
     var {
@@ -17340,7 +17405,7 @@
         size = 'md',
         children
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$e);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$f);
     var handleClick = e => {
       e.stopPropagation();
     };
@@ -17366,7 +17431,7 @@
         onClose,
         buttonPosition = 'right'
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$a);
     var closeButton = onClose && (/*#__PURE__*/React__default.createElement(appStudio.View, {
       onClick: onClose,
       cursor: "pointer",
@@ -17388,7 +17453,7 @@
     var {
         children
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$8);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$9);
     return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
       padding: 24,
       flex: 1,
@@ -18950,7 +19015,7 @@
   };
 
   var _excluded$Z = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
-    _excluded2$f = ["style"];
+    _excluded2$g = ["style"];
   // CSS keyframes injection - done once
   var KEYFRAMES_ID = 'slide-effect-keyframes';
   var injectKeyframes = () => {
@@ -19045,7 +19110,7 @@
       {
         style: customWordStyle
       } = _ref2,
-      restWordProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$f);
+      restWordProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$g);
     // Get animation names based on direction
     var isUp = direction === 'up';
     var enterAnim = isUp ? 'slideInUp' : 'slideInDown';
@@ -19838,9 +19903,9 @@
   };
 
   var _excluded$11 = ["children", "views"],
-    _excluded2$g = ["items", "side", "align", "views"],
-    _excluded3$a = ["item", "views"],
-    _excluded4$9 = ["views"],
+    _excluded2$h = ["items", "side", "align", "views"],
+    _excluded3$b = ["item", "views"],
+    _excluded4$a = ["views"],
     _excluded5$5 = ["trigger", "items", "side", "align", "views", "themeMode"];
   // Create context for the DropdownMenu
   var DropdownMenuContext = /*#__PURE__*/React.createContext({
@@ -19905,7 +19970,7 @@
         align = 'start',
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
     var {
       isOpen,
       variant,
@@ -20036,7 +20101,7 @@
         item,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
     var {
       activeSubmenuId,
       setActiveSubmenuId,
@@ -20101,7 +20166,7 @@
     var {
         views
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$9);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$a);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "1px",
       backgroundColor: "color.gray.200",
@@ -24459,9 +24524,9 @@
   };
 
   var _excluded$1e = ["children", "showToggleButton", "views"],
-    _excluded2$h = ["children", "views"],
-    _excluded3$b = ["children", "views"],
-    _excluded4$a = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
+    _excluded2$i = ["children", "views"],
+    _excluded3$c = ["children", "views"],
+    _excluded4$b = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
   // Create context for the Sidebar
   var SidebarContext = /*#__PURE__*/React.createContext({
     isExpanded: true,
@@ -24558,7 +24623,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
     var {
       isExpanded
     } = useSidebarContext();
@@ -24576,7 +24641,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
     var {
       isExpanded
     } = useSidebarContext();
@@ -24612,7 +24677,7 @@
         collapse,
         views
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$a);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$b);
     // Determine width based on expanded state and size
     var sizeConfig = SidebarSizes[size];
     var width = isExpanded ? expandedWidth || sizeConfig.expandedWidth : collapsedWidth || sizeConfig.collapsedWidth;
@@ -25134,8 +25199,8 @@
   };
 
   var _excluded$1g = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
-    _excluded2$i = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
-    _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
+    _excluded2$j = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+    _excluded3$d = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
   // Create context for the Resizable component
   var ResizableContext = /*#__PURE__*/React.createContext({
     orientation: 'horizontal',
@@ -25242,7 +25307,7 @@
         collapseTarget,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$j);
     var {
       orientation,
       size,
@@ -25382,7 +25447,7 @@
         containerRef,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       ref: containerRef,
@@ -26185,9 +26250,9 @@
   };
 
   var _excluded$1i = ["value", "onValueChange", "placeholder", "views"],
-    _excluded2$j = ["children", "views"],
-    _excluded3$d = ["heading", "children", "views"],
-    _excluded4$b = ["item", "selected", "onSelect", "views"],
+    _excluded2$k = ["children", "views"],
+    _excluded3$e = ["heading", "children", "views"],
+    _excluded4$c = ["item", "selected", "onSelect", "views"],
     _excluded5$6 = ["children", "views"],
     _excluded6$3 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
   var CommandContext = /*#__PURE__*/React.createContext({
@@ -26248,7 +26313,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$j);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$k);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
   };
   // Command Group component
@@ -26258,7 +26323,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandGroupStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, CommandGroupHeadingStyles, views == null ? void 0 : views.heading), heading), children);
   };
   // Command Item component
@@ -26269,7 +26334,7 @@
         onSelect,
         views
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$b);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4$c);
     var handleClick = () => {
       if (!item.disabled && onSelect) {
         onSelect();
@@ -26655,8 +26720,8 @@
   };
 
   var _excluded$1k = ["children", "views", "asChild"],
-    _excluded2$k = ["children", "views"],
-    _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
+    _excluded2$l = ["children", "views"],
+    _excluded3$f = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
   var TooltipContext = /*#__PURE__*/React.createContext({
     isOpen: false,
@@ -26726,7 +26791,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$k);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$l);
     var {
       isOpen,
       contentRef,
@@ -26756,7 +26821,7 @@
         showArrow = true,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$f);
     var {
       isOpen,
       triggerRef,
@@ -27296,9 +27361,9 @@
   };
 
   var _excluded$1n = ["children", "showRadialGradient", "views", "themeMode"],
-    _excluded2$l = ["number", "children"],
-    _excluded3$f = ["rows", "cols", "squareSize"],
-    _excluded4$c = ["count", "colors", "speed", "shapes"],
+    _excluded2$m = ["number", "children"],
+    _excluded3$g = ["rows", "cols", "squareSize"],
+    _excluded4$d = ["count", "colors", "speed", "shapes"],
     _excluded5$7 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
     _excluded6$4 = ["rippleCount", "colors", "maxSize", "frequency"],
     _excluded7$1 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
@@ -27340,7 +27405,7 @@
         number = 20,
         children
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$l);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$m);
     var meteors = Array.from({
       length: number
     }, (_, i) => i);
@@ -27408,7 +27473,7 @@
         cols = 10,
         squareSize = 40
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$f);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$g);
     var rowsArray = Array(rows).fill(1);
     var colsArray = Array(cols).fill(1);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -27451,7 +27516,7 @@
         speed = 'medium',
         shapes = ['circle']
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$c);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$d);
     var particles = Array.from({
       length: count
     }, (_, i) => i);