@app-studio/web 0.9.62 → 0.9.65

package/dist/web.umd.development.js

@@ -4759,6 +4759,11 @@
         views
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
+    var {
+      getColor
+    } = appStudio.useTheme();
+    loaderColor = getColor(loaderColor || props.color || 'theme.loading');
+    textColor = getColor(textColor || props.color || 'theme.loading');
     var style = {
       size,
       speed,
@@ -4872,12 +4877,19 @@
       padding: 14
     }
   };
-  var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight) {
+  var getButtonVariants = function getButtonVariants(color, isLight, reversed) {
+    if (reversed === void 0) {
+      reversed = false;
+    }
     var textColor = isLight ? '#000000' : '#FFFFFF';
+    // Determine effective colors based on reversed state
+    var effectiveBg = reversed ? textColor : color;
+    var effectiveContent = reversed ? color : textColor;
+    var effectiveBorder = reversed ? textColor : color;
     return {
       filled: {
-        backgroundColor: color,
-        color: textColor,
+        backgroundColor: effectiveBg,
+        color: effectiveContent,
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: 'transparent',
@@ -4889,57 +4901,57 @@
         },
         _focusVisible: {
           outline: 'none',
-          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + effectiveBg
         },
         transition: 'background-color 0.2s ease, opacity 0.2s ease'
       },
-      reversed: {
-        backgroundColor: textColor,
-        color: color,
+      empty: {
+        backgroundColor: 'transparent',
+        color: effectiveBorder,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: textColor,
+        borderColor: effectiveBorder,
         _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 " + effectiveBorder
+        },
         transition: 'background-color 0.2s ease, opacity 0.2s ease'
       },
       outline: {
         backgroundColor: 'transparent',
-        color: color,
+        color: effectiveBorder,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color,
+        borderColor: effectiveBorder,
         _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
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + effectiveBorder
         },
         transition: 'background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease'
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: color,
+        color: effectiveBorder,
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: 'transparent',
         _hover: {
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: color,
-          color: color,
+          borderColor: effectiveBorder,
+          color: effectiveBorder,
           opacity: 0.9
         },
         _active: {
@@ -4947,20 +4959,20 @@
         },
         _focusVisible: {
           outline: 'none',
-          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + effectiveBorder
         },
         transition: 'background-color 0.2s ease, opacity 0.2s ease'
       },
       link: {
         backgroundColor: 'transparent',
-        color: color,
+        color: effectiveBorder,
         borderWidth: 0,
         borderStyle: 'none',
         borderColor: 'transparent',
         textDecoration: 'underline',
         textUnderlineOffset: '2px',
         textDecorationThickness: '1px',
-        textDecorationColor: color,
+        textDecorationColor: effectiveBorder,
         _hover: {
           opacity: 0.8
         },
@@ -4969,83 +4981,35 @@
         },
         _focusVisible: {
           outline: 'none',
-          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
-        },
-        transition: 'opacity 0.2s ease'
-      },
-      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'
-      },
-      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
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + effectiveBorder
         },
         transition: 'opacity 0.2s ease'
       },
       subtle: {
-        backgroundColor: 'white',
-        color: color,
+        backgroundColor: reversed ? "color-mix(in srgb, " + effectiveBorder + " 20%, transparent)" : "color-mix(in srgb, " + effectiveBorder + " 5%, transparent)",
+        color: effectiveBorder,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color,
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 6,
-        fontWeight: 500,
+        borderColor: effectiveBorder,
         _hover: {
-          backgroundColor: 'rgba(0, 0, 0, 0.05)'
+          backgroundColor: reversed ? "color-mix(in srgb, " + effectiveBorder + " 40%, transparent)" : "color-mix(in srgb, " + effectiveBorder + " 15%, transparent)"
         },
         _active: {
-          backgroundColor: 'rgba(0, 0, 0, 0.1)'
+          backgroundColor: reversed ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.15)'
         },
         _focusVisible: {
           outline: 'none',
-          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + effectiveBorder
         },
         transition: 'all 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"];
