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

package/dist/components/admin-panel-footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EACV,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/admin-panel-header/AdminPanelHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPanelHeader.cjs","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import { type ChangeEvent, type ReactNode } from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  /** Default: \"Beta\". Accepts translated nodes. */\n  betaLabel?: ReactNode;\n  showEnterpriseLabel?: boolean;\n  /** Default: \"Enterprise\". Accepts translated nodes. */\n  enterpriseLabel?: ReactNode;\n  showButton?: boolean;\n  /** Default: \"Button\". Accepts translated nodes. */\n  buttonLabel?: ReactNode;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (\n    checked: boolean,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  onToggleExpand?: () => void;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n  collapseLabel?: string;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern; it can also be documented on\n * its own when adjusting header anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  expandLabel = 'Expand section',\n  collapseLabel = 'Collapse section',\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  return (\n    <header\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div className={styles['admin-panel-header__leading']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '20' }}>\n                {leadingIcon ?? defaultLeading}\n              </IconSlotContext.Provider>\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2 id={titleId} className={styles['admin-panel-header__title']}>\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div className={styles['admin-panel-header__actions']}>\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? collapseLabel : expandLabel}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","expandLabel","collapseLabel","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","IconSlotContext","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"AdminPanelHeader.cjs","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import { type ChangeEvent, type ReactNode } from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  /** Default: \"Beta\". Accepts translated nodes. */\n  betaLabel?: ReactNode;\n  showEnterpriseLabel?: boolean;\n  /** Default: \"Enterprise\". Accepts translated nodes. */\n  enterpriseLabel?: ReactNode;\n  showButton?: boolean;\n  /** Default: \"Button\". Accepts translated nodes. */\n  buttonLabel?: ReactNode;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (\n    checked: boolean,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  onToggleExpand?: () => void;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n  collapseLabel?: string;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern whenever that panel has a\n * `title` (Admin Panel may omit the header when it has a body only). Document the header on\n * its own when adjusting anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  expandLabel = 'Expand section',\n  collapseLabel = 'Collapse section',\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  return (\n    <header\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div className={styles['admin-panel-header__leading']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '20' }}>\n                {leadingIcon ?? defaultLeading}\n              </IconSlotContext.Provider>\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2 id={titleId} className={styles['admin-panel-header__title']}>\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div className={styles['admin-panel-header__actions']}>\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? collapseLabel : expandLabel}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","expandLabel","collapseLabel","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","IconSlotContext","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/dist/components/admin-panel-header/AdminPanelHeader.d.ts

