@aurora-ds/components 1.0.0 → 1.1.0

package/dist/esm/index.js

@@ -1,185 +1,303 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createVariants, createStyles, useTheme, keyframes, cx, createTheme } from '@aurora-ds/theme';
+import { keyframes, createVariants, createStyles, useTheme, cx, createTheme } from '@aurora-ds/theme';
 import * as React from 'react';
 import { createElement, Fragment, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement, useLayoutEffect, useMemo, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
 
-const BADGE_VARIANTS_LIST = ['filled', 'outlined', 'subtle', 'subtleOutlined'];
-/**
- * Builds compound variants combining `variant` × `color` for the Badge.
- * Returns one entry per (color, variant) pair with static color styles.
- */
-const buildBadgeCompoundVariants = (theme) => {
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
+const AlertErrorIcon = props => /*#__PURE__*/React.createElement("svg", _extends$8({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: 12,
+  cy: 12,
+  r: 10
+}), /*#__PURE__*/React.createElement("path", {
+  d: "m15 9-6 6M9 9l6 6"
+}));
+
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
+const AlertInfoIcon = props => /*#__PURE__*/React.createElement("svg", _extends$7({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: 12,
+  cy: 12,
+  r: 10
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M12 16v-4M12 8h.01"
+}));
+
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
+const AlertSuccessIcon = props => /*#__PURE__*/React.createElement("svg", _extends$6({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: 12,
+  cy: 12,
+  r: 10
+}), /*#__PURE__*/React.createElement("path", {
+  d: "m9 12 2 2 4-4"
+}));
+
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
+const AlertWarningIcon = props => /*#__PURE__*/React.createElement("svg", _extends$5({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
+}));
+
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+const ChevronDownIcon = props => /*#__PURE__*/React.createElement("svg", _extends$4({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  className: "prefix__lucide prefix__lucide-chevron-down-icon prefix__lucide-chevron-down"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "m6 9 6 6 6-6"
+}));
+
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+const CloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends$3({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  "aria-hidden": "true",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M18 6 6 18M6 6l12 12"
+}));
+
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+const EyeIcon = props => /*#__PURE__*/React.createElement("svg", _extends$2({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  className: "prefix__lucide prefix__lucide-eye-icon prefix__lucide-eye"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: 12,
+  cy: 12,
+  r: 3
+}));
+
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+const EyeSlashIcon = props => /*#__PURE__*/React.createElement("svg", _extends$1({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  className: "prefix__lucide prefix__lucide-eye-off-icon prefix__lucide-eye-off"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.8 10.8 0 0 1-1.444 2.49M14.084 14.158a3 3 0 0 1-4.242-4.242"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143M2 2l20 20"
+}));
+
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const SpinnerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: 12,
+  cy: 12,
+  r: 10,
+  stroke: "currentColor",
+  strokeWidth: 2,
+  opacity: 0.25
+}), /*#__PURE__*/React.createElement("path", {
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeWidth: 2,
+  d: "M12 2a10 10 0 0 1 10 10"
+}));
+
+const IconRegistry = {
+    AlertInfoIcon};
+
+const spinAnimation = keyframes({
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+});
+const skeletonShimmerAnimation = keyframes({
+    '0%': { backgroundPosition: '100% 50%' },
+    '100%': { backgroundPosition: '0% 50%' },
+});
+
+const APPEARANCES = ['contained', 'outlined', 'text'];
+const buildActionButtonVariantBase = (theme) => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    border: '1px solid transparent',
+    borderRadius: theme.radius.md,
+    fontFamily: 'inherit',
+    userSelect: 'none',
+    cursor: 'pointer',
+    outline: 'none',
+    transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}, color ${theme.transition.fast}, box-shadow ${theme.transition.fast}`,
+    ':focus-visible': { boxShadow: theme.shadows.focus },
+    ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high, boxShadow: 'none' },
+});
+const buildActionButtonCompoundVariants = (theme) => {
     const c = theme.colors;
     const intents = {
-        default: {
-            bg: c.defaultMain,
-            on: c.textInverse,
-            fg: c.defaultMain,
-            fgStrong: c.defaultHover,
-            subtle: c.defaultSubtle,
-            border: c.defaultMain,
-        },
         primary: {
-            bg: c.primaryMain,
-            on: c.primaryOn,
-            fg: c.primaryMain,
-            fgStrong: c.primaryHover,
-            subtle: c.primarySubtle,
-            border: c.primaryMain,
+            main: c.primaryMain, hover: c.primaryHover, active: c.primaryActive,
+            on: c.primaryOn, subtle: c.primarySubtle, subtleHover: c.primarySubtleHover, subtleActive: c.primarySubtleActive,
+            fg: c.primaryMain, fgHover: c.primaryHover, border: c.primaryMain,
         },
         secondary: {
-            bg: c.secondaryMain,
-            on: c.secondaryOn,
-            fg: c.secondaryOn,
-            fgStrong: c.secondaryOn,
-            subtle: c.secondarySubtle,
-            border: c.borderStrong,
-        },
-        success: {
-            bg: c.successMain,
-            on: c.successOn,
-            fg: c.successMain,
-            fgStrong: c.successHover,
-            subtle: c.successSubtle,
-            border: c.successMain,
-        },
-        warning: {
-            bg: c.warningMain,
-            on: c.warningOn,
-            fg: c.warningMain,
-            fgStrong: c.warningHover,
-            subtle: c.warningSubtle,
-            border: c.warningMain,
+            main: c.secondaryMain, hover: c.secondaryHover, active: c.secondaryActive,
+            on: c.secondaryOn, subtle: c.secondarySubtle, subtleHover: c.secondarySubtleHover, subtleActive: c.secondarySubtleActive,
+            fg: c.secondaryOn, fgHover: c.secondaryOn, border: c.borderStrong,
         },
-        error: {
-            bg: c.errorMain,
-            on: c.errorOn,
-            fg: c.errorMain,
-            fgStrong: c.errorHover,
-            subtle: c.errorSubtle,
-            border: c.errorMain,
+        neutral: {
+            main: c.defaultMain, hover: c.defaultHover, active: c.defaultActive,
+            on: c.textInverse, subtle: c.defaultSubtle, subtleHover: c.defaultSubtleHover, subtleActive: c.defaultSubtleActive,
+            fg: c.defaultMain, fgHover: c.defaultHover, border: c.defaultMain,
         },
         info: {
-            bg: c.infoMain,
-            on: c.infoOn,
-            fg: c.infoMain,
-            fgStrong: c.infoHover,
-            subtle: c.infoSubtle,
-            border: c.infoMain,
+            main: c.infoMain, hover: c.infoHover, active: c.infoActive,
+            on: c.infoOn, subtle: c.infoSubtle, subtleHover: c.infoSubtleHover, subtleActive: c.infoSubtleActive,
+            fg: c.infoMain, fgHover: c.infoHover, border: c.infoMain,
         },
-        orange: {
-            bg: c.orangeMain,
-            on: c.orangeOn,
-            fg: c.orangeMain,
-            fgStrong: c.orangeHover,
-            subtle: c.orangeSubtle,
-            border: c.orangeMain,
+        success: {
+            main: c.successMain, hover: c.successHover, active: c.successActive,
+            on: c.successOn, subtle: c.successSubtle, subtleHover: c.successSubtleHover, subtleActive: c.successSubtleActive,
+            fg: c.successMain, fgHover: c.successHover, border: c.successMain,
         },
-        pink: {
-            bg: c.pinkMain,
-            on: c.pinkOn,
-            fg: c.pinkMain,
-            fgStrong: c.pinkHover,
-            subtle: c.pinkSubtle,
-            border: c.pinkMain,
+        warning: {
+            main: c.warningMain, hover: c.warningHover, active: c.warningActive,
+            on: c.warningOn, subtle: c.warningSubtle, subtleHover: c.warningSubtleHover, subtleActive: c.warningSubtleActive,
+            fg: c.warningMain, fgHover: c.warningHover, border: c.warningMain,
         },
-        violet: {
-            bg: c.violetMain,
-            on: c.violetOn,
-            fg: c.violetMain,
-            fgStrong: c.violetHover,
-            subtle: c.violetSubtle,
-            border: c.violetMain,
+        error: {
+            main: c.errorMain, hover: c.errorHover, active: c.errorActive,
+            on: c.errorOn, subtle: c.errorSubtle, subtleHover: c.errorSubtleHover, subtleActive: c.errorSubtleActive,
+            fg: c.errorMain, fgHover: c.errorHover, border: c.errorMain,
         },
     };
-    const getColorStyles = (intent, appearance) => {
-        if (appearance === 'filled') {
+    const appearanceStyles = (intent, appearance) => {
+        if (appearance === 'contained') {
             return {
-                backgroundColor: intent.bg,
-                borderColor: intent.bg,
+                backgroundColor: intent.main,
+                borderColor: intent.main,
                 color: intent.on,
+                boxShadow: theme.shadows.xs,
+                ':hover:not(:disabled)': { backgroundColor: intent.hover, borderColor: intent.hover, boxShadow: theme.shadows.sm },
+                ':active:not(:disabled)': { backgroundColor: intent.active, borderColor: intent.active, boxShadow: theme.shadows.none },
             };
         }
         if (appearance === 'outlined') {
             return {
                 backgroundColor: 'transparent',
                 borderColor: intent.border,
-                color: intent.fgStrong,
-            };
-        }
-        if (appearance === 'subtleOutlined') {
-            return {
-                backgroundColor: intent.subtle,
-                borderColor: intent.border,
-                color: intent.fgStrong,
+                color: intent.fg,
+                ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
+                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, borderColor: intent.active, color: intent.active },
             };
         }
-        // subtle
         return {
-            backgroundColor: intent.subtle,
+            backgroundColor: 'transparent',
             borderColor: 'transparent',
-            color: intent.fgStrong,
+            color: intent.fg,
+            ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
+            ':active:not(:disabled)': { backgroundColor: intent.subtleActive, color: intent.active },
         };
     };
-    return Object.keys(intents).flatMap((color) => BADGE_VARIANTS_LIST.map((variant) => ({
+    return Object.keys(intents).flatMap((color) => APPEARANCES.map((appearance) => ({
         color,
-        variant,
-        styles: getColorStyles(intents[color], variant),
+        variant: appearance,
+        styles: appearanceStyles(intents[color], appearance),
     })));
 };
 
-const BADGE_VARIANTS = createVariants((theme) => ({
-    base: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: theme.spacing.xs,
-        boxSizing: 'border-box',
-        borderRadius: theme.radius.full,
-        border: '1px solid transparent',
-        fontFamily: 'inherit',
-        fontWeight: theme.fontWeight.medium,
-        lineHeight: theme.lineHeight.none,
-        whiteSpace: 'nowrap',
-        userSelect: 'none',
-    },
+const BUTTON_VARIANTS = createVariants((theme) => ({
+    base: buildActionButtonVariantBase(theme),
     variants: {
         size: {
-            sm: {
-                height: '1.25rem',
-                padding: `0.125rem ${theme.spacing['xs+']}`,
-                fontSize: theme.fontSize['2xs'],
-            },
-            md: {
-                height: '1.5rem',
-                padding: `0.1875rem ${theme.spacing.sm}`,
-                fontSize: theme.fontSize.xs,
-            },
-            lg: {
-                height: '2rem',
-                padding: `0.25rem ${theme.spacing.md}`,
-                fontSize: theme.fontSize.sm,
-            },
-        },
-        // Appearance and color styling is handled entirely by compoundVariants.
-        variant: { filled: {}, outlined: {}, subtle: {}, subtleOutlined: {} },
-        color: {
-            default: {},
-            primary: {},
-            secondary: {},
-            success: {},
-            warning: {},
-            error: {},
-            info: {},
-            orange: {},
-            pink: {},
-            violet: {},
+            sm: { height: '2rem', padding: `0 ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
+            md: { height: '2.5rem', padding: `0 ${theme.spacing.md}`, fontSize: theme.fontSize.sm },
+            lg: { height: '3rem', padding: `0 ${theme.spacing.lg}`, fontSize: theme.fontSize.md },
         },