+  var _excluded$d = ["asComponent", "isDisabled", "isLoading", "isWrapped", "borderRadius", "width", "height", "baseStyles", "sizeStyles", "iconPad", "mainTone", "resolvedTextColor", "children", "borderWidth"],
+    _excluded2$3 = ["shape", "isDisabled", "onClick", "shadow", "borderWidth", "isAuto", "isFilled", "views", "children"],
+    _excluded3$3 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "tone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
+    _excluded4$3 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "scheme", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
   // --- Helper: Button Content ---
   // Renders the inner content: Loader, Icon, and Children.
   var ButtonContent = _ref => {
@@ -5069,176 +5033,95 @@
       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'
+      color: resolvedTextColor
     }, views == null ? void 0 : views.loader))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      color: 'currentColor'
+      color: resolvedTextColor
     }, views == null ? void 0 : views.icon), icon)), children, icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      color: 'currentColor'
+      color: resolvedTextColor
     }, 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'
+      color: resolvedTextColor
     }, views == null ? void 0 : views.loader))));
   };
-  // --- Variant: Border Moving ---
-  var BorderMovingButton = _ref2 => {
-    var {
-        shape = 'rounded',
-        size = 'md',
+  // --- Animation Logic moved to StandardButton ---
+  // --- Variant: Standard Button ---
+  // --- Helpers ---
+  // Helper to calculate numeric border radius
+  var getNumericBorderRadius = shape => {
+    var shapeValue = ButtonShapes[shape];
+    if (typeof shapeValue === 'number') return shapeValue;
+    if (typeof shapeValue === 'string') return parseInt(shapeValue, 10) || 0;
+    return 0;
+  };
+  // Common Inner Button Surface
+  var InnerButton = _ref2 => {
+    var {
+        asComponent,
         isDisabled,
-        onClick,
-        views,
+        isLoading,
+        isWrapped = false,
+        borderRadius,
+        width,
+        height,
+        baseStyles,
+        sizeStyles,
+        iconPad,
         mainTone,
-        tone,
-        borderMovingGradientColors,
-        borderMovingDuration,
-        content,
-        shadow
+        resolvedTextColor,
+        children,
+        borderWidth = 0
       } = _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%'
-      },
-      to: {
-        backgroundPosition: '200% 50%'
-      },
-      duration: borderMovingDuration + "s",
-      timingFunction: 'linear',
-      iterationCount: 'infinite'
-    };
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      position: "relative",
-      display: "inline-flex",
+      as: asComponent,
+      disabled: Boolean(isDisabled || isLoading),
+      display: isWrapped ? 'flex' : '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));
+      borderRadius: borderRadius,
+      width: width,
+      height: height
+    }, baseStyles, sizeStyles, iconPad, {
+      // Ensure background is solid for wrapped buttons if baseStyles doesn't provide it
+      backgroundColor: (baseStyles == null ? void 0 : baseStyles.backgroundColor) || (isWrapped ? mainTone : undefined),
+      color: resolvedTextColor,
+      borderWidth: isWrapped ? 0 : undefined,
+      cursor: isDisabled ? 'default' : 'pointer'
+    }, props), children);
   };
