@mattermost/compass-ui 0.1.0-alpha.14 → 0.1.0-alpha.15

package/dist/components/action-button/ActionButton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("react"),b=require("../icon/Icon.cjs"),t=require("./ActionButton.module.scss.cjs"),n=f.forwardRef(function({icon:a,label:i,active:o,destructive:u=!1,className:s,type:r="button",...c},l){const d=[t.default["action-button"],o?t.default["action-button--active"]:"",u?t.default["action-button--destructive"]:"",s??""].filter(Boolean).join(" ");return e.jsxs("button",{ref:l,className:d,type:r,"aria-pressed":o===void 0?void 0:o,...c,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(b.IconSlotContext.Provider,{value:{size:"20"},children:a})}),e.jsx("span",{className:t.default["action-button__label"],children:i})]})});n.displayName="ActionButton";exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),s=require("../icon/Icon.cjs"),A=require("../../utils/slot.cjs"),t=require("./ActionButton.module.scss.cjs"),i=q.forwardRef(function(a,o){if(a.asChild){const{icon:m,label:v,destructive:j=!1,className:C,disabled:x,children:N,asChild:S,..._}=a,p=[t.default["action-button"],j?t.default["action-button--destructive"]:"",C??""].filter(Boolean).join(" "),B=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:m})}),e.jsx("span",{className:t.default["action-button__label"],children:v})]});return A.renderAsChild({child:N,props:{..._,className:p},ref:o,content:B,disabled:!!x,disabledClassName:t.default["action-button--disabled"],warnOnChildContent:!0})}const{icon:l,label:c,active:n,destructive:d=!1,className:r,disabled:u,type:b="button",asChild:P,...f}=a,h=[t.default["action-button"],n?t.default["action-button--active"]:"",d?t.default["action-button--destructive"]:"",r??""].filter(Boolean).join(" ");return e.jsxs("button",{ref:o,className:h,type:b,disabled:u,"aria-pressed":n===void 0?void 0:n,...f,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:l})}),e.jsx("span",{className:t.default["action-button__label"],children:c})]})});i.displayName="ActionButton";exports.default=i;
 //# sourceMappingURL=ActionButton.cjs.map

