@app-studio/web 0.8.85 → 0.8.87

package/dist/web.cjs.development.js

@@ -16,6 +16,7 @@ var appStudio = require('app-studio');
 require('core-js/modules/es.symbol.description.js');
 require('core-js/modules/es.parse-float.js');
 var reactRouterDom = require('react-router-dom');
+var contrast = _interopDefault(require('contrast'));
 require('core-js/modules/es.promise.js');
 require('core-js/modules/es.array.reduce.js');
 require('core-js/modules/es.number.to-fixed.js');
@@ -3380,18 +3381,21 @@ var LinkView = _ref => {
   };
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: to,
-    target: isExternal ? '_blank' : '_self'
-  }, /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+    target: isExternal ? '_blank' : '_self',
+    style: {
+      textDecoration: 'inherit',
+      color: 'inherit'
+    }
+  }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
-    textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-  }, views.text, props), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
     gap: 3,
     alignItems: "center",
-    flexWrap: "nowrap"
-  }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
+    flexWrap: "nowrap",
+    textDecoration: 'none'
+  }, views.text, props), children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     widthHeight: IconSizes[iconSize]
-  }))));
+  })));
 };
 
 // Defines the 'LinkComponent' as a functional component with props typed to 'LinkProps'
@@ -3404,125 +3408,6 @@ var LinkComponent = props => {
 // Exports 'LinkComponent' as 'Link' for use in other parts of the application
 var Link = LinkComponent;
 
-/**
- * Button Styles
- *
- * Defines the styles for the Button component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-/**
- * Button sizes following the 4px grid system
- */
-var ButtonSizes = {
-  xs: {
-    // Height: 24px (6 × 4px)
-    height: 24,
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 6,
-    paddingRight: 6,
-    // Typography
-    fontSize: 12,
-    fontWeight: '500',
-    lineHeight: 20,
-    letterSpacing: '-0.01em'
-  },
-  sm: {
-    // Height: 32px (8 × 4px)
-    height: 32,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 12,
-    paddingRight: 12,
-    // Typography
-    fontSize: 14,
-    fontWeight: '500',
-    lineHeight: 20,
-    letterSpacing: '-0.01em'
-  },
-  md: {
-    // Height: 40px (10 × 4px) - standard height for interactive elements
-    height: 40,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 16,
-    paddingRight: 16,
-    // Typography
-    fontSize: 14,
-    fontWeight: '500',
-    lineHeight: 24,
-    letterSpacing: '-0.01em'
-  },
-  lg: {
-    // Height: 48px (12 × 4px)
-    height: 48,
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 20,
-    paddingRight: 20,
-    // Typography
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: 24,
-    letterSpacing: '-0.01em'
-  },
-  xl: {
-    // Height: 60px (15 × 4px)
-    height: 60,
-    paddingTop: 16,
-    paddingBottom: 16,
-    paddingLeft: 28,
-    paddingRight: 28,
-    // Typography
-    fontSize: 18,
-    fontWeight: '500',
-    lineHeight: 28,
-    letterSpacing: '-0.01em'
-  }
-};
-/**
- * Button shapes with consistent border radius
- */
-var ButtonShapes = {
-  sharp: 0,
-  rounded: 8,
-  pillShaped: 999
-};
-/**
- * Icon sizes for different button sizes
- */
-var IconSizes$1 = {
-  xs: {
-    width: 16,
-    height: 16,
-    padding: 6
-  },
-  sm: {
-    width: 20,
-    height: 20,
-    padding: 6
-  },
-  md: {
-    width: 24,
-    height: 24,
-    padding: 8
-  },
-  lg: {
-    width: 24,
-    height: 24,
-    padding: 12
-  },
-  xl: {
-    width: 28,
-    height: 28,
-    padding: 14
-  }
-};
-
 // Defines a mapping of spinning speed labels to their respective duration in seconds for the Loader component animations.
 // Sets up a scale of sizes, mapping size labels to numerical values to be used for Loader component dimensions.
 var DefaultSizes = {
@@ -3721,290 +3606,312 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$a = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "views", "color", "backgroundColor"],
-  _excluded2$3 = ["_hover", "_active"],
-  _excluded3$3 = ["height"];
-// Using require for contrast as it seems to be a common pattern in your code
-var contrast = /*#__PURE__*/require('contrast');
+/**
+ * Button Styles
+ *
+ * Defines the styles for the Button component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+/**
+ * Button sizes following the 4px grid system
+ */
+var ButtonSizes = {
+  xs: {
+    // Height: 24px (6 × 4px)
+    minHeight: 4 * 4,
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 4,
+    paddingRight: 4,
+    // Typography
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: '-0.01em'
+  },
+  sm: {
+    // Height: 32px (8 × 4px)
+    minHeight: 6 * 4,
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 12,
+    paddingRight: 12,
+    // Typography
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: 12,
+    letterSpacing: '-0.01em'
+  },
+  md: {
+    // Height: 40px (10 × 4px) - standard height for interactive elements
+    minHeight: 8 * 4,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    // Typography
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: '-0.01em'
+  },
+  lg: {
+    minHeight: 10 * 4,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 20,
+    paddingRight: 20,
+    // Typography
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: '-0.01em'
+  },
+  xl: {
+    // Height: 60px (15 × 4px)
+    minHeight: 12 * 4,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 24,
+    paddingRight: 24,
+    // Typography
+    fontSize: 18,
+    fontWeight: '500',
+    lineHeight: 24,
+    letterSpacing: '-0.01em'
+  }
+};
+/**
+ * Button shapes with consistent border radius
+ */
+var ButtonShapes = {
+  sharp: 0,
+  rounded: 8,
+  pillShaped: 999
+};
+/**
+ * Icon sizes for different button sizes
+ */
+var IconSizes$1 = {
+  xs: {
+    width: 16,
+    height: 16,
+    padding: 6
+  },
+  sm: {
+    width: 20,
+    height: 20,
+    padding: 6
+  },
+  md: {
+    width: 24,
+    height: 24,
+    padding: 8
+  },
+  lg: {
+    width: 24,
+    height: 24,
+    padding: 12
+  },
+  xl: {
+    width: 28,
+    height: 28,
+    padding: 14
+  }
+};
+var getButtonVariants = (color, isLight) => ({
+  filled: {
+    backgroundColor: color,
+    color: isLight ? 'color.black' : 'color.white',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    _hover: {
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
+    },
+    _active: {
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
+    },
+    transition: 'all 0.2s ease'
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    color: color,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: color,
+    _hover: {
+      backgroundColor: color,
+      color: isLight ? 'light.black' : 'light.white',
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
+    },
+    _active: {
+      backgroundColor: color,
+      color: isLight ? 'light.black' : 'light.white',
+      transform: 'translateY(0)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
+    },
+    transition: 'all 0.2s ease'
+  },
+  ghost: {
+    backgroundColor: 'transparent',
+    color: color,
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderColor: 'transparent',
+    _hover: {
+      backgroundColor: color,
+      color: isLight ? 'light.black' : 'light.white',
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
+    },
+    _active: {
+      backgroundColor: color,
+      color: isLight ? 'light.black' : 'light.white',
+      transform: 'translateY(0)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
+    },
+    transition: 'all 0.2s ease'
+  },
+  link: {
+    backgroundColor: 'transparent',
+    color: isLight ? color : 'light.black',
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderColor: 'transparent',
+    textDecoration: 'underline',
+    textUnderlineOffset: '1px',
+    textDecorationThickness: '1px',
+    _hover: {
+      textDecorationThickness: '2px'
+    },
+    _active: {
+      textDecorationThickness: '2px'
+    },
+    transition: 'all 0.2s ease'
+  }
+});
+
+var _excluded$a = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "themeMode"];
 var ButtonView = _ref => {
-  var _props$onClick;
+  var _ref2;
   var {
-      icon,
-      shadow,
-      children,
-      ariaLabel,
-      to,
-      isAuto = false,
-      isFilled = false,
-      isIconRounded = false,
-      isLoading = false,
-      isDisabled = false,
-      size = 'md',
+      /* behaviour */
       variant = 'filled',
-      iconPosition = 'left',
+      size = 'md',
       shape = 'rounded',
-      onClick = () => {},
-      loaderProps = {},
+      iconPosition = 'left',
       loaderPosition = 'left',
-      effect = 'default' // 'default', 'hover', 'reverse'
+      backgroundColor,
+      // primary candidate for main color
+      color // 2nd candidate for main color (NOT text‑color)
       ,
-      setIsHovered = () => {},
-      isExternal = false,
-      themeMode: elementMode,
-      // Allow overriding themeMode for this element
-      views,
-      color,
-      // Text color prop
-      backgroundColor = 'theme.primary' // Background color prop
+      isDisabled,
+      isLoading,
+      isIconRounded,
+      /* content */
+      icon,
+      children,
+      /* nav */
+      to,
+      isExternal,
+      /* misc */
+      shadow,
+      onClick,
+      views = {},
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  /* theme helpers */
   var {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var handleHover = over => setIsHovered(over);
-  var isActive = !(isDisabled || isLoading);
-  var defaultNativeProps = {
-    disabled: !isActive
-  };
-  // Determine the base background color key/value, considering disabled state
-  var buttonBackgroundColorKey = isActive ? backgroundColor : 'theme.disabled';
-  // --- Provided Color Logic ---
-  // Determine the effective theme mode for this button
-  var mode = elementMode != null ? elementMode : themeMode; // effective mode
-  // Resolve the base background color string
-  var bg = getColor(buttonBackgroundColorKey, {
-    themeMode: mode
-  });
-  // Resolve the background color string in the opposite theme mode (for reverse effect, though not directly used for ghost/outline text contrast)
-  // const bgHover = getColor(buttonBackgroundColorKey, {
-  //   themeMode: mode === 'light' ? 'dark' : 'light',
-  // }); // bgHover is not strictly needed for the text contrast logic below
-  // Check contrast of base background
-  var isBgLight = contrast(bg) === mode;
-  // Determine contrasting text color key for the base background
-  var txtOnBgKey = isBgLight ? 'color.black' : 'color.white';
-  // --- End Provided Color Logic ---
-  // Determine the default text color key/value if 'color' prop is not provided
-  // For filled buttons, default text color should contrast with the background (use txtOnBgKey).
-  // For outline/link/ghost, a theme-appropriate text color is usually better (e.g., theme.text or theme.primary).
-  var defaultTextColorKey;
-  if (variant === 'filled') {
-    defaultTextColorKey = txtOnBgKey; // Use the calculated contrasting color key
-  } else {
-    // For non-filled variants, default to theme's text color or primary color
-    defaultTextColorKey = 'theme.primary'; // Or 'theme.primary' depending on design system
-  }
-  // Determine the actual key/value for the base text color
-  // Use the provided 'color' prop if available, otherwise use the calculated default
-  var baseTextColorKey = color || defaultTextColorKey;
-  // Resolve the actual base text color string
-  var resolvedBaseTextColor = getColor(baseTextColorKey, {
-    themeMode: mode
-  });
-  // Resolve the contrasting color string for the base background (used for text in outline/ghost reverse)
-  var contrastingColorForBg = getColor(txtOnBgKey, {
-    themeMode: mode
-  });
-  // Resolve the contrasting color string for the base text color (used for text in ghost reverse)
-  var isBaseTextLight = contrast(resolvedBaseTextColor) === 'light';
-  var contrastingColorForBaseText = getColor(isBaseTextLight ? 'color.black' : 'color.white', {
+  var mode = elementMode != null ? elementMode : themeMode;
+  /* MAIN COLOR – determines the entire palette */
+  var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
+  var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
     themeMode: mode
   });
-  // --- Button Variant Styles Function ---
-  // This function calculates the styles based on the current state (base, hover, active)
-  var getButtonVariantStyles = _ref2 => {
-    var {
-      currentVariant,
-      currentEffect,
-      resolvedBg,
-      // Resolved base background color string (bg)
-      resolvedBaseTextColor,
-      // Resolved base text color string
-      contrastingColorForBg,
-      // Resolved contrasting color string for resolvedBg
-      contrastingColorForBaseText,
-      // Resolved contrasting color string for resolvedBaseTextColor
-      resolvedBorderColor
-    } = _ref2;
-    // Define the base styles for each variant
-    var baseStyles = {
-      filled: {
-        backgroundColor: resolvedBg,
-        color: resolvedBaseTextColor,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'transparent'
-      },
-      outline: {
-        backgroundColor: 'transparent',
-        color: resolvedBaseTextColor,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: resolvedBorderColor
-      },
-      link: {
-        backgroundColor: 'transparent',
-        color: resolvedBg,
-        borderWidth: 0,
-        borderStyle: 'none',
-        borderColor: 'transparent',
-        textDecoration: 'underline'
-      },
-      ghost: {
-        backgroundColor: 'transparent',
-        color: resolvedBaseTextColor,
-        borderWidth: 0,
-        borderStyle: 'none',
-        borderColor: 'transparent'
-      }
-    };
-    // Define the styles applied on hover/active when effect is 'reverse'
-    var reverseHoverActiveStyles = {
-      filled: {
-        backgroundColor: 'transparent',
-        color: resolvedBg,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: resolvedBg
-      },
-      outline: {
-        backgroundColor: resolvedBg,
-        color: contrastingColorForBg,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'transparent'
-      },
-      link: {
-        backgroundColor: 'transparent',
-        color: resolvedBg,
-        borderWidth: 0,
-        borderStyle: 'none',
-        borderColor: 'transparent',
-        textDecoration: 'none'
-      },
-      ghost: {
-        backgroundColor: resolvedBg,
-        color: contrastingColorForBaseText,
-        borderWidth: 0,
-        borderStyle: 'none',
-        borderColor: 'transparent'
-      }
-    };
-    // General hover/active effects (transform, shadow, opacity, etc.)
-    var generalHoverStyles = {
-      transform: 'translateY(2px)',
-      boxShadow: currentVariant === 'link' ? undefined : '0 4px 8px rgba(0, 0, 0, 0.1)',
-      // opacity: currentVariant === 'link' ? 0.8 : undefined,
-      textDecorationThickness: currentVariant === 'link' ? '2px' : undefined
-    };
-    var generalActiveStyles = {
-      transform: 'translateY(-1px)',
-      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-      opacity: currentVariant === 'link' ? 0.8 : undefined,
-      textDecorationThickness: currentVariant === 'link' ? '2px' : undefined
-    };
-    // Combine base styles with conditional hover/active overrides
-    return Object.assign({}, baseStyles[currentVariant], {
-      _hover: Object.assign({}, currentEffect === 'reverse' ? reverseHoverActiveStyles[currentVariant] : {}, currentEffect === 'hover' ? {
-        filter: 'brightness(0.85)'
-      } : {}, generalHoverStyles),
-      _active: Object.assign({}, currentEffect === 'reverse' ? reverseHoverActiveStyles[currentVariant] : {}, currentEffect === 'hover' ? {
-        filter: 'brightness(0.7)'
-      } : {}, generalActiveStyles)
-    });
-  };
-  // Get the calculated variant styles for the current state
-  var buttonVariantStyles = getButtonVariantStyles({
-    currentVariant: variant,
-    currentEffect: effect,
-    resolvedBg: bg,
-    resolvedBaseTextColor: resolvedBaseTextColor,
-    contrastingColorForBg: contrastingColorForBg,
-    contrastingColorForBaseText: contrastingColorForBaseText,
-    resolvedBorderColor: bg
-  });
-  // Extract hover and active styles from the calculated styles
-  var {
-      _hover,
-      _active
-    } = buttonVariantStyles,
-    baseButtonVariantStyles = _objectWithoutPropertiesLoose(buttonVariantStyles, _excluded2$3);
-  var buttonSizeStyles = ButtonSizes[size];
-  var scaleWidth = {
-    width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
-  };
-  var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
-  // Use Horizontal or Vertical container based on icon position
-  var Container = ['left', 'right'].includes(iconPosition) ? appStudio.Horizontal : appStudio.Vertical;
-  // Create the button content with proper spacing and alignment
-  var content = /*#__PURE__*/React__default.createElement(Container, Object.assign({
+  var tone = contrast(mainTone);
+  /* variant palette */
+  var palette = React.useMemo(() => getButtonVariants(mainTone, tone == 'light'), [mainTone, tone]);
+  var base = palette[variant];
+  /* layout helpers */
+  var Wrapper = ['left', 'right'].includes(iconPosition) ? appStudio.Horizontal : appStudio.Vertical;
+  var sizeStyles = ButtonSizes[size];
+  var iconPad = isIconRounded ? IconSizes$1[size] : {};
+  var content = /*#__PURE__*/React__default.createElement(Wrapper, Object.assign({
     gap: 8,
     alignItems: "center",
-    justifyContent: "center"
-  }, views == null ? void 0 : views.content), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
+    justifyContent: "center",
+    color: 'inherit',
+    _hover: {
+      color: 'inherit'
+    }
+  }, sizeStyles, views == null ? void 0 : views.content), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
     size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
-    color: baseButtonVariantStyles.color
+    color: 'inherit',
+    _hover: {
+      color: 'inherit'
+    }
   }, views == null ? void 0 : views.loader))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: baseButtonVariantStyles.color
+    color: 'inherit',
+    _hover: {
+      color: 'inherit'
+    }
   }, views == null ? void 0 : views.icon), icon)), children, icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: baseButtonVariantStyles.color