-  // --- Variant: Animated Stroke ---
-  var AnimatedStrokeButton = _ref3 => {
+  // Common Header for Border Animations
+  var BorderWrapper = _ref3 => {
     var {
-        to,
+        shape,
+        isDisabled,
         onClick,
+        shadow,
+        borderWidth,
+        isAuto,
+        isFilled,
         views,
-        children,
-        size = 'md',
-        accentColor,
-        textColor,
-        getColor,
-        shadow
+        children
       } = _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
-      },
-      to: {
-        strokeWidth: '3px',
-        strokeDasharray: '760',
-        strokeDashoffset: 0
-      },
-      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",
+      as: "div",
       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",
+      display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
-      textAlign: "center",
-      pointerEvents: "none",
-      userSelect: "none",
-      color: resolvedTextColor
-    }, sizeStyles), children));
+      borderRadius: ButtonShapes[shape],
+      cursor: isDisabled ? 'default' : 'pointer',
+      onClick: onClick,
+      boxShadow: shadow,
+      padding: borderWidth,
+      width: isAuto ? 'fit-content' : isFilled ? '100%' : undefined
+    }, views == null ? void 0 : views.container, props), children);
   };
   // --- Variant: Standard Button ---
   var StandardButton = _ref4 => {
     var {
         variant,
+        animation,
         to,
         isDisabled,
         isLoading,
@@ -5252,9 +5135,220 @@
         baseStyles,
         sizeStyles,
         iconPad,
-        content // Destructure size to avoid passing it to Element
+        resolvedTextColor,
+        content,
+        mainTone,
+        borderMovingDuration = 2,
+        borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'],
+        animatedStrokeAccentColor = '#705CFF',
+        animatedStrokeTextColor = '#333333',
+        getColor = c => c
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded3$3);
+    // --- Common Helpers ---
+    var numericBorderRadius = getNumericBorderRadius(shape);
+    var linkOrContent = 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;
+    var innerProps = {
+      isDisabled,
+      isLoading,
+      baseStyles,
+      sizeStyles,
+      iconPad,
+      resolvedTextColor,
+      mainTone,
+      children: linkOrContent
+    };
+    // --- Animation: Border Moving ---
+    if (animation === 'borderMoving' && borderMovingGradientColors) {
+      var borderWidth = 3;
+      var borderAnimation = {
+        from: {
+          backgroundPosition: '0% 50%'
+        },
+        to: {
+          backgroundPosition: '200% 50%'
+        },
+        duration: borderMovingDuration + "s",
+        timingFunction: 'linear',
+        iterationCount: 'infinite'
+      };
+      return /*#__PURE__*/React__default.createElement(BorderWrapper, Object.assign({
+        shape: shape,
+        isDisabled: isDisabled,
+        onClick: onClick,
+        shadow: shadow,
+        borderWidth: borderWidth,
+        isAuto: isAuto,
+        isFilled: isFilled,
+        views: views,
+        background: "linear-gradient(90deg, " + borderMovingGradientColors[0] + ", " + borderMovingGradientColors[1] + ", " + borderMovingGradientColors[2] + ", " + borderMovingGradientColors[0] + ")",
+        backgroundSize: "200% 100%",
+        animate: borderAnimation
+      }, props), /*#__PURE__*/React__default.createElement(InnerButton, Object.assign({
+        asComponent: to ? 'div' : 'button',
+        isWrapped: true,
+        borderRadius: Math.max(0, numericBorderRadius - borderWidth),
+        width: "100%",
+        height: "100%"
+      }, innerProps)));
+    }
+    // --- Animation: Animated Stroke ---
+    if (animation === 'animatedStroke') {
+      var _views$container;
+      var resolvedAccentColor = getColor(animatedStrokeAccentColor);
+      var resolvedStrokeTextColor = getColor(animatedStrokeTextColor);
+      var strokePathLength = 1000;
+      var strokeAnimation = {
+        from: {
+          strokeWidth: '8px',
+          strokeDasharray: "0 " + strokePathLength,
+          strokeDashoffset: -Math.round(strokePathLength * 0.63)
+        },
+        to: {
+          strokeWidth: '3px',
+          strokeDasharray: "" + strokePathLength,
+          strokeDashoffset: 0
+        },
+        duration: '0.9s',
+        timingFunction: 'ease-in',
+        fillMode: 'forwards'
+      };
+      var mergedClassName = ['group', views == null || (_views$container = views.container) == null ? void 0 : _views$container.className, props == null ? void 0 : props.className].filter(Boolean).join(' ');
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+        as: to ? 'div' : 'button',
+        type: to ? undefined : 'button',
+        disabled: Boolean(!to && (isDisabled || isLoading)),
+        onClick: onClick,
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: isAuto ? 'fit-content' : isFilled ? '100%' : undefined,
+        borderRadius: ButtonShapes[shape],
+        boxShadow: shadow,
+        transition: "all 0.2s ease",
+        cursor: isDisabled ? 'default' : 'pointer',
+        color: resolvedStrokeTextColor,
+        backgroundColor: "transparent",
+        borderWidth: 0
+      }, views == null ? void 0 : views.container, props, {
+        className: mergedClassName
+      }), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        as: "svg",
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        xmlns: "http://www.w3.org/2000/svg",
+        pointerEvents: "none",
+        zIndex: 1,
+        "aria-hidden": "true"
+      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+        as: "rect",
+        x: "0",
+        y: "0",
+        height: "100%",
+        width: "100%",
+        rx: numericBorderRadius,
+        ry: numericBorderRadius,
+        fill: "transparent",
+        stroke: resolvedAccentColor,
+        strokeWidth: "8px",
+        strokeDasharray: "0 " + strokePathLength,
+        strokeDashoffset: -Math.round(strokePathLength * 0.63),
+        pathLength: strokePathLength,
+        on: {
+          groupHover: {
+            animate: strokeAnimation
+          }
+        }
+      })), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        position: "relative",
+        zIndex: 0
+      }, linkOrContent));
+    }
+    // --- Animation: Border Reveal ---
+    if (animation === 'borderReveal') {
+      var _borderWidth = 3;
+      // Use the first color from gradient colors or fall back to mainTone
+      var activeColor = (borderMovingGradientColors == null ? void 0 : borderMovingGradientColors[0]) || mainTone || '#000000';
+      // Sides duration
+      // The default duration (2s) is too slow for a hover interaction.
+      // We scale it by 0.25 to make it responsive (0.5s total).
+      var effectiveDuration = borderMovingDuration * 0.75;
+      var sideDuration = effectiveDuration / 4;
+      // Gradients for each side (color 50%, transparent 50%)
+      var topGrad = "linear-gradient(90deg, " + activeColor + " 50%, transparent 50%)";
+      var rightGrad = "linear-gradient(180deg, " + activeColor + " 50%, transparent 50%)";
+      var bottomGrad = "linear-gradient(270deg, " + activeColor + " 50%, transparent 50%)";
+      var leftGrad = "linear-gradient(0deg, " + activeColor + " 50%, transparent 50%)";
+      // Coordinates:
+      // Top (L->R): 100% 0 -> 0 0
+      // Right (T->B): 100% 100% -> 100% 0
+      // Bottom (R->L): 0 100% -> 100% 100%
+      // Left (B->T): 0 0 -> 0 100%
+      var bgPosStart = "100% 0, 100% 100%, 0 100%, 0 0";
+      var bgPosEnd = "0 0, 100% 0, 100% 100%, 0 100%";
+      // Delays:
+      // Enter (Forward): Top(0), Right(1), Bottom(2), Left(3)
+      var delayEnter = "0s, " + sideDuration + "s, " + sideDuration * 2 + "s, " + sideDuration * 2 + "s";
+      // Exit (Reverse): Top(3), Right(2), Bottom(1), Left(0)
+      var delayExit = sideDuration * 2 + "s, " + sideDuration * 2 + "s, " + sideDuration + "s, 0s";
+      // Use slightly larger gradient size to overlap with button content (avoid gaps)
+      var gradientSize = _borderWidth + 1;
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+        as: "div",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: ButtonShapes[shape],
+        cursor: isDisabled ? 'default' : 'pointer',
+        onClick: onClick,
+        boxShadow: shadow,
+        padding: _borderWidth,
+        background: "\n          " + topGrad + " no-repeat,\n          " + rightGrad + " no-repeat,\n          " + bottomGrad + " no-repeat,\n          " + leftGrad + " no-repeat\n        ",
+        backgroundSize: "200% " + gradientSize + "px, " + gradientSize + "px 200%, 200% " + gradientSize + "px, " + gradientSize + "px 200%",
+        // Default State (Hidden)
+        backgroundPosition: bgPosStart,
+        transitionProperty: "background-position",
+        transitionDuration: sideDuration + "s",
+        transitionTimingFunction: "linear",
+        transitionDelay: delayExit,
+        // Hover State (Visible)
+        _hover: {
+          backgroundPosition: bgPosEnd,
+          transitionDelay: delayEnter
+        },
+        width: isAuto ? 'fit-content' : isFilled ? '100%' : undefined
+      }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        as: to ? 'div' : 'button',
+        disabled: Boolean(isDisabled || isLoading),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: Math.max(0, numericBorderRadius - _borderWidth),
+        width: "100%",
+        height: "100%"
+      }, baseStyles, sizeStyles, iconPad, {
+        backgroundColor: (baseStyles == null ? void 0 : baseStyles.backgroundColor) || mainTone,
+        color: resolvedTextColor,
+        borderWidth: 0,
+        cursor: isDisabled ? 'default' : 'pointer'
+      }), linkOrContent));
+    }
+    // --- Default: Standard Button ---
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: variant === 'link' && to ? 'div' : 'button',
       type: variant === 'link' && to ? undefined : 'button',