+        // Appearance/color styling is provided entirely by compoundVariants.
+        variant: { contained: {}, outlined: {}, text: {} },
+        color: { primary: {}, secondary: {}, neutral: {}, info: {}, success: {}, warning: {}, error: {} },
+    },
+    defaultVariants: { size: 'md', variant: 'contained', color: 'primary' },
+    compoundVariants: buildActionButtonCompoundVariants(theme),
+}), { id: 'button' });
+const BUTTON_STYLES = createStyles({
+    /** Inner wrapper holding icons + label, centered by the button. */
+    content: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '0.5em',
     },
-    defaultVariants: { size: 'md', variant: 'subtle', color: 'default' },
-    compoundVariants: buildBadgeCompoundVariants(theme),
-}), { id: 'badge' });
+    /** Hidden (but keeps width) while loading. */
+    contentHidden: { visibility: 'hidden' },
+    /** Centers the spinner icon over the button content while loading. */
+    spinnerWrap: {
+        position: 'absolute',
+        inset: 0,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    /** Spinning animation applied to the SpinnerIcon wrapper. */
+    spinnerIcon: {
+        animation: `${spinAnimation} 0.75s linear infinite`,
+        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+    },
+}, { id: 'button-extra' });
 
 const ICON_STYLES = createStyles((theme) => ({
     root: ({ size, strokeColor, fill, backgroundColor, padding, borderRadius }) => ({
@@ -401,39 +519,370 @@ const Text = ({ ref, children, variant = 'span', as, color, fontSize, fontWeight
     const generatedClassName = TEXT_STYLES.root({
         variant,
         color,
-        fontSize,
-        fontWeight,
-        lineHeight,
-        fontFamily,
-        underline,
-        strikethrough,
-        italic,
-        noWrap: effectiveLines ? false : noWrap,
-        preserveWhitespace,
-        width,
-        textTransform,
-        letterSpacing,
-        textAlign,
-    });
-    const mergedClassName = className ? `${generatedClassName} ${className}` : generatedClassName;
-    const mergedStyle = truncateStyles ? { ...truncateStyles, ...style } : style;
-    return createElement(tag, {
-        ref,
-        className: mergedClassName,
-        style: mergedStyle,
-        ...(tag === 'label' && htmlFor !== undefined ? { htmlFor } : {}),
-        ...rest,
-    }, parsedChildren);
+        fontSize,
+        fontWeight,
+        lineHeight,
+        fontFamily,
+        underline,
+        strikethrough,
+        italic,
+        noWrap: effectiveLines ? false : noWrap,
+        preserveWhitespace,
+        width,
+        textTransform,
+        letterSpacing,
+        textAlign,
+    });
+    const mergedClassName = className ? `${generatedClassName} ${className}` : generatedClassName;
+    const mergedStyle = truncateStyles ? { ...truncateStyles, ...style } : style;
+    return createElement(tag, {
+        ref,
+        className: mergedClassName,
+        style: mergedStyle,
+        ...(tag === 'label' && htmlFor !== undefined ? { htmlFor } : {}),
+        ...rest,
+    }, parsedChildren);
+};
+
+/** Maps the button size to a Text font-size token so the label scales with the button. */
+const LABEL_FONT_SIZE$1 = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+};
+/** Maps the button size to an Icon size token. */
+const ICON_SIZE$2 = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+/**
+ * Theme-aware button built on `createVariants`.
+ *
+ * @example <Button onClick={save}>Save</Button>
+ * @example <Button variant='outlined' color='error' startIcon={IconRegistry.CloseIcon}>Delete</Button>
+ * @example <Button color='success' isLoading width='100%'>Submitting…</Button>
+ */
+const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, children, className, type = 'button', disabled, style, ...rest }) => {
+    const isDisabled = disabled || isLoading;
+    const iconSize = ICON_SIZE$2[size];
+    const rootClassName = BUTTON_VARIANTS({ variant, color, size }, className);
+    const mergedStyle = {
+        ...style,
+        ...(width !== undefined ? { width } : {}),
+        ...(flexGrow !== undefined ? { flexGrow } : {}),
+        ...(flexShrink !== undefined ? { flexShrink } : {}),
+    };
+    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-busy": isLoading || undefined, style: mergedStyle, ...rest, children: [isLoading && (jsx("span", { className: BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: BUTTON_STYLES.spinnerIcon }) })), jsxs("span", { className: cx(BUTTON_STYLES.content, isLoading && BUTTON_STYLES.contentHidden), children: [StartIcon && (jsx(Icon, { icon: StartIcon, size: iconSize })), children !== undefined && children !== null && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE$1[size], fontWeight: 'medium', lineHeight: 'none', children: children })), EndIcon && (jsx(Icon, { icon: EndIcon, size: iconSize }))] })] }));
+};
+Button.displayName = 'Button';
+
+const ICON_BUTTON_VARIANTS = createVariants((theme) => ({
+    base: buildActionButtonVariantBase(theme),
+    variants: {
+        size: {
+            sm: { width: '2rem', height: '2rem', padding: '0' },
+            md: { width: '2.5rem', height: '2.5rem', padding: '0' },
+            lg: { width: '3rem', height: '3rem', padding: '0' },
+        },
+        variant: { contained: {}, outlined: {}, text: {} },
+        color: { primary: {}, secondary: {}, neutral: {}, info: {}, success: {}, warning: {}, error: {} },
+    },
+    defaultVariants: { size: 'md', variant: 'contained', color: 'primary' },
+    compoundVariants: buildActionButtonCompoundVariants(theme),
+}), { id: 'icon-button' });
+const ICON_BUTTON_STYLES = createStyles({
+    /** Spinning animation applied to the SpinnerIcon. */
+    spinnerIcon: {
+        animation: `${spinAnimation} 0.75s linear infinite`,
+        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+    },
+    /** Hidden (but keeps size) while loading. */
+    iconHidden: { visibility: 'hidden' },
+    /** Centers the spinner icon absolutely over the button while loading. */
+    spinnerWrap: {
+        position: 'absolute',
+        inset: 0,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}, { id: 'icon-button-extra' });
+
+/** Maps the icon-button size to an Icon size token. */
+const ICON_SIZE$1 = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+/**
+ * Square icon-only button.
+ * `ariaLabel` is mandatory since there is no visible text.
+ *
+ * @example <IconButton icon={CloseIcon} ariaLabel={t('common.close')} />
+ * @example <IconButton icon={DeleteIcon} ariaLabel={t('actions.delete')} variant='outlined' color='error' />
+ * @example <IconButton icon={SaveIcon} ariaLabel={t('actions.save')} isLoading />
+ */
+const IconButton = ({ ref, icon: IconComponent, ariaLabel, variant = 'contained', color = 'primary', size = 'md', isLoading = false, className, type = 'button', disabled, ...rest }) => {
+    const isDisabled = disabled || isLoading;
+    const iconSize = ICON_SIZE$1[size];
+    const rootClassName = ICON_BUTTON_VARIANTS({ variant, color, size }, className);
+    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-label": ariaLabel, "aria-busy": isLoading || undefined, ...rest, children: [isLoading && (jsx("span", { className: ICON_BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: ICON_BUTTON_STYLES.spinnerIcon }) })), jsx(Icon, { icon: IconComponent, size: iconSize, className: cx(isLoading && ICON_BUTTON_STYLES.iconHidden) })] }));
+};
+IconButton.displayName = 'IconButton';
+
+const LINK_STYLES = createStyles((theme) => ({
+    root: ({ underline = 'hover' }) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.25em',
+        color: theme.colors.linkMain,
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        fontWeight: 'inherit',
+        textDecoration: underline === 'always' ? 'underline' : 'none',
+        cursor: 'pointer',
+        borderRadius: theme.radius.xs,
+        transition: `color ${theme.transition.fast}`,
+        ':hover:not([aria-disabled="true"])': {
+            color: theme.colors.linkHover,
+            textDecoration: underline !== 'none' ? 'underline' : 'none',
+        },
+        ':active:not([aria-disabled="true"])': {
+            color: theme.colors.linkActive,
+        },
+        ':focus-visible': {
+            outline: `2px solid ${theme.colors.linkMain}`,
+            outlineOffset: '2px',
+        },
+        '&[aria-disabled="true"]': {
+            color: theme.colors.linkDisabled,
+            cursor: 'not-allowed',
+            textDecoration: 'none',
+        },
+    }),
+    icon: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        width: '1em',
+        height: '1em',
+    },
+}), { id: 'link' });
+
+/**
+ * Theme-aware anchor element with optional icons and underline control.
+ *
+ * @example <Link href='/about'>About</Link>
+ * @example <Link href='https://example.com' external>External site</Link>
+ * @example <Link href='/profile' underline='always' startIcon={UserIcon}>Profile</Link>
+ * @example <Link href='/terms' underline='none'>Terms</Link>
+ */
+const Link = ({ ref, underline = 'hover', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, onClick, onKeyDown, ...rest }) => {
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    // Prevents Enter navigation when disabled; satisfies jsx-a11y/click-events-have-key-events.
+    const handleKeyDown = (e) => {
+        if (disabled && e.key === 'Enter') {
+            e.preventDefault();
+        }
+        onKeyDown?.(e);
+    };
+    return (jsxs("a", { ref: ref, className: cx(LINK_STYLES.root({ underline }), className), "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(StartIcon, { width: '1em', height: '1em' }) })), children, EndIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
+};
+Link.displayName = 'Link';
+
+const BADGE_VARIANTS_LIST = ['filled', 'outlined', 'subtle', 'subtleOutlined'];
+/**
+ * Builds compound variants combining `variant` × `color` for the Badge.
+ * Returns one entry per (color, variant) pair with static color styles.
+ */
+const buildBadgeCompoundVariants = (theme) => {
+    const c = theme.colors;
+    const intents = {
+        default: {
+            bg: c.defaultMain,
+            on: c.textInverse,
+            fg: c.defaultMain,
+            fgStrong: c.defaultHover,
+            subtle: c.defaultSubtle,
+            border: c.defaultMain,
+        },
+        primary: {
+            bg: c.primaryMain,
+            on: c.primaryOn,
+            fg: c.primaryMain,
+            fgStrong: c.primaryHover,
+            subtle: c.primarySubtle,
+            border: c.primaryMain,
+        },
+        secondary: {
+            bg: c.secondaryMain,
+            on: c.secondaryOn,
+            fg: c.secondaryOn,
+            fgStrong: c.secondaryOn,
+            subtle: c.secondarySubtle,
+            border: c.borderStrong,
+        },
+        success: {
+            bg: c.successMain,
+            on: c.successOn,
+            fg: c.successMain,
+            fgStrong: c.successHover,
+            subtle: c.successSubtle,
+            border: c.successMain,
+        },
+        warning: {
+            bg: c.warningMain,
+            on: c.warningOn,
+            fg: c.warningMain,
+            fgStrong: c.warningHover,
+            subtle: c.warningSubtle,
+            border: c.warningMain,
+        },
+        error: {
+            bg: c.errorMain,
+            on: c.errorOn,
+            fg: c.errorMain,
+            fgStrong: c.errorHover,
+            subtle: c.errorSubtle,
+            border: c.errorMain,
+        },
+        info: {
+            bg: c.infoMain,
+            on: c.infoOn,
+            fg: c.infoMain,
+            fgStrong: c.infoHover,
+            subtle: c.infoSubtle,
+            border: c.infoMain,
+        },
+        orange: {
+            bg: c.orangeMain,
+            on: c.orangeOn,
+            fg: c.orangeMain,
+            fgStrong: c.orangeHover,
+            subtle: c.orangeSubtle,
+            border: c.orangeMain,
+        },
+        pink: {
+            bg: c.pinkMain,
+            on: c.pinkOn,
+            fg: c.pinkMain,
+            fgStrong: c.pinkHover,
+            subtle: c.pinkSubtle,
+            border: c.pinkMain,
+        },
+        violet: {
+            bg: c.violetMain,
+            on: c.violetOn,
+            fg: c.violetMain,
+            fgStrong: c.violetHover,
+            subtle: c.violetSubtle,
+            border: c.violetMain,
+        },
+    };
+    const getColorStyles = (intent, appearance) => {
+        if (appearance === 'filled') {
+            return {
+                backgroundColor: intent.bg,
+                borderColor: intent.bg,
+                color: intent.on,
+            };
+        }
+        if (appearance === 'outlined') {
+            return {
+                backgroundColor: 'transparent',
+                borderColor: intent.border,
+                color: intent.fgStrong,
+            };
+        }
+        if (appearance === 'subtleOutlined') {
+            return {
+                backgroundColor: intent.subtle,
+                borderColor: intent.border,
+                color: intent.fgStrong,
+            };
+        }
+        // subtle
+        return {
+            backgroundColor: intent.subtle,
+            borderColor: 'transparent',
+            color: intent.fgStrong,
+        };
+    };
+    return Object.keys(intents).flatMap((color) => BADGE_VARIANTS_LIST.map((variant) => ({
+        color,
+        variant,
+        styles: getColorStyles(intents[color], variant),
+    })));
 };
 
+const BADGE_VARIANTS = createVariants((theme) => ({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.spacing.xs,
+        boxSizing: 'border-box',
+        borderRadius: theme.radius.full,
+        border: '1px solid transparent',
+        fontFamily: 'inherit',
+        fontWeight: theme.fontWeight.medium,
+        lineHeight: theme.lineHeight.none,
+        whiteSpace: 'nowrap',
+        userSelect: 'none',
+    },
+    variants: {
+        size: {
+            sm: {
+                height: '1.25rem',
+                padding: `0.125rem ${theme.spacing['xs+']}`,
+                fontSize: theme.fontSize['2xs'],
+            },
+            md: {
+                height: '1.5rem',
+                padding: `0.1875rem ${theme.spacing.sm}`,
+                fontSize: theme.fontSize.xs,
+            },
+            lg: {
+                height: '2rem',
+                padding: `0.25rem ${theme.spacing.md}`,
+                fontSize: theme.fontSize.sm,
+            },
+        },
+        // Appearance and color styling is handled entirely by compoundVariants.
+        variant: { filled: {}, outlined: {}, subtle: {}, subtleOutlined: {} },
+        color: {
+            default: {},
+            primary: {},
+            secondary: {},
+            success: {},
+            warning: {},
+            error: {},
+            info: {},
+            orange: {},
+            pink: {},
+            violet: {},
+        },
+    },
+    defaultVariants: { size: 'md', variant: 'subtle', color: 'default' },
+    compoundVariants: buildBadgeCompoundVariants(theme),
+}), { id: 'badge' });
+
 /** Maps badge size to an Icon size token. */
-const ICON_SIZE$2 = {
+const ICON_SIZE = {
     sm: 'xs',
     md: 'xs',
     lg: 'sm',
 };
 /** Maps badge size to a Text font-size token. */
-const LABEL_FONT_SIZE$1 = {
+const LABEL_FONT_SIZE = {
     sm: '2xs',
     md: 'xs',
     lg: 'sm',
@@ -468,7 +917,7 @@ const Badge = ({ ref, variant = 'subtle', color = 'default', size = 'md', border
         };
         return (jsx("span", { ref: ref, className: rootClassName, style: { ...dotStyle, ...style }, "aria-hidden": true, ...rest }));
     }
-    return (jsxs("span", { ref: ref, className: rootClassName, style: { ...(resolvedBorderRadius ? { borderRadius: resolvedBorderRadius } : {}), ...style }, ...rest, children: [effectiveStartIcon && (jsx(Icon, { icon: effectiveStartIcon, size: ICON_SIZE$2[size] })), children !== undefined && children !== null && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE$1[size], fontWeight: 'medium', lineHeight: 'none', children: children })), EndIcon && (jsx(Icon, { icon: EndIcon, size: ICON_SIZE$2[size] }))] }));
+    return (jsxs("span", { ref: ref, className: rootClassName, style: { ...(resolvedBorderRadius ? { borderRadius: resolvedBorderRadius } : {}), ...style }, ...rest, children: [effectiveStartIcon && (jsx(Icon, { icon: effectiveStartIcon, size: ICON_SIZE[size] })), children !== undefined && children !== null && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE[size], fontWeight: 'medium', lineHeight: 'none', children: children })), EndIcon && (jsx(Icon, { icon: EndIcon, size: ICON_SIZE[size] }))] }));
 };
 Badge.displayName = 'Badge';
 
