@app-studio/web 0.9.46 → 0.9.48

package/dist/web.cjs.development.js

@@ -4836,65 +4836,42 @@ var Loader = LoaderComponent;
  * - 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
@@ -4934,142 +4911,387 @@ var IconSizes$1 = {
     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',
@@ -5079,8 +5301,10 @@ var ButtonView = _ref => {
       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,
@@ -5100,8 +5324,8 @@ var ButtonView = _ref => {
       borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'],
       animatedStrokeAccentColor = '#705CFF',
       animatedStrokeTextColor = '#333333'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$3);
   /* theme helpers */
   var {
     getColor,
@@ -5109,237 +5333,78 @@ var ButtonView = _ref => {
   } = 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.
@@ -5475,9 +5540,9 @@ var useCardContext = () => {
 };
 
 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 {
@@ -5502,7 +5567,7 @@ var CardContent = _ref2 => {
       children,
       style
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -5520,7 +5585,7 @@ var CardFooter = _ref3 => {
       children,
       style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -5546,7 +5611,7 @@ var CardView = _ref4 => {
       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
@@ -5879,9 +5944,9 @@ var useCarouselContext = () => {
 };
 
 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 => {
@@ -5906,7 +5971,7 @@ var CarouselPreviousComponent = _ref2 => {
       children // Allow custom content/icon
       // Spread remaining ButtonProps
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   var {
     goToPrevious,
     canGoPrevious,
@@ -5929,7 +5994,7 @@ var CarouselNextComponent = _ref3 => {
       views,
       children
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
   var {
     goToNext,
     canGoNext,
@@ -5952,7 +6017,7 @@ var CarouselItemComponent = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$5);
   var {
     registerSlide,
     unregisterSlide,
@@ -7697,9 +7762,9 @@ var ContextMenuItemStates = {
 // 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
@@ -7806,7 +7871,7 @@ var ContextMenuContent = _ref3 => {
       views,
       style // Capture user-provided style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
   var {
     isOpen,
     position: contextPosition,
@@ -7921,7 +7986,7 @@ var ContextMenuItem = _ref4 => {
       isDisabled = false,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -8050,7 +8115,7 @@ var ContextMenuDivider = _ref5 => {
   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",
@@ -8166,7 +8231,7 @@ ContextMenu.Divider = ContextMenuDivider;
 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,
@@ -8196,7 +8261,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -8672,9 +8737,9 @@ var IconSizes$2 = {
 };
 
 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
  *
@@ -8797,7 +8862,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -8882,7 +8947,7 @@ var MultiSelect = _ref6 => {
       size = 'md',
       removeOption = () => {}
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     gap: 8,
@@ -8943,7 +9008,7 @@ var SelectView = _ref7 => {
       setHighlightedIndex,
       highlightedIndex
     } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$6);
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$7);
   var {
     ref: triggerRef,
     relation,
@@ -12132,8 +12197,8 @@ var IconSizes$4 = {
 };
 
 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({
@@ -12144,7 +12209,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -12246,7 +12311,7 @@ var CountryPickerView = _ref5 => {
       },
       themeMode: elementMode
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
   var {
     getColor,
     themeMode
@@ -12497,7 +12562,7 @@ var usePasswordState = props => {
 };
 
 var _excluded$A = ["visibleIcon", "hiddenIcon"],
-  _excluded2$9 = ["isVisible", "setIsVisible"];
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -12513,7 +12578,7 @@ var PasswordComponent = _ref => {
       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,
@@ -14642,7 +14707,7 @@ var useHoverCardState = function useHoverCardState(_temp) {
 };
 
 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,
@@ -14728,7 +14793,7 @@ var HoverCardContent = _ref3 => {
       minWidth = '50px',
       maxWidth = '300px'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$a);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$b);
   var {
     isOpen,
     cancelCloseTimer,
@@ -15850,7 +15915,7 @@ var SwitchComponent$1 = props => {
 var FormikSwitch = SwitchComponent$1;
 
 var _excluded$N = ["name"],
-  _excluded2$b = ["tags"];
+  _excluded2$c = ["tags"];
 /**
  * Formik-integrated TagInput component
  */
@@ -15893,7 +15958,7 @@ var TagInputComponent$1 = props => {
   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,
@@ -15929,7 +15994,7 @@ var TextFieldComponent$1 = props => {
 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, {
@@ -15946,7 +16011,7 @@ var PasswordComponent$1 = _ref => {
       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,
@@ -17063,9 +17128,9 @@ var ModalTypography = {
 };
 
 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 {
@@ -17113,7 +17178,7 @@ var ModalContainer = _ref2 => {
       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)'
   } : {
@@ -17154,7 +17219,7 @@ var ModalHeader = _ref3 => {
       buttonPosition = 'right',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
     onClick: onClose
@@ -17183,7 +17248,7 @@ var ModalBody = _ref4 => {
       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,
@@ -17326,9 +17391,9 @@ var DrawerPlacements = {
 };
 
 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 {
@@ -17379,7 +17444,7 @@ var DrawerContainer = _ref2 => {
       size = 'md',
       children
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$e);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$f);
   var handleClick = e => {
     e.stopPropagation();
   };
@@ -17405,7 +17470,7 @@ var DrawerHeader = _ref3 => {
       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",
@@ -17427,7 +17492,7 @@ var DrawerBody = _ref4 => {
   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,
@@ -18989,7 +19054,7 @@ var TypewriterEffect = _ref => {
 };
 
 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 = () => {
@@ -19084,7 +19149,7 @@ var SlideEffect = _ref => {
     {
       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';
@@ -19877,9 +19942,9 @@ var DropdownMenuItemStates = {
 };
 
 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({
@@ -19944,7 +20009,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   var {
     isOpen,
     variant,
@@ -20075,7 +20140,7 @@ var DropdownMenuItem = _ref4 => {
       item,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -20140,7 +20205,7 @@ var DropdownMenuDivider = _ref5 => {
   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",
@@ -24498,9 +24563,9 @@ var SidebarTransitions = {
 };
 
 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,
@@ -24597,7 +24662,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
   var {
     isExpanded
   } = useSidebarContext();
@@ -24615,7 +24680,7 @@ var SidebarFooter = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
   var {
     isExpanded
   } = useSidebarContext();
@@ -24651,7 +24716,7 @@ var SidebarView = _ref5 => {
       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;
@@ -25173,8 +25238,8 @@ var HandleIconStyles = {
 };
 
 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',
@@ -25281,7 +25346,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$j);
   var {
     orientation,
     size,
@@ -25421,7 +25486,7 @@ var ResizableView = _ref4 => {
       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,
@@ -26224,9 +26289,9 @@ var CommandFooterStyles = {
 };
 
 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({
@@ -26287,7 +26352,7 @@ var CommandList = _ref3 => {
       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
@@ -26297,7 +26362,7 @@ var CommandGroup = _ref4 => {
       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
@@ -26308,7 +26373,7 @@ var CommandItem = _ref5 => {
       onSelect,
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$b);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$c);
   var handleClick = () => {
     if (!item.disabled && onSelect) {
       onSelect();
@@ -26694,8 +26759,8 @@ var getArrowStyles = position => {
 };
 
 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,
@@ -26765,7 +26830,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$k);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$l);
   var {
     isOpen,
     contentRef,
@@ -26795,7 +26860,7 @@ var TooltipView = _ref4 => {
       showArrow = true,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$f);
   var {
     isOpen,
     triggerRef,
@@ -27335,9 +27400,9 @@ var Gradient = props => {
 };
 
 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"],
@@ -27379,7 +27444,7 @@ var Meteors = _ref2 => {
       number = 20,
       children
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$l);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$m);
   var meteors = Array.from({
     length: number
   }, (_, i) => i);
@@ -27447,7 +27512,7 @@ var Wall = _ref3 => {
       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({
@@ -27490,7 +27555,7 @@ var Particles = _ref4 => {
       speed = 'medium',
       shapes = ['circle']
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$c);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$d);
   var particles = Array.from({
     length: count
   }, (_, i) => i);