@@ -5270,19 +5364,12 @@
       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);
+    }, baseStyles, views == null ? void 0 : views.container, props), linkOrContent);
   };
   // --- Main Component ---
+  // --- Main Component ---
   var ButtonView = _ref5 => {
-    var _ref6, _base$color;
+    var _ref6, _ref7, _base$color;
     var {
         /* behaviour */
         variant = 'filled',
@@ -5294,6 +5381,10 @@
         // primary candidate for main color
         color,
         // 2nd candidate for main color (NOT text‑color)
+        scheme,
+        // New scheme prop
+        reversed = false,
+        // New reversed prop
         isAuto = true,
         isFilled,
         isDisabled,
@@ -5309,7 +5400,6 @@
         shadow,
         onClick,
         views = {},
-        themeMode: elementMode,
         /* effect props */
         borderMovingDuration = 2,
         borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'],
@@ -5319,20 +5409,22 @@
       props = _objectWithoutPropertiesLoose(_ref5, _excluded4$3);
     /* theme helpers */
     var {
-      getColor,
+      getColorHex,
       themeMode
     } = appStudio.useTheme();
-    var mode = elementMode != null ? elementMode : themeMode;
     /* MAIN COLOR – determines the entire palette */
-    var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.primary';
-    var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
-      themeMode: mode
-    });
+    var mainColorKey = (_ref6 = (_ref7 = backgroundColor != null ? backgroundColor : color) != null ? _ref7 : scheme) != null ? _ref6 : 'theme.primary';
+    var mainTone = getColorHex(isDisabled ? 'theme.disabled' : mainColorKey);
     var tone = contrast(mainTone);
     /* text color with mixBlendMode for maximum visibility */