package/dist/components/action-button/ActionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** When set, this is a toggle; maps to `aria-pressed`. */\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  function ActionButton(\n    {\n      icon,\n      label,\n      active,\n      destructive = false,\n      className,\n      type = 'button',\n      ...htmlProps\n    },\n    ref,\n  ) {\n    const rootClass = [\n      styles['action-button'],\n      active ? styles['action-button--active'] : '',\n      destructive ? styles['action-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        className={rootClass}\n        type={type}\n        aria-pressed={active === undefined ? undefined : active}\n        {...htmlProps}\n      >\n        <span className={styles['action-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['action-button__label']}>{label}</span>\n      </button>\n    );\n  },\n);\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","icon","label","active","destructive","className","type","htmlProps","ref","rootClass","styles","jsxs","jsx","IconSlotContext"],"mappings":"8OAmBMA,EAAeC,EAAAA,WACnB,SACE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBP,EAASO,EAAAA,QAAO,uBAAuB,EAAI,GAC3CN,EAAcM,EAAAA,QAAO,4BAA4B,EAAI,GACrDL,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,KAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,eAAcH,IAAW,OAAY,OAAYA,EAChD,GAAGI,EAEJ,SAAA,CAAAK,MAAC,QAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWH,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D,CACF,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { renderAsChild } from '@/utils/slot';\nimport styles from './ActionButton.module.scss';\n\ninterface ActionButtonOwnProps {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  destructive?: boolean;\n  className?: string;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface ActionButtonProps\n  extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges ActionButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n   * `<button>`; not available with `asChild`.\n   */\n  active?: boolean;\n}\n\nexport interface ActionButtonAsChildProps\n  extends\n    ActionButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges ActionButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `active` — they are not available on links.\n   * Pass an empty child; ActionButton supplies the icon and label anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the ActionButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n}\n\ntype ActionButtonComponent = {\n  (\n    props: ActionButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: ActionButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Action Button styling (no nested `<button>`).\n */\nconst ActionButton = forwardRef(function ActionButton(\n  props: ActionButtonProps | ActionButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      icon,\n      label,\n      destructive = false,\n      className,\n      disabled,\n      children,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = [\n      styles['action-button'],\n      destructive ? styles['action-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const anatomy = (\n      <>\n        <span className={styles['action-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['action-button__label']}>{label}</span>\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n      },\n      ref,\n      content: anatomy,\n      disabled: Boolean(disabled),\n      disabledClassName: styles['action-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    icon,\n    label,\n    active,\n    destructive = false,\n    className,\n    disabled,\n    type = 'button',\n    asChild,\n    ...htmlProps\n  } = props;\n  void asChild;\n\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}) as ActionButtonComponent;\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","active","type","htmlProps"],"mappings":"gRA2EMA,EAAeC,EAAAA,WAAW,SAC9BC,EACAC,EACA,CACA,GAAID,EAAM,QAAS,CACjB,KAAM,CACJ,KAAAE,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACDT,EAGEU,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBP,EAAcO,EAAAA,QAAO,4BAA4B,EAAI,GACrDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAAC,QAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,MACtC,SAAAd,EACH,EACF,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAAA,CAAM,CAAA,EAC1D,EAGF,OAAOc,gBAAc,CACnB,MAAOV,EACP,MAAO,CACL,GAAGE,EACH,UAAWC,CAAA,EAEb,IAAAT,EACA,QAASW,EACT,SAAU,EAAQN,EAClB,kBAAmBK,EAAAA,QAAO,yBAAyB,EACnD,mBAAoB,EAAA,CACrB,CACH,CAEA,KAAM,CACJ,KAAAT,EACA,MAAAC,EACA,OAAAe,EACA,YAAAd,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,KAAAa,EAAO,SACP,QAAAX,EACA,GAAGY,CAAA,EACDpB,EAGEU,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBO,EAASP,EAAAA,QAAO,uBAAuB,EAAI,GAC3CP,EAAcO,EAAAA,QAAO,4BAA4B,EAAI,GACrDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,SAAA,CACC,IAAAZ,EACA,UAAWS,EACX,KAAAS,EACA,SAAAb,EACA,eAAcY,IAAW,OAAY,OAAYA,EAChD,GAAGE,EAEJ,SAAA,CAAAL,MAAC,QAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D,CAAC,EAEDL,EAAa,YAAc"}

package/dist/components/action-button/ActionButton.css

@@ -1 +1 @@
-._action-button_1u191_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._action-button_1u191_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_1u191_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._action-button_1u191_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._action-button_1u191_2:disabled{opacity:.48;cursor:not-allowed}._action-button--active_1u191_34{background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_1u191_34 ._action-button__icon_1u191_37,._action-button--active_1u191_34 ._action-button__label_1u191_38{color:var(--link-color)}._action-button--active_1u191_34:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_1u191_34:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_1u191_47{--focus-ring-color: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._action-button__icon_1u191_37{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0}._action-button__label_1u191_38{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center}
+._action-button_ruap0_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);--action-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--action-button-fg);cursor:pointer;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._action-button_ruap0_2:any-link,._action-button_ruap0_2:hover,._action-button_ruap0_2:focus,._action-button_ruap0_2:active,._action-button_ruap0_2:visited{color:var(--action-button-fg);text-decoration:none}._action-button_ruap0_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_ruap0_2:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--center-channel-color-rgb),.08);--action-button-fg: rgba(var(--center-channel-color-rgb), .75)}._action-button_ruap0_2:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.08);--action-button-fg: var(--link-color)}._action-button_ruap0_2:is(:disabled,._action-button--disabled_ruap0_28){opacity:.48;cursor:not-allowed}._action-button--active_ruap0_40{--action-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_ruap0_40 ._action-button__icon_ruap0_44,._action-button--active_ruap0_40 ._action-button__label_ruap0_45{color:var(--link-color)}._action-button--active_ruap0_40:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_ruap0_40:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_ruap0_54{--focus-ring-color: var(--error-text, var(--color-danger));--action-button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04)}._action-button--destructive_ruap0_54:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--action-button-fg: var(--error-text, var(--color-danger))}._action-button--destructive_ruap0_54:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--action-button-fg: var(--error-text, var(--color-danger))}._action-button__icon_ruap0_44{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0;color:var(--action-button-fg)}._action-button__label_ruap0_45{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center;color:var(--action-button-fg)}

package/dist/components/action-button/ActionButton.d.ts

@@ -1,18 +1,54 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+interface ActionButtonOwnProps {
     /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */
     icon: ReactNode;
     /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     label: ReactNode;
-    /** When set, this is a toggle; maps to `aria-pressed`. */
-    active?: boolean;
     destructive?: boolean;
+    className?: string;
+    /**
+     * When true, disables the control. On a native `<button>`, sets the `disabled`
+     * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and
+     * blocks click / middle-click navigation (the link stays focusable).
+     */
+    disabled?: boolean;
+}
+export interface ActionButtonProps extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * When true, merges ActionButton props onto the single child element instead of
+     * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
+     */
+    asChild?: false;
+    /**
+     * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native
+     * `<button>`; not available with `asChild`.
+     */
+    active?: boolean;
+}
+export interface ActionButtonAsChildProps extends ActionButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {
+    /**
+     * Merges ActionButton props onto the single child element instead of rendering a
+     * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the
+     * child. Do not pass `type` or `active` — they are not available on links.
+     * Pass an empty child; ActionButton supplies the icon and label anatomy.
+     */
+    asChild: true;
+    /** Single empty element to render as the ActionButton (e.g. `<a href="…" />`). */
+    children: ReactElement;
 }