@@ -709,161 +1158,6 @@ const INFO_BUBBLE_STYLES = createStyles((theme) => ({
     },
 }));
 
-function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
-const AlertErrorIcon = props => /*#__PURE__*/React.createElement("svg", _extends$8({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2
-}, props), /*#__PURE__*/React.createElement("circle", {
-  cx: 12,
-  cy: 12,
-  r: 10
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m15 9-6 6M9 9l6 6"
-}));
-
-function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
-const AlertInfoIcon = props => /*#__PURE__*/React.createElement("svg", _extends$7({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2
-}, props), /*#__PURE__*/React.createElement("circle", {
-  cx: 12,
-  cy: 12,
-  r: 10
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M12 16v-4M12 8h.01"
-}));
-
-function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
-const AlertSuccessIcon = props => /*#__PURE__*/React.createElement("svg", _extends$6({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2
-}, props), /*#__PURE__*/React.createElement("circle", {
-  cx: 12,
-  cy: 12,
-  r: 10
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m9 12 2 2 4-4"
-}));
-
-function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
-const AlertWarningIcon = props => /*#__PURE__*/React.createElement("svg", _extends$5({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
-}));
-
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
-const ChevronDownIcon = props => /*#__PURE__*/React.createElement("svg", _extends$4({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  className: "prefix__lucide prefix__lucide-chevron-down-icon prefix__lucide-chevron-down"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "m6 9 6 6 6-6"
-}));
-
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
-const CloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends$3({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  "aria-hidden": "true",
-  viewBox: "0 0 24 24"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M18 6 6 18M6 6l12 12"
-}));
-
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-const EyeIcon = props => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  className: "prefix__lucide prefix__lucide-eye-icon prefix__lucide-eye"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
-}), /*#__PURE__*/React.createElement("circle", {
-  cx: 12,
-  cy: 12,
-  r: 3
-}));
-
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-const EyeSlashIcon = props => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  className: "prefix__lucide prefix__lucide-eye-off-icon prefix__lucide-eye-off"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.8 10.8 0 0 1-1.444 2.49M14.084 14.158a3 3 0 0 1-4.242-4.242"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143M2 2l20 20"
-}));
-
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const SpinnerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, props), /*#__PURE__*/React.createElement("circle", {
-  cx: 12,
-  cy: 12,
-  r: 10,
-  stroke: "currentColor",
-  strokeWidth: 2,
-  opacity: 0.25
-}), /*#__PURE__*/React.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeWidth: 2,
-  d: "M12 2a10 10 0 0 1 10 10"
-}));
-
-const IconRegistry = {
-    AlertInfoIcon};
-
 /**
  * InfoBubble
  *
@@ -886,232 +1180,68 @@ const InfoBubble = ({ label, placement = 'top', width = 200, withArrow = true, }
 };
 InfoBubble.displayName = 'InfoBubble';
 
-const spinAnimation = keyframes({
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' },
-});
-keyframes({
-    '0%': { backgroundPosition: '100% 50%' },
-    '100%': { backgroundPosition: '0% 50%' },
-});
-
-const APPEARANCES = ['contained', 'outlined', 'text'];
-const buildActionButtonVariantBase = (theme) => ({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-    border: '1px solid transparent',
-    borderRadius: theme.radius.md,
-    fontFamily: 'inherit',
-    userSelect: 'none',
-    cursor: 'pointer',
-    outline: 'none',
-    transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}, color ${theme.transition.fast}, box-shadow ${theme.transition.fast}`,
-    ':focus-visible': { boxShadow: theme.shadows.focus },
-    ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high, boxShadow: 'none' },
-});
-const buildActionButtonCompoundVariants = (theme) => {
-    const c = theme.colors;
-    const intents = {
-        primary: {
-            main: c.primaryMain, hover: c.primaryHover, active: c.primaryActive,
-            on: c.primaryOn, subtle: c.primarySubtle, subtleHover: c.primarySubtleHover, subtleActive: c.primarySubtleActive,
-            fg: c.primaryMain, fgHover: c.primaryHover, border: c.primaryMain,
-        },
-        secondary: {
-            main: c.secondaryMain, hover: c.secondaryHover, active: c.secondaryActive,
-            on: c.secondaryOn, subtle: c.secondarySubtle, subtleHover: c.secondarySubtleHover, subtleActive: c.secondarySubtleActive,
-            fg: c.secondaryOn, fgHover: c.secondaryOn, border: c.borderStrong,
-        },
-        neutral: {
-            main: c.defaultMain, hover: c.defaultHover, active: c.defaultActive,
-            on: c.textInverse, subtle: c.defaultSubtle, subtleHover: c.defaultSubtleHover, subtleActive: c.defaultSubtleActive,
-            fg: c.defaultMain, fgHover: c.defaultHover, border: c.defaultMain,
-        },
-        info: {
-            main: c.infoMain, hover: c.infoHover, active: c.infoActive,
-            on: c.infoOn, subtle: c.infoSubtle, subtleHover: c.infoSubtleHover, subtleActive: c.infoSubtleActive,
-            fg: c.infoMain, fgHover: c.infoHover, border: c.infoMain,
-        },
-        success: {
-            main: c.successMain, hover: c.successHover, active: c.successActive,
-            on: c.successOn, subtle: c.successSubtle, subtleHover: c.successSubtleHover, subtleActive: c.successSubtleActive,
-            fg: c.successMain, fgHover: c.successHover, border: c.successMain,
-        },
-        warning: {
-            main: c.warningMain, hover: c.warningHover, active: c.warningActive,
-            on: c.warningOn, subtle: c.warningSubtle, subtleHover: c.warningSubtleHover, subtleActive: c.warningSubtleActive,
-            fg: c.warningMain, fgHover: c.warningHover, border: c.warningMain,
-        },
-        error: {
-            main: c.errorMain, hover: c.errorHover, active: c.errorActive,
-            on: c.errorOn, subtle: c.errorSubtle, subtleHover: c.errorSubtleHover, subtleActive: c.errorSubtleActive,
-            fg: c.errorMain, fgHover: c.errorHover, border: c.errorMain,
-        },
-    };
-    const appearanceStyles = (intent, appearance) => {
-        if (appearance === 'contained') {
-            return {
-                backgroundColor: intent.main,
-                borderColor: intent.main,
-                color: intent.on,
-                boxShadow: theme.shadows.xs,
-                ':hover:not(:disabled)': { backgroundColor: intent.hover, borderColor: intent.hover, boxShadow: theme.shadows.sm },
-                ':active:not(:disabled)': { backgroundColor: intent.active, borderColor: intent.active, boxShadow: theme.shadows.none },
-            };
-        }
-        if (appearance === 'outlined') {
-            return {
-                backgroundColor: 'transparent',
-                borderColor: intent.border,
-                color: intent.fg,
-                ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
-                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, borderColor: intent.active, color: intent.active },
-            };
-        }
-        return {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            color: intent.fg,
-            ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
-            ':active:not(:disabled)': { backgroundColor: intent.subtleActive, color: intent.active },
-        };
-    };
-    return Object.keys(intents).flatMap((color) => APPEARANCES.map((appearance) => ({
-        color,
-        variant: appearance,
-        styles: appearanceStyles(intents[color], appearance),
-    })));
-};
-
-const BUTTON_VARIANTS = createVariants((theme) => ({
-    base: buildActionButtonVariantBase(theme),
-    variants: {
-        size: {
-            sm: { height: '2rem', padding: `0 ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
-            md: { height: '2.5rem', padding: `0 ${theme.spacing.md}`, fontSize: theme.fontSize.sm },
-            lg: { height: '3rem', padding: `0 ${theme.spacing.lg}`, fontSize: theme.fontSize.md },
-        },
-        // Appearance/color styling is provided entirely by compoundVariants.
-        variant: { contained: {}, outlined: {}, text: {} },
-        color: { primary: {}, secondary: {}, neutral: {}, info: {}, success: {}, warning: {}, error: {} },
-    },
-    defaultVariants: { size: 'md', variant: 'contained', color: 'primary' },
-    compoundVariants: buildActionButtonCompoundVariants(theme),
-}), { id: 'button' });
-const BUTTON_STYLES = createStyles({
-    /** Inner wrapper holding icons + label, centered by the button. */
-    content: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '0.5em',
-    },
-    /** Hidden (but keeps width) while loading. */
-    contentHidden: { visibility: 'hidden' },
-    /** Centers the spinner icon over the button content while loading. */
-    spinnerWrap: {
-        position: 'absolute',
-        inset: 0,
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    /** Spinning animation applied to the SpinnerIcon wrapper. */
-    spinnerIcon: {
-        animation: `${spinAnimation} 0.75s linear infinite`,
-        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+const SKELETON_VARIANTS = createVariants((theme) => ({
+    base: {
+        display: 'block',
+        boxSizing: 'border-box',
+        backgroundColor: theme.colors.skeletonPrimary,
+        overflow: 'hidden',
     },
-}, { id: 'button-extra' });
-
-/** Maps the button size to a Text font-size token so the label scales with the button. */
-const LABEL_FONT_SIZE = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-};
-/** Maps the button size to an Icon size token. */
-const ICON_SIZE$1 = {
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-};
-/**
- * Theme-aware button built on `createVariants`.
- *
- * @example <Button onClick={save}>Save</Button>
- * @example <Button variant='outlined' color='error' startIcon={IconRegistry.CloseIcon}>Delete</Button>
- * @example <Button color='success' isLoading width='100%'>Submitting…</Button>
- */
-const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, children, className, type = 'button', disabled, style, ...rest }) => {
-    const isDisabled = disabled || isLoading;
-    const iconSize = ICON_SIZE$1[size];
-    const rootClassName = BUTTON_VARIANTS({ variant, color, size }, className);
-    const mergedStyle = {
-        ...style,
-        ...(width !== undefined ? { width } : {}),
-        ...(flexGrow !== undefined ? { flexGrow } : {}),
-        ...(flexShrink !== undefined ? { flexShrink } : {}),
-    };
-    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-busy": isLoading || undefined, style: mergedStyle, ...rest, children: [isLoading && (jsx("span", { className: BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: BUTTON_STYLES.spinnerIcon }) })), jsxs("span", { className: cx(BUTTON_STYLES.content, isLoading && BUTTON_STYLES.contentHidden), children: [StartIcon && (jsx(Icon, { icon: StartIcon, size: iconSize })), children !== undefined && children !== null && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE[size], fontWeight: 'medium', lineHeight: 'none', children: children })), EndIcon && (jsx(Icon, { icon: EndIcon, size: iconSize }))] })] }));
-};
-Button.displayName = 'Button';
-
-const ICON_BUTTON_VARIANTS = createVariants((theme) => ({
-    base: buildActionButtonVariantBase(theme),
     variants: {
-        size: {
-            sm: { width: '2rem', height: '2rem', padding: '0' },
-            md: { width: '2.5rem', height: '2.5rem', padding: '0' },
-            lg: { width: '3rem', height: '3rem', padding: '0' },
+        variant: {
+            /** Inline-text placeholder: em-relative height, slight vertical scale. */
+            text: {
+                borderRadius: theme.radius.sm,
+                height: '1em',
+                transform: 'scale(1, 0.6)',
+                transformOrigin: '0 60%',
+                width: '100%',
+            },
+            /** Fully rounded placeholder for avatars and icons. */
+            circular: {
+                borderRadius: theme.radius.full,
+            },
+            /** Sharp-cornered placeholder for images and media blocks. */
+            rectangular: {
+                borderRadius: '0',
+            },
+            /** Softly rounded placeholder for cards and chips. */
+            rounded: {
+                borderRadius: theme.radius.md,
+            },
+        },
+        animation: {
+            /** Sliding gradient highlight from right to left. */
+            shimmer: {
+                background: `linear-gradient(90deg, ${theme.colors.skeletonPrimary} 25%, ${theme.colors.skeletonSecondary} 50%, ${theme.colors.skeletonPrimary} 75%)`,
+                backgroundSize: '400% 100%',
+                animation: `${skeletonShimmerAnimation} 2.5s linear infinite`,
+                '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+            },
+            /** No animation. */
+            none: {},
         },
-        variant: { contained: {}, outlined: {}, text: {} },
-        color: { primary: {}, secondary: {}, neutral: {}, info: {}, success: {}, warning: {}, error: {} },
-    },
-    defaultVariants: { size: 'md', variant: 'contained', color: 'primary' },
-    compoundVariants: buildActionButtonCompoundVariants(theme),
-}), { id: 'icon-button' });
-const ICON_BUTTON_STYLES = createStyles({
-    /** Spinning animation applied to the SpinnerIcon. */
-    spinnerIcon: {
-        animation: `${spinAnimation} 0.75s linear infinite`,
-        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
-    },
-    /** Hidden (but keeps size) while loading. */
-    iconHidden: { visibility: 'hidden' },
-    /** Centers the spinner icon absolutely over the button while loading. */
-    spinnerWrap: {
-        position: 'absolute',
-        inset: 0,
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
     },
-}, { id: 'icon-button-extra' });
+    defaultVariants: { variant: 'rounded', animation: 'shimmer' },
+}), { id: 'skeleton' });
 