-    var textColor = tone === 'light' ? '#000000' : '#FFFFFF';
+    var textColor;
+    if (tone === 'light') {
+      textColor = '#000000';
+    } else {
+      textColor = '#FFFFFF';
+    }
     /* variant palette */
-    var palette = React.useMemo(() => getButtonVariants(mainTone, tone === 'light'), [mainTone, tone, mode]);
+    var palette = React.useMemo(() => getButtonVariants(mainTone, tone === 'light', reversed), [mainTone, tone, reversed]);
     var base = palette[variant];
     var resolvedTextColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : textColor;
     // Render content logic safely
@@ -5346,39 +5438,12 @@
       isIconRounded: isIconRounded,
       views: views
     }, children);
-    // Dispatch to the correct variant component
-    if (variant === 'borderMoving') {
-      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') {
-      return /*#__PURE__*/React__default.createElement(AnimatedStrokeButton, Object.assign({
-        variant: variant,
-        to: to,
-        onClick: onClick,
-        views: views,
-        size: size,
-        accentColor: animatedStrokeAccentColor,
-        textColor: animatedStrokeTextColor,
-        getColor: getColor
-      }, props), children);
-    }
     // 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,
+      animation: props.animation,
       to: to,
       isDisabled: isDisabled,
       isLoading: isLoading,