+type ActionButtonComponent = {
+    (props: ActionButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
+    (props: ActionButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+    displayName?: string;
+};
 /**
  * Action Buttons surface a small set of high-frequency actions in a fixed context — a
  * profile popover, a channel info panel, a card. They sit close to the content they act on
  * and read as a row of equal-weight choices.
+ *
+ * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational
+ * action with Action Button styling (no nested `<button>`).
  */
-declare const ActionButton: import('react').ForwardRefExoticComponent<ActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const ActionButton: ActionButtonComponent;
 export default ActionButton;
 //# sourceMappingURL=ActionButton.d.ts.map

package/dist/components/action-button/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,sGAAsG;IACtG,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,QAAA,MAAM,YAAY,iHAuCjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAKf,UAAU,oBAAoB;IAC5B,sGAAsG;IACtG,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAAE,oBAAoB,CAAC,iBAAiB,CAAC;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,wBACf,SACE,oBAAoB,EACpB,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,kFAAkF;IAClF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,KAAK,qBAAqB,GAAG;IAC3B,CACE,KAAK,EAAE,wBAAwB,GAAG,aAAa,CAAC,WAAW,CAAC,GAC3D,YAAY,GAAG,IAAI,CAAC;IACvB,CACE,KAAK,EAAE,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,GAC1D,YAAY,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,EAyFZ,qBAAqB,CAAC;AAI5B,eAAe,YAAY,CAAC"}

package/dist/components/action-button/ActionButton.js

@@ -1,41 +1,74 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { IconSlotContext as f } from "../icon/Icon.js";
+import { jsxs as i, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { forwardRef as A } from "react";
+import { IconSlotContext as s } from "../icon/Icon.js";
+import { renderAsChild as P } from "../../utils/slot.js";
 import t from "./ActionButton.module.scss.js";
-const p = m(
-  function({
-    icon: i,
-    label: a,
-    active: o,
-    destructive: e = !1,
-    className: r,
-    type: s = "button",
-    ...c
-  }, l) {
-    const u = [
+const w = A(function(a, o) {
+  if (a.asChild) {
+    const {
+      icon: f,
+      label: v,
+      destructive: p = !1,
+      className: C,
+      disabled: N,
+      children: _,
+      asChild: F,
+      ...B
+    } = a, j = [
       t["action-button"],
-      o ? t["action-button--active"] : "",
-      e ? t["action-button--destructive"] : "",
-      r ?? ""
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ d(
-      "button",
-      {
-        ref: l,
-        className: u,
-        type: s,
-        "aria-pressed": o === void 0 ? void 0 : o,
-        ...c,
-        children: [
-          /* @__PURE__ */ n("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ n(f.Provider, { value: { size: "20" }, children: i }) }),
-          /* @__PURE__ */ n("span", { className: t["action-button__label"], children: a })
-        ]
-      }
-    );
+      p ? t["action-button--destructive"] : "",
+      C ?? ""
+    ].filter(Boolean).join(" "), x = /* @__PURE__ */ i(y, { children: [
+      /* @__PURE__ */ e("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(s.Provider, { value: { size: "20" }, children: f }) }),
+      /* @__PURE__ */ e("span", { className: t["action-button__label"], children: v })
+    ] });
+    return P({
+      child: _,
+      props: {
+        ...B,
+        className: j
+      },
+      ref: o,
+      content: x,
+      disabled: !!N,
+      disabledClassName: t["action-button--disabled"],
+      warnOnChildContent: !0
+    });
   }
-);
-p.displayName = "ActionButton";
+  const {
+    icon: l,
+    label: c,
+    active: n,
+    destructive: r = !1,
+    className: d,
+    disabled: u,
+    type: m = "button",
+    asChild: g,
+    ...b
+  } = a, h = [
+    t["action-button"],
+    n ? t["action-button--active"] : "",
+    r ? t["action-button--destructive"] : "",
+    d ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      ref: o,
+      className: h,
+      type: m,
+      disabled: u,
+      "aria-pressed": n === void 0 ? void 0 : n,
+      ...b,
+      children: [
+        /* @__PURE__ */ e("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(s.Provider, { value: { size: "20" }, children: l }) }),
+        /* @__PURE__ */ e("span", { className: t["action-button__label"], children: c })
+      ]
+    }
+  );
+});
+w.displayName = "ActionButton";
 export {
-  p as default
+  w as default
 };
 //# sourceMappingURL=ActionButton.js.map

package/dist/components/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** When set, this is a toggle; maps to `aria-pressed`. */\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  function ActionButton(\n    {\n      icon,\n      label,\n      active,\n      destructive = false,\n      className,\n      type = 'button',\n      ...htmlProps\n    },\n    ref,\n  ) {\n    const rootClass = [\n      styles['action-button'],\n      active ? styles['action-button--active'] : '',\n      destructive ? styles['action-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        className={rootClass}\n        type={type}\n        aria-pressed={active === undefined ? undefined : active}\n        {...htmlProps}\n      >\n        <span className={styles['action-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['action-button__label']}>{label}</span>\n      </button>\n    );\n  },\n);\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","icon","label","active","destructive","className","type","htmlProps","ref","rootClass","styles","jsxs","jsx","IconSlotContext"],"mappings":";;;;AAmBA,MAAMA,IAAeC;AAAA,EACnB,SACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAY;AAAA,MAChBC,EAAO,eAAe;AAAA,MACtBP,IAASO,EAAO,uBAAuB,IAAI;AAAA,MAC3CN,IAAcM,EAAO,4BAA4B,IAAI;AAAA,MACrDL,KAAa;AAAA,IAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWC;AAAA,QACX,MAAAH;AAAA,QACA,gBAAcH,MAAW,SAAY,SAAYA;AAAA,QAChD,GAAGI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,UAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAE,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,4BACC,QAAA,EAAK,WAAWH,EAAO,sBAAsB,GAAI,UAAAR,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9D;AACF;AAEAH,EAAa,cAAc;"}
+{"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { renderAsChild } from '@/utils/slot';\nimport styles from './ActionButton.module.scss';\n\ninterface ActionButtonOwnProps {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  destructive?: boolean;\n  className?: string;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface ActionButtonProps\n  extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges ActionButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n   * `<button>`; not available with `asChild`.\n   */\n  active?: boolean;\n}\n\nexport interface ActionButtonAsChildProps\n  extends\n    ActionButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges ActionButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `active` — they are not available on links.\n   * Pass an empty child; ActionButton supplies the icon and label anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the ActionButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n}\n\ntype ActionButtonComponent = {\n  (\n    props: ActionButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: ActionButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Action Button styling (no nested `<button>`).\n */\nconst ActionButton = forwardRef(function ActionButton(\n  props: ActionButtonProps | ActionButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      icon,\n      label,\n      destructive = false,\n      className,\n      disabled,\n      children,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = [\n      styles['action-button'],\n      destructive ? styles['action-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const anatomy = (\n      <>\n        <span className={styles['action-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['action-button__label']}>{label}</span>\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n      },\n      ref,\n      content: anatomy,\n      disabled: Boolean(disabled),\n      disabledClassName: styles['action-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    icon,\n    label,\n    active,\n    destructive = false,\n    className,\n    disabled,\n    type = 'button',\n    asChild,\n    ...htmlProps\n  } = props;\n  void asChild;\n\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}) as ActionButtonComponent;\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","active","type","htmlProps"],"mappings":";;;;;AA2EA,MAAMA,IAAeC,EAAW,SAC9BC,GACAC,GACA;AACA,MAAID,EAAM,SAAS;AACjB,UAAM;AAAA,MACJ,MAAAE;AAAAA,MACA,OAAAC;AAAAA,MACA,aAAAC,IAAc;AAAA,MACd,WAAAC;AAAAA,MACA,UAAAC;AAAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAAA,MACA,GAAGC;AAAA,IAAA,IACDT,GAGEU,IAAY;AAAA,MAChBC,EAAO,eAAe;AAAA,MACtBP,IAAcO,EAAO,4BAA4B,IAAI;AAAA,MACrDN,KAAa;AAAA,IAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,GAELO,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,WAAWJ,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,QACtC,UAAAd,GACH,GACF;AAAA,wBACC,QAAA,EAAK,WAAWS,EAAO,sBAAsB,GAAI,UAAAR,EAAAA,CAAM;AAAA,IAAA,GAC1D;AAGF,WAAOc,EAAc;AAAA,MACnB,OAAOV;AAAA,MACP,OAAO;AAAA,QACL,GAAGE;AAAA,QACH,WAAWC;AAAAA,MAAA;AAAA,MAEb,KAAAT;AAAA,MACA,SAASW;AAAA,MACT,UAAU,EAAQN;AAAAA,MAClB,mBAAmBK,EAAO,yBAAyB;AAAA,MACnD,oBAAoB;AAAA,IAAA,CACrB;AAAA,EACH;AAEA,QAAM;AAAA,IACJ,MAAAT;AAAA,IACA,OAAAC;AAAA,IACA,QAAAe;AAAA,IACA,aAAAd,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAa,IAAO;AAAA,IACP,SAAAX;AAAA,IACA,GAAGY;AAAA,EAAA,IACDpB,GAGEU,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBO,IAASP,EAAO,uBAAuB,IAAI;AAAA,IAC3CP,IAAcO,EAAO,4BAA4B,IAAI;AAAA,IACrDN,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWS;AAAA,MACX,MAAAS;AAAA,MACA,UAAAb;AAAA,MACA,gBAAcY,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAL,EAAC,UAAK,WAAWJ,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,0BACC,QAAA,EAAK,WAAWL,EAAO,sBAAsB,GAAI,UAAAR,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D,CAAC;AAEDL,EAAa,cAAc;"}

package/dist/components/action-button/ActionButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_1u191_2","action-button--active":"_action-button--active_1u191_34","action-button__icon":"_action-button__icon_1u191_37","action-button__label":"_action-button__label_1u191_38","action-button--destructive":"_action-button--destructive_1u191_47"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_ruap0_2","action-button--disabled":"_action-button--disabled_ruap0_28","action-button--active":"_action-button--active_ruap0_40","action-button__icon":"_action-button__icon_ruap0_44","action-button__label":"_action-button__label_ruap0_45","action-button--destructive":"_action-button--destructive_ruap0_54"};exports.default=t;
 //# sourceMappingURL=ActionButton.module.scss.cjs.map

package/dist/components/action-button/ActionButton.module.scss.js

@@ -1,9 +1,10 @@
 import './ActionButton.css';const t = {
-  "action-button": "_action-button_1u191_2",
-  "action-button--active": "_action-button--active_1u191_34",
-  "action-button__icon": "_action-button__icon_1u191_37",
-  "action-button__label": "_action-button__label_1u191_38",
-  "action-button--destructive": "_action-button--destructive_1u191_47"
+  "action-button": "_action-button_ruap0_2",
+  "action-button--disabled": "_action-button--disabled_ruap0_28",
+  "action-button--active": "_action-button--active_ruap0_40",
+  "action-button__icon": "_action-button__icon_ruap0_44",
+  "action-button__label": "_action-button__label_ruap0_45",
+  "action-button--destructive": "_action-button--destructive_ruap0_54"
 };
 export {
   t as default

package/dist/components/action-button/ActionButton.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"ActionButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/action-button/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ActionButton } from './ActionButton';
-export type * from './ActionButton';
+export type { ActionButtonProps, ActionButtonAsChildProps, } from './ActionButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/action-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,mBAAmB,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,gBAAgB,CAAC"}

package/dist/components/button/Button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("react"),d=require("../icon/Icon.cjs"),I=require("../spinner/Spinner.cjs"),b=require("../../utils/string.cjs"),e=require("./Button.module.scss.cjs"),P={"x-small":"12",small:"12",medium:"16",large:"20"},f=o.forwardRef(function({appearance:l="default",className:m="",destructive:p=!1,emphasis:a="primary",children:v,leadingIcon:u,loading:s=!1,size:i="medium",trailingIcon:r,disabled:_,type:x="button",...j},h){const n=P[i],C=e.default[`button--emphasis-${b.toKebab(a)}`],S=e.default[`button--size-${b.toKebab(i)}`],q=l==="inverted"?e.default["button--appearance-inverted"]:"",N=p?e.default["button--destructive"]:"",z=[e.default.button,C,S,q,N,m].filter(Boolean).join(" "),c=a!=="link",B=s||c&&o.isValidElement(u);return t.jsxs("button",{ref:h,className:z,type:x,disabled:_||s,...j,children:[B?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:s?t.jsx(I.default,{size:n,inverted:l==="inverted"}):t.jsx(d.IconSlotContext.Provider,{value:{size:n},children:u})}):null,t.jsx("span",{className:e.default.button__label,children:v}),c&&!s&&o.isValidElement(r)?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:t.jsx(d.IconSlotContext.Provider,{value:{size:n},children:r})}):null]})});f.displayName="Button";exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),d=require("../icon/Icon.cjs"),j=require("../spinner/Spinner.cjs"),G=require("../../utils/slot.cjs"),N=require("../../utils/string.cjs"),t=require("./Button.module.scss.cjs"),C={"x-small":"12",small:"12",medium:"16",large:"20"};function z({appearance:m="default",className:s="",destructive:l=!1,emphasis:i="primary",size:r="medium"}){return[t.default.button,t.default[`button--emphasis-${N.toKebab(i)}`],t.default[`button--size-${N.toKebab(r)}`],m==="inverted"?t.default["button--appearance-inverted"]:"",l?t.default["button--destructive"]:"",s].filter(Boolean).join(" ")}const I=n.forwardRef(function(s,l){if(s.asChild){const{appearance:p="default",className:M="",destructive:A=!1,emphasis:D="primary",children:K,leadingIcon:v,loading:a=!1,size:x="medium",trailingIcon:g,disabled:L,asChild:J,...O}=s,$=z({appearance:p,className:M,destructive:A,emphasis:D,size:x}),u=C[x],F=a||n.isValidElement(v),T=!!(L||a),_=K,Z=F?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:a?e.jsx(j.default,{size:u,inverted:p==="inverted"}):e.jsx(d.IconSlotContext.Provider,{value:{size:u},children:v})}):null,k=!a&&n.isValidElement(g)?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:e.jsx(d.IconSlotContext.Provider,{value:{size:u},children:g})}):null;return G.renderAsChild({child:_,props:{...O,className:$,...a?{"aria-busy":!0}:null},ref:l,content:e.jsxs(e.Fragment,{children:[Z,e.jsx("span",{className:t.default.button__label,children:_.props.children}),k]}),disabled:T,disabledClassName:t.default["button--disabled"]})}const{appearance:i="default",className:r="",destructive:S=!1,emphasis:q="primary",children:y,leadingIcon:b,loading:o=!1,size:h="medium",trailingIcon:f,disabled:B,type:P="button",asChild:H,...E}=s,R=z({appearance:i,className:r,destructive:S,emphasis:q,size:h}),c=C[h],V=o||n.isValidElement(b),w=!!(B||o);return e.jsxs("button",{ref:l,className:R,type:P,disabled:w,...E,children:[V?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:o?e.jsx(j.default,{size:c,inverted:i==="inverted"}):e.jsx(d.IconSlotContext.Provider,{value:{size:c},children:b})}):null,e.jsx("span",{className:t.default.button__label,children:y}),!o&&n.isValidElement(f)?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:e.jsx(d.IconSlotContext.Provider,{value:{size:c},children:f})}):null]})});I.displayName="Button";exports.default=I;
 //# sourceMappingURL=Button.cjs.map