+    color: 'inherit',
+    _hover: {
+      color: 'inherit'
+    }
   }, views == null ? void 0 : views.icon), icon)), isLoading && loaderPosition === 'right' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
     size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
-    color: baseButtonVariantStyles.color
+    color: 'inherit',
+    _hover: {
+      color: 'inherit'
+    }
   }, views == null ? void 0 : views.loader))));
-  // Determine if the button should render as a Link or a button Element
-  var isLink = variant === 'link' && to;
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-    gap: 8,
-    as: isLink ? 'div' : 'button',
-    type: isLink ? undefined : 'button',
+    as: variant === 'link' && to ? 'div' : 'button',
+    type: variant === 'link' && to ? undefined : 'button',
+    disabled: Boolean(isDisabled || isLoading)
+  }, sizeStyles, iconPad, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    "aria-label": ariaLabel,
-    // backgroundColor="transparent" // Remove this unless it's intended to override variant styles
+    // width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined}
+    /* visuals */
     borderRadius: ButtonShapes[shape],
-    onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
-    onMouseEnter: () => handleHover(true),
-    onMouseLeave: () => handleHover(false),
-    cursor: isActive ? isLink ? 'pointer' : 'pointer' : 'default',
+    boxShadow: shadow,
     transition: "all 0.2s ease",