@@ -5394,7 +5459,14 @@
       iconPad: iconPad,
       resolvedTextColor: resolvedTextColor,
       content: content,
-      size: size
+      size: size,
+      mainTone: mainTone,
+      tone: tone,
+      borderMovingDuration: borderMovingDuration,
+      borderMovingGradientColors: borderMovingGradientColors,
+      animatedStrokeAccentColor: animatedStrokeAccentColor,
+      animatedStrokeTextColor: animatedStrokeTextColor,
+      getColor: getColorHex
     }, props));
   };
 
@@ -16585,16 +16657,16 @@
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
     var {
-      getColor,
+      getColorHex,
       themeMode
     } = appStudio.useTheme();
-    var themeColor = getColor(backgroundColor, {
+    var themeColor = getColorHex(backgroundColor, {
       themeMode: elementMode || themeMode
     });
-    var disabledColor = getColor('theme.disabled', {
+    var disabledColor = getColorHex('theme.disabled', {
       themeMode: elementMode || themeMode
     });
-    var trackColor = getColor(SliderVariants[variant].backgroundColor, {
+    var trackColor = getColorHex(SliderVariants[variant].backgroundColor, {
       themeMode: elementMode || themeMode
     });
     var isVertical = orientation === 'vertical';
@@ -16766,7 +16838,7 @@
       height: thumbSize + "px",
       borderRadius: "50%",
       backgroundColor: isDisabled ? disabledColor : themeColor,
-      border: "2px solid " + getColor('color.white'),
+      border: "2px solid color.white",
       boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
       cursor: isDisabled ? 'not-allowed' : 'grab',
       transform: isVertical ? 'translateX(-50%)' : 'translateY(-50%)',
@@ -16785,8 +16857,8 @@
     }, views == null ? void 0 : views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "absolute",
       padding: "4px 8px",
-      backgroundColor: getColor('color.black'),
-      color: getColor('color.white'),
+      backgroundColor: 'color.black',
+      color: 'color.white',
       borderRadius: "4px",
       whiteSpace: "nowrap",
       zIndex: 3
@@ -19084,20 +19156,16 @@
     // xl maps to H1 - Largest heading
     xl: {
       fontWeight: 500,
-      marginBottom: 20,
       letterSpacing: 1.25,
       media: {
         mobile: {
-          fontSize: 42,
-          width: '100%'
+          fontSize: 60
         },
         tablet: {
-          fontSize: 50,
-          width: '100%'
+          fontSize: 60
         },
         desktop: {
-          fontSize: 58,
-          minWidth: '60%'
+          fontSize: 96
         }
       }
     },
@@ -19106,13 +19174,13 @@
       fontWeight: 500,
       media: {
         mobile: {
-          fontSize: 32
+          fontSize: 48
         },
         tablet: {
-          fontSize: 40
+          fontSize: 48
         },
         desktop: {
-          fontSize: 48
+          fontSize: 70
         }
       }
     },
@@ -19121,13 +19189,13 @@
       fontWeight: 500,
       media: {
         mobile: {
-          fontSize: 20
+          fontSize: 32
         },
         tablet: {
-          fontSize: 30
+          fontSize: 40
         },
         desktop: {
-          fontSize: 40
+          fontSize: 56
         }
       }
     },
@@ -19137,10 +19205,10 @@
       letterSpacing: -0.2,
       media: {
         mobile: {
-          fontSize: 16
+          fontSize: 20
         },
         tablet: {
-          fontSize: 28
+          fontSize: 24
         },
         desktop: {
           fontSize: 32
@@ -19153,13 +19221,13 @@
       letterSpacing: -0.2,
       media: {
         mobile: {
-          fontSize: 12
+          fontSize: 14
         },
         tablet: {
           fontSize: 18
         },
         desktop: {
-          fontSize: 24
+          fontSize: 20
         }
       }
     }
@@ -19201,7 +19269,7 @@
     })
   };
 
-  var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+  var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "textComponent", "as"];
   /**
    * A component that creates a typewriter effect for text
    */