package/dist/components/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot =\n    loading || (supportsIcons && isValidElement(leadingIcon));\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","Button","forwardRef","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","ref","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","isValidElement","jsxs","jsx","Spinner","IconSlotContext"],"mappings":"gTA6CMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOMC,EAASC,EAAAA,WAA2C,SACxD,CACE,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAWhB,EAAcU,CAAI,EAC7BO,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQb,CAAQ,CAAC,EAAE,EAC9Dc,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQT,CAAI,CAAC,EAAE,EAClDW,EACJlB,IAAe,WAAae,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,EAAmBjB,EAAca,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,EACAlB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELoB,EAAgBlB,IAAa,OAC7BmB,EACJhB,GAAYe,GAAiBE,EAAAA,eAAelB,CAAW,EAEzD,OACEmB,EAAAA,KAAC,SAAA,CACC,IAAAZ,EACA,UAAWQ,EACX,KAAAV,EACA,SAAUD,GAAYH,EACrB,GAAGK,EAEH,SAAA,CAAAW,EACCG,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAT,EACCmB,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAMb,EACN,SAAUb,IAAe,UAAA,CAAA,EAG3ByB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,CAAA,EACtC,SAAAR,EACH,CAAA,CAEJ,EACE,WACH,OAAA,CAAK,UAAWU,EAAAA,QAAO,cAAmB,SAAAX,EAAS,EACnDiB,GAAiB,CAACf,GAAWiB,EAAAA,eAAef,CAAY,EACvDiB,EAAAA,IAAC,OAAA,CAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAU,MAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,CAAA,EACtC,SAAAL,CAAA,CACH,CAAA,CACF,EACE,IAAA,CAAA,CAAA,CAGV,CAAC,EAEDV,EAAO,YAAc"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\ninterface ButtonOwnProps {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface ButtonProps\n  extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges Button props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /** Button label. */\n  children: ReactNode;\n}\n\nexport interface ButtonAsChildProps\n  extends\n    ButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges Button props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` — it is not forwarded.\n   */\n  asChild: true;\n  /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */\n  children: ReactElement;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\ntype ButtonComponent = {\n  (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  size = 'medium',\n}: {\n  appearance?: ButtonAppearance;\n  className?: string;\n  destructive?: boolean;\n  emphasis?: ButtonEmphasis;\n  size?: ButtonSize;\n}): string {\n  return [\n    styles.button,\n    styles[`button--emphasis-${toKebab(emphasis)}`],\n    styles[`button--size-${toKebab(size)}`],\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '',\n    destructive ? styles['button--destructive'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n *\n * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA\n * with Button styling and anatomy (no nested `<button>`).\n */\nconst Button = forwardRef(function Button(\n  props: ButtonProps | ButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      appearance = 'default',\n      className = '',\n      destructive = false,\n      emphasis = 'primary',\n      children,\n      leadingIcon,\n      loading = false,\n      size = 'medium',\n      trailingIcon,\n      disabled,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      appearance,\n      className,\n      destructive,\n      emphasis,\n      size,\n    });\n    const iconSize = SIZE_ICON_MAP[size];\n    const showLeadingSlot = loading || isValidElement(leadingIcon);\n    const isDisabled = Boolean(disabled || loading);\n    const child = children as ReactElement<{ children?: ReactNode }>;\n\n    const leading = showLeadingSlot ? (\n      <span className={styles['button__icon-slot']} aria-hidden>\n        {loading ? (\n          <Spinner\n            size={iconSize as SpinnerSize}\n            inverted={appearance === 'inverted'}\n          />\n        ) : (\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        )}\n      </span>\n    ) : null;\n\n    const trailing =\n      !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null;\n\n    return renderAsChild({\n      child,\n      props: {\n        ...rest,\n        className: rootClass,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: (\n        <>\n          {leading}\n          <span className={styles['button__label']}>\n            {child.props.children}\n          </span>\n          {trailing}\n        </>\n      ),\n      disabled: isDisabled,\n      disabledClassName: styles['button--disabled'],\n    });\n  }\n\n  const {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    appearance,\n    className,\n    destructive,\n    emphasis,\n    size,\n  });\n  const iconSize = SIZE_ICON_MAP[size];\n  const showLeadingSlot = loading || isValidElement(leadingIcon);\n  const isDisabled = Boolean(disabled || loading);\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {!loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","buildRootClass","appearance","className","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isValidElement","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"kVA+EMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQA,SAASC,EAAe,CACtB,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,KAAAC,EAAO,QACT,EAMW,CACT,MAAO,CACLC,EAAAA,QAAO,OACPA,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQH,CAAQ,CAAC,EAAE,EAC9CE,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQF,CAAI,CAAC,EAAE,EACtCJ,IAAe,WAAaK,UAAO,6BAA6B,EAAI,GACpEH,EAAcG,EAAAA,QAAO,qBAAqB,EAAI,GAC9CJ,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,CACb,CAUA,MAAMM,EAASC,EAAAA,WAAW,SACxBC,EACAC,EACA,CACA,GAAID,EAAM,QAAS,CACjB,KAAM,CACJ,WAAAT,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAQ,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,KAAAT,EAAO,SACP,aAAAU,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACDR,EAGES,EAAYnB,EAAe,CAC/B,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,SAAAC,EACA,KAAAC,CAAA,CACD,EACKe,EAAWrB,EAAcM,CAAI,EAC7BgB,EAAkBP,GAAWQ,EAAAA,eAAeT,CAAW,EACvDU,EAAa,GAAQP,GAAYF,GACjCU,EAAQZ,EAERa,EAAUJ,EACdK,MAAC,OAAA,CAAK,UAAWpB,UAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAQ,EACCY,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAMP,EACN,SAAUnB,IAAe,UAAA,CAAA,EAG3ByB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMR,CAAAA,EACtC,SAAAP,EACH,EAEJ,EACE,KAEEgB,EACJ,CAACf,GAAWQ,EAAAA,eAAeP,CAAY,EACrCW,EAAAA,IAAC,OAAA,CAAK,UAAWpB,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAoB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMR,CAAAA,EACtC,SAAAL,EACH,CAAA,CACF,EACE,KAEN,OAAOe,gBAAc,CACnB,MAAAN,EACA,MAAO,CACL,GAAGN,EACH,UAAWC,EACX,GAAIL,EAAU,CAAE,YAAa,IAAS,IAAA,EAExC,IAAAH,EACA,QACEoB,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAP,EACDC,EAAAA,IAAC,QAAK,UAAWpB,UAAO,cACrB,SAAAkB,EAAM,MAAM,SACf,EACCK,CAAA,EACH,EAEF,SAAUN,EACV,kBAAmBjB,EAAAA,QAAO,kBAAkB,CAAA,CAC7C,CACH,CAEA,KAAM,CACJ,WAAAL,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAQ,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,KAAAT,EAAO,SACP,aAAAU,EACA,SAAAC,EACA,KAAAiB,EAAO,SACP,QAAAhB,EACA,GAAGC,CAAA,EACDR,EAGES,EAAYnB,EAAe,CAC/B,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,SAAAC,EACA,KAAAC,CAAA,CACD,EACKe,EAAWrB,EAAcM,CAAI,EAC7BgB,EAAkBP,GAAWQ,EAAAA,eAAeT,CAAW,EACvDU,EAAa,GAAQP,GAAYF,GAEvC,OACEiB,EAAAA,KAAC,SAAA,CACC,IAAApB,EACA,UAAWQ,EACX,KAAAc,EACA,SAAUV,EACT,GAAGL,EAEH,SAAA,CAAAG,EACCK,EAAAA,IAAC,QAAK,UAAWpB,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAQ,EACCY,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAMP,EACN,SAAUnB,IAAe,UAAA,CAAA,EAG3ByB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMR,CAAA,EACtC,SAAAP,EACH,CAAA,CAEJ,EACE,WACH,OAAA,CAAK,UAAWP,EAAAA,QAAO,cAAmB,SAAAM,EAAS,EACnD,CAACE,GAAWQ,EAAAA,eAAeP,CAAY,QACrC,OAAA,CAAK,UAAWT,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAoB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMR,CAAA,EACtC,SAAAL,CAAA,CACH,CAAA,CACF,EACE,IAAA,CAAA,CAAA,CAGV,CAAC,EAEDP,EAAO,YAAc"}