-/** Maps the icon-button size to an Icon size token. */
-const ICON_SIZE = {
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-};
 /**
- * Square icon-only button.
- * `ariaLabel` is mandatory since there is no visible text.
+ * Block-level placeholder rendered while content is loading.
  *
- * @example <IconButton icon={CloseIcon} ariaLabel={t('common.close')} />
- * @example <IconButton icon={DeleteIcon} ariaLabel={t('actions.delete')} variant='outlined' color='error' />
- * @example <IconButton icon={SaveIcon} ariaLabel={t('actions.save')} isLoading />
+ * @example // Text line
+ * <Skeleton variant='text' width={200} />
+ *
+ * @example // Avatar
+ * <Skeleton variant='circular' width={40} height={40} />
+ *
+ * @example // Card thumbnail
+ * <Skeleton variant='rounded' width='100%' height={160} />
+ *
+ * @example // No animation
+ * <Skeleton variant='rectangular' width='100%' height={80} animation={false} />
  */
-const IconButton = ({ ref, icon: IconComponent, ariaLabel, variant = 'contained', color = 'primary', size = 'md', isLoading = false, className, type = 'button', disabled, ...rest }) => {
-    const isDisabled = disabled || isLoading;
-    const iconSize = ICON_SIZE[size];
-    const rootClassName = ICON_BUTTON_VARIANTS({ variant, color, size }, className);
-    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-label": ariaLabel, "aria-busy": isLoading || undefined, ...rest, children: [isLoading && (jsx("span", { className: ICON_BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: ICON_BUTTON_STYLES.spinnerIcon }) })), jsx(Icon, { icon: IconComponent, size: iconSize, className: cx(isLoading && ICON_BUTTON_STYLES.iconHidden) })] }));
-};
-IconButton.displayName = 'IconButton';
+const Skeleton = ({ ref, variant = 'rectangular', animation = 'shimmer', width, height, className, style, ...rest }) => (jsx("span", { ref: ref, className: SKELETON_VARIANTS({ variant, animation: animation === false ? 'none' : animation }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest }));
+Skeleton.displayName = 'Skeleton';
 
 /**
  * Thin wrapper around `<form>`. Prevents the default browser submit and
@@ -2128,6 +2258,90 @@ const Select = ({ ref, value, defaultValue, onChange, options, label, helperText
 };
 Select.displayName = 'Select';
 
+const CARD_VARIANTS = createVariants((theme) => ({
+    base: {
+        boxSizing: 'border-box',
+        borderRadius: theme.radius.lg,
+        border: '1px solid transparent',
+    },
+    variants: {
+        variant: {
+            elevated: {
+                backgroundColor: theme.colors.surfacePaper,
+                boxShadow: theme.shadows.md,
+            },
+            outlined: {
+                backgroundColor: theme.colors.surfacePaper,
+                borderColor: theme.colors.borderMain,
+            },
+        },
+    },
+    defaultVariants: { variant: 'elevated' },
+}), { id: 'card' });
+
+const CardHeader = ({ label, icon, actions }) => {
+    return (jsxs(Stack, { alignItems: 'center', justifyContent: 'space-between', gap: 'sm', py: 'sm', px: 'md', children: [jsxs(Stack, { alignItems: 'center', gap: 'sm', flex: 1, minWidth: '0', children: [icon !== undefined && (jsx(Icon, { icon: icon, size: 'md', strokeColor: 'textSecondary' })), jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'semibold', color: 'textPrimary', children: label })] }), actions !== undefined && (jsx(Stack, { alignItems: 'center', gap: 'xs', flexShrink: 0, children: actions }))] }));
+};
+CardHeader.displayName = 'Card.Header';
+
+const CardBody = ({ children, py = 'md', px = 'md', }) => {
+    return (jsx(Box, { py: py, px: px, children: children }));
+};
+CardBody.displayName = 'Card.Body';
+
+const CardBase = ({ ref, variant = 'outlined', padding, className, style, children, ...rest }) => {
+    const theme = useTheme();
+    return (jsx("div", { ref: ref, className: cx(CARD_VARIANTS({ variant }), className), style: padding !== undefined ? { padding: theme.spacing[padding], ...style } : style, ...rest, children: children }));
+};
+CardBase.displayName = 'Card';
+const Card = CardBase;
+Card.Header = CardHeader;
+Card.Body = CardBody;
+
+const GRID_STYLES = createStyles(() => ({
+    root: ({ autoFlow, autoColumns, autoRows, alignContent, justifyItems, placeItems, placeContent, }) => ({
+        ...(autoFlow !== undefined && { gridAutoFlow: autoFlow }),
+        ...(autoColumns !== undefined && { gridAutoColumns: autoColumns }),
+        ...(autoRows !== undefined && { gridAutoRows: autoRows }),
+        ...(alignContent !== undefined && { alignContent }),
+        ...(justifyItems !== undefined && { justifyItems }),
+        ...(placeItems !== undefined && { placeItems }),
+        ...(placeContent !== undefined && { placeContent }),
+    }),
+}));
+
+/**
+ * A CSS Grid `Box` with convenience props for common grid patterns.
+ *
+ * Defaults to `display: grid`. The `columns` and `rows` shorthands accept either a
+ * number (expanded to `repeat(n, 1fr)`) or any valid CSS `grid-template-*` string.
+ * All `Box` style props remain available (`gap`, `rowGap`, `columnGap`,
+ * `gridTemplateColumns`, `gridTemplateRows`, `alignItems`, `justifyContent`, …).
+ *
+ * @example <Grid columns={3} gap='md'>…</Grid>
+ * @example <Grid columns='repeat(auto-fill, minmax(200px, 1fr))' gap='lg'>…</Grid>
+ * @example <Grid rows={2} autoFlow='column' gap='sm' alignItems='center'>…</Grid>
+ */
+const Grid = ({ display = 'grid', columns, rows, autoFlow, autoColumns, autoRows, alignContent, justifyItems, placeItems, placeContent, gridTemplateColumns, gridTemplateRows, className, rowGap = 'sm', columnGap = 'sm', ...rest }) => {
+    const resolvedColumns = columns !== undefined
+        ? (typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns)
+        : gridTemplateColumns;
+    const resolvedRows = rows !== undefined
+        ? (typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows)
+        : gridTemplateRows;
+    const gridClassName = GRID_STYLES.root({
+        autoFlow,
+        autoColumns,
+        autoRows,
+        alignContent,
+        justifyItems,
+        placeItems,
+        placeContent,
+    });
+    return (jsx(Box, { display: display, gridTemplateColumns: resolvedColumns, gridTemplateRows: resolvedRows, rowGap: rowGap, columnGap: columnGap, className: cx(gridClassName, className), ...rest }));
+};
+Grid.displayName = 'Grid';
+
 const AlertContext = createContext({
     variant: 'default',
     accentColor: 'defaultActive',
@@ -2873,5 +3087,5 @@ const darkTheme = createTheme({
     breakpoints: themeBreakpoints,
 });
 
-export { Alert, Badge, Button, Dialog, Form, Icon, IconButton, InfoBubble, Menu, Select, Switch, Text, TextField, Tooltip, darkTheme, lightTheme };
+export { Alert, Badge, Box, Button, Card, Dialog, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Text, TextField, Tooltip, darkTheme, lightTheme };
 //# sourceMappingURL=index.js.map