-    // filter and transform are now handled within _hover/_active styles
-    // Apply shadow if provided
-    boxShadow: shadow ? shadow : undefined
-  }, defaultNativeProps, (_ref3 => {
-    var rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
-    return rest;
-  })(props), buttonSizeStyles, baseButtonVariantStyles, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, {
-    // Apply hover and active styles
-    _hover: _hover,
-    _active: _active
-  }, props, views == null ? void 0 : views.container), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+    cursor: isDisabled ? 'default' : 'pointer',
+    onClick: onClick
+  }, base, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
     to: to,
     isExternal: isExternal,
-    // Link styles should inherit from the button's calculated styles or be defined here
-    // Let's apply relevant styles from the button variant to the Link
-    color: baseButtonVariantStyles.color,
-    textDecoration: baseButtonVariantStyles.textDecoration,
-    textDecorationColor: baseButtonVariantStyles.color,
-    textDecorationThickness: "1px" // Base thickness
-    ,
-    textUnderlineOffset: "2px",
-    transition: "all 0.2s ease",
-    // Apply Link-specific hover/active styles if needed, or let Element's _hover/_active handle it
-    _hover: Object.assign({}, _hover, {
-      textDecorationThickness: '2px'
-    }),
-    _active: Object.assign({}, _active, {
-      textDecorationThickness: '2px'
-    })
+    color: 'inherit',
+    textDecoration: 'inherit',
+    textDecorationColor: 'inherit'
   }, views == null ? void 0 : views.link), content)) : content);
 };
 
