@app-studio/web 0.9.62 → 0.9.65

package/dist/web.cjs.development.js

@@ -4797,6 +4797,11 @@ var LoaderView = _ref4 => {
       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,
@@ -4910,12 +4915,19 @@ var IconSizes$1 = {
     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',
@@ -4927,57 +4939,57 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       },
       _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: {
@@ -4985,20 +4997,20 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       },
       _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
       },
@@ -5007,83 +5019,35 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       },
       _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 => {
@@ -5107,176 +5071,95 @@ var ButtonContent = _ref => {
     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,
@@ -5290,9 +5173,220 @@ var StandardButton = _ref4 => {
       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',
@@ -5308,19 +5402,12 @@ var StandardButton = _ref4 => {
     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',
@@ -5332,6 +5419,10 @@ var ButtonView = _ref5 => {
       // 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,
@@ -5347,7 +5438,6 @@ var ButtonView = _ref5 => {
       shadow,
       onClick,
       views = {},
-      themeMode: elementMode,
       /* effect props */
       borderMovingDuration = 2,
       borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'],
@@ -5357,20 +5447,22 @@ var ButtonView = _ref5 => {
     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
@@ -5384,39 +5476,12 @@ var ButtonView = _ref5 => {
     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,
@@ -5432,7 +5497,14 @@ var ButtonView = _ref5 => {
     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));
 };
 
@@ -16623,16 +16695,16 @@ var SliderView = _ref => {
     } = _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';
@@ -16804,7 +16876,7 @@ var SliderView = _ref => {
     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%)',
@@ -16823,8 +16895,8 @@ var SliderView = _ref => {
   }, 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
@@ -19122,20 +19194,16 @@ var ResponsiveTypography = {
   // 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
       }
     }
   },
@@ -19144,13 +19212,13 @@ var ResponsiveTypography = {
     fontWeight: 500,
     media: {
       mobile: {
-        fontSize: 32
+        fontSize: 48
       },
       tablet: {
-        fontSize: 40
+        fontSize: 48
       },
       desktop: {
-        fontSize: 48
+        fontSize: 70
       }
     }
   },
@@ -19159,13 +19227,13 @@ var ResponsiveTypography = {
     fontWeight: 500,
     media: {
       mobile: {
-        fontSize: 20
+        fontSize: 32
       },
       tablet: {
-        fontSize: 30
+        fontSize: 40
       },
       desktop: {
-        fontSize: 40
+        fontSize: 56
       }
     }
   },
@@ -19175,10 +19243,10 @@ var ResponsiveTypography = {
     letterSpacing: -0.2,
     media: {
       mobile: {
-        fontSize: 16
+        fontSize: 20
       },
       tablet: {
-        fontSize: 28
+        fontSize: 24
       },
       desktop: {
         fontSize: 32
@@ -19191,13 +19259,13 @@ var ResponsiveTypography = {
     letterSpacing: -0.2,
     media: {
       mobile: {
-        fontSize: 12
+        fontSize: 14
       },
       tablet: {
         fontSize: 18
       },
       desktop: {
-        fontSize: 24
+        fontSize: 20
       }
     }
   }
@@ -19239,7 +19307,7 @@ var HighlightStyles = {
   })
 };
 
-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
  */
@@ -19251,9 +19319,11 @@ var TypewriterEffect = _ref => {
       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
@@ -19306,7 +19376,7 @@ var TypewriterEffect = _ref => {
   }, [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",
@@ -19319,7 +19389,7 @@ var TypewriterEffect = _ref => {
   }, 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 {
@@ -19329,12 +19399,14 @@ var SlideEffect = _ref => {
       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
@@ -19488,7 +19560,7 @@ var SlideEffect = _ref => {
       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
@@ -19496,7 +19568,7 @@ var SlideEffect = _ref => {
   })));
 };
 
-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, '\\$&');
 }
@@ -19520,7 +19592,8 @@ var TitleView = _ref => {
       highlightSlideDuration = 500,
       highlightSlideStagger = 50,
       highlightSlideSequential = true,
-      themeMode: elementMode
+      themeMode: elementMode,
+      textComponent
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
@@ -19574,6 +19647,7 @@ var TitleView = _ref => {
     highlightSlideStagger,
     highlightSlideSequential
   }, props));
+  var TextComponent = textComponent || appStudio.Text;
   // Common style calculations
   var useResponsive = responsive && !props.media;
   var fontSize = TitleSizes[size];
@@ -19622,8 +19696,8 @@ var TitleView = _ref => {
       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) {
@@ -19635,7 +19709,8 @@ var TitleView = _ref => {
         direction: "up",
         fontSize: useResponsive ? undefined : fontSize,
         fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-        wordProps: highlightProps
+        wordProps: highlightProps,
+        textComponent: TextComponent
       });
     }
     return content;
@@ -19655,7 +19730,7 @@ var TitleView = _ref => {
       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",
@@ -19665,7 +19740,7 @@ var TitleView = _ref => {
   }
   // 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",
@@ -19673,7 +19748,7 @@ var TitleView = _ref => {
     }, !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);
 };
 
 /**