@veracity/vui 4.0.0-alpha.375407.2602201014 → 4.0.0-alpha.375407.2602230852

package/dist/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiFa,UAAA,qBAAU,eAAA,WAmCtB,kBAAA,CAnCsB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA,YAAA;;iBAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;cAmQV,MAAA,EA4KP,YAAA,WAAuB,WAAA;EAC3B,IAAA,SAAa,UAAA;EACb,IAAA,SAAa,UAAA;AAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgFa,UAAA,qBAAU,eAAA,WAYtB,kBAAA,CAZsB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA,YAAA;;iBAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;cA4OV,MAAA,EAoNP,YAAA,WAAuB,WAAA;EAC3B,IAAA,SAAa,UAAA;EACb,IAAA,SAAa,UAAA;AAAA"}

package/dist/button/button.js

@@ -19,7 +19,6 @@ const DEFAULT_BOX_SHADOW = "md";
 const DEFAULT_DISABLED_OPACITY = .5;
 const BUTTON_TYPE = "button";
 const FOCUS_RING_SIZE = 3;
-const MENU_FOCUS_BORDER_WIDTH = 3;
 const ContentWrapper = styled.span`
   visibility: hidden;
 `;
@@ -43,29 +42,6 @@ const ButtonBase = styled.buttonBox`
   transition-duration: var(--vui-button-transition-duration, fast);
   user-select: none;
   width: fit-content;
-
-  /* Menu variant focus states - default removes focus ring
-   * Used when focusAsBorder class is NOT present (standard focus ring behavior)
-   */
-  &.vui-button-variant-menuDark:not(.focusAsBorder):focus,
-  &.vui-button-variant-menuDark:not(.focusAsBorder):focus-visible,
-  &.vui-button-variant-menuLight:not(.focusAsBorder):focus,
-  &.vui-button-variant-menuLight:not(.focusAsBorder):focus-visible {
-    box-shadow: none;
-    outline: none;
-  }
-
-  /* Menu variant focus states - with border indicator for accessibility
-   * Used when focusAsBorder class IS present (alternative focus indication via border)
-   * Color: theme menuLight/menuDark.focusBorderBottomColor
-   */
-  &.vui-button-variant-menuDark.focusAsBorder:focus,
-  &.vui-button-variant-menuDark.focusAsBorder:focus-visible,
-  &.vui-button-variant-menuLight.focusAsBorder:focus,
-  &.vui-button-variant-menuLight.focusAsBorder:focus-visible {
-    transition: border-bottom 0s linear;
-    border-bottom: ${MENU_FOCUS_BORDER_WIDTH}px solid var(--color-sky-blue-90); /* theme: focusBorderBottomColor */
-  }
 `;
 /**
 * Extracts a numeric value from various input types (number, string, etc.)
@@ -272,17 +248,54 @@ const Button = vui((props, ref) => {
 	const plValue = computed.spacing.pl;
 	const prValue = computed.spacing.pr;
 	const hValue = computed.h;
-	const disabledPropsWithVars = useMemo(() => {
-		if (!computed.disabledProps || Object.keys(computed.disabledProps).length === 0) return {};
-		const { bg, borderColor, color, opacity, ...otherDisabledProps } = computed.disabledProps;
+	const propsWithVars = useMemo(() => {
+		const cssVarMappings = {
+			base: {
+				bg: "--vui-button-bg",
+				borderColor: "--vui-button-border-color",
+				color: "--vui-button-color",
+				hoverBg: "--vui-button-hover-bg",
+				hoverBorderColor: "--vui-button-hover-border-color",
+				hoverColor: "--vui-button-hover-color",
+				activeBg: "--vui-button-active-bg",
+				activeBorderColor: "--vui-button-active-border-color",
+				activeColor: "--vui-button-active-color"
+			},
+			active: {
+				bg: "--vui-button-active-bg",
+				borderColor: "--vui-button-active-border-color",
+				color: "--vui-button-active-color",
+				hoverBg: "--vui-button-active-hover-bg",
+				hoverBorderColor: "--vui-button-active-hover-border-color",
+				hoverColor: "--vui-button-active-hover-color"
+			},
+			disabled: {
+				bg: "--vui-button-disabled-bg",
+				borderColor: "--vui-button-disabled-border-color",
+				color: "--vui-button-disabled-color",
+				opacity: "--vui-button-disabled-opacity"
+			}
+		};
+		const wrapWithVars = (props, mapping) => {
+			if (!props || Object.keys(props).length === 0) return {};
+			const result = {};
+			const wrappedKeys = new Set(Object.keys(mapping));
+			Object.entries(props).forEach(([key, value]) => {
+				if (wrappedKeys.has(key) && value !== void 0) result[key] = `var(${mapping[key]}, ${value})`;
+				else if (!wrappedKeys.has(key)) result[key] = value;
+			});
+			return result;
+		};
 		return {
-			...otherDisabledProps,
-			...bg !== void 0 && { bg: `var(--vui-button-disabled-bg, ${bg})` },
-			...borderColor !== void 0 && { borderColor: `var(--vui-button-disabled-border-color, ${borderColor})` },
-			...color !== void 0 && { color: `var(--vui-button-disabled-color, ${color})` },
-			...opacity !== void 0 && { opacity: `var(--vui-button-disabled-opacity, ${opacity})` }
+			...wrapWithVars(computed.buttonStyles, cssVarMappings.base),
+			...wrapWithVars(computed.activeProps, cssVarMappings.active),
+			...wrapWithVars(computed.disabledProps, cssVarMappings.disabled)
 		};
-	}, [computed.disabledProps]);
+	}, [
+		computed.buttonStyles,
+		computed.activeProps,
+		computed.disabledProps
+	]);
 	const finalProps = useMemo(() => ({
 		borderWidth: `var(--vui-button-border-width, ${borderWidth}px)`,
 		className: computed.buttonClassName,
@@ -295,9 +308,7 @@ const Button = vui((props, ref) => {
 		title: title || "",
 		type: BUTTON_TYPE,
 		variant: finalVariant,
-		...computed.buttonStyles,
-		...computed.activeProps,
-		...disabledPropsWithVars,
+		...propsWithVars,
 		...computed.aliasedProps,
 		...rest
 	}), [
@@ -305,9 +316,7 @@ const Button = vui((props, ref) => {
 		plValue,
 		prValue,
 		computed.buttonClassName,
-		computed.buttonStyles,
-		computed.activeProps,
-		disabledPropsWithVars,
+		propsWithVars,
 		computed.aliasedProps,
 		hValue,
 		disabled,

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { Fragment, useMemo, useCallback } from 'react'\n\nimport { useButtonGroupContext } from '../buttonGroup/context'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport type { SystemProps } from '../system'\nimport { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils'\nimport type { ButtonProps } from './button.types'\nimport ButtonIcon from './buttonIcon'\nimport ButtonText from './buttonText'\nimport { buttonStateMapping, loadingIconProps } from './consts'\nimport { ButtonProvider } from './context'\n\n// Types for internal use\ninterface ButtonStyleContainer {\n  borderWidth?: number\n  h?: number\n  spaceX?: number\n  disabledBg?: string\n  disabledBorderColor?: string\n  disabledColor?: string\n  disabledOpacity?: number\n  activeBg?: string\n  activeBorderBg?: string\n  activeColor?: string\n  borderRadius?: number\n  [key: string]: any\n}\n\ninterface ButtonComputedStyles {\n  borderColor: string\n  activeBorderColor: string\n  activeColor: string\n  hoverBorderColor: string\n  hoverColor: string\n  [key: string]: any\n}\n\ninterface SpacingProps {\n  borderWidth: number\n  pl: string\n  pr: string\n}\n\ninterface ComputedResult {\n  styles: { container?: ButtonStyleContainer; [key: string]: any }\n  borderWidth: number\n  h: number\n  spaceX: number\n  buttonStyles: ButtonComputedStyles\n  spacing: SpacingProps\n  disabledProps: SystemProps\n  activeProps: SystemProps\n  aliasedProps: SystemProps\n  buttonClassName: string\n}\n\n// Constants - TODO: Move to theme tokens for better maintainability\nconst DEFAULT_BORDER_WIDTH = 1\nconst DEFAULT_BOX_SHADOW = 'md'\nconst DEFAULT_DISABLED_OPACITY = 0.5\nconst BUTTON_TYPE = 'button'\nconst FOCUS_RING_SIZE = 3\nconst MENU_FOCUS_BORDER_WIDTH = 3 // Width of focus border for menu variants\n\n// Memoized styled components\nconst ContentWrapper = styled.span`\n  visibility: hidden;\n`\n\n// StateWrapper overlays the button content during state transitions (loading, success, error)\n// Positioned absolutely to avoid layout shifts and uses pointer-events: none on parent\nconst StateWrapper = styled.span`\n  bottom: 0;\n  display: flex;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n`\n\nexport const ButtonBase = styled.buttonBox<ButtonProps>`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: var(--vui-button-font-weight, medium);\n  justify-content: center;\n  line-height: normal;\n  overflow: hidden;\n  position: relative;\n  transition-duration: var(--vui-button-transition-duration, fast);\n  user-select: none;\n  width: fit-content;\n\n  /* Menu variant focus states - default removes focus ring\n   * Used when focusAsBorder class is NOT present (standard focus ring behavior)\n   */\n  &.vui-button-variant-menuDark:not(.focusAsBorder):focus,\n  &.vui-button-variant-menuDark:not(.focusAsBorder):focus-visible,\n  &.vui-button-variant-menuLight:not(.focusAsBorder):focus,\n  &.vui-button-variant-menuLight:not(.focusAsBorder):focus-visible {\n    box-shadow: none;\n    outline: none;\n  }\n\n  /* Menu variant focus states - with border indicator for accessibility\n   * Used when focusAsBorder class IS present (alternative focus indication via border)\n   * Color: theme menuLight/menuDark.focusBorderBottomColor\n   */\n  &.vui-button-variant-menuDark.focusAsBorder:focus,\n  &.vui-button-variant-menuDark.focusAsBorder:focus-visible,\n  &.vui-button-variant-menuLight.focusAsBorder:focus,\n  &.vui-button-variant-menuLight.focusAsBorder:focus-visible {\n    transition: border-bottom 0s linear;\n    border-bottom: ${MENU_FOCUS_BORDER_WIDTH}px solid var(--color-sky-blue-90); /* theme: focusBorderBottomColor */\n  }\n`\n\n/**\n * Extracts a numeric value from various input types (number, string, etc.)\n * @param value - Value to extract number from\n * @param fallback - Default value if extraction fails\n * @returns Extracted number or fallback\n */\nconst extractNumericValue = (value: any, fallback: number = DEFAULT_BORDER_WIDTH): number => {\n  if (typeof value === 'number') return value\n  if (typeof value === 'string') {\n    const parsed = parseInt(value, 10)\n    if (!isNaN(parsed)) return parsed\n  }\n  return fallback\n}\n\n/**\n * Consolidated hook for computing all button styles and props.\n * Combines theme resolution, spacing, state-based styles, and className generation.\n * Reduces memoization overhead by computing all derived values in a single pass.\n *\n * @param mergedProps - Combined props from ButtonGroup context and component props\n * @param variant - Resolved variant object with theme overrides\n * @param borderWidthProp - Optional border width override from props\n * @param icon - Main icon (replaces all content when present)\n * @param iconLeft - Left icon slot\n * @param iconRight - Right icon slot\n * @param isLoading - Loading state flag\n * @param isSplit - Deprecated: Split layout mode\n * @param disabled - Disabled state flag\n * @param isActive - Active state flag\n * @param isRound - Round/pill-shaped borders flag\n * @param isElevated - Box shadow elevation flag\n * @param hasState - Whether button has a state overlay\n * @param isFullWidth - Full width layout flag\n * @param className - Additional CSS classes\n * @param variantProp - Variant name for class generation\n * @returns Computed styles, spacing, props, and className\n */\nconst useButtonComputed = (\n  mergedProps: ButtonProps & SystemProps,\n  variant: { variant?: string },\n  borderWidthProp: any, // Keep as any due to complex BorderWidthProp type from xstyled\n  icon: any,\n  iconLeft: any,\n  iconRight: any,\n  isLoading: boolean,\n  isSplit: boolean,\n  disabled: boolean,\n  isActive: boolean,\n  isRound: boolean,\n  isElevated: boolean,\n  hasState: boolean,\n  isFullWidth: boolean,\n  className: string | undefined,\n  variantProp: string | undefined,\n): ComputedResult => {\n  const styles = useStyleConfig('Button', { ...mergedProps, ...variant }) || {}\n\n  return useMemo(() => {\n    // Theme and style resolution\n    const container = styles.container || {}\n    const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = container\n\n    // Normalize button styles with fallbacks for text colors only\n    const normalizedStyles = {\n      ...buttonStyles,\n      activeColor: buttonStyles.activeColor ?? buttonStyles.color,\n      hoverColor: buttonStyles.hoverColor ?? buttonStyles.color,\n    }\n\n    // Spacing calculations\n    // borderWidth value used for spacing calculations (affects padding adjustments)\n    const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH\n    const spaceXItem = spaceX - border\n    const spaceXText = spaceX * 2 - border\n\n    const spacing = {\n      borderWidth: border, // Store borderWidth for use in finalProps\n      pl: `var(--vui-button-px-start, ${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px)`,\n      pr: `var(--vui-button-px-end, ${icon || iconRight ? spaceXItem : spaceXText}px)`,\n    }\n\n    // Disabled state props with CSS variable overrides\n    // Theme tokens (like landGreen.70) are resolved by styled system, then wrapped in CSS variables\n    // This allows both theme resolution and CSS variable overrides to work together\n    const disabledProps = disabled\n      ? filterUndefined({\n          'aria-disabled': disabled,\n          bg: container?.disabledBg ?? undefined,\n          borderColor: container?.disabledBorderColor ?? undefined,\n          color: container?.disabledColor ?? undefined,\n          hoverBg: container?.disabledBg ?? normalizedStyles.bg,\n          hoverBorderColor: container?.disabledBorderColor ?? normalizedStyles.borderColor,\n          hoverColor: container?.disabledColor ?? normalizedStyles.color,\n          activeBg: container?.disabledBg ?? normalizedStyles.bg,\n          cursor: 'not-allowed',\n          opacity: container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY,\n        })\n      : {}\n\n    // Active state props - prevents hover effects when button is active\n    // Active state (also called \"loading\" in VUI Next) should not be interactive\n    const activeProps = isActive\n      ? filterUndefined({\n          bg: container?.activeBg,\n          borderColor: container?.activeBorderColor,\n          color: container?.activeColor,\n          hoverBg: container?.activeBg,\n          hoverBorderColor: container?.activeBorderColor,\n          hoverColor: container?.activeColor,\n          cursor: 'default',\n        })\n      : {}\n\n    // Aliased props (computed properties)\n    const aliasedProps = filterUndefined({\n      borderRadius: isRound ? h / 2 : `var(--vui-button-border-radius, ${container?.borderRadius || 0}px)`,\n      boxShadow: isElevated ? `var(--vui-button-box-shadow, ${DEFAULT_BOX_SHADOW})` : undefined,\n      minW: icon ? 0 : `var(--vui-button-min-w, auto)`,\n      pointerEvents: hasState ? 'none' : undefined,\n      w: isFullWidth ? '100%' : undefined,\n    })\n\n    // Class name generation\n    const buttonClassName = cs(\n      'vui-button',\n      className,\n      isActive && activeClassName,\n      variantProp ? `vui-button-variant-${variantProp}` : undefined,\n    )\n\n    return {\n      styles,\n      borderWidth,\n      h,\n      spaceX,\n      buttonStyles: normalizedStyles,\n      spacing,\n      disabledProps,\n      activeProps,\n      aliasedProps,\n      buttonClassName,\n    }\n  }, [\n    styles,\n    mergedProps,\n    variant,\n    borderWidthProp,\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading,\n    isSplit,\n    disabled,\n    isActive,\n    isRound,\n    isElevated,\n    hasState,\n    isFullWidth,\n    className,\n    variantProp,\n  ])\n}\n\n/**\n * Unified icon renderer for all button icon positions.\n * Converts string icon names to ButtonIcon components with appropriate margins.\n *\n * @param iconProp - Icon name string or React element\n * @param position - Icon position: 'main' (center), 'left', or 'right'\n * @param isLoading - Whether to show loading spinner (only applies to left position)\n * @returns Rendered icon or null\n */\nconst renderButtonIcon = (\n  iconProp: any,\n  position: 'main' | 'left' | 'right' = 'main',\n  isLoading: boolean = false,\n): React.ReactElement | null => {\n  // Handle loading state for left icon\n  if (position === 'left' && isLoading) {\n    return <ButtonIcon {...loadingIconProps} ml={0} />\n  }\n\n  if (!iconProp) return null\n\n  // Return existing React elements as-is\n  if (!isString(iconProp)) return iconProp\n\n  // Apply position-specific margins for string icon names\n  switch (position) {\n    case 'left':\n      return <ButtonIcon name={iconProp} ml={0} />\n    case 'right':\n      return <ButtonIcon name={iconProp} mr={0} />\n    case 'main':\n    default:\n      return <ButtonIcon name={iconProp} />\n  }\n}\n\n/**\n * Renders the button content (text or children).\n * Wraps text strings in ButtonText component with optional truncation.\n *\n * @param children - React children content\n * @param text - Text string to render\n * @param isTruncated - Whether to enable text truncation\n * @returns Rendered content\n */\nconst renderContent = (children: any, text: any, isTruncated: boolean): React.ReactNode => {\n  if (children) return children\n  if (isReactText(text)) return <ButtonText isTruncated={isTruncated} text={text} />\n  return text\n}\n\n/**\n * Button Component\n *\n * A versatile button component that supports multiple states, sizes, variants, and behaviors.\n * Part of the VUI design system with built-in accessibility features.\n *\n */\nexport const Button = vui<'button', ButtonProps>((props, ref) => {\n  const buttonGroupProps = useButtonGroupContext()\n  const mergedProps = { ...buttonGroupProps, ...props }\n  const {\n    borderWidth: borderWidthProp,\n    children,\n    className,\n    colorScheme,\n    disabled,\n    dropDownIcon = 'falAngleDown',\n    icon,\n    iconLeft,\n    iconRight: iconRightProp,\n    isActive,\n    isDropDown,\n    isElevated,\n    isFullWidth,\n    isLoading,\n    isRound,\n    isSplit,\n    isTruncated,\n    size,\n    state = '',\n    stateMapping,\n    text,\n    title,\n    variant: variantProp,\n    ...rest\n  } = mergedProps\n\n  // Memoized calculations\n  const hasState = useMemo(() => Boolean(state) && state !== 'idle', [state])\n  const states = useMemo(() => ({ ...buttonStateMapping, ...stateMapping }), [stateMapping])\n  const stateData = useMemo(() => states[state] ?? {}, [states, state])\n  const { iconProps: stateIconProps, ...stateProps } = stateData\n\n  const iconRight = useMemo(() => (isDropDown ? 'falAngleDown' : iconRightProp), [isDropDown, iconRightProp])\n\n  const variantForTheme = useMemo(\n    () =>\n      filterUndefined({\n        variant: stateData?.variant ?? variantProp,\n      }),\n    [stateData?.variant, variantProp],\n  )\n\n  // Consolidated computation of all button styles and props\n  const computed = useButtonComputed(\n    mergedProps,\n    variantForTheme,\n    borderWidthProp,\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading ?? false,\n    isSplit ?? false,\n    disabled ?? false,\n    isActive ?? false,\n    isRound ?? false,\n    isElevated ?? false,\n    hasState,\n    isFullWidth ?? false,\n    className,\n    variantProp,\n  )\n\n  // Memoized context value\n  const hasTextContent = Boolean(children || text)\n  const contextValue = useMemo(\n    () => filterUndefined({ disabled, size, variant: variantForTheme.variant, isDropDown, hasTextContent }),\n    [disabled, size, variantForTheme.variant, isDropDown, hasTextContent],\n  )\n\n  // Memoized content wrapper\n  const Content = useMemo(() => (hasState ? ContentWrapper : Fragment), [hasState])\n\n  // Optimized event handler - prevents event bubbling during state overlay interactions\n  // This ensures clicks on the state overlay (loading/success/error) don't trigger button actions\n  const handleStateClick = useCallback((e: { stopPropagation: () => void }) => {\n    e.stopPropagation()\n  }, [])\n\n  // Memoized final props - using primitives to avoid object reference changes\n  const finalVariant = (stateData?.variant ?? variantProp) as string | undefined\n\n  // Extract primitive values for stable dependencies\n  const borderWidth = computed.spacing.borderWidth\n  const plValue = computed.spacing.pl\n  const prValue = computed.spacing.pr\n  const hValue = computed.h\n\n  // Wrap disabled props with CSS variables for customization\n  const disabledPropsWithVars = useMemo(() => {\n    if (!computed.disabledProps || Object.keys(computed.disabledProps).length === 0) return {}\n\n    const { bg, borderColor, color, opacity, ...otherDisabledProps } = computed.disabledProps\n\n    return {\n      ...otherDisabledProps,\n      ...(bg !== undefined && { bg: `var(--vui-button-disabled-bg, ${bg})` }),\n      ...(borderColor !== undefined && { borderColor: `var(--vui-button-disabled-border-color, ${borderColor})` }),\n      ...(color !== undefined && { color: `var(--vui-button-disabled-color, ${color})` }),\n      ...(opacity !== undefined && { opacity: `var(--vui-button-disabled-opacity, ${opacity})` }),\n    }\n  }, [computed.disabledProps])\n\n  const finalProps = useMemo(\n    () => ({\n      borderWidth: `var(--vui-button-border-width, ${borderWidth}px)`,\n      className: computed.buttonClassName,\n      disabled,\n      focusRing: FOCUS_RING_SIZE,\n      h: `var(--vui-button-h, ${hValue}px)`,\n      pl: plValue,\n      pr: prValue,\n      ref,\n      title: title || '',\n      type: BUTTON_TYPE as 'button',\n      variant: finalVariant,\n      ...computed.buttonStyles,\n      ...computed.activeProps,\n      ...disabledPropsWithVars,\n      ...computed.aliasedProps,\n      ...rest,\n    }),\n    [\n      borderWidth,\n      plValue,\n      prValue,\n      computed.buttonClassName,\n      computed.buttonStyles,\n      computed.activeProps,\n      disabledPropsWithVars,\n      computed.aliasedProps,\n      hValue,\n      disabled,\n      ref,\n      title,\n      finalVariant,\n      rest,\n    ],\n  )\n\n  // Render icon elements (not memoized to avoid stale references)\n  const mainIcon = renderButtonIcon(icon, 'main')\n  const leftIcon = renderButtonIcon(iconLeft, 'left', isLoading ?? false)\n  const rightIcon = renderButtonIcon(iconRight, 'right')\n  const contentElement = renderContent(children, text, isTruncated ?? false)\n\n  return (\n    <ButtonProvider value={contextValue}>\n      <ButtonBase {...finalProps}>\n        {hasState && (\n          <StateWrapper onClick={handleStateClick} {...stateProps}>\n            <ButtonIcon m=\"auto\" {...stateIconProps} />\n          </StateWrapper>\n        )}\n\n        <Content>\n          {mainIcon}\n          {!icon && (\n            <>\n              {leftIcon}\n              {contentElement}\n              {rightIcon}\n            </>\n          )}\n          {icon && isDropDown && rightIcon}\n        </Content>\n      </ButtonBase>\n    </ButtonProvider>\n  )\n}) as VuiComponent<'button', ButtonProps> & {\n  Icon: typeof ButtonIcon\n  Text: typeof ButtonText\n}\n\nButton.Icon = ButtonIcon\nButton.Text = ButtonText\nButton.displayName = 'Button'\n\nexport default Button\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { Fragment, useMemo, useCallback } from 'react'\n\nimport { useButtonGroupContext } from '../buttonGroup/context'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport type { SystemProps } from '../system'\nimport { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils'\nimport type { ButtonProps } from './button.types'\nimport ButtonIcon from './buttonIcon'\nimport ButtonText from './buttonText'\nimport { buttonStateMapping, loadingIconProps } from './consts'\nimport { ButtonProvider } from './context'\n\n// Types for internal use\ninterface ButtonStyleContainer {\n  borderWidth?: number\n  h?: number\n  spaceX?: number\n  disabledBg?: string\n  disabledBorderColor?: string\n  disabledColor?: string\n  disabledOpacity?: number\n  activeBg?: string\n  activeBorderBg?: string\n  activeColor?: string\n  borderRadius?: number\n  [key: string]: any\n}\n\ninterface ButtonComputedStyles {\n  borderColor: string\n  activeBorderColor: string\n  activeColor: string\n  hoverBorderColor: string\n  hoverColor: string\n  [key: string]: any\n}\n\ninterface SpacingProps {\n  borderWidth: number\n  pl: string\n  pr: string\n}\n\ninterface ComputedResult {\n  styles: { container?: ButtonStyleContainer; [key: string]: any }\n  borderWidth: number\n  h: number\n  spaceX: number\n  buttonStyles: ButtonComputedStyles\n  spacing: SpacingProps\n  disabledProps: SystemProps\n  activeProps: SystemProps\n  aliasedProps: SystemProps\n  buttonClassName: string\n}\n\n// Constants - TODO: Move to theme tokens for better maintainability\nconst DEFAULT_BORDER_WIDTH = 1\nconst DEFAULT_BOX_SHADOW = 'md'\nconst DEFAULT_DISABLED_OPACITY = 0.5\nconst BUTTON_TYPE = 'button'\nconst FOCUS_RING_SIZE = 3\n\n// Memoized styled components\nconst ContentWrapper = styled.span`\n  visibility: hidden;\n`\n\n// StateWrapper overlays the button content during state transitions (loading, success, error)\n// Positioned absolutely to avoid layout shifts and uses pointer-events: none on parent\nconst StateWrapper = styled.span`\n  bottom: 0;\n  display: flex;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n`\n\nexport const ButtonBase = styled.buttonBox<ButtonProps>`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: var(--vui-button-font-weight, medium);\n  justify-content: center;\n  line-height: normal;\n  overflow: hidden;\n  position: relative;\n  transition-duration: var(--vui-button-transition-duration, fast);\n  user-select: none;\n  width: fit-content;\n`\n\n/**\n * Extracts a numeric value from various input types (number, string, etc.)\n * @param value - Value to extract number from\n * @param fallback - Default value if extraction fails\n * @returns Extracted number or fallback\n */\nconst extractNumericValue = (value: any, fallback: number = DEFAULT_BORDER_WIDTH): number => {\n  if (typeof value === 'number') return value\n  if (typeof value === 'string') {\n    const parsed = parseInt(value, 10)\n    if (!isNaN(parsed)) return parsed\n  }\n  return fallback\n}\n\n/**\n * Consolidated hook for computing all button styles and props.\n * Combines theme resolution, spacing, state-based styles, and className generation.\n * Reduces memoization overhead by computing all derived values in a single pass.\n *\n * @param mergedProps - Combined props from ButtonGroup context and component props\n * @param variant - Resolved variant object with theme overrides\n * @param borderWidthProp - Optional border width override from props\n * @param icon - Main icon (replaces all content when present)\n * @param iconLeft - Left icon slot\n * @param iconRight - Right icon slot\n * @param isLoading - Loading state flag\n * @param isSplit - Deprecated: Split layout mode\n * @param disabled - Disabled state flag\n * @param isActive - Active state flag\n * @param isRound - Round/pill-shaped borders flag\n * @param isElevated - Box shadow elevation flag\n * @param hasState - Whether button has a state overlay\n * @param isFullWidth - Full width layout flag\n * @param className - Additional CSS classes\n * @param variantProp - Variant name for class generation\n * @returns Computed styles, spacing, props, and className\n */\nconst useButtonComputed = (\n  mergedProps: ButtonProps & SystemProps,\n  variant: { variant?: string },\n  borderWidthProp: any, // Keep as any due to complex BorderWidthProp type from xstyled\n  icon: any,\n  iconLeft: any,\n  iconRight: any,\n  isLoading: boolean,\n  isSplit: boolean,\n  disabled: boolean,\n  isActive: boolean,\n  isRound: boolean,\n  isElevated: boolean,\n  hasState: boolean,\n  isFullWidth: boolean,\n  className: string | undefined,\n  variantProp: string | undefined,\n): ComputedResult => {\n  const styles = useStyleConfig('Button', { ...mergedProps, ...variant }) || {}\n\n  return useMemo(() => {\n    // Theme and style resolution\n    const container = styles.container || {}\n    const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = container\n\n    // Normalize button styles with fallbacks for text colors only\n    const normalizedStyles = {\n      ...buttonStyles,\n      activeColor: buttonStyles.activeColor ?? buttonStyles.color,\n      hoverColor: buttonStyles.hoverColor ?? buttonStyles.color,\n    }\n\n    // Spacing calculations\n    // borderWidth value used for spacing calculations (affects padding adjustments)\n    const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH\n    const spaceXItem = spaceX - border\n    const spaceXText = spaceX * 2 - border\n\n    const spacing = {\n      borderWidth: border, // Store borderWidth for use in finalProps\n      pl: `var(--vui-button-px-start, ${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px)`,\n      pr: `var(--vui-button-px-end, ${icon || iconRight ? spaceXItem : spaceXText}px)`,\n    }\n\n    // Disabled state props with CSS variable overrides\n    // Theme tokens (like landGreen.70) are resolved by styled system, then wrapped in CSS variables\n    // This allows both theme resolution and CSS variable overrides to work together\n    const disabledProps = disabled\n      ? filterUndefined({\n          'aria-disabled': disabled,\n          bg: container?.disabledBg ?? undefined,\n          borderColor: container?.disabledBorderColor ?? undefined,\n          color: container?.disabledColor ?? undefined,\n          hoverBg: container?.disabledBg ?? normalizedStyles.bg,\n          hoverBorderColor: container?.disabledBorderColor ?? normalizedStyles.borderColor,\n          hoverColor: container?.disabledColor ?? normalizedStyles.color,\n          activeBg: container?.disabledBg ?? normalizedStyles.bg,\n          cursor: 'not-allowed',\n          opacity: container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY,\n        })\n      : {}\n\n    // Active state props - prevents hover effects when button is active\n    // Active state (also called \"loading\" in VUI Next) should not be interactive\n    const activeProps = isActive\n      ? filterUndefined({\n          bg: container?.activeBg,\n          borderColor: container?.activeBorderColor,\n          color: container?.activeColor,\n          hoverBg: container?.activeBg,\n          hoverBorderColor: container?.activeBorderColor,\n          hoverColor: container?.activeColor,\n          cursor: 'default',\n        })\n      : {}\n\n    // Aliased props (computed properties)\n    const aliasedProps = filterUndefined({\n      borderRadius: isRound ? h / 2 : `var(--vui-button-border-radius, ${container?.borderRadius || 0}px)`,\n      boxShadow: isElevated ? `var(--vui-button-box-shadow, ${DEFAULT_BOX_SHADOW})` : undefined,\n      minW: icon ? 0 : `var(--vui-button-min-w, auto)`,\n      pointerEvents: hasState ? 'none' : undefined,\n      w: isFullWidth ? '100%' : undefined,\n    })\n\n    // Class name generation\n    const buttonClassName = cs(\n      'vui-button',\n      className,\n      isActive && activeClassName,\n      variantProp ? `vui-button-variant-${variantProp}` : undefined,\n    )\n\n    return {\n      styles,\n      borderWidth,\n      h,\n      spaceX,\n      buttonStyles: normalizedStyles,\n      spacing,\n      disabledProps,\n      activeProps,\n      aliasedProps,\n      buttonClassName,\n    }\n  }, [\n    styles,\n    mergedProps,\n    variant,\n    borderWidthProp,\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading,\n    isSplit,\n    disabled,\n    isActive,\n    isRound,\n    isElevated,\n    hasState,\n    isFullWidth,\n    className,\n    variantProp,\n  ])\n}\n\n/**\n * Unified icon renderer for all button icon positions.\n * Converts string icon names to ButtonIcon components with appropriate margins.\n *\n * @param iconProp - Icon name string or React element\n * @param position - Icon position: 'main' (center), 'left', or 'right'\n * @param isLoading - Whether to show loading spinner (only applies to left position)\n * @returns Rendered icon or null\n */\nconst renderButtonIcon = (\n  iconProp: any,\n  position: 'main' | 'left' | 'right' = 'main',\n  isLoading: boolean = false,\n): React.ReactElement | null => {\n  // Handle loading state for left icon\n  if (position === 'left' && isLoading) {\n    return <ButtonIcon {...loadingIconProps} ml={0} />\n  }\n\n  if (!iconProp) return null\n\n  // Return existing React elements as-is\n  if (!isString(iconProp)) return iconProp\n\n  // Apply position-specific margins for string icon names\n  switch (position) {\n    case 'left':\n      return <ButtonIcon name={iconProp} ml={0} />\n    case 'right':\n      return <ButtonIcon name={iconProp} mr={0} />\n    case 'main':\n    default:\n      return <ButtonIcon name={iconProp} />\n  }\n}\n\n/**\n * Renders the button content (text or children).\n * Wraps text strings in ButtonText component with optional truncation.\n *\n * @param children - React children content\n * @param text - Text string to render\n * @param isTruncated - Whether to enable text truncation\n * @returns Rendered content\n */\nconst renderContent = (children: any, text: any, isTruncated: boolean): React.ReactNode => {\n  if (children) return children\n  if (isReactText(text)) return <ButtonText isTruncated={isTruncated} text={text} />\n  return text\n}\n\n/**\n * Button Component\n *\n * A versatile button component that supports multiple states, sizes, variants, and behaviors.\n * Part of the VUI design system with built-in accessibility features.\n *\n */\nexport const Button = vui<'button', ButtonProps>((props, ref) => {\n  const buttonGroupProps = useButtonGroupContext()\n  const mergedProps = { ...buttonGroupProps, ...props }\n  const {\n    borderWidth: borderWidthProp,\n    children,\n    className,\n    colorScheme,\n    disabled,\n    dropDownIcon = 'falAngleDown',\n    icon,\n    iconLeft,\n    iconRight: iconRightProp,\n    isActive,\n    isDropDown,\n    isElevated,\n    isFullWidth,\n    isLoading,\n    isRound,\n    isSplit,\n    isTruncated,\n    size,\n    state = '',\n    stateMapping,\n    text,\n    title,\n    variant: variantProp,\n    ...rest\n  } = mergedProps\n\n  // Memoized calculations\n  const hasState = useMemo(() => Boolean(state) && state !== 'idle', [state])\n  const states = useMemo(() => ({ ...buttonStateMapping, ...stateMapping }), [stateMapping])\n  const stateData = useMemo(() => states[state] ?? {}, [states, state])\n  const { iconProps: stateIconProps, ...stateProps } = stateData\n\n  const iconRight = useMemo(() => (isDropDown ? 'falAngleDown' : iconRightProp), [isDropDown, iconRightProp])\n\n  const variantForTheme = useMemo(\n    () =>\n      filterUndefined({\n        variant: stateData?.variant ?? variantProp,\n      }),\n    [stateData?.variant, variantProp],\n  )\n\n  // Consolidated computation of all button styles and props\n  const computed = useButtonComputed(\n    mergedProps,\n    variantForTheme,\n    borderWidthProp,\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading ?? false,\n    isSplit ?? false,\n    disabled ?? false,\n    isActive ?? false,\n    isRound ?? false,\n    isElevated ?? false,\n    hasState,\n    isFullWidth ?? false,\n    className,\n    variantProp,\n  )\n\n  // Memoized context value\n  const hasTextContent = Boolean(children || text)\n  const contextValue = useMemo(\n    () => filterUndefined({ disabled, size, variant: variantForTheme.variant, isDropDown, hasTextContent }),\n    [disabled, size, variantForTheme.variant, isDropDown, hasTextContent],\n  )\n\n  // Memoized content wrapper\n  const Content = useMemo(() => (hasState ? ContentWrapper : Fragment), [hasState])\n\n  // Optimized event handler - prevents event bubbling during state overlay interactions\n  // This ensures clicks on the state overlay (loading/success/error) don't trigger button actions\n  const handleStateClick = useCallback((e: { stopPropagation: () => void }) => {\n    e.stopPropagation()\n  }, [])\n\n  // Memoized final props - using primitives to avoid object reference changes\n  const finalVariant = (stateData?.variant ?? variantProp) as string | undefined\n\n  // Extract primitive values for stable dependencies\n  const borderWidth = computed.spacing.borderWidth\n  const plValue = computed.spacing.pl\n  const prValue = computed.spacing.pr\n  const hValue = computed.h\n\n  // Wrap props with CSS variables for customization\n  // Combines base, active, and disabled props into a single flat object with CSS variable support\n  const propsWithVars = useMemo(() => {\n    // Define CSS variable mappings for each prop type\n    const cssVarMappings = {\n      base: {\n        bg: '--vui-button-bg',\n        borderColor: '--vui-button-border-color',\n        color: '--vui-button-color',\n        hoverBg: '--vui-button-hover-bg',\n        hoverBorderColor: '--vui-button-hover-border-color',\n        hoverColor: '--vui-button-hover-color',\n        activeBg: '--vui-button-active-bg',\n        activeBorderColor: '--vui-button-active-border-color',\n        activeColor: '--vui-button-active-color',\n      },\n      active: {\n        bg: '--vui-button-active-bg',\n        borderColor: '--vui-button-active-border-color',\n        color: '--vui-button-active-color',\n        hoverBg: '--vui-button-active-hover-bg',\n        hoverBorderColor: '--vui-button-active-hover-border-color',\n        hoverColor: '--vui-button-active-hover-color',\n      },\n      disabled: {\n        bg: '--vui-button-disabled-bg',\n        borderColor: '--vui-button-disabled-border-color',\n        color: '--vui-button-disabled-color',\n        opacity: '--vui-button-disabled-opacity',\n      },\n    }\n\n    // Helper to wrap props with CSS variables\n    const wrapWithVars = (props: Record<string, any>, mapping: Record<string, string>) => {\n      if (!props || Object.keys(props).length === 0) return {}\n\n      const result: Record<string, any> = {}\n      const wrappedKeys = new Set(Object.keys(mapping))\n\n      // Wrap mapped properties with CSS variables\n      Object.entries(props).forEach(([key, value]) => {\n        if (wrappedKeys.has(key) && value !== undefined) {\n          result[key] = `var(${mapping[key]}, ${value})`\n        } else if (!wrappedKeys.has(key)) {\n          result[key] = value\n        }\n      })\n\n      return result\n    }\n\n    // Merge all wrapped props into a single flat object (order matters: base → active → disabled)\n    return {\n      ...wrapWithVars(computed.buttonStyles, cssVarMappings.base),\n      ...wrapWithVars(computed.activeProps, cssVarMappings.active),\n      ...wrapWithVars(computed.disabledProps, cssVarMappings.disabled),\n    }\n  }, [computed.buttonStyles, computed.activeProps, computed.disabledProps])\n\n  const finalProps = useMemo(\n    () => ({\n      borderWidth: `var(--vui-button-border-width, ${borderWidth}px)`,\n      className: computed.buttonClassName,\n      disabled,\n      focusRing: FOCUS_RING_SIZE,\n      h: `var(--vui-button-h, ${hValue}px)`,\n      pl: plValue,\n      pr: prValue,\n      ref,\n      title: title || '',\n      type: BUTTON_TYPE as 'button',\n      variant: finalVariant,\n      ...propsWithVars,\n      ...computed.aliasedProps,\n      ...rest,\n    }),\n    [\n      borderWidth,\n      plValue,\n      prValue,\n      computed.buttonClassName,\n      propsWithVars,\n      computed.aliasedProps,\n      hValue,\n      disabled,\n      ref,\n      title,\n      finalVariant,\n      rest,\n    ],\n  )\n\n  // Render icon elements (not memoized to avoid stale references)\n  const mainIcon = renderButtonIcon(icon, 'main')\n  const leftIcon = renderButtonIcon(iconLeft, 'left', isLoading ?? false)\n  const rightIcon = renderButtonIcon(iconRight, 'right')\n  const contentElement = renderContent(children, text, isTruncated ?? false)\n\n  return (\n    <ButtonProvider value={contextValue}>\n      <ButtonBase {...finalProps}>\n        {hasState && (\n          <StateWrapper onClick={handleStateClick} {...stateProps}>\n            <ButtonIcon m=\"auto\" {...stateIconProps} />\n          </StateWrapper>\n        )}\n\n        <Content>\n          {mainIcon}\n          {!icon && (\n            <>\n              {leftIcon}\n              {contentElement}\n              {rightIcon}\n            </>\n          )}\n          {icon && isDropDown && rightIcon}\n        </Content>\n      </ButtonBase>\n    </ButtonProvider>\n  )\n}) as VuiComponent<'button', ButtonProps> & {\n  Icon: typeof ButtonIcon\n  Text: typeof ButtonText\n}\n\nButton.Icon = ButtonIcon\nButton.Text = ButtonText\nButton.displayName = 'Button'\n\nexport default Button\n"],"mappings":"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"}

package/dist/button/theme.js

@@ -115,28 +115,6 @@ const variants = {
 		activeBg: "var(--action-contrast-subtle-pressed)",
 		activeColor: "var(--action-contrast-solid)"
 	} },
-	blueOutlined: { container: {
-		bg: "var(--color-opacity-none)",
-		borderColor: "var(--action-blue-solid)",
-		color: "var(--action-blue-solid)",
-		hoverBg: "var(--color-opacity-none)",
-		hoverBorderColor: "var(--action-blue-solid-hover)",
-		hoverColor: "var(--action-blue-solid-hover)",
-		activeBg: "var(--color-opacity-none)",
-		activeBorderColor: "var(--action-blue-solid-pressed)",
-		activeColor: "var(--action-blue-solid-pressed)"
-	} },
-	blueText: { container: {
-		bg: "var(--color-opacity-none)",
-		borderColor: "var(--color-opacity-none)",
-		color: "var(--action-blue-solid)",
-		hoverBg: "var(--color-opacity-none)",
-		hoverBorderColor: "var(--color-opacity-none)",
-		hoverColor: "var(--action-blue-solid-hover)",
-		activeBg: "var(--color-opacity-none)",
-		activeBorderColor: "var(--color-opacity-none)",
-		activeColor: "var(--action-blue-solid-pressed)"
-	} },
 	solidGreen: { container: {
 		bg: "var(--action-success-solid)",
 		borderColor: "var(--action-success-solid)",
@@ -146,15 +124,6 @@ const variants = {
 		activeBg: "var(--action-success-solid-pressed)",
 		activeBorderColor: "var(--action-success-solid-pressed)"
 	} },
-	subtleGreen: { container: {
-		bg: "var(--action-success-subtle)",
-		borderColor: "var(--action-success-subtle)",
-		color: "var(--action-success-subtle-inverse)",
-		hoverBg: "var(--action-success-subtle-hover)",
-		hoverBorderColor: "var(--action-success-subtle-hover)",
-		activeBg: "var(--action-success-subtle-pressed)",
-		activeBorderColor: "var(--action-success-subtle-pressed)"
-	} },
 	solidRed: { container: {
 		bg: "var(--action-danger-solid)",
 		borderColor: "var(--action-danger-solid)",
@@ -163,81 +132,6 @@ const variants = {
 		hoverBorderColor: "var(--action-danger-solid-hover)",
 		activeBg: "var(--action-danger-solid-pressed)",
 		activeBorderColor: "var(--action-danger-solid-pressed)"
-	} },
-	subtleRed: { container: {
-		bg: "var(--action-danger-subtle)",
-		borderColor: "var(--action-danger-subtle)",
-		color: "var(--action-danger-subtle-inverse)",
-		hoverBg: "var(--action-danger-subtle-hover)",
-		hoverBorderColor: "var(--action-danger-subtle-hover)",
-		activeBg: "var(--action-danger-subtle-pressed)",
-		activeBorderColor: "var(--action-danger-subtle-pressed)"
-	} },
-	solidBlue: { container: {
-		bg: "var(--action-blue-solid)",
-		borderColor: "var(--action-blue-solid)",
-		color: "var(--action-blue-solid-inverse)",
-		hoverBg: "var(--action-blue-solid-hover)",
-		hoverBorderColor: "var(--action-blue-solid-hover)",
-		activeBg: "var(--action-blue-solid-pressed)",
-		activeBorderColor: "var(--action-blue-solid-pressed)"
-	} },
-	subtleBlue: { container: {
-		bg: "var(--action-blue-subtle)",
-		borderColor: "var(--action-blue-subtle)",
-		color: "var(--action-blue-subtle-inverse)",
-		hoverBg: "var(--action-blue-subtle-hover)",
-		hoverBorderColor: "var(--action-blue-subtle-hover)",
-		activeBg: "var(--action-blue-subtle-pressed)",
-		activeBorderColor: "var(--action-blue-subtle-pressed)"
-	} },
-	solidYellow: { container: {
-		bg: "var(--action-yellow-solid)",
-		borderColor: "var(--action-yellow-solid)",
-		color: "var(--action-yellow-solid-inverse)",
-		hoverBg: "var(--action-yellow-solid-hover)",
-		hoverBorderColor: "var(--action-yellow-solid-hover)",
-		activeBg: "var(--action-yellow-solid-pressed)",
-		activeBorderColor: "var(--action-yellow-solid-pressed)"
-	} },
-	subtleYellow: { container: {
-		bg: "var(--action-yellow-subtle)",
-		borderColor: "var(--action-yellow-subtle)",
-		color: "var(--action-yellow-subtle-inverse)",
-		hoverBg: "var(--action-yellow-subtle-hover)",
-		hoverBorderColor: "var(--action-yellow-subtle-hover)",
-		activeBg: "var(--action-yellow-subtle-pressed)",
-		activeBorderColor: "var(--action-yellow-subtle-pressed)"
-	} },
-	menuLight: { container: {
-		bg: "#ffffff",
-		hoverBg: "#D3EEF8",
-		activeBg: "#E9F7FC",
-		disabledBg: "#F8F7F7",
-		borderColor: "transparent",
-		hoverBorderColor: "#003591",
-		activeBorderColor: "#003591",
-		color: "#1A1A19",
-		hoverColor: "#1A1A19",
-		activeColor: "#003591",
-		disabledColor: "#908D89",
-		disabledBorderColor: "transparent",
-		disabledOpacity: "1"
-	} },
-	menuDark: { container: {
-		bg: "#0F204B",
-		hoverBg: "#003591",
-		activeBg: "#0041B2",
-		disabledBg: "#0F204B",
-		borderColor: "transparent",
-		hoverBorderColor: "#91FFB4",
-		activeBorderColor: "#91FFB4",
-		color: "#FFFFFF",
-		hoverColor: "#FFFFFF",
-		activeColor: "#91FFBA",
-		disabledColor: "#FFFFFF",
-		disabledBorderColor: "transparent",
-		disabledOpacity: "1"
 	} }
 };
 variants.buttonGroupDefault = { container: {

package/dist/button/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/button/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'primaryDark',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n      minW: 48,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n      mr: '5px', // spaceX(4) - border(1) + 1 = 4px, but add 1px for better spacing\n      ml: '5px',\n    },\n    text: {},\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      minW: 64,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n      mr: '7px', // spaceX(6) - border(1) + 1 = 6px + 1px\n      ml: '7px',\n    },\n    text: {},\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      minW: 80,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n      mr: '9px', // spaceX(8) - border(1) + 1 = 8px + 1px\n      ml: '9px',\n    },\n    text: {},\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n      minW: 96,\n      spaceX: 10,\n    },\n    icon: {\n      size: 'lg',\n      mr: '11px', // spaceX(10) - border(1) + 1 = 10px + 1px\n      ml: '11px',\n    },\n    text: {},\n  },\n}\n\nconst variants: Record<string, Record<string, Record<string, string>>> = {\n  primaryDark: {\n    container: {\n      bg: 'var(--action-brand-solid)',\n      borderColor: 'var(--action-brand-solid)',\n      color: 'var(--action-brand-solid-inverse)',\n      hoverBg: 'var(--action-brand-solid-hover)',\n      activeBg: 'var(--action-brand-solid-pressed)',\n    },\n  },\n  secondaryDark: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--action-brand-solid)',\n      color: 'var(--action-brand-solid)',\n      hoverBg: 'var(--action-brand-subtle-hover)',\n      activeBg: 'var(--action-brand-subtle-pressed)',\n    },\n  },\n  tertiaryDark: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--color-opacity-none)',\n      color: 'var(--action-brand-solid)',\n      hoverBg: 'var(--action-brand-subtle-hover)',\n      activeBg: 'var(--action-brand-subtle-pressed)',\n    },\n  },\n  // TODO: Rename to 'primaryContrast', 'secondaryContrast', 'tertiaryContrast' in future breaking change\n  // to align with VUI Next token naming (--action-contrast-*). Requires migration guide for consumers.\n  primaryLight: {\n    container: {\n      bg: 'var(--action-contrast-solid)',\n      borderColor: 'var(--action-contrast-solid)',\n      color: 'var(--action-contrast-solid-inverse)',\n      hoverBg: 'var(--action-contrast-solid-hover)',\n      activeBg: 'var(--action-contrast-solid-pressed)',\n    },\n  },\n  secondaryLight: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--action-contrast-solid)',\n      color: 'var(--action-contrast-solid)',\n      hoverBg: 'var(--action-contrast-subtle-hover)',\n      hoverColor: 'var(--action-contrast-solid)',\n      activeBg: 'var(--action-contrast-subtle-pressed)',\n      activeColor: 'var(--action-contrast-solid)',\n    },\n  },\n  tertiaryLight: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--color-opacity-none)',\n      color: 'var(--action-contrast-solid)',\n      hoverBg: 'var(--action-contrast-subtle-hover)',\n      hoverColor: 'var(--action-contrast-solid)',\n      activeBg: 'var(--action-contrast-subtle-pressed)',\n      activeColor: 'var(--action-contrast-solid)',\n    },\n  },\n\n  blueOutlined: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--action-blue-solid)',\n      color: 'var(--action-blue-solid)',\n      hoverBg: 'var(--color-opacity-none)',\n      hoverBorderColor: 'var(--action-blue-solid-hover)',\n      hoverColor: 'var(--action-blue-solid-hover)',\n      activeBg: 'var(--color-opacity-none)',\n      activeBorderColor: 'var(--action-blue-solid-pressed)',\n      activeColor: 'var(--action-blue-solid-pressed)',\n    },\n  },\n  blueText: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--color-opacity-none)',\n      color: 'var(--action-blue-solid)',\n      hoverBg: 'var(--color-opacity-none)',\n      hoverBorderColor: 'var(--color-opacity-none)',\n      hoverColor: 'var(--action-blue-solid-hover)',\n      activeBg: 'var(--color-opacity-none)',\n      activeBorderColor: 'var(--color-opacity-none)',\n      activeColor: 'var(--action-blue-solid-pressed)',\n    },\n  },\n\n  solidGreen: {\n    container: {\n      bg: 'var(--action-success-solid)',\n      borderColor: 'var(--action-success-solid)',\n      color: 'var(--action-success-solid-inverse)',\n      hoverBg: 'var(--action-success-solid-hover)',\n      hoverBorderColor: 'var(--action-success-solid-hover)',\n      activeBg: 'var(--action-success-solid-pressed)',\n      activeBorderColor: 'var(--action-success-solid-pressed)',\n    },\n  },\n  subtleGreen: {\n    container: {\n      bg: 'var(--action-success-subtle)',\n      borderColor: 'var(--action-success-subtle)',\n      color: 'var(--action-success-subtle-inverse)',\n      hoverBg: 'var(--action-success-subtle-hover)',\n      hoverBorderColor: 'var(--action-success-subtle-hover)',\n      activeBg: 'var(--action-success-subtle-pressed)',\n      activeBorderColor: 'var(--action-success-subtle-pressed)',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'var(--action-danger-solid)',\n      borderColor: 'var(--action-danger-solid)',\n      color: 'var(--action-danger-solid-inverse)',\n      hoverBg: 'var(--action-danger-solid-hover)',\n      hoverBorderColor: 'var(--action-danger-solid-hover)',\n      activeBg: 'var(--action-danger-solid-pressed)',\n      activeBorderColor: 'var(--action-danger-solid-pressed)',\n    },\n  },\n  // subtleRed is an internal variant, used in notification; based on primaryDark\n  subtleRed: {\n    container: {\n      bg: 'var(--action-danger-subtle)',\n      borderColor: 'var(--action-danger-subtle)',\n      color: 'var(--action-danger-subtle-inverse)',\n      hoverBg: 'var(--action-danger-subtle-hover)',\n      hoverBorderColor: 'var(--action-danger-subtle-hover)',\n      activeBg: 'var(--action-danger-subtle-pressed)',\n      activeBorderColor: 'var(--action-danger-subtle-pressed)',\n    },\n  },\n  solidBlue: {\n    container: {\n      bg: 'var(--action-blue-solid)',\n      borderColor: 'var(--action-blue-solid)',\n      color: 'var(--action-blue-solid-inverse)',\n      hoverBg: 'var(--action-blue-solid-hover)',\n      hoverBorderColor: 'var(--action-blue-solid-hover)',\n      activeBg: 'var(--action-blue-solid-pressed)',\n      activeBorderColor: 'var(--action-blue-solid-pressed)',\n    },\n  },\n  // subtleBlue is an internal variant, used in notification; based on primaryDark\n  subtleBlue: {\n    container: {\n      bg: 'var(--action-blue-subtle)',\n      borderColor: 'var(--action-blue-subtle)',\n      color: 'var(--action-blue-subtle-inverse)',\n      hoverBg: 'var(--action-blue-subtle-hover)',\n      hoverBorderColor: 'var(--action-blue-subtle-hover)',\n      activeBg: 'var(--action-blue-subtle-pressed)',\n      activeBorderColor: 'var(--action-blue-subtle-pressed)',\n    },\n  },\n  solidYellow: {\n    container: {\n      bg: 'var(--action-yellow-solid)',\n      borderColor: 'var(--action-yellow-solid)',\n      color: 'var(--action-yellow-solid-inverse)',\n      hoverBg: 'var(--action-yellow-solid-hover)',\n      hoverBorderColor: 'var(--action-yellow-solid-hover)',\n      activeBg: 'var(--action-yellow-solid-pressed)',\n      activeBorderColor: 'var(--action-yellow-solid-pressed)',\n    },\n  },\n  // subtleYellow is an internal variant, used in notification; based on primaryDark\n  subtleYellow: {\n    container: {\n      bg: 'var(--action-yellow-subtle)',\n      borderColor: 'var(--action-yellow-subtle)',\n      color: 'var(--action-yellow-subtle-inverse)',\n      hoverBg: 'var(--action-yellow-subtle-hover)',\n      hoverBorderColor: 'var(--action-yellow-subtle-hover)',\n      activeBg: 'var(--action-yellow-subtle-pressed)',\n      activeBorderColor: 'var(--action-yellow-subtle-pressed)',\n    },\n  },\n  menuLight: {\n    container: {\n      bg: '#ffffff',\n      hoverBg: '#D3EEF8',\n      activeBg: '#E9F7FC',\n      disabledBg: '#F8F7F7',\n      borderColor: 'transparent',\n      hoverBorderColor: '#003591',\n      activeBorderColor: '#003591',\n      color: '#1A1A19',\n      hoverColor: '#1A1A19',\n      activeColor: '#003591',\n      disabledColor: '#908D89',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n  menuDark: {\n    container: {\n      bg: '#0F204B',\n      hoverBg: '#003591',\n      activeBg: '#0041B2',\n      disabledBg: '#0F204B',\n      borderColor: 'transparent',\n      hoverBorderColor: '#91FFB4',\n      activeBorderColor: '#91FFB4',\n      color: '#FFFFFF',\n      hoverColor: '#FFFFFF',\n      activeColor: '#91FFBA',\n      disabledColor: '#FFFFFF',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n}\n\n// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark\nvariants.buttonGroupDefault = {\n  container: {\n    bg: 'var(--color-opacity-none)',\n    borderColor: 'var(--control-placeholder)',\n    color: 'var(--action-brand-solid)',\n    hoverBg: 'var(--action-brand-subtle-hover)',\n    activeBg: 'var(--action-brand-subtle-pressed)',\n  },\n}\n\n// buttonGroupRounded is an internal variant\nvariants.buttonGroupRounded = {\n  container: {\n    bg: 'var(--background-default)',\n    borderColor: 'var(--utility-border-subtle)',\n    color: 'var(--foreground-default)',\n    hoverBg: 'var(--action-brand-subtle-hover)',\n    hoverBorderColor: 'var(--action-brand-subtle-hover)',\n    hoverColor: 'var(--action-brand-subtle-inverse)',\n    activeBg: 'var(--action-brand-solid-pressed)',\n    activeBorderColor: 'var(--action-brand-solid-pressed)',\n    activeColor: 'var(--action-brand-solid-inverse)',\n    borderRadius: '1000',\n    marginRight: 'var(--vui-button-group-rounded-spacing, 22px)',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/button/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'primaryDark',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n      minW: 48,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n      mr: '5px', // spaceX(4) - border(1) + 1 = 4px, but add 1px for better spacing\n      ml: '5px',\n    },\n    text: {},\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      minW: 64,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n      mr: '7px', // spaceX(6) - border(1) + 1 = 6px + 1px\n      ml: '7px',\n    },\n    text: {},\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      minW: 80,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n      mr: '9px', // spaceX(8) - border(1) + 1 = 8px + 1px\n      ml: '9px',\n    },\n    text: {},\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n      minW: 96,\n      spaceX: 10,\n    },\n    icon: {\n      size: 'lg',\n      mr: '11px', // spaceX(10) - border(1) + 1 = 10px + 1px\n      ml: '11px',\n    },\n    text: {},\n  },\n}\n\nconst variants: Record<string, Record<string, Record<string, string>>> = {\n  primaryDark: {\n    container: {\n      bg: 'var(--action-brand-solid)',\n      borderColor: 'var(--action-brand-solid)',\n      color: 'var(--action-brand-solid-inverse)',\n      hoverBg: 'var(--action-brand-solid-hover)',\n      activeBg: 'var(--action-brand-solid-pressed)',\n    },\n  },\n  secondaryDark: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--action-brand-solid)',\n      color: 'var(--action-brand-solid)',\n      hoverBg: 'var(--action-brand-subtle-hover)',\n      activeBg: 'var(--action-brand-subtle-pressed)',\n    },\n  },\n  tertiaryDark: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--color-opacity-none)',\n      color: 'var(--action-brand-solid)',\n      hoverBg: 'var(--action-brand-subtle-hover)',\n      activeBg: 'var(--action-brand-subtle-pressed)',\n    },\n  },\n  // TODO: Rename to 'primaryContrast', 'secondaryContrast', 'tertiaryContrast' in future breaking change\n  // to align with VUI Next token naming (--action-contrast-*). Requires migration guide for consumers.\n  primaryLight: {\n    container: {\n      bg: 'var(--action-contrast-solid)',\n      borderColor: 'var(--action-contrast-solid)',\n      color: 'var(--action-contrast-solid-inverse)',\n      hoverBg: 'var(--action-contrast-solid-hover)',\n      activeBg: 'var(--action-contrast-solid-pressed)',\n    },\n  },\n  secondaryLight: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--action-contrast-solid)',\n      color: 'var(--action-contrast-solid)',\n      hoverBg: 'var(--action-contrast-subtle-hover)',\n      hoverColor: 'var(--action-contrast-solid)',\n      activeBg: 'var(--action-contrast-subtle-pressed)',\n      activeColor: 'var(--action-contrast-solid)',\n    },\n  },\n  tertiaryLight: {\n    container: {\n      bg: 'var(--color-opacity-none)',\n      borderColor: 'var(--color-opacity-none)',\n      color: 'var(--action-contrast-solid)',\n      hoverBg: 'var(--action-contrast-subtle-hover)',\n      hoverColor: 'var(--action-contrast-solid)',\n      activeBg: 'var(--action-contrast-subtle-pressed)',\n      activeColor: 'var(--action-contrast-solid)',\n    },\n  },\n\n  solidGreen: {\n    container: {\n      bg: 'var(--action-success-solid)',\n      borderColor: 'var(--action-success-solid)',\n      color: 'var(--action-success-solid-inverse)',\n      hoverBg: 'var(--action-success-solid-hover)',\n      hoverBorderColor: 'var(--action-success-solid-hover)',\n      activeBg: 'var(--action-success-solid-pressed)',\n      activeBorderColor: 'var(--action-success-solid-pressed)',\n    },\n  },\n\n  solidRed: {\n    container: {\n      bg: 'var(--action-danger-solid)',\n      borderColor: 'var(--action-danger-solid)',\n      color: 'var(--action-danger-solid-inverse)',\n      hoverBg: 'var(--action-danger-solid-hover)',\n      hoverBorderColor: 'var(--action-danger-solid-hover)',\n      activeBg: 'var(--action-danger-solid-pressed)',\n      activeBorderColor: 'var(--action-danger-solid-pressed)',\n    },\n  },\n}\n\n// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark\nvariants.buttonGroupDefault = {\n  container: {\n    bg: 'var(--color-opacity-none)',\n    borderColor: 'var(--control-placeholder)',\n    color: 'var(--action-brand-solid)',\n    hoverBg: 'var(--action-brand-subtle-hover)',\n    activeBg: 'var(--action-brand-subtle-pressed)',\n  },\n}\n\n// buttonGroupRounded is an internal variant\nvariants.buttonGroupRounded = {\n  container: {\n    bg: 'var(--background-default)',\n    borderColor: 'var(--utility-border-subtle)',\n    color: 'var(--foreground-default)',\n    hoverBg: 'var(--action-brand-subtle-hover)',\n    hoverBorderColor: 'var(--action-brand-subtle-hover)',\n    hoverColor: 'var(--action-brand-subtle-inverse)',\n    activeBg: 'var(--action-brand-solid-pressed)',\n    activeBorderColor: 'var(--action-brand-solid-pressed)',\n    activeColor: 'var(--action-brand-solid-inverse)',\n    borderRadius: '1000',\n    marginRight: 'var(--vui-button-group-rounded-spacing, 22px)',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,YAAY;CACb;AAED,MAAM,QAAQ;CAAC;CAAa;CAAQ;CAAO;AAE3C,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,MAAM;GACN,QAAQ;GACT;EACD,MAAM;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACL;EACD,MAAM,EAAE;EACT;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,MAAM;GACN,QAAQ;GACT;EACD,MAAM;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACL;EACD,MAAM,EAAE;EACT;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,MAAM;GACN,QAAQ;GACT;EACD,MAAM;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACL;EACD,MAAM,EAAE;EACT;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,MAAM;GACN,QAAQ;GACT;EACD,MAAM;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACL;EACD,MAAM,EAAE;EACT;CACF;AAED,MAAM,WAAmE;CACvE,aAAa,EACX,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,UAAU;EACX,EACF;CACD,eAAe,EACb,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,UAAU;EACX,EACF;CACD,cAAc,EACZ,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,UAAU;EACX,EACF;CAGD,cAAc,EACZ,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,UAAU;EACX,EACF;CACD,gBAAgB,EACd,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,aAAa;EACd,EACF;CACD,eAAe,EACb,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,aAAa;EACd,EACF;CAED,YAAY,EACV,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,kBAAkB;EAClB,UAAU;EACV,mBAAmB;EACpB,EACF;CAED,UAAU,EACR,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,kBAAkB;EAClB,UAAU;EACV,mBAAmB;EACpB,EACF;CACF;AAGD,SAAS,qBAAqB,EAC5B,WAAW;CACT,IAAI;CACJ,aAAa;CACb,OAAO;CACP,SAAS;CACT,UAAU;CACX,EACF;AAGD,SAAS,qBAAqB,EAC5B,WAAW;CACT,IAAI;CACJ,aAAa;CACb,OAAO;CACP,SAAS;CACT,kBAAkB;CAClB,YAAY;CACZ,UAAU;CACV,mBAAmB;CACnB,aAAa;CACb,cAAc;CACd,aAAa;CACd,EACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/notification/notificationAction.js

@@ -12,6 +12,7 @@ const NotificationAction = vui((props, ref) => {
 	const { children, className, ...rest } = props;
 	const styles = useStyleConfig("Notification", useNotificationContext());
 	const enhancedChild = isValidElement(children) && typeof children.type !== "string" ? cloneElement(children, {
+		size: "md",
 		bg: styles.action?.bg,
 		borderColor: styles.action?.borderColor,
 		color: styles.action?.color,

package/dist/notification/notificationAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import { cloneElement, isValidElement } from 'react'\n\nimport Box from '../box'\nimport type { BoxProps } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationAction = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  // Clone child and apply color overrides from notification theme\n  const enhancedChild =\n    isValidElement(children) && typeof children.type !== 'string'\n      ? cloneElement(children as any, {\n          bg: styles.action?.bg,\n          borderColor: styles.action?.borderColor,\n          color: styles.action?.color,\n          hoverBg: styles.action?.hoverBg,\n          hoverColor: styles.action?.hoverColor,\n          activeBg: styles.action?.activeBg,\n          activeColor: styles.action?.activeColor,\n          ...(children.props as any),\n        })\n      : children\n\n  return (\n    <Box className={cs('vui-notificationAction', className)} ref={ref} {...styles.actionBox} {...rest}>\n      {enhancedChild}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;;AASA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAGvE,MAAM,gBACJ,eAAe,SAAS,IAAI,OAAO,SAAS,SAAS,WACjD,aAAa,UAAiB;EAC5B,IAAI,OAAO,QAAQ;EACnB,aAAa,OAAO,QAAQ;EAC5B,OAAO,OAAO,QAAQ;EACtB,SAAS,OAAO,QAAQ;EACxB,YAAY,OAAO,QAAQ;EAC3B,UAAU,OAAO,QAAQ;EACzB,aAAa,OAAO,QAAQ;EAC5B,GAAI,SAAS;EACd,CAAC,GACF;AAEN,QACE,oBAAC;EAAI,WAAW,GAAG,0BAA0B,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;YAC1F;GACG;EAER;AAEF,mBAAmB,cAAc"}
+{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import { cloneElement, isValidElement } from 'react'\n\nimport Box from '../box'\nimport type { BoxProps } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationAction = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  // Clone child and apply color overrides from notification theme\n  const enhancedChild =\n    isValidElement(children) && typeof children.type !== 'string'\n      ? cloneElement(children as any, {\n          size: 'md',\n          bg: styles.action?.bg,\n          borderColor: styles.action?.borderColor,\n          color: styles.action?.color,\n          hoverBg: styles.action?.hoverBg,\n          hoverColor: styles.action?.hoverColor,\n          activeBg: styles.action?.activeBg,\n          activeColor: styles.action?.activeColor,\n          ...(children.props as any),\n        })\n      : children\n\n  return (\n    <Box className={cs('vui-notificationAction', className)} ref={ref} {...styles.actionBox} {...rest}>\n      {enhancedChild}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;;AASA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAGvE,MAAM,gBACJ,eAAe,SAAS,IAAI,OAAO,SAAS,SAAS,WACjD,aAAa,UAAiB;EAC5B,MAAM;EACN,IAAI,OAAO,QAAQ;EACnB,aAAa,OAAO,QAAQ;EAC5B,OAAO,OAAO,QAAQ;EACtB,SAAS,OAAO,QAAQ;EACxB,YAAY,OAAO,QAAQ;EAC3B,UAAU,OAAO,QAAQ;EACzB,aAAa,OAAO,QAAQ;EAC5B,GAAI,SAAS;EACd,CAAC,GACF;AAEN,QACE,oBAAC;EAAI,WAAW,GAAG,0BAA0B,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;YAC1F;GACG;EAER;AAEF,mBAAmB,cAAc"}

package/dist/notification/theme.js

@@ -23,7 +23,7 @@ const baseStyle = {
 	actionBox: {
 		alignSelf: "flex-end",
 		my: "var(--notification-action-margin-y, 8px)",
-		ml: "var(--notification-action-margin-left, 8px)"
+		mx: "var(--notification-action-margin-x, 8px)"
 	}
 };
 const parts = [

package/dist/notification/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["const baseStyle = {\n  container: {\n    borderRadius: 'var(--notification-border-radius, md)',\n    borderWidth: 'var(--notification-border-width, 1px)',\n  },\n  button: {\n    mt: 'var(--notification-button-margin-top, 8px)',\n    mr: 'var(--notification-button-margin-right, 8px)',\n    mb: 'var(--notification-button-margin-bottom, 0)',\n    ml: 'var(--notification-button-margin-left, 0)',\n    minW: 'var(--notification-button-width, 32px)',\n    h: 'var(--notification-button-height, 32px)',\n  },\n  icon: {\n    ml: 'var(--notification-icon-margin-left, 16px)',\n  },\n  text: {\n    flex: '1',\n    lineHeight: 'var(--notification-text-line-height, 24px)',\n    minW: 0,\n    mx: 'var(--notification-text-margin-x, 16px)',\n    my: 'var(--notification-text-margin-y, 16px)',\n  },\n  actionBox: {\n    alignSelf: 'flex-end',\n    my: 'var(--notification-action-margin-y, 8px)',\n    ml: 'var(--notification-action-margin-left, 8px)',\n  },\n}\n\nconst parts = ['container', 'button', 'icon', 'text', 'title', 'actionBox', 'action']\n\nconst sizes = {}\n\nconst subtleBlue = {\n  container: {\n    bg: 'var(--action-brand-subtle)',\n    borderColor: 'var(--action-brand-inverse)',\n    color: 'var(--action-brand-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-brand-subtle-inverse)',\n    hoverBg: 'var(--action-brand-subtle-hover)',\n    hoverColor: 'var(--action-brand-subtle-inverse)',\n    activeBg: 'var(--action-brand-subtle-pressed)',\n    activeColor: 'var(--action-brand-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-brand-solid)',\n    borderColor: 'var(--action-brand-solid)',\n    color: 'var(--action-brand-solid-inverse)',\n    hoverBg: 'var(--action-brand-solid-hover)',\n    hoverColor: 'var(--action-brand-solid-inverse)',\n    activeBg: 'var(--action-brand-solid-pressed)',\n    activeColor: 'var(--action-brand-solid-inverse)',\n  },\n}\n\nconst subtleRed = {\n  container: {\n    bg: 'var(--action-danger-subtle)',\n    borderColor: 'var(--action-danger-inverse)',\n    color: 'var(--action-danger-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-danger-subtle-inverse)',\n    hoverBg: 'var(--action-danger-subtle-hover)',\n    hoverColor: 'var(--action-danger-subtle-inverse)',\n    activeBg: 'var(--action-danger-subtle-pressed)',\n    activeColor: 'var(--action-danger-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-danger-solid)',\n    borderColor: 'var(--action-danger-solid)',\n    color: 'var(--action-danger-solid-inverse)',\n    hoverBg: 'var(--action-danger-solid-hover)',\n    hoverColor: 'var(--action-danger-solid-inverse)',\n    activeBg: 'var(--action-danger-solid-pressed)',\n    activeColor: 'var(--action-danger-solid-inverse)',\n  },\n}\n\nconst subtleYellow = {\n  container: {\n    bg: 'var(--action-yellow-subtle)',\n    borderColor: 'var(--action-yellow-inverse)',\n    color: 'var(--action-yellow-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-yellow-subtle-inverse)',\n    hoverBg: 'var(--action-yellow-subtle-hover)',\n    hoverColor: 'var(--action-yellow-subtle-inverse)',\n    activeBg: 'var(--action-yellow-subtle-pressed)',\n    activeColor: 'var(--action-yellow-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-yellow-solid)',\n    borderColor: 'var(--action-yellow-solid)',\n    color: 'var(--action-yellow-solid-inverse)',\n    hoverBg: 'var(--action-yellow-solid-hover)',\n    hoverColor: 'var(--action-yellow-solid-inverse)',\n    activeBg: 'var(--action-yellow-solid-pressed)',\n    activeColor: 'var(--action-yellow-solid-inverse)',\n  },\n}\n\nconst subtleGreen = {\n  container: {\n    bg: 'var(--action-success-subtle)',\n    borderColor: 'var(--action-success-inverse)',\n    color: 'var(--action-success-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-success-subtle-inverse)',\n    hoverBg: 'var(--action-success-subtle-hover)',\n    hoverColor: 'var(--action-success-subtle-inverse)',\n    activeBg: 'var(--action-success-subtle-pressed)',\n    activeColor: 'var(--action-success-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-success-solid)',\n    borderColor: 'var(--action-success-solid)',\n    color: 'var(--action-success-solid-inverse)',\n    hoverBg: 'var(--action-success-solid-hover)',\n    hoverColor: 'var(--action-success-solid-inverse)',\n    activeBg: 'var(--action-success-solid-pressed)',\n    activeColor: 'var(--action-success-solid-inverse)',\n  },\n}\n\nconst variants = {\n  subtleBlue,\n  subtleRed,\n  subtleYellow,\n  subtleGreen,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACd;CACD,QAAQ;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;EACN,GAAG;EACJ;CACD,MAAM,EACJ,IAAI,8CACL;CACD,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;EACN,IAAI;EACJ,IAAI;EACL;CACD,WAAW;EACT,WAAW;EACX,IAAI;EACJ,IAAI;EACL;CACF;AAED,MAAM,QAAQ;CAAC;CAAa;CAAU;CAAQ;CAAQ;CAAS;CAAa;CAAS;AAErF,MAAM,QAAQ,EAAE;AAsGhB,MAAM,WAAW;CACf,YArGiB;EACjB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CA+EC,WA7EgB;EAChB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAuDC,cArDmB;EACnB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CA+BC,aA7BkB;EAClB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAOA;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["const baseStyle = {\n  container: {\n    borderRadius: 'var(--notification-border-radius, md)',\n    borderWidth: 'var(--notification-border-width, 1px)',\n  },\n  button: {\n    mt: 'var(--notification-button-margin-top, 8px)',\n    mr: 'var(--notification-button-margin-right, 8px)',\n    mb: 'var(--notification-button-margin-bottom, 0)',\n    ml: 'var(--notification-button-margin-left, 0)',\n    minW: 'var(--notification-button-width, 32px)',\n    h: 'var(--notification-button-height, 32px)',\n  },\n  icon: {\n    ml: 'var(--notification-icon-margin-left, 16px)',\n  },\n  text: {\n    flex: '1',\n    lineHeight: 'var(--notification-text-line-height, 24px)',\n    minW: 0,\n    mx: 'var(--notification-text-margin-x, 16px)',\n    my: 'var(--notification-text-margin-y, 16px)',\n  },\n  actionBox: {\n    alignSelf: 'flex-end',\n    my: 'var(--notification-action-margin-y, 8px)',\n    mx: 'var(--notification-action-margin-x, 8px)',\n  },\n}\n\nconst parts = ['container', 'button', 'icon', 'text', 'title', 'actionBox', 'action']\n\nconst sizes = {}\n\nconst subtleBlue = {\n  container: {\n    bg: 'var(--action-brand-subtle)',\n    borderColor: 'var(--action-brand-inverse)',\n    color: 'var(--action-brand-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-brand-subtle-inverse)',\n    hoverBg: 'var(--action-brand-subtle-hover)',\n    hoverColor: 'var(--action-brand-subtle-inverse)',\n    activeBg: 'var(--action-brand-subtle-pressed)',\n    activeColor: 'var(--action-brand-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-brand-solid)',\n    borderColor: 'var(--action-brand-solid)',\n    color: 'var(--action-brand-solid-inverse)',\n    hoverBg: 'var(--action-brand-solid-hover)',\n    hoverColor: 'var(--action-brand-solid-inverse)',\n    activeBg: 'var(--action-brand-solid-pressed)',\n    activeColor: 'var(--action-brand-solid-inverse)',\n  },\n}\n\nconst subtleRed = {\n  container: {\n    bg: 'var(--action-danger-subtle)',\n    borderColor: 'var(--action-danger-inverse)',\n    color: 'var(--action-danger-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-danger-subtle-inverse)',\n    hoverBg: 'var(--action-danger-subtle-hover)',\n    hoverColor: 'var(--action-danger-subtle-inverse)',\n    activeBg: 'var(--action-danger-subtle-pressed)',\n    activeColor: 'var(--action-danger-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-danger-solid)',\n    borderColor: 'var(--action-danger-solid)',\n    color: 'var(--action-danger-solid-inverse)',\n    hoverBg: 'var(--action-danger-solid-hover)',\n    hoverColor: 'var(--action-danger-solid-inverse)',\n    activeBg: 'var(--action-danger-solid-pressed)',\n    activeColor: 'var(--action-danger-solid-inverse)',\n  },\n}\n\nconst subtleYellow = {\n  container: {\n    bg: 'var(--action-yellow-subtle)',\n    borderColor: 'var(--action-yellow-inverse)',\n    color: 'var(--action-yellow-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-yellow-subtle-inverse)',\n    hoverBg: 'var(--action-yellow-subtle-hover)',\n    hoverColor: 'var(--action-yellow-subtle-inverse)',\n    activeBg: 'var(--action-yellow-subtle-pressed)',\n    activeColor: 'var(--action-yellow-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-yellow-solid)',\n    borderColor: 'var(--action-yellow-solid)',\n    color: 'var(--action-yellow-solid-inverse)',\n    hoverBg: 'var(--action-yellow-solid-hover)',\n    hoverColor: 'var(--action-yellow-solid-inverse)',\n    activeBg: 'var(--action-yellow-solid-pressed)',\n    activeColor: 'var(--action-yellow-solid-inverse)',\n  },\n}\n\nconst subtleGreen = {\n  container: {\n    bg: 'var(--action-success-subtle)',\n    borderColor: 'var(--action-success-inverse)',\n    color: 'var(--action-success-subtle-inverse)',\n  },\n  button: {\n    borderColor: 'var(--color-opacity-none)',\n    color: 'var(--action-success-subtle-inverse)',\n    hoverBg: 'var(--action-success-subtle-hover)',\n    hoverColor: 'var(--action-success-subtle-inverse)',\n    activeBg: 'var(--action-success-subtle-pressed)',\n    activeColor: 'var(--action-success-subtle-inverse)',\n  },\n  action: {\n    bg: 'var(--action-success-solid)',\n    borderColor: 'var(--action-success-solid)',\n    color: 'var(--action-success-solid-inverse)',\n    hoverBg: 'var(--action-success-solid-hover)',\n    hoverColor: 'var(--action-success-solid-inverse)',\n    activeBg: 'var(--action-success-solid-pressed)',\n    activeColor: 'var(--action-success-solid-inverse)',\n  },\n}\n\nconst variants = {\n  subtleBlue,\n  subtleRed,\n  subtleYellow,\n  subtleGreen,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACd;CACD,QAAQ;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;EACN,GAAG;EACJ;CACD,MAAM,EACJ,IAAI,8CACL;CACD,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;EACN,IAAI;EACJ,IAAI;EACL;CACD,WAAW;EACT,WAAW;EACX,IAAI;EACJ,IAAI;EACL;CACF;AAED,MAAM,QAAQ;CAAC;CAAa;CAAU;CAAQ;CAAQ;CAAS;CAAa;CAAS;AAErF,MAAM,QAAQ,EAAE;AAsGhB,MAAM,WAAW;CACf,YArGiB;EACjB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CA+EC,WA7EgB;EAChB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAuDC,cArDmB;EACnB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CA+BC,aA7BkB;EAClB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ;GACN,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAOA;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/sidemenuV2/sidemenuItemV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"mappings":";;;;;;;cAmFa,cAAA,EAkOP,YAAA,QAAoB,mBAAA"}
+{"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"mappings":";;;;;;;cAmFa,cAAA,EAoOP,YAAA,QAAoB,mBAAA"}

package/dist/sidemenuV2/sidemenuItemV2.js

@@ -103,10 +103,7 @@ const SidemenuItemV2 = vui((props, ref) => {
 		size,
 		level
 	]);
-	const themeValues = useMemo(() => ({
-		activeColor: isDark ? "digiGreen.main" : "seaBlue.main",
-		buttonVariant: isDark ? "menuDark" : "menuLight"
-	}), [isDark]);
+	const themeValues = useMemo(() => ({ activeColor: isDark ? "digiGreen.main" : "seaBlue.main" }), [isDark]);
 	const handleClick = useCallback((event) => {
 		if (!computedStates.isDisabled) {
 			const targetTag = event.target;
@@ -122,12 +119,13 @@ const SidemenuItemV2 = vui((props, ref) => {
 	}, [onClick, computedStates.isDisabled]);
 	const buttonStyles = useMemo(() => ({
 		...styles && "item" in styles && styles.item ? styles.item : {},
+		...styles && "button" in styles && styles.button ? styles.button : {},
 		borderLeftColor: isExactlyActive ? themeValues.activeColor : "transparent",
 		transitionProperty: "background-color, border-color, color, transform, opacity",
 		size: computedStates.buttonSize,
 		h: computedStates.buttonSize === "lg" ? 40 : 36,
 		iconSize: computedStates.iconSize,
-		variant: themeValues.buttonVariant,
+		variant: "tertiaryDark",
 		onClick: handleClick,
 		disabled: computedStates.isDisabled,
 		role: "button",
@@ -150,7 +148,7 @@ const SidemenuItemV2 = vui((props, ref) => {
 		return {
 			"aria-label": ariaLabel,
 			className: "vui-sidemenu-item-expand",
-			variant: themeValues.buttonVariant,
+			variant: "tertiaryDark",
 			icon: chevronIcon,
 			size: "sm",
 			pl: "4px",
@@ -162,7 +160,7 @@ const SidemenuItemV2 = vui((props, ref) => {
 			hoverBg: "transparent",
 			activeBg: "transparent"
 		};
-	}, [isSubmenuOpen, themeValues.buttonVariant]);
+	}, [isSubmenuOpen]);
 	const renderPopover = () => /* @__PURE__ */ jsx(SidemenuPopover, {
 		isDark,
 		className,

package/dist/sidemenuV2/sidemenuItemV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItemV2.js","names":["colors"],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect, useMemo, useCallback } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, styled, th, vui } from '../core'\nimport Popover from '../popover'\nimport { colors } from '../theme'\nimport Tooltip from '../tooltip'\nimport { cs, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport SidemenuItemContent from './SidemenuItemContent'\nimport type { SidemenuItemV2Props } from './sidemenuV2.types'\nimport useSidemenuItem from './useSidemenuItem'\n\nexport const PopoverHovered = styled.div<{ hoverColor: string }>`\n  &:hover .vui-sidemenu-item-popover .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n  &:hover div:last-child .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n`\n\n// SidemenuPopover component extracted from inline Popover logic\nconst SidemenuPopover = ({\n  isDark,\n  className,\n  buttonStyles,\n  isExactlyActive,\n  icon,\n  title,\n  isMenuExpanded,\n  children,\n}: {\n  isDark: boolean\n  className?: string\n  buttonStyles: any\n  isExactlyActive: boolean\n  icon?: any\n  title: string\n  isMenuExpanded: boolean\n  children: React.ReactNode\n}) => (\n  <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n    {({ isOpen }: { isOpen: boolean }) => (\n      <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>\n        <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n          <Button\n            {...buttonStyles}\n            borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}\n            isActive={isExactlyActive}\n            className={cs('focusAsBorder')}\n          >\n            <SidemenuItemContent\n              icon={icon}\n              iconSize={buttonStyles.iconSize}\n              title={title}\n              isMenuExpanded={isMenuExpanded}\n            />\n          </Button>\n        </Popover.Trigger>\n        <Popover.Content elevation=\"none\" className={cs('vui-sidemenu-item-content', className)}>\n          <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n            <Button\n              {...buttonStyles}\n              borderLeftColor={'transparent!important'}\n              minW={'240px'}\n              isActive={isOpen && isExactlyActive}\n              className={cs('focusAsBorder')}\n            >\n              <SidemenuItemContent title={title} isInPopover={true} />\n            </Button>\n            {children}\n          </Box>\n        </Popover.Content>\n      </PopoverHovered>\n    )}\n  </Popover>\n)\n\n/** A menu item. */\nexport const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled = false,\n    icon,\n    isActive = false,\n    isExpanded = true,\n    itemId,\n    level = 0,\n    onBottom = false,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  // Use consistent itemId generation - prioritize provided itemId, then use utility function\n  const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`\n\n  const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)\n\n  // Use the isActive prop directly - parent should handle exact path matching\n  const isExactlyActive = isActive\n\n  useEffect(() => {\n    // Only call onExpand/onCollapse if the main menu is expanded\n    // This prevents child items from expanding the main menu when it's collapsed\n    if (isMenuExpanded) {\n      if (isSubmenuOpen) onExpand?.()\n      if (!isSubmenuOpen) onCollapse?.()\n    }\n  }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])\n\n  // Memoized computed values for better performance\n  const computedStates = useMemo(() => {\n    const hasChildren = !!children\n    const isSubmenuCollapsed = hasChildren && !isSubmenuOpen\n    // Only allow submenu expansion when main menu is expanded\n    const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded\n    const shouldShowExpandButton = hasChildren && isMenuExpanded\n    const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)\n    const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)\n\n    const states = {\n      hasChildren,\n      hasChildrenCollapsed: isSubmenuCollapsed,\n      hasChildrenExpanded: isSubmenuExpanded,\n      shouldShowExpandButton,\n      buttonSize,\n      iconSize,\n      isDisabled: disabled,\n      shouldShowBorder: !hasChildren || isSubmenuOpen,\n    }\n\n    return states\n  }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])\n\n  // Memoized theme values to prevent recalculation\n  const themeValues = useMemo(\n    () => ({\n      activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',\n      buttonVariant: isDark ? 'menuDark' : 'menuLight',\n    }),\n    [isDark],\n  )\n\n  // Optimized stable callback\n  const handleClick = useCallback(\n    (event: MouseEvent) => {\n      if (!computedStates.isDisabled) {\n        const targetTag = event.target as HTMLElement\n        if (\n          (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&\n          typeof window !== 'undefined' &&\n          (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)\n        ) {\n          const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')\n          window.open(url, '_blank', 'noopener,noreferrer')\n        } else {\n          event?.stopPropagation?.()\n          onClick?.()\n        }\n      }\n      toggleSubmenu?.()\n    },\n    [onClick, computedStates.isDisabled],\n  )\n\n  // Memoized button styles - Major performance improvement\n  const buttonStyles = useMemo(\n    () => ({\n      // Get base item styles from theme\n      ...(styles && 'item' in styles && styles.item ? styles.item : {}),\n\n      // Dynamic border color based on active state\n      borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',\n\n      // Animation properties (enhanced from theme)\n      transitionProperty: 'background-color, border-color, color, transform, opacity',\n\n      // Button specific properties\n      size: computedStates.buttonSize,\n      h: computedStates.buttonSize === 'lg' ? 40 : 36,\n      iconSize: computedStates.iconSize,\n      variant: themeValues.buttonVariant,\n\n      // Event handlers\n      onClick: handleClick,\n      disabled: computedStates.isDisabled,\n\n      // Accessibility\n      role: 'button',\n      tabIndex: computedStates.isDisabled ? -1 : 0,\n      'aria-disabled': computedStates.isDisabled,\n      'aria-pressed': isExactlyActive,\n\n      // Merge custom props\n      ...rest,\n    }),\n    [\n      // Dependencies grouped logically - simplified since computedStates contains most values\n      styles,\n      computedStates,\n      isExactlyActive,\n      themeValues,\n      handleClick,\n      rest,\n    ],\n  )\n\n  // Memoized expand/collapse button properties\n  const expandButtonProps = useMemo(() => {\n    const isExpanded = isSubmenuOpen\n    const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'\n    const ariaLabel = isExpanded ? 'Collapse' : 'Expand'\n\n    return {\n      'aria-label': ariaLabel,\n      className: 'vui-sidemenu-item-expand',\n      variant: themeValues.buttonVariant,\n      icon: chevronIcon,\n      size: 'sm' as const,\n      pl: '4px',\n      pr: '16px',\n      ml: 'auto',\n      h: '100%',\n      border: 'none',\n      bg: 'transparent',\n      hoverBg: 'transparent',\n      activeBg: 'transparent',\n    }\n  }, [isSubmenuOpen, themeValues.buttonVariant])\n\n  // Helper: Render collapsed popover\n  const renderPopover = () => (\n    <SidemenuPopover\n      isDark={isDark}\n      className={className}\n      buttonStyles={buttonStyles}\n      isExactlyActive={isExactlyActive}\n      icon={icon}\n      title={title}\n      isMenuExpanded={isMenuExpanded}\n    >\n      {children ? children : undefined}\n    </SidemenuPopover>\n  )\n\n  // Helper: Render expanded button\n  const renderButton = () => {\n    if (level === 0 && !isMenuExpanded) {\n      return (\n        <Tooltip text={title} placement=\"right\" offset={[0, -200]}>\n          <Button\n            className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n            {...buttonStyles}\n            isActive={isExactlyActive}\n          >\n            <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />\n            {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n          </Button>\n        </Tooltip>\n      )\n    }\n\n    return (\n      <Button\n        className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n        {...buttonStyles}\n        isActive={isExactlyActive}\n        title={!isMenuExpanded ? title : undefined}\n      >\n        <SidemenuItemContent\n          icon={icon}\n          iconSize={buttonStyles.iconSize}\n          title={title}\n          isMenuExpanded={isMenuExpanded}\n          badge={props.badge}\n          badgeLinkUrl={props.badgeLinkUrl}\n        />\n        {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n        {/* Expand/Collapse button */}\n      </Button>\n    )\n    // No leftover return, handled above\n  }\n\n  // Helper: Render expanded children\n  const renderChildren = () => (\n    <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n      {children}\n    </Box>\n  )\n\n  const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)\n  const shouldShowChildren = computedStates.hasChildrenExpanded\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\" mt={onBottom ? 'auto' : 0} id={computedItemId}>\n      {shouldShowPopover && renderPopover()}\n      {!shouldShowPopover && renderButton()}\n      {shouldShowChildren && renderChildren()}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemV2Props>\n\nSidemenuItemV2.displayName = 'SidemenuItemV2'\n\nexport default SidemenuItemV2\n"],"mappings":"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"}
+{"version":3,"file":"sidemenuItemV2.js","names":["colors"],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect, useMemo, useCallback } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, styled, th, vui } from '../core'\nimport Popover from '../popover'\nimport { colors } from '../theme'\nimport Tooltip from '../tooltip'\nimport { cs, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport SidemenuItemContent from './SidemenuItemContent'\nimport type { SidemenuItemV2Props } from './sidemenuV2.types'\nimport useSidemenuItem from './useSidemenuItem'\n\nexport const PopoverHovered = styled.div<{ hoverColor: string }>`\n  &:hover .vui-sidemenu-item-popover .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n  &:hover div:last-child .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n`\n\n// SidemenuPopover component extracted from inline Popover logic\nconst SidemenuPopover = ({\n  isDark,\n  className,\n  buttonStyles,\n  isExactlyActive,\n  icon,\n  title,\n  isMenuExpanded,\n  children,\n}: {\n  isDark: boolean\n  className?: string\n  buttonStyles: any\n  isExactlyActive: boolean\n  icon?: any\n  title: string\n  isMenuExpanded: boolean\n  children: React.ReactNode\n}) => (\n  <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n    {({ isOpen }: { isOpen: boolean }) => (\n      <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>\n        <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n          <Button\n            {...buttonStyles}\n            borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}\n            isActive={isExactlyActive}\n            className={cs('focusAsBorder')}\n          >\n            <SidemenuItemContent\n              icon={icon}\n              iconSize={buttonStyles.iconSize}\n              title={title}\n              isMenuExpanded={isMenuExpanded}\n            />\n          </Button>\n        </Popover.Trigger>\n        <Popover.Content elevation=\"none\" className={cs('vui-sidemenu-item-content', className)}>\n          <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n            <Button\n              {...buttonStyles}\n              borderLeftColor={'transparent!important'}\n              minW={'240px'}\n              isActive={isOpen && isExactlyActive}\n              className={cs('focusAsBorder')}\n            >\n              <SidemenuItemContent title={title} isInPopover={true} />\n            </Button>\n            {children}\n          </Box>\n        </Popover.Content>\n      </PopoverHovered>\n    )}\n  </Popover>\n)\n\n/** A menu item. */\nexport const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled = false,\n    icon,\n    isActive = false,\n    isExpanded = true,\n    itemId,\n    level = 0,\n    onBottom = false,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  // Use consistent itemId generation - prioritize provided itemId, then use utility function\n  const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`\n\n  const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)\n\n  // Use the isActive prop directly - parent should handle exact path matching\n  const isExactlyActive = isActive\n\n  useEffect(() => {\n    // Only call onExpand/onCollapse if the main menu is expanded\n    // This prevents child items from expanding the main menu when it's collapsed\n    if (isMenuExpanded) {\n      if (isSubmenuOpen) onExpand?.()\n      if (!isSubmenuOpen) onCollapse?.()\n    }\n  }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])\n\n  // Memoized computed values for better performance\n  const computedStates = useMemo(() => {\n    const hasChildren = !!children\n    const isSubmenuCollapsed = hasChildren && !isSubmenuOpen\n    // Only allow submenu expansion when main menu is expanded\n    const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded\n    const shouldShowExpandButton = hasChildren && isMenuExpanded\n    const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)\n    const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)\n\n    const states = {\n      hasChildren,\n      hasChildrenCollapsed: isSubmenuCollapsed,\n      hasChildrenExpanded: isSubmenuExpanded,\n      shouldShowExpandButton,\n      buttonSize,\n      iconSize,\n      isDisabled: disabled,\n      shouldShowBorder: !hasChildren || isSubmenuOpen,\n    }\n\n    return states\n  }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])\n\n  // Memoized theme values to prevent recalculation\n  const themeValues = useMemo(\n    () => ({\n      activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',\n    }),\n    [isDark],\n  )\n\n  // Optimized stable callback\n  const handleClick = useCallback(\n    (event: MouseEvent) => {\n      if (!computedStates.isDisabled) {\n        const targetTag = event.target as HTMLElement\n        if (\n          (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&\n          typeof window !== 'undefined' &&\n          (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)\n        ) {\n          const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')\n          window.open(url, '_blank', 'noopener,noreferrer')\n        } else {\n          event?.stopPropagation?.()\n          onClick?.()\n        }\n      }\n      toggleSubmenu?.()\n    },\n    [onClick, computedStates.isDisabled],\n  )\n\n  // Memoized button styles - Major performance improvement\n  const buttonStyles = useMemo(\n    () => ({\n      // Get base item styles from theme\n      ...(styles && 'item' in styles && styles.item ? styles.item : {}),\n\n      // Apply button theme styles from SideMenuV2 theme (replaces removed menuLight/menuDark variants)\n      ...(styles && 'button' in styles && styles.button ? styles.button : {}),\n\n      // Dynamic border color based on active state\n      borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',\n\n      // Animation properties (enhanced from theme)\n      transitionProperty: 'background-color, border-color, color, transform, opacity',\n\n      // Button specific properties\n      size: computedStates.buttonSize,\n      h: computedStates.buttonSize === 'lg' ? 40 : 36,\n      iconSize: computedStates.iconSize,\n      variant: 'tertiaryDark', // Use base variant, theme overrides applied above\n\n      // Event handlers\n      onClick: handleClick,\n      disabled: computedStates.isDisabled,\n\n      // Accessibility\n      role: 'button',\n      tabIndex: computedStates.isDisabled ? -1 : 0,\n      'aria-disabled': computedStates.isDisabled,\n      'aria-pressed': isExactlyActive,\n\n      // Merge custom props\n      ...rest,\n    }),\n    [\n      // Dependencies grouped logically - simplified since computedStates contains most values\n      styles,\n      computedStates,\n      isExactlyActive,\n      themeValues,\n      handleClick,\n      rest,\n    ],\n  )\n\n  // Memoized expand/collapse button properties\n  const expandButtonProps = useMemo(() => {\n    const isExpanded = isSubmenuOpen\n    const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'\n    const ariaLabel = isExpanded ? 'Collapse' : 'Expand'\n\n    return {\n      'aria-label': ariaLabel,\n      className: 'vui-sidemenu-item-expand',\n      variant: 'tertiaryDark', // Use base variant, styling from parent\n      icon: chevronIcon,\n      size: 'sm' as const,\n      pl: '4px',\n      pr: '16px',\n      ml: 'auto',\n      h: '100%',\n      border: 'none',\n      bg: 'transparent',\n      hoverBg: 'transparent',\n      activeBg: 'transparent',\n    }\n  }, [isSubmenuOpen])\n\n  // Helper: Render collapsed popover\n  const renderPopover = () => (\n    <SidemenuPopover\n      isDark={isDark}\n      className={className}\n      buttonStyles={buttonStyles}\n      isExactlyActive={isExactlyActive}\n      icon={icon}\n      title={title}\n      isMenuExpanded={isMenuExpanded}\n    >\n      {children ? children : undefined}\n    </SidemenuPopover>\n  )\n\n  // Helper: Render expanded button\n  const renderButton = () => {\n    if (level === 0 && !isMenuExpanded) {\n      return (\n        <Tooltip text={title} placement=\"right\" offset={[0, -200]}>\n          <Button\n            className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n            {...buttonStyles}\n            isActive={isExactlyActive}\n          >\n            <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />\n            {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n          </Button>\n        </Tooltip>\n      )\n    }\n\n    return (\n      <Button\n        className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n        {...buttonStyles}\n        isActive={isExactlyActive}\n        title={!isMenuExpanded ? title : undefined}\n      >\n        <SidemenuItemContent\n          icon={icon}\n          iconSize={buttonStyles.iconSize}\n          title={title}\n          isMenuExpanded={isMenuExpanded}\n          badge={props.badge}\n          badgeLinkUrl={props.badgeLinkUrl}\n        />\n        {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n        {/* Expand/Collapse button */}\n      </Button>\n    )\n    // No leftover return, handled above\n  }\n\n  // Helper: Render expanded children\n  const renderChildren = () => (\n    <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n      {children}\n    </Box>\n  )\n\n  const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)\n  const shouldShowChildren = computedStates.hasChildrenExpanded\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\" mt={onBottom ? 'auto' : 0} id={computedItemId}>\n      {shouldShowPopover && renderPopover()}\n      {!shouldShowPopover && renderButton()}\n      {shouldShowChildren && renderChildren()}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemV2Props>\n\nSidemenuItemV2.displayName = 'SidemenuItemV2'\n\nexport default SidemenuItemV2\n"],"mappings":"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"}

package/dist/sidemenuV2/theme.js

@@ -57,7 +57,8 @@ const parts = [
 	"bottom",
 	"toggleButton",
 	"item",
-	"sidemenuTop"
+	"sidemenuTop",
+	"button"
 ];
 const sizes = {
 	sm: { toggleButton: {
@@ -80,7 +81,22 @@ const variants = {
 			variant: "tertiaryDark",
 			hoverBg: "sandstone.95"
 		},
-		item: { color: "darkBlue.main" }
+		item: { color: "darkBlue.main" },
+		button: {
+			bg: "#ffffff",
+			hoverBg: "#D3EEF8",
+			activeBg: "#E9F7FC",
+			disabledBg: "#F8F7F7",
+			borderColor: "transparent",
+			hoverBorderColor: "#003591",
+			activeBorderColor: "#003591",
+			color: "#1A1A19",
+			hoverColor: "#1A1A19",
+			activeColor: "#003591",
+			disabledColor: "#908D89",
+			disabledBorderColor: "transparent",
+			disabledOpacity: "1"
+		}
 	},
 	dark: {
 		container: {
@@ -94,7 +110,22 @@ const variants = {
 			bg: "darkBlue.main"
 		},
 		toggleButton: { variant: "tertiaryLight" },
-		item: { color: "white" }
+		item: { color: "white" },
+		button: {
+			bg: "#0F204B",
+			hoverBg: "#003591",
+			activeBg: "#0041B2",
+			disabledBg: "#0F204B",
+			borderColor: "transparent",
+			hoverBorderColor: "#91FFB4",
+			activeBorderColor: "#91FFB4",
+			color: "#FFFFFF",
+			hoverColor: "#FFFFFF",
+			activeColor: "#91FFBA",
+			disabledColor: "#FFFFFF",
+			disabledBorderColor: "transparent",
+			disabledOpacity: "1"
+		}
 	}
 };
 var theme_default = {

package/dist/sidemenuV2/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/sidemenuV2/theme.ts"],"sourcesContent":["const baseStyle = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    transition: 'width 0.2s ease-in-out',\n  },\n  content: {\n    flex: 1,\n    overflowY: 'auto',\n    overflowX: 'hidden',\n  },\n  bottom: {\n    flexShrink: 0,\n    borderTop: `1px solid transparent`,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  item: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    flexDirection: 'row',\n    w: '100%',\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\n    textDecoration: 'none',\n    outline: 'none',\n    px: 0,\n    borderLeft: '3px solid transparent',\n  },\n  sidemenuTop: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '12px 16px',\n    minHeight: '64px',\n  },\n  // Add toggle button configuration\n  toggleButton: {\n    baseHeight: 52,\n    basePadding: 2,\n    expandedPaddingMultiplier: 5,\n    collapsedWidth: '100%',\n    expandedWidth: '52px',\n    transition: 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'light',\n}\n\nconst parts = ['container', 'content', 'bottom', 'toggleButton', 'item', 'sidemenuTop']\n\nconst sizes = {\n  sm: {\n    toggleButton: {\n      baseHeight: 44,\n      basePadding: 1.5,\n    },\n  },\n  md: {\n    toggleButton: {\n      baseHeight: 52,\n      basePadding: 2,\n    },\n  },\n  lg: {\n    toggleButton: {\n      baseHeight: 60,\n      basePadding: 2.5,\n    },\n  },\n}\n\nconst variants = {\n  light: {\n    container: {\n      bg: 'white',\n    },\n    toggleButton: {\n      variant: 'tertiaryDark',\n      hoverBg: 'sandstone.95',\n    },\n    item: {\n      color: 'darkBlue.main',\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      color: 'white',\n      boxShadow: '2px 0 4px rgba(0, 0, 0, 0.3)',\n    },\n    bottom: {\n      borderTopColor: 'rgba(255, 255, 255, 0.1)',\n    },\n    sidemenuTop: {\n      borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n      bg: 'darkBlue.main',\n    },\n    toggleButton: {\n      variant: 'tertiaryLight',\n    },\n    item: {\n      color: 'white',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,WAAW;EACT,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;EACb;CACD,SAAS;EACP,MAAM;EACN,WAAW;EACX,WAAW;EACZ;CACD,QAAQ;EACN,YAAY;EACZ,WAAW;EACX,SAAS;EACT,YAAY;EACb;CACD,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,GAAG;EACH,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,IAAI;EACJ,YAAY;EACb;CACD,aAAa;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,YAAY;EACZ,aAAa;EACb,2BAA2B;EAC3B,gBAAgB;EAChB,eAAe;EACf,YAAY;EACb;CACF;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAgB;CAAQ;CAAc;AAEvF,MAAM,QAAQ;CACZ,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;EACd,EACF;CACD,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;EACd,EACF;CACD,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;EACd,EACF;CACF;AAED,MAAM,WAAW;CACf,OAAO;EACL,WAAW,EACT,IAAI,SACL;EACD,cAAc;GACZ,SAAS;GACT,SAAS;GACV;EACD,MAAM,EACJ,OAAO,iBACR;EACF;CACD,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,OAAO;GACP,WAAW;GACZ;EACD,QAAQ,EACN,gBAAgB,4BACjB;EACD,aAAa;GACX,cAAc;GACd,IAAI;GACL;EACD,cAAc,EACZ,SAAS,iBACV;EACD,MAAM,EACJ,OAAO,SACR;EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/sidemenuV2/theme.ts"],"sourcesContent":["const baseStyle = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    transition: 'width 0.2s ease-in-out',\n  },\n  content: {\n    flex: 1,\n    overflowY: 'auto',\n    overflowX: 'hidden',\n  },\n  bottom: {\n    flexShrink: 0,\n    borderTop: `1px solid transparent`,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  item: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    flexDirection: 'row',\n    w: '100%',\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\n    textDecoration: 'none',\n    outline: 'none',\n    px: 0,\n    borderLeft: '3px solid transparent',\n  },\n  sidemenuTop: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '12px 16px',\n    minHeight: '64px',\n  },\n  // Add toggle button configuration\n  toggleButton: {\n    baseHeight: 52,\n    basePadding: 2,\n    expandedPaddingMultiplier: 5,\n    collapsedWidth: '100%',\n    expandedWidth: '52px',\n    transition: 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'light',\n}\n\nconst parts = ['container', 'content', 'bottom', 'toggleButton', 'item', 'sidemenuTop', 'button']\n\nconst sizes = {\n  sm: {\n    toggleButton: {\n      baseHeight: 44,\n      basePadding: 1.5,\n    },\n  },\n  md: {\n    toggleButton: {\n      baseHeight: 52,\n      basePadding: 2,\n    },\n  },\n  lg: {\n    toggleButton: {\n      baseHeight: 60,\n      basePadding: 2.5,\n    },\n  },\n}\n\nconst variants = {\n  light: {\n    container: {\n      bg: 'white',\n    },\n    toggleButton: {\n      variant: 'tertiaryDark',\n      hoverBg: 'sandstone.95',\n    },\n    item: {\n      color: 'darkBlue.main',\n    },\n    button: {\n      bg: '#ffffff',\n      hoverBg: '#D3EEF8',\n      activeBg: '#E9F7FC',\n      disabledBg: '#F8F7F7',\n      borderColor: 'transparent',\n      hoverBorderColor: '#003591',\n      activeBorderColor: '#003591',\n      color: '#1A1A19',\n      hoverColor: '#1A1A19',\n      activeColor: '#003591',\n      disabledColor: '#908D89',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      color: 'white',\n      boxShadow: '2px 0 4px rgba(0, 0, 0, 0.3)',\n    },\n    bottom: {\n      borderTopColor: 'rgba(255, 255, 255, 0.1)',\n    },\n    sidemenuTop: {\n      borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n      bg: 'darkBlue.main',\n    },\n    toggleButton: {\n      variant: 'tertiaryLight',\n    },\n    item: {\n      color: 'white',\n    },\n    button: {\n      bg: '#0F204B',\n      hoverBg: '#003591',\n      activeBg: '#0041B2',\n      disabledBg: '#0F204B',\n      borderColor: 'transparent',\n      hoverBorderColor: '#91FFB4',\n      activeBorderColor: '#91FFB4',\n      color: '#FFFFFF',\n      hoverColor: '#FFFFFF',\n      activeColor: '#91FFBA',\n      disabledColor: '#FFFFFF',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,WAAW;EACT,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;EACb;CACD,SAAS;EACP,MAAM;EACN,WAAW;EACX,WAAW;EACZ;CACD,QAAQ;EACN,YAAY;EACZ,WAAW;EACX,SAAS;EACT,YAAY;EACb;CACD,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,GAAG;EACH,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,IAAI;EACJ,YAAY;EACb;CACD,aAAa;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,YAAY;EACZ,aAAa;EACb,2BAA2B;EAC3B,gBAAgB;EAChB,eAAe;EACf,YAAY;EACb;CACF;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAgB;CAAQ;CAAe;CAAS;AAEjG,MAAM,QAAQ;CACZ,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;EACd,EACF;CACD,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;EACd,EACF;CACD,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;EACd,EACF;CACF;AAED,MAAM,WAAW;CACf,OAAO;EACL,WAAW,EACT,IAAI,SACL;EACD,cAAc;GACZ,SAAS;GACT,SAAS;GACV;EACD,MAAM,EACJ,OAAO,iBACR;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,aAAa;GACb,kBAAkB;GAClB,mBAAmB;GACnB,OAAO;GACP,YAAY;GACZ,aAAa;GACb,eAAe;GACf,qBAAqB;GACrB,iBAAiB;GAClB;EACF;CACD,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,OAAO;GACP,WAAW;GACZ;EACD,QAAQ,EACN,gBAAgB,4BACjB;EACD,aAAa;GACX,cAAc;GACd,IAAI;GACL;EACD,cAAc,EACZ,SAAS,iBACV;EACD,MAAM,EACJ,OAAO,SACR;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,aAAa;GACb,kBAAkB;GAClB,mBAAmB;GACnB,OAAO;GACP,YAAY;GACZ,aAAa;GACb,eAAe;GACf,qBAAqB;GACrB,iBAAiB;GAClB;EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/table/tr.js

@@ -36,12 +36,18 @@ const Tr = vui((props, ref) => {
 	const selectedProps = isSelected ? { bg: "skyBlue.selected" } : {};
 	rest.children = /* @__PURE__ */ jsxs(Fragment$1, { children: [nested !== void 0 && /* @__PURE__ */ jsx(Td, {
 		maxW: 16,
-		px: 0,
+		px: 1,
 		textAlign: "center",
 		children: nested ? /* @__PURE__ */ jsx(Button, {
+			size: "sm",
 			icon: buttonClassName(isExpanded),
 			onClick: onToggle,
-			variant: "subtleBlue"
+			variant: "tertiaryDark",
+			style: {
+				"--vui-button-color": "var(--action-blue-subtle-inverse)",
+				"--vui-button-hover-bg": "var(--action-blue-subtle-hover)",
+				"--vui-button-active-bg": "var(--action-blue-subtle-pressed)"
+			}
 		}) : null
 	}), rest.children] });
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TrBase, {

package/dist/table/tr.js.map

@@ -1 +1 @@
-{"version":3,"file":"tr.js","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={0} textAlign=\"center\">\n          {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant=\"subtleBlue\" /> : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,YAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,iBAAiB,IAAI,EAAE;CAC3C,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;AAE5D,iBAAgB;AACd,gBAAc,eAAe;IAC5B,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB;AACrB,MAAI,YAAY;AACd,iBAAc,MAAM;AACpB,kBAAe;SACV;AACL,iBAAc,KAAK;AACnB,iBAAc;;;CAIlB,MAAM,gBAAgB,aAAa,EAAE,IAAI,oBAAoB,GAAG,EAAE;AAElE,MAAK,WACH,8CACG,WAAW,UACV,oBAAC;EAAG,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SAAS,oBAAC;GAAO,MAAM,gBAAgB,WAAW;GAAE,SAAS;GAAU,SAAQ;IAAe,GAAG;GAC/F,EAEN,KAAK,YACL;AAGL,QACE,8CACE,oBAAC;EACC,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,UAAU;EAChG,iBAAe,QAAQ,WAAW;EAClC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ,EACD,cAAc,UACd;EAEL;AAEF,GAAG,cAAc"}
+{"version":3,"file":"tr.js","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={1} textAlign=\"center\">\n          {nested ? (\n            <Button\n              size=\"sm\"\n              icon={buttonClassName(isExpanded)}\n              onClick={onToggle}\n              variant=\"tertiaryDark\"\n              style={\n                {\n                  '--vui-button-color': 'var(--action-blue-subtle-inverse)',\n                  '--vui-button-hover-bg': 'var(--action-blue-subtle-hover)',\n                  '--vui-button-active-bg': 'var(--action-blue-subtle-pressed)',\n                } as React.CSSProperties\n              }\n            />\n          ) : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,YAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,iBAAiB,IAAI,EAAE;CAC3C,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;AAE5D,iBAAgB;AACd,gBAAc,eAAe;IAC5B,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB;AACrB,MAAI,YAAY;AACd,iBAAc,MAAM;AACpB,kBAAe;SACV;AACL,iBAAc,KAAK;AACnB,iBAAc;;;CAIlB,MAAM,gBAAgB,aAAa,EAAE,IAAI,oBAAoB,GAAG,EAAE;AAElE,MAAK,WACH,8CACG,WAAW,UACV,oBAAC;EAAG,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SACC,oBAAC;GACC,MAAK;GACL,MAAM,gBAAgB,WAAW;GACjC,SAAS;GACT,SAAQ;GACR,OACE;IACE,sBAAsB;IACtB,yBAAyB;IACzB,0BAA0B;IAC3B;IAEH,GACA;GACD,EAEN,KAAK,YACL;AAGL,QACE,8CACE,oBAAC;EACC,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,UAAU;EAChG,iBAAe,QAAQ,WAAW;EAClC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ,EACD,cAAc,UACd;EAEL;AAEF,GAAG,cAAc"}

package/dist/theme/components.d.ts

@@ -1529,7 +1529,7 @@ declare const _default: {
       actionBox: {
         alignSelf: string;
         my: string;
-        ml: string;
+        mx: string;
       };
     };
     parts: string[];
@@ -2445,6 +2445,21 @@ declare const _default: {
         item: {
           color: string;
         };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          disabledBg: string;
+          borderColor: string;
+          hoverBorderColor: string;
+          activeBorderColor: string;
+          color: string;
+          hoverColor: string;
+          activeColor: string;
+          disabledColor: string;
+          disabledBorderColor: string;
+          disabledOpacity: string;
+        };
       };
       dark: {
         container: {
@@ -2465,6 +2480,21 @@ declare const _default: {
         item: {
           color: string;
         };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          disabledBg: string;
+          borderColor: string;
+          hoverBorderColor: string;
+          activeBorderColor: string;
+          color: string;
+          hoverColor: string;
+          activeColor: string;
+          disabledColor: string;
+          disabledBorderColor: string;
+          disabledOpacity: string;
+        };
       };
     };
   };

package/dist/theme/defaultTheme.d.ts

@@ -2047,7 +2047,7 @@ declare const defaultTheme: {
         actionBox: {
           alignSelf: string;
           my: string;
-          ml: string;
+          mx: string;
         };
       };
       parts: string[];
@@ -2963,6 +2963,21 @@ declare const defaultTheme: {
           item: {
             color: string;
           };
+          button: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            disabledBg: string;
+            borderColor: string;
+            hoverBorderColor: string;
+            activeBorderColor: string;
+            color: string;
+            hoverColor: string;
+            activeColor: string;
+            disabledColor: string;
+            disabledBorderColor: string;
+            disabledOpacity: string;
+          };
         };
         dark: {
           container: {
@@ -2983,6 +2998,21 @@ declare const defaultTheme: {
           item: {
             color: string;
           };
+          button: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            disabledBg: string;
+            borderColor: string;
+            hoverBorderColor: string;
+            activeBorderColor: string;
+            color: string;
+            hoverColor: string;
+            activeColor: string;
+            disabledColor: string;
+            disabledBorderColor: string;
+            disabledOpacity: string;
+          };
         };
       };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "4.0.0-alpha.375407.2602201014",
+  "version": "4.0.0-alpha.375407.2602230852",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Veracity",