@@ -4124,8 +4031,8 @@ var useCardContext = () => {
 };
 
 var _excluded$b = ["children", "views", "style", "themeMode"],
-  _excluded2$4 = ["children", "views", "style", "themeMode"],
-  _excluded3$4 = ["children", "views", "style", "themeMode"],
+  _excluded2$3 = ["children", "views", "style", "themeMode"],
+  _excluded3$3 = ["children", "views", "style", "themeMode"],
   _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
 var CardHeader = _ref => {
   var _contextStyles$header;
@@ -4151,7 +4058,7 @@ var CardContent = _ref2 => {
       children,
       style
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -4169,7 +4076,7 @@ var CardFooter = _ref3 => {
       children,
       style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -4528,8 +4435,8 @@ var useCarouselContext = () => {
 };
 
 var _excluded$c = ["children", "isActive", "views"],
-  _excluded2$5 = ["views", "children"],
-  _excluded3$5 = ["views", "children"],
+  _excluded2$4 = ["views", "children"],
+  _excluded3$4 = ["views", "children"],
   _excluded4$4 = ["children", "views"],
   _excluded5$1 = ["children", "views", "style"],
   _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
@@ -4555,7 +4462,7 @@ var CarouselPreviousComponent = _ref2 => {
       children // Allow custom content/icon
       // Spread remaining ButtonProps
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var {
     goToPrevious,
     canGoPrevious,
@@ -4578,7 +4485,7 @@ var CarouselNextComponent = _ref3 => {
       views,
       children
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var {
     goToNext,
     canGoNext,
@@ -5822,8 +5729,8 @@ var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menu
 };
 
 var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-  _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
-  _excluded3$6 = ["item", "children", "onSelect", "isDisabled", "views"],
+  _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
+  _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
   _excluded4$5 = ["views"],
   _excluded5$2 = ["views"],
   _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
@@ -5931,7 +5838,7 @@ var ContextMenuContent = _ref3 => {
       views,
       style // Capture user-provided style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
   var {
     isOpen,
     position: contextPosition,
@@ -6002,7 +5909,7 @@ var ContextMenuItem = _ref4 => {
       isDisabled = false,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -6228,7 +6135,7 @@ ContextMenu.Divider = ContextMenuDivider;
 ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
 var _excluded$g = ["src", "color", "views", "themeMode"],
-  _excluded2$7 = ["path"];
+  _excluded2$6 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
@@ -6258,7 +6165,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -6690,8 +6597,8 @@ var IconSizes$2 = {
 };
 
 var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3$7 = ["option", "size", "removeOption"],
+  _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded3$6 = ["option", "size", "removeOption"],
   _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 /**
  * Item Component
@@ -6808,7 +6715,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -6911,7 +6818,7 @@ var MultiSelect = _ref6 => {
       size = 'md',
       removeOption = () => {}
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     gap: 8,
@@ -9443,8 +9350,8 @@ var IconSizes$4 = {
 };
 
 var _excluded$t = ["size"],
-  _excluded2$9 = ["size"],
-  _excluded3$8 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
+  _excluded2$8 = ["size"],
+  _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
 var CountryList = _ref => {
   var props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -9455,7 +9362,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -9557,7 +9464,7 @@ var CountryPickerView = _ref5 => {
       },
       themeMode: elementMode
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
   var {
     getColor,
     themeMode
@@ -9808,7 +9715,7 @@ var usePasswordState = props => {
 };
 
 var _excluded$v = ["visibleIcon", "hiddenIcon"],
-  _excluded2$a = ["isVisible", "setIsVisible"];
+  _excluded2$9 = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -9824,7 +9731,7 @@ var PasswordComponent = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -10857,7 +10764,7 @@ var TextFieldComponent$1 = props => {
 var FormikTextField = TextFieldComponent$1;
 
 var _excluded$D = ["visibleIcon", "hiddenIcon"],
-  _excluded2$b = ["isVisible", "setIsVisible"];
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -10874,7 +10781,7 @@ var PasswordComponent$1 = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -12306,8 +12213,8 @@ var ModalTypography = {
 };
 
 var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
-  _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+  _excluded2$b = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
+  _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
   _excluded5$3 = ["children", "views"];
 var ModalOverlay = _ref => {
@@ -12356,7 +12263,7 @@ var ModalContainer = _ref2 => {
       shape = 'rounded',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$c);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$b);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)'
   } : {
@@ -12389,7 +12296,7 @@ var ModalHeader = _ref3 => {
       buttonPosition = 'right',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
     onClick: onClose
@@ -13866,8 +13773,8 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
 };
 
 var _excluded$M = ["children", "views"],
-  _excluded2$d = ["items", "side", "align", "views"],
-  _excluded3$a = ["item", "views"],
+  _excluded2$c = ["items", "side", "align", "views"],
+  _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
   _excluded5$4 = ["trigger", "items", "side", "align", "views", "themeMode"];
 // Create context for the DropdownMenu
@@ -13928,7 +13835,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
   var {
     isOpen,
     //activeSubmenuId, setActiveSubmenuId, size,
@@ -13964,7 +13871,7 @@ var DropdownMenuItem = _ref4 => {
       item,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$9);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -14013,8 +13920,8 @@ var DropdownMenuItem = _ref4 => {
   }, item.label), hasSubmenu && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     marginLeft: 8
   }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement("svg", {
-    width: "16",
-    height: "16",
+    width: "16px",
+    height: "16px",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -14277,7 +14184,7 @@ var useRect = ref => {
 };
 
 var _excluded$O = ["children", "views", "asChild"],
-  _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+  _excluded2$d = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -14363,7 +14270,7 @@ var HoverCardContent = _ref3 => {
       minWidth = '200px',
       maxWidth = '300px'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
   var {
     isOpen,
     cancelCloseTimer,
@@ -15426,8 +15333,8 @@ var SidebarTransitions = {
 };
 
 var _excluded$V = ["children", "showToggleButton", "views"],
-  _excluded2$f = ["children", "views"],
-  _excluded3$b = ["children", "views"],
+  _excluded2$e = ["children", "views"],
+  _excluded3$a = ["children", "views"],
   _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
 // Create context for the Sidebar
 var SidebarContext = /*#__PURE__*/React.createContext({
@@ -15525,7 +15432,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
   var {
     isExpanded
   } = useSidebarContext();
@@ -15543,7 +15450,7 @@ var SidebarFooter = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
   var {
     isExpanded
   } = useSidebarContext();
@@ -16101,8 +16008,8 @@ var HandleIconStyles = {
 };
 
 var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
-  _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
-  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
+  _excluded2$f = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+  _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
   orientation: 'horizontal',
@@ -16209,7 +16116,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
   var {
     orientation,
     size,
@@ -16349,7 +16256,7 @@ var ResizableView = _ref4 => {
       containerRef,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     ref: containerRef,
@@ -17149,8 +17056,8 @@ var CommandFooterStyles = {
 };
 
 var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
-  _excluded2$h = ["children", "views"],
-  _excluded3$d = ["heading", "children", "views"],
+  _excluded2$g = ["children", "views"],
+  _excluded3$c = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
   _excluded5$5 = ["children", "views"],
   _excluded6$3 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
@@ -17212,7 +17119,7 @@ var CommandList = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
 };
 // Command Group component
@@ -17222,7 +17129,7 @@ var CommandGroup = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandGroupStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, CommandGroupHeadingStyles, views == null ? void 0 : views.heading), heading), children);
 };
 // Command Item component
@@ -17669,8 +17576,8 @@ var getArrowStyles = position => {
 };
 
 var _excluded$$ = ["children", "views", "asChild"],
-  _excluded2$i = ["children", "views"],
-  _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
+  _excluded2$h = ["children", "views"],
+  _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -17740,7 +17647,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   var {
     isOpen,
     contentRef,
@@ -17770,7 +17677,7 @@ var TooltipView = _ref4 => {
       showArrow = true,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
   var {
     isOpen,
     // openTooltip,