package/dist/components/button/Button.css

@@ -1 +1 @@
-._button_doayp_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_doayp_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_doayp_2:disabled{cursor:not-allowed}._button__label_doayp_24{line-height:1}._button__icon-slot_doayp_27{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_doayp_33{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_doayp_33 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_doayp_40{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_doayp_40 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_doayp_47{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_doayp_47 ._button__label_doayp_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_doayp_54{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_doayp_54 ._button__label_doayp_24{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_doayp_61{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_doayp_75{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_doayp_105{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-link_doayp_118{--focus-ring-color: var(--link-color);padding:0;background-color:transparent;color:var(--link-color)}._button--emphasis-link_doayp_118:hover:not(:disabled) ._button__label_doayp_24{text-decoration:underline}._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-link_doayp_118{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118:disabled{color:rgba(var(--sidebar-text-rgb),.32)}
+._button_aa8j5_2{--button-fg: inherit;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--button-fg);transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_aa8j5_2:any-link,._button_aa8j5_2:hover,._button_aa8j5_2:focus,._button_aa8j5_2:active,._button_aa8j5_2:visited{color:var(--button-fg);text-decoration:none}._button_aa8j5_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_aa8j5_2:is(:disabled,._button--disabled_aa8j5_28){cursor:not-allowed}._button__label_aa8j5_31{line-height:1;color:var(--button-fg)}._button__icon-slot_aa8j5_35{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--button-fg)}._button--size-x-small_aa8j5_42{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_aa8j5_42 ._button__label_aa8j5_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_aa8j5_49{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_aa8j5_49 ._button__label_aa8j5_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_aa8j5_56{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_aa8j5_56 ._button__label_aa8j5_31{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_aa8j5_63{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_aa8j5_63 ._button__label_aa8j5_31{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_aa8j5_70{--button-fg: var(--button-color);background-color:var(--button-bg)}._button--emphasis-primary_aa8j5_70:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_aa8j5_70:active:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_aa8j5_70:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-secondary_aa8j5_84{--focus-ring-color: var(--link-color);--button-fg: var(--link-color);background-color:transparent;box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_aa8j5_84:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_aa8j5_84:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_aa8j5_84:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_aa8j5_100{--button-fg: var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-tertiary_aa8j5_100:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_aa8j5_100:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_aa8j5_100:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-quaternary_aa8j5_114{--button-fg: var(--link-color);background-color:transparent}._button--emphasis-quaternary_aa8j5_114:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_aa8j5_114:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_aa8j5_114:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--emphasis-link_aa8j5_127{--focus-ring-color: var(--link-color);--button-fg: var(--link-color);padding:0;background-color:transparent;align-self:flex-start;height:fit-content}._button--emphasis-link_aa8j5_127:hover:not(:disabled,._button--disabled_aa8j5_28) ._button__label_aa8j5_31{text-decoration:underline}._button--emphasis-link_aa8j5_127:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_aa8j5_141{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70{--button-fg: var(--button-color);background-color:var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70:active:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84{--button-fg: var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100{--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_aa8j5_141._button--emphasis-link_aa8j5_127{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-link_aa8j5_127:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70{--button-fg: var(--sidebar-bg);background-color:var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84{--button-fg: var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100{--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114{--button-fg: var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}._button--appearance-inverted_aa8j5_204._button--emphasis-link_aa8j5_127{--button-fg: var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-link_aa8j5_127:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}

package/dist/components/button/Button.d.ts

@@ -1,32 +1,63 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
 export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'link';
 export type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';
 export type ButtonAppearance = 'default' | 'inverted';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonOwnProps {
     /** default | inverted (for use on dark backgrounds). Maps to Figma "Style". */
     appearance?: ButtonAppearance;
     /** Optional CSS class name. */
     className?: string;
-    /** Button label. */
-    children: ReactNode;
     /** When true, uses destructive (danger) styling. */
     destructive?: boolean;
     /** Visual emphasis. Default: primary. */
     emphasis?: ButtonEmphasis;
     /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
     leadingIcon?: ReactNode;
-    /** When true, shows a Spinner in the leading slot and disables the button. */
+    /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */
     loading?: boolean;
     /** Size variant. Default: medium. */
     size?: ButtonSize;
     /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
     trailingIcon?: ReactNode;
+    /**
+     * When true, disables the control. On a native `<button>`, sets the `disabled`
+     * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and
+     * blocks click / middle-click navigation (the link stays focusable).
+     */
+    disabled?: boolean;
+}
+export interface ButtonProps extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * When true, merges Button props onto the single child element instead of
+     * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
+     */
+    asChild?: false;
+    /** Button label. */
+    children: ReactNode;
+}
+export interface ButtonAsChildProps extends ButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {
+    /**
+     * Merges Button props onto the single child element instead of rendering a
+     * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the
+     * child. Do not pass `type` — it is not forwarded.
+     */
+    asChild: true;
+    /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */
+    children: ReactElement;
 }
+type ButtonComponent = {
+    (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
+    (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+    displayName?: string;
+};
 /**
  * Buttons let people take actions or make decisions with a single tap or click — saving a
  * form, sending a message, confirming a dialog. Compass ships several button variants, each
  * with the same anatomy and rhythm so they feel like members of the same family.
+ *
+ * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA
+ * with Button styling and anatomy (no nested `<button>`).
  */
-declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Button: ButtonComponent;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4IAA4I;IAC5I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6IAA6I;IAC7I,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,QAAA,MAAM,MAAM,2GAuEV,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,UAAU,cAAc;IACtB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4IAA4I;IAC5I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oHAAoH;IACpH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6IAA6I;IAC7I,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SAAQ,cAAc,EAAE,oBAAoB,CAAC,iBAAiB,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SACE,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD;;;;OAIG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,sGAAsG;IACtG,QAAQ,EAAE,YAAY,CAAC;CACxB;AASD,KAAK,eAAe,GAAG;IACrB,CAAC,KAAK,EAAE,kBAAkB,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IAC9E,CAAC,KAAK,EAAE,WAAW,GAAG,aAAa,CAAC,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA2BF;;;;;;;GAOG;AACH,QAAA,MAAM,MAAM,EA2IN,eAAe,CAAC;AAItB,eAAe,MAAM,CAAC"}