@@ -19213,9 +19281,11 @@
         onComplete,
         showCursor = true,
         cursorColor = 'currentColor',
-        textStyle
+        textStyle,
+        textComponent
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    var TextComponent = textComponent || appStudio.Text;
     // Convert text to array if it's a string
     var textArray = Array.isArray(text) ? text : [text];
     // State for the currently displayed text
@@ -19268,7 +19338,7 @@
     }, [textArray, currentTextIndex, charIndex, isComplete, onComplete, pauseTime, typingSpeed]);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displayedText.map((text, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: index
-    }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+    }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
       as: "span",
       display: "inline-block",
       width: "0.1em",
@@ -19281,7 +19351,7 @@
     }, textStyle))))))));
   };
 
-  var _excluded$_ = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
+  var _excluded$_ = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps", "textComponent"],
     _excluded2$g = ["style"];
   var SlideEffect = _ref => {
     var {
@@ -19291,12 +19361,14 @@
         stagger = 50,
         sequential = false,
         textStyle,
-        wordProps
+        wordProps,
+        textComponent
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var [displayedText, setDisplayedText] = React.useState(text);
     var [phase, setPhase] = React.useState('entering');
     var [animKey, setAnimKey] = React.useState(0);
+    var TextComponent = textComponent || appStudio.Text;
     var pendingTextRef = React.useRef(null);
     var timeoutRef = React.useRef(null);
     // Handle text changes
@@ -19450,7 +19522,7 @@
         transform: phase === 'visible' ? 'translateY(0)' : undefined,
         opacity: phase === 'visible' ? 1 : undefined
       });
-      return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
         key: animKey + "-" + index,
         as: "span",
         animate: wordAnimation
@@ -19458,7 +19530,7 @@
     })));
   };
 
-  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
+  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
   function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
@@ -19482,7 +19554,8 @@
         highlightSlideDuration = 500,
         highlightSlideStagger = 50,
         highlightSlideSequential = true,
-        themeMode: elementMode
+        themeMode: elementMode,
+        textComponent
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
@@ -19536,6 +19609,7 @@
       highlightSlideStagger,
       highlightSlideSequential
     }, props));
+    var TextComponent = textComponent || appStudio.Text;
     // Common style calculations
     var useResponsive = responsive && !props.media;
     var fontSize = TitleSizes[size];
@@ -19584,8 +19658,8 @@
         return /*#__PURE__*/React__default.createElement(TypewriterEffect, Object.assign({
           text: content,
           typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
-          showCursor: true,
-          cursorColor: "currentColor"
+          cursorColor: "currentColor",
+          textComponent: TextComponent
         }, highlightProps));
       }
       if (highlightSlide) {
@@ -19597,7 +19671,8 @@
           direction: "up",
           fontSize: useResponsive ? undefined : fontSize,
           fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-          wordProps: highlightProps
+          wordProps: highlightProps,
+          textComponent: TextComponent
         });
       }
       return content;
@@ -19617,7 +19692,7 @@
         lastIndex = match.index + match[0].length;
       }
       if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
         key: "highlight-" + idx,
         as: "span",
         display: "inline",
@@ -19627,7 +19702,7 @@
     }
     // Case 2: Has highlight style but no highlight target - apply style to entire title
     if (highlightStyle && !activeHighlightTarget) {
-      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
         as: "span",
         fontSize: fontSize,
         display: "inline",
@@ -19635,7 +19710,7 @@
       }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
     }
     // Case 3: Default - no highlighting
-    return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
+    return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
   };
 
   /**