@@ -41,8 +41,9 @@ export interface AdminPanelHeaderProps {
 /**
  * Admin Panel Header is the titled rail for a System Console settings section: optional
  * leading icon, title with optional tags, subtitle, and trailing controls. It is composed
- * inside the [`Admin Panel`](/patterns/admin-panel) pattern; it can also be documented on
- * its own when adjusting header anatomy or behaviour.
+ * inside the [`Admin Panel`](/patterns/admin-panel) pattern whenever that panel has a
+ * `title` (Admin Panel may omit the header when it has a body only). Document the header on
+ * its own when adjusting anatomy or behaviour.
  */
 export default function AdminPanelHeader({ titleId, title, subtitle, headerActions, iconLeft, leadingIcon, showBeta, betaLabel, showEnterpriseLabel, enterpriseLabel, showButton, buttonLabel, onButtonClick, showSwitch, switchLabel, switchChecked, defaultSwitchChecked, onSwitchChange, switchDisabled, expandable, isExpanded, onToggleExpand, expandLabel, collapseLabel, showDivider, className, }: AdminPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AdminPanelHeader.d.ts.map

package/dist/components/admin-panel-header/AdminPanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAazD,6EAA6E;AAC7E,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uIAAuI;IACvI,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uDAAuD;IACvD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,CACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KACjC,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAgB,EAChB,WAAW,EACX,QAAgB,EAChB,SAAkB,EAClB,mBAA2B,EAC3B,eAA8B,EAC9B,UAAkB,EAClB,WAAsB,EACtB,aAAa,EACb,UAAkB,EAClB,WAAmB,EACnB,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,UAAkB,EAClB,UAAkB,EAClB,cAAc,EACd,WAA8B,EAC9B,aAAkC,EAClC,WAAkB,EAClB,SAAc,GACf,EAAE,qBAAqB,2CAiGvB"}
+{"version":3,"file":"AdminPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAazD,6EAA6E;AAC7E,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uIAAuI;IACvI,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uDAAuD;IACvD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,CACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KACjC,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAgB,EAChB,WAAW,EACX,QAAgB,EAChB,SAAkB,EAClB,mBAA2B,EAC3B,eAA8B,EAC9B,UAAkB,EAClB,WAAsB,EACtB,aAAa,EACb,UAAkB,EAClB,WAAmB,EACnB,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,UAAkB,EAClB,UAAkB,EAClB,cAAc,EACd,WAA8B,EAC9B,aAAkC,EAClC,WAAkB,EAClB,SAAc,GACf,EAAE,qBAAqB,2CAiGvB"}

package/dist/components/admin-panel-header/AdminPanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPanelHeader.js","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import { type ChangeEvent, type ReactNode } from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  /** Default: \"Beta\". Accepts translated nodes. */\n  betaLabel?: ReactNode;\n  showEnterpriseLabel?: boolean;\n  /** Default: \"Enterprise\". Accepts translated nodes. */\n  enterpriseLabel?: ReactNode;\n  showButton?: boolean;\n  /** Default: \"Button\". Accepts translated nodes. */\n  buttonLabel?: ReactNode;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (\n    checked: boolean,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  onToggleExpand?: () => void;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n  collapseLabel?: string;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern; it can also be documented on\n * its own when adjusting header anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  expandLabel = 'Expand section',\n  collapseLabel = 'Collapse section',\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  return (\n    <header\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div className={styles['admin-panel-header__leading']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '20' }}>\n                {leadingIcon ?? defaultLeading}\n              </IconSlotContext.Provider>\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2 id={titleId} className={styles['admin-panel-header__title']}>\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div className={styles['admin-panel-header__actions']}>\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? collapseLabel : expandLabel}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","expandLabel","collapseLabel","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","IconSlotContext","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"AdminPanelHeader.js","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import { type ChangeEvent, type ReactNode } from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  /** Default: \"Beta\". Accepts translated nodes. */\n  betaLabel?: ReactNode;\n  showEnterpriseLabel?: boolean;\n  /** Default: \"Enterprise\". Accepts translated nodes. */\n  enterpriseLabel?: ReactNode;\n  showButton?: boolean;\n  /** Default: \"Button\". Accepts translated nodes. */\n  buttonLabel?: ReactNode;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (\n    checked: boolean,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  onToggleExpand?: () => void;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n  collapseLabel?: string;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern whenever that panel has a\n * `title` (Admin Panel may omit the header when it has a body only). Document the header on\n * its own when adjusting anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  expandLabel = 'Expand section',\n  collapseLabel = 'Collapse section',\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  return (\n    <header\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div className={styles['admin-panel-header__leading']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '20' }}>\n                {leadingIcon ?? defaultLeading}\n              </IconSlotContext.Provider>\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2 id={titleId} className={styles['admin-panel-header__title']}>\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div className={styles['admin-panel-header__actions']}>\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? collapseLabel : expandLabel}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","expandLabel","collapseLabel","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","IconSlotContext","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

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":"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"}

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"}

package/dist/components/button/Button.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","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":";;;;;;AA6CA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAOMC,IAASC,EAA2C,SACxD;AAAA,EACE,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWhB,EAAcU,CAAI,GAC7BO,IAAgBC,EAAO,oBAAoBC,EAAQb,CAAQ,CAAC,EAAE,GAC9Dc,IAAYF,EAAO,gBAAgBC,EAAQT,CAAI,CAAC,EAAE,GAClDW,IACJlB,MAAe,aAAae,EAAO,6BAA6B,IAAI,IAChEI,IAAmBjB,IAAca,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAlB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELoB,IAAgBlB,MAAa,QAC7BmB,IACJhB,KAAYe,KAAiBE,EAAelB,CAAW;AAEzD,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWQ;AAAA,MACX,MAAAV;AAAA,MACA,UAAUD,KAAYH;AAAA,MACrB,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAW,IACC,gBAAAG,EAAC,UAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAT,IACC,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAMb;AAAA,YACN,UAAUb,MAAe;AAAA,UAAA;AAAA,QAAA,IAG3B,gBAAAyB,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAR,GACH,EAAA,CAEJ,IACE;AAAA,0BACH,QAAA,EAAK,WAAWU,EAAO,eAAmB,UAAAX,GAAS;AAAA,QACnDiB,KAAiB,CAACf,KAAWiB,EAAef,CAAY,IACvD,gBAAAiB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAU,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAL,EAAA,CACH,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAEDV,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","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":"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"}

package/dist/components/button/Button.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_doayp_2",o="_button__label_doayp_24",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_doayp_27","button--size-x-small":"_button--size-x-small_doayp_33","button--size-small":"_button--size-small_doayp_40","button--size-medium":"_button--size-medium_doayp_47","button--size-large":"_button--size-large_doayp_54","button--emphasis-primary":"_button--emphasis-primary_doayp_61","button--emphasis-secondary":"_button--emphasis-secondary_doayp_75","button--emphasis-tertiary":"_button--emphasis-tertiary_doayp_91","button--emphasis-quaternary":"_button--emphasis-quaternary_doayp_105","button--emphasis-link":"_button--emphasis-link_doayp_118","button--destructive":"_button--destructive_doayp_130","button--appearance-inverted":"_button--appearance-inverted_doayp_193"};exports.button=t;exports.button__label=o;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_aa8j5_2",a="_button__label_aa8j5_31",e={button:t,"button--disabled":"_button--disabled_aa8j5_28",button__label:a,"button__icon-slot":"_button__icon-slot_aa8j5_35","button--size-x-small":"_button--size-x-small_aa8j5_42","button--size-small":"_button--size-small_aa8j5_49","button--size-medium":"_button--size-medium_aa8j5_56","button--size-large":"_button--size-large_aa8j5_63","button--emphasis-primary":"_button--emphasis-primary_aa8j5_70","button--emphasis-secondary":"_button--emphasis-secondary_aa8j5_84","button--emphasis-tertiary":"_button--emphasis-tertiary_aa8j5_100","button--emphasis-quaternary":"_button--emphasis-quaternary_aa8j5_114","button--emphasis-link":"_button--emphasis-link_aa8j5_127","button--destructive":"_button--destructive_aa8j5_141","button--appearance-inverted":"_button--appearance-inverted_aa8j5_204"};exports.button=t;exports.button__label=a;exports.default=e;
 //# sourceMappingURL=Button.module.scss.cjs.map