npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.6 → 0.1.0-alpha.8 - Mend

@mattermost/compass-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (268) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n icon: ReactNode;\n label: string;\n /** When set, this is a toggle; maps to `aria-pressed`. /\n active?: boolean;\n destructive?: boolean;\n}\n\n/\n Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n icon,\n label,\n active,\n destructive = false,\n className,\n type = 'button',\n ...htmlProps\n}: ActionButtonProps) {\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={rootClass}\n type={type}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n {icon}\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx"],"mappings":"~~6LAgBA~~,SAAwBA,EAAa,CACnC,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBN,EAASM,EAAAA,QAAO,uBAAuB,EAAI,GAC3CL,EAAcK,EAAAA,QAAO,4BAA4B,EAAI,GACrDJ,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,KAAC,SAAA,CACC,UAAWF,EACX,KAAAF,EACA,eAAcH,IAAW,OAAY,OAAYA,EAChD,GAAGI,EAEJ,SAAA,CAAAI,EAAAA,IAAC,QAAK,UAAWF,UAAO,qBAAqB,EAAG,cAAW,GACxD,SAAAR,EACH,QACC,OAAA,CAAK,UAAWQ,EAAAA,QAAO,sBAAsB,EAAI,SAAAP,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D"}
1	+ {"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Pass `<Icon glyph={<SomeIcon />} size=\"20\" />` — the slot is 20×20px and does not resize its children. /\n icon: ReactNode;\n label: string;\n /* When set, this is a toggle; maps to `aria-pressed`. /\n active?: boolean;\n destructive?: boolean;\n}\n\n/\n Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n icon,\n label,\n active,\n destructive = false,\n className,\n type = 'button',\n ...htmlProps\n}: ActionButtonProps) {\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={rootClass}\n type={type}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n {icon}\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx"],"mappings":"6LAiBA,SAAwBA,EAAa,CACnC,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBN,EAASM,EAAAA,QAAO,uBAAuB,EAAI,GAC3CL,EAAcK,EAAAA,QAAO,4BAA4B,EAAI,GACrDJ,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,KAAC,SAAA,CACC,UAAWF,EACX,KAAAF,EACA,eAAcH,IAAW,OAAY,OAAYA,EAChD,GAAGI,EAEJ,SAAA,CAAAI,EAAAA,IAAC,QAAK,UAAWF,UAAO,qBAAqB,EAAG,cAAW,GACxD,SAAAR,EACH,QACC,OAAA,CAAK,UAAWQ,EAAAA,QAAO,sBAAsB,EAAI,SAAAP,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D"}

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

@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Pass `<Icon glyph={<SomeIcon />} size="20" />` — the slot is 20×20px and does not resize its children. */
     icon: ReactNode;
     label: string;
     /** When set, this is a toggle; maps to `aria-pressed`. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,WAAmB,EACnB,SAAS,EACT,IAAe,EACf,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAuBnB"}
1	+ {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,6GAA6G;IAC7G,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,WAAmB,EACnB,SAAS,EACT,IAAe,EACf,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAuBnB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n icon: ReactNode;\n label: string;\n /** When set, this is a toggle; maps to `aria-pressed`. /\n active?: boolean;\n destructive?: boolean;\n}\n\n/\n Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n icon,\n label,\n active,\n destructive = false,\n className,\n type = 'button',\n ...htmlProps\n}: ActionButtonProps) {\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={rootClass}\n type={type}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n {icon}\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx"],"mappings":";;~~AAgBA~~,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBN,IAASM,EAAO,uBAAuB,IAAI;AAAA,IAC3CL,IAAcK,EAAO,4BAA4B,IAAI;AAAA,IACrDJ,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAAF;AAAA,MACA,gBAAcH,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACxD,UAAAR,GACH;AAAA,0BACC,QAAA,EAAK,WAAWQ,EAAO,sBAAsB,GAAI,UAAAP,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D;"}
1	+ {"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Pass `<Icon glyph={<SomeIcon />} size=\"20\" />` — the slot is 20×20px and does not resize its children. /\n icon: ReactNode;\n label: string;\n /* When set, this is a toggle; maps to `aria-pressed`. /\n active?: boolean;\n destructive?: boolean;\n}\n\n/\n Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n icon,\n label,\n active,\n destructive = false,\n className,\n type = 'button',\n ...htmlProps\n}: ActionButtonProps) {\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={rootClass}\n type={type}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n {icon}\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx"],"mappings":";;AAiBA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBN,IAASM,EAAO,uBAAuB,IAAI;AAAA,IAC3CL,IAAcK,EAAO,4BAA4B,IAAI;AAAA,IACrDJ,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAAF;AAAA,MACA,gBAAcH,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACxD,UAAAR,GACH;AAAA,0BACC,QAAA,EAAK,WAAWQ,EAAO,sBAAsB,GAAI,UAAAP,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/components/admin-panel/AdminPanel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AdminPanel.cjs","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"sourcesContent":["import { useId, useState, type ChangeEvent, type ReactNode } from 'react';\nimport AdminPanelHeader, {\n type AdminPanelExpandedState,\n} from '@/components/admin-panel-header/AdminPanelHeader';\nimport styles from './AdminPanel.module.scss';\n\nexport type { AdminPanelExpandedState };\n\nexport interface AdminPanelProps {\n title: ReactNode;\n subtitle?: ReactNode;\n children?: ReactNode;\n className?: string;\n headerActions?: ReactNode;\n iconLeft?: boolean;\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n expandedState?: AdminPanelExpandedState;\n defaultExpandedState?: AdminPanelExpandedState;\n onExpandedStateChange?: (state: AdminPanelExpandedState) => void;\n}\n\n/*\n System Console admin settings panel: `AdminPanelHeader` plus a body slot\n * for grouped fields. Expand/collapse state is owned here and passed to the header.\n */\nexport default function AdminPanel({\n title,\n subtitle,\n headerActions,\n children,\n className = '',\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 expandedState: expandedStateProp,\n defaultExpandedState = 'collapsed',\n onExpandedStateChange,\n}: AdminPanelProps) {\n const titleId = useId();\n\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState<AdminPanelExpandedState>(defaultExpandedState);\n\n const isExpandControlled = expandable && expandedStateProp !== undefined;\n const resolvedExpandedState: AdminPanelExpandedState = !expandable\n ? 'expanded'\n : isExpandControlled\n ? expandedStateProp!\n : uncontrolledExpanded;\n\n const isExpanded = resolvedExpandedState === 'expanded';\n\n const setExpandedState = (next: AdminPanelExpandedState) => {\n if (!expandable) return;\n if (!isExpandControlled) {\n setUncontrolledExpanded(next);\n }\n onExpandedStateChange?.(next);\n };\n\n const toggleExpanded = () => {\n setExpandedState(isExpanded ? 'collapsed' : 'expanded');\n };\n\n const showHeaderDivider = !expandable \|\| isExpanded;\n\n return (\n <section\n className={[styles['admin-panel'], className].join(' ').trim()}\n aria-labelledby={titleId}\n >\n <AdminPanelHeader\n titleId={titleId}\n title={title}\n subtitle={subtitle}\n headerActions={headerActions}\n iconLeft={iconLeft}\n leadingIcon={leadingIcon}\n showBeta={showBeta}\n betaLabel={betaLabel}\n showEnterpriseLabel={showEnterpriseLabel}\n enterpriseLabel={enterpriseLabel}\n showButton={showButton}\n buttonLabel={buttonLabel}\n onButtonClick={onButtonClick}\n showSwitch={showSwitch}\n switchLabel={switchLabel}\n switchChecked={switchChecked}\n defaultSwitchChecked={defaultSwitchChecked}\n onSwitchChange={onSwitchChange}\n switchDisabled={switchDisabled}\n expandable={expandable}\n isExpanded={isExpanded}\n onToggleExpand={toggleExpanded}\n showDivider={showHeaderDivider}\n />\n {expandable ? (\n <div\n className={[\n styles['admin-panel__collapse'],\n isExpanded ? styles['admin-panel__collapse--expanded'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-hidden={!isExpanded}\n >\n <div className={styles['admin-panel__collapse-inner']}>\n <div className={styles['admin-panel__body']}>{children}</div>\n </div>\n </div>\n ) : (\n <div className={styles['admin-panel__body']}>{children}</div>\n )}\n </section>\n );\n}\n"],"names":["AdminPanel","title","subtitle","headerActions","children","className","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","expandedStateProp","defaultExpandedState","onExpandedStateChange","titleId","useId","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpandControlled","isExpanded","setExpandedState","next","toggleExpanded","showHeaderDivider","jsxs","styles","jsx","AdminPanelHeader"],"mappings":"~~oQAuCA~~,SAAwBA,EAAW,CACjC,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,aAClB,WAAAC,EAAa,GACb,YAAAC,EAAc,SACd,cAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EAAc,MACd,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EAAa,GACb,cAAeC,EACf,qBAAAC,EAAuB,YACvB,sBAAAC,CACF,EAAoB,CAClB,MAAMC,EAAUC,EAAAA,MAAA,EAEV,CAACC,EAAsBC,CAAuB,EAClDC,EAAAA,SAAkCN,CAAoB,EAElDO,EAAqBT,GAAcC,IAAsB,OAOzDS,GANkDV,EAEpDS,EACER,EACAK,EAHF,cAKyC,WAEvCK,EAAoBC,GAAkC,CACrDZ,IACAS,GACHF,EAAwBK,CAAI,EAE9BT,GAAA,MAAAA,EAAwBS,GAC1B,EAEMC,EAAiB,IAAM,CAC3BF,EAAiBD,EAAa,YAAc,UAAU,CACxD,EAEMI,EAAoB,CAACd,GAAcU,EAEzC,OACEK,EAAAA,KAAC,UAAA,CACC,UAAW,CAACC,EAAAA,QAAO,aAAa,EAAGhC,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA,EACxD,kBAAiBoB,EAEjB,SAAA,CAAAa,EAAAA,IAACC,EAAAA,QAAA,CACC,QAAAd,EACA,MAAAxB,EACA,SAAAC,EACA,cAAAC,EACA,SAAAG,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAU,EACA,eAAgBG,EAChB,YAAaC,CAAA,CAAA,EAEdd,EACCiB,EAAAA,IAAC,MAAA,CACC,UAAW,CACTD,EAAAA,QAAO,uBAAuB,EAC9BN,EAAaM,EAAAA,QAAO,iCAAiC,EAAI,EAAA,EAExD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,CAACN,EAEd,SAAAO,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,6BAA6B,EAClD,SAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,mBAAmB,EAAI,SAAAjC,EAAS,CAAA,CACzD,CAAA,CAAA,EAGFkC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,mBAAmB,EAAI,SAAAjC,CAAA,CAAS,CAAA,CAAA,CAAA,CAI/D"}
1	+ {"version":3,"file":"AdminPanel.cjs","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"sourcesContent":["import { useId, useState, type ChangeEvent, type ReactNode } from 'react';\nimport AdminPanelHeader, {\n type AdminPanelExpandedState,\n} from '@/components/admin-panel-header/AdminPanelHeader';\nimport styles from './AdminPanel.module.scss';\n\nexport type { AdminPanelExpandedState };\n\nexport interface AdminPanelProps {\n title: ReactNode;\n subtitle?: ReactNode;\n children?: ReactNode;\n className?: string;\n headerActions?: ReactNode;\n iconLeft?: boolean;\n /** Icon forwarded to `AdminPanelHeader`'s 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} size=\"20\" />`. /\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n expandedState?: AdminPanelExpandedState;\n defaultExpandedState?: AdminPanelExpandedState;\n onExpandedStateChange?: (state: AdminPanelExpandedState) => void;\n}\n\n/\n System Console admin settings panel: `AdminPanelHeader` plus a body slot\n * for grouped fields. Expand/collapse state is owned here and passed to the header.\n */\nexport default function AdminPanel({\n title,\n subtitle,\n headerActions,\n children,\n className = '',\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 expandedState: expandedStateProp,\n defaultExpandedState = 'collapsed',\n onExpandedStateChange,\n}: AdminPanelProps) {\n const titleId = useId();\n\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState<AdminPanelExpandedState>(defaultExpandedState);\n\n const isExpandControlled = expandable && expandedStateProp !== undefined;\n const resolvedExpandedState: AdminPanelExpandedState = !expandable\n ? 'expanded'\n : isExpandControlled\n ? expandedStateProp!\n : uncontrolledExpanded;\n\n const isExpanded = resolvedExpandedState === 'expanded';\n\n const setExpandedState = (next: AdminPanelExpandedState) => {\n if (!expandable) return;\n if (!isExpandControlled) {\n setUncontrolledExpanded(next);\n }\n onExpandedStateChange?.(next);\n };\n\n const toggleExpanded = () => {\n setExpandedState(isExpanded ? 'collapsed' : 'expanded');\n };\n\n const showHeaderDivider = !expandable \|\| isExpanded;\n\n return (\n <section\n className={[styles['admin-panel'], className].join(' ').trim()}\n aria-labelledby={titleId}\n >\n <AdminPanelHeader\n titleId={titleId}\n title={title}\n subtitle={subtitle}\n headerActions={headerActions}\n iconLeft={iconLeft}\n leadingIcon={leadingIcon}\n showBeta={showBeta}\n betaLabel={betaLabel}\n showEnterpriseLabel={showEnterpriseLabel}\n enterpriseLabel={enterpriseLabel}\n showButton={showButton}\n buttonLabel={buttonLabel}\n onButtonClick={onButtonClick}\n showSwitch={showSwitch}\n switchLabel={switchLabel}\n switchChecked={switchChecked}\n defaultSwitchChecked={defaultSwitchChecked}\n onSwitchChange={onSwitchChange}\n switchDisabled={switchDisabled}\n expandable={expandable}\n isExpanded={isExpanded}\n onToggleExpand={toggleExpanded}\n showDivider={showHeaderDivider}\n />\n {expandable ? (\n <div\n className={[\n styles['admin-panel__collapse'],\n isExpanded ? styles['admin-panel__collapse--expanded'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-hidden={!isExpanded}\n >\n <div className={styles['admin-panel__collapse-inner']}>\n <div className={styles['admin-panel__body']}>{children}</div>\n </div>\n </div>\n ) : (\n <div className={styles['admin-panel__body']}>{children}</div>\n )}\n </section>\n );\n}\n"],"names":["AdminPanel","title","subtitle","headerActions","children","className","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","expandedStateProp","defaultExpandedState","onExpandedStateChange","titleId","useId","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpandControlled","isExpanded","setExpandedState","next","toggleExpanded","showHeaderDivider","jsxs","styles","jsx","AdminPanelHeader"],"mappings":"oQAwCA,SAAwBA,EAAW,CACjC,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,aAClB,WAAAC,EAAa,GACb,YAAAC,EAAc,SACd,cAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EAAc,MACd,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EAAa,GACb,cAAeC,EACf,qBAAAC,EAAuB,YACvB,sBAAAC,CACF,EAAoB,CAClB,MAAMC,EAAUC,EAAAA,MAAA,EAEV,CAACC,EAAsBC,CAAuB,EAClDC,EAAAA,SAAkCN,CAAoB,EAElDO,EAAqBT,GAAcC,IAAsB,OAOzDS,GANkDV,EAEpDS,EACER,EACAK,EAHF,cAKyC,WAEvCK,EAAoBC,GAAkC,CACrDZ,IACAS,GACHF,EAAwBK,CAAI,EAE9BT,GAAA,MAAAA,EAAwBS,GAC1B,EAEMC,EAAiB,IAAM,CAC3BF,EAAiBD,EAAa,YAAc,UAAU,CACxD,EAEMI,EAAoB,CAACd,GAAcU,EAEzC,OACEK,EAAAA,KAAC,UAAA,CACC,UAAW,CAACC,EAAAA,QAAO,aAAa,EAAGhC,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA,EACxD,kBAAiBoB,EAEjB,SAAA,CAAAa,EAAAA,IAACC,EAAAA,QAAA,CACC,QAAAd,EACA,MAAAxB,EACA,SAAAC,EACA,cAAAC,EACA,SAAAG,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAU,EACA,eAAgBG,EAChB,YAAaC,CAAA,CAAA,EAEdd,EACCiB,EAAAA,IAAC,MAAA,CACC,UAAW,CACTD,EAAAA,QAAO,uBAAuB,EAC9BN,EAAaM,EAAAA,QAAO,iCAAiC,EAAI,EAAA,EAExD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,CAACN,EAEd,SAAAO,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,6BAA6B,EAClD,SAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,mBAAmB,EAAI,SAAAjC,EAAS,CAAA,CACzD,CAAA,CAAA,EAGFkC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,mBAAmB,EAAI,SAAAjC,CAAA,CAAS,CAAA,CAAA,CAAA,CAI/D"}

package/dist/components/admin-panel/AdminPanel.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export interface AdminPanelProps {
     className?: string;
     headerActions?: ReactNode;
     iconLeft?: boolean;
+    /** Icon forwarded to `AdminPanelHeader`'s 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} size="20" />`. */
     leadingIcon?: ReactNode;
     showBeta?: boolean;
     betaLabel?: string;

package/dist/components/admin-panel/AdminPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AdminPanel.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAyB,EACvB,KAAK,uBAAuB,EAC7B,MAAM,gDAAgD,CAAC;AAGxD,YAAY,EAAE,uBAAuB,EAAE,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,oBAAoB,CAAC,EAAE,uBAAuB,CAAC;IAC/C,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAClE;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAc,EACd,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,aAAa,EAAE,iBAAiB,EAChC,oBAAkC,EAClC,qBAAqB,GACtB,EAAE,eAAe,2CA8EjB"}
1	+ {"version":3,"file":"AdminPanel.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAyB,EACvB,KAAK,uBAAuB,EAC7B,MAAM,gDAAgD,CAAC;AAGxD,YAAY,EAAE,uBAAuB,EAAE,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kHAAkH;IAClH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,oBAAoB,CAAC,EAAE,uBAAuB,CAAC;IAC/C,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAClE;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAc,EACd,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,aAAa,EAAE,iBAAiB,EAChC,oBAAkC,EAClC,qBAAqB,GACtB,EAAE,eAAe,2CA8EjB"}

package/dist/components/admin-panel/AdminPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AdminPanel.js","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"sourcesContent":["import { useId, useState, type ChangeEvent, type ReactNode } from 'react';\nimport AdminPanelHeader, {\n type AdminPanelExpandedState,\n} from '@/components/admin-panel-header/AdminPanelHeader';\nimport styles from './AdminPanel.module.scss';\n\nexport type { AdminPanelExpandedState };\n\nexport interface AdminPanelProps {\n title: ReactNode;\n subtitle?: ReactNode;\n children?: ReactNode;\n className?: string;\n headerActions?: ReactNode;\n iconLeft?: boolean;\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n expandedState?: AdminPanelExpandedState;\n defaultExpandedState?: AdminPanelExpandedState;\n onExpandedStateChange?: (state: AdminPanelExpandedState) => void;\n}\n\n/*\n System Console admin settings panel: `AdminPanelHeader` plus a body slot\n * for grouped fields. Expand/collapse state is owned here and passed to the header.\n */\nexport default function AdminPanel({\n title,\n subtitle,\n headerActions,\n children,\n className = '',\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 expandedState: expandedStateProp,\n defaultExpandedState = 'collapsed',\n onExpandedStateChange,\n}: AdminPanelProps) {\n const titleId = useId();\n\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState<AdminPanelExpandedState>(defaultExpandedState);\n\n const isExpandControlled = expandable && expandedStateProp !== undefined;\n const resolvedExpandedState: AdminPanelExpandedState = !expandable\n ? 'expanded'\n : isExpandControlled\n ? expandedStateProp!\n : uncontrolledExpanded;\n\n const isExpanded = resolvedExpandedState === 'expanded';\n\n const setExpandedState = (next: AdminPanelExpandedState) => {\n if (!expandable) return;\n if (!isExpandControlled) {\n setUncontrolledExpanded(next);\n }\n onExpandedStateChange?.(next);\n };\n\n const toggleExpanded = () => {\n setExpandedState(isExpanded ? 'collapsed' : 'expanded');\n };\n\n const showHeaderDivider = !expandable \|\| isExpanded;\n\n return (\n <section\n className={[styles['admin-panel'], className].join(' ').trim()}\n aria-labelledby={titleId}\n >\n <AdminPanelHeader\n titleId={titleId}\n title={title}\n subtitle={subtitle}\n headerActions={headerActions}\n iconLeft={iconLeft}\n leadingIcon={leadingIcon}\n showBeta={showBeta}\n betaLabel={betaLabel}\n showEnterpriseLabel={showEnterpriseLabel}\n enterpriseLabel={enterpriseLabel}\n showButton={showButton}\n buttonLabel={buttonLabel}\n onButtonClick={onButtonClick}\n showSwitch={showSwitch}\n switchLabel={switchLabel}\n switchChecked={switchChecked}\n defaultSwitchChecked={defaultSwitchChecked}\n onSwitchChange={onSwitchChange}\n switchDisabled={switchDisabled}\n expandable={expandable}\n isExpanded={isExpanded}\n onToggleExpand={toggleExpanded}\n showDivider={showHeaderDivider}\n />\n {expandable ? (\n <div\n className={[\n styles['admin-panel__collapse'],\n isExpanded ? styles['admin-panel__collapse--expanded'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-hidden={!isExpanded}\n >\n <div className={styles['admin-panel__collapse-inner']}>\n <div className={styles['admin-panel__body']}>{children}</div>\n </div>\n </div>\n ) : (\n <div className={styles['admin-panel__body']}>{children}</div>\n )}\n </section>\n );\n}\n"],"names":["AdminPanel","title","subtitle","headerActions","children","className","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","expandedStateProp","defaultExpandedState","onExpandedStateChange","titleId","useId","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpandControlled","isExpanded","setExpandedState","next","toggleExpanded","showHeaderDivider","jsxs","styles","jsx","AdminPanelHeader"],"mappings":";;;;~~AAuCA~~,SAAwBA,EAAW;AAAA,EACjC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,qBAAAC,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAeC;AAAA,EACf,sBAAAC,IAAuB;AAAA,EACvB,uBAAAC;AACF,GAAoB;AAClB,QAAMC,IAAUC,EAAA,GAEV,CAACC,GAAsBC,CAAuB,IAClDC,EAAkCN,CAAoB,GAElDO,IAAqBT,KAAcC,MAAsB,QAOzDS,KANkDV,IAEpDS,IACER,IACAK,IAHF,gBAKyC,YAEvCK,IAAmB,CAACC,MAAkC;AAC1D,IAAKZ,MACAS,KACHF,EAAwBK,CAAI,GAE9BT,KAAA,QAAAA,EAAwBS;AAAA,EAC1B,GAEMC,IAAiB,MAAM;AAC3B,IAAAF,EAAiBD,IAAa,cAAc,UAAU;AAAA,EACxD,GAEMI,IAAoB,CAACd,KAAcU;AAEzC,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,aAAa,GAAGhC,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA;AAAA,MACxD,mBAAiBoB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAd;AAAA,YACA,OAAAxB;AAAA,YACA,UAAAC;AAAA,YACA,eAAAC;AAAA,YACA,UAAAG;AAAA,YACA,aAAAC;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,qBAAAC;AAAA,YACA,iBAAAC;AAAA,YACA,YAAAC;AAAA,YACA,aAAAC;AAAA,YACA,eAAAC;AAAA,YACA,YAAAC;AAAA,YACA,aAAAC;AAAA,YACA,eAAAC;AAAA,YACA,sBAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,YAAAC;AAAA,YACA,YAAAU;AAAA,YACA,gBAAgBG;AAAA,YAChB,aAAaC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdd,IACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTD,EAAO,uBAAuB;AAAA,cAC9BN,IAAaM,EAAO,iCAAiC,IAAI;AAAA,YAAA,EAExD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YACX,eAAa,CAACN;AAAA,YAEd,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,mBAAmB,GAAI,UAAAjC,GAAS,EAAA,CACzD;AAAA,UAAA;AAAA,QAAA,IAGF,gBAAAkC,EAAC,OAAA,EAAI,WAAWD,EAAO,mBAAmB,GAAI,UAAAjC,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI/D;"}
1	+ {"version":3,"file":"AdminPanel.js","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"sourcesContent":["import { useId, useState, type ChangeEvent, type ReactNode } from 'react';\nimport AdminPanelHeader, {\n type AdminPanelExpandedState,\n} from '@/components/admin-panel-header/AdminPanelHeader';\nimport styles from './AdminPanel.module.scss';\n\nexport type { AdminPanelExpandedState };\n\nexport interface AdminPanelProps {\n title: ReactNode;\n subtitle?: ReactNode;\n children?: ReactNode;\n className?: string;\n headerActions?: ReactNode;\n iconLeft?: boolean;\n /** Icon forwarded to `AdminPanelHeader`'s 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} size=\"20\" />`. /\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n expandedState?: AdminPanelExpandedState;\n defaultExpandedState?: AdminPanelExpandedState;\n onExpandedStateChange?: (state: AdminPanelExpandedState) => void;\n}\n\n/\n System Console admin settings panel: `AdminPanelHeader` plus a body slot\n * for grouped fields. Expand/collapse state is owned here and passed to the header.\n */\nexport default function AdminPanel({\n title,\n subtitle,\n headerActions,\n children,\n className = '',\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 expandedState: expandedStateProp,\n defaultExpandedState = 'collapsed',\n onExpandedStateChange,\n}: AdminPanelProps) {\n const titleId = useId();\n\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState<AdminPanelExpandedState>(defaultExpandedState);\n\n const isExpandControlled = expandable && expandedStateProp !== undefined;\n const resolvedExpandedState: AdminPanelExpandedState = !expandable\n ? 'expanded'\n : isExpandControlled\n ? expandedStateProp!\n : uncontrolledExpanded;\n\n const isExpanded = resolvedExpandedState === 'expanded';\n\n const setExpandedState = (next: AdminPanelExpandedState) => {\n if (!expandable) return;\n if (!isExpandControlled) {\n setUncontrolledExpanded(next);\n }\n onExpandedStateChange?.(next);\n };\n\n const toggleExpanded = () => {\n setExpandedState(isExpanded ? 'collapsed' : 'expanded');\n };\n\n const showHeaderDivider = !expandable \|\| isExpanded;\n\n return (\n <section\n className={[styles['admin-panel'], className].join(' ').trim()}\n aria-labelledby={titleId}\n >\n <AdminPanelHeader\n titleId={titleId}\n title={title}\n subtitle={subtitle}\n headerActions={headerActions}\n iconLeft={iconLeft}\n leadingIcon={leadingIcon}\n showBeta={showBeta}\n betaLabel={betaLabel}\n showEnterpriseLabel={showEnterpriseLabel}\n enterpriseLabel={enterpriseLabel}\n showButton={showButton}\n buttonLabel={buttonLabel}\n onButtonClick={onButtonClick}\n showSwitch={showSwitch}\n switchLabel={switchLabel}\n switchChecked={switchChecked}\n defaultSwitchChecked={defaultSwitchChecked}\n onSwitchChange={onSwitchChange}\n switchDisabled={switchDisabled}\n expandable={expandable}\n isExpanded={isExpanded}\n onToggleExpand={toggleExpanded}\n showDivider={showHeaderDivider}\n />\n {expandable ? (\n <div\n className={[\n styles['admin-panel__collapse'],\n isExpanded ? styles['admin-panel__collapse--expanded'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-hidden={!isExpanded}\n >\n <div className={styles['admin-panel__collapse-inner']}>\n <div className={styles['admin-panel__body']}>{children}</div>\n </div>\n </div>\n ) : (\n <div className={styles['admin-panel__body']}>{children}</div>\n )}\n </section>\n );\n}\n"],"names":["AdminPanel","title","subtitle","headerActions","children","className","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","expandedStateProp","defaultExpandedState","onExpandedStateChange","titleId","useId","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpandControlled","isExpanded","setExpandedState","next","toggleExpanded","showHeaderDivider","jsxs","styles","jsx","AdminPanelHeader"],"mappings":";;;;AAwCA,SAAwBA,EAAW;AAAA,EACjC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,qBAAAC,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAeC;AAAA,EACf,sBAAAC,IAAuB;AAAA,EACvB,uBAAAC;AACF,GAAoB;AAClB,QAAMC,IAAUC,EAAA,GAEV,CAACC,GAAsBC,CAAuB,IAClDC,EAAkCN,CAAoB,GAElDO,IAAqBT,KAAcC,MAAsB,QAOzDS,KANkDV,IAEpDS,IACER,IACAK,IAHF,gBAKyC,YAEvCK,IAAmB,CAACC,MAAkC;AAC1D,IAAKZ,MACAS,KACHF,EAAwBK,CAAI,GAE9BT,KAAA,QAAAA,EAAwBS;AAAA,EAC1B,GAEMC,IAAiB,MAAM;AAC3B,IAAAF,EAAiBD,IAAa,cAAc,UAAU;AAAA,EACxD,GAEMI,IAAoB,CAACd,KAAcU;AAEzC,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,aAAa,GAAGhC,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA;AAAA,MACxD,mBAAiBoB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAd;AAAA,YACA,OAAAxB;AAAA,YACA,UAAAC;AAAA,YACA,eAAAC;AAAA,YACA,UAAAG;AAAA,YACA,aAAAC;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,qBAAAC;AAAA,YACA,iBAAAC;AAAA,YACA,YAAAC;AAAA,YACA,aAAAC;AAAA,YACA,eAAAC;AAAA,YACA,YAAAC;AAAA,YACA,aAAAC;AAAA,YACA,eAAAC;AAAA,YACA,sBAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,YAAAC;AAAA,YACA,YAAAU;AAAA,YACA,gBAAgBG;AAAA,YAChB,aAAaC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdd,IACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTD,EAAO,uBAAuB;AAAA,cAC9BN,IAAaM,EAAO,iCAAiC,IAAI;AAAA,YAAA,EAExD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YACX,eAAa,CAACN;AAAA,YAEd,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,mBAAmB,GAAI,UAAAjC,GAAS,EAAA,CACzD;AAAA,UAAA;AAAA,QAAA,IAGF,gBAAAkC,EAAC,OAAA,EAAI,WAAWD,EAAO,mBAAmB,GAAI,UAAAjC,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI/D;"}

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

	@@ -1 +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 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 leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n isExpanded?: boolean;\n onToggleExpand?: () => void;\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 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\n className={styles['admin-panel-header__leading']}\n aria-hidden\n >\n {leadingIcon ?? defaultLeading}\n </div>\n ) : null}\n <div className={styles['admin-panel-header__title-stack']}>\n <div className={styles['admin-panel-header__title-row']}>\n <h2\n id={titleId}\n className={styles['admin-panel-header__title']}\n >\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 ? 'Collapse section' : 'Expand section'}\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","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"~~gmBAmDA~~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"}
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 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 />} size=\"20\" />` — the pill does not resize raw SVG children. /\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n isExpanded?: boolean;\n onToggleExpand?: () => void;\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 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\n className={styles['admin-panel-header__leading']}\n aria-hidden\n >\n {leadingIcon ?? defaultLeading}\n </div>\n ) : null}\n <div className={styles['admin-panel-header__title-stack']}>\n <div className={styles['admin-panel-header__title-row']}>\n <h2\n id={titleId}\n className={styles['admin-panel-header__title']}\n >\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 ? 'Collapse section' : 'Expand section'}\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","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

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

@@ -9,6 +9,7 @@ export interface AdminPanelHeaderProps {
     /** Trailing accessory actions rendered after Switch / Primary button and before expand. */
     headerActions?: ReactNode;
     iconLeft?: boolean;
+    /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} size="20" />` — the pill does not resize raw SVG children. */
     leadingIcon?: ReactNode;
     showBeta?: boolean;
     betaLabel?: string;

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

	@@ -1 +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;AAYzD,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,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClF,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,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,WAAkB,EAClB,SAAc,GACf,EAAE,qBAAqB,2CAqGvB"}
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;AAYzD,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,oIAAoI;IACpI,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClF,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,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,WAAkB,EAClB,SAAc,GACf,EAAE,qBAAqB,2CAqGvB"}

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

	@@ -1 +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 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 leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n isExpanded?: boolean;\n onToggleExpand?: () => void;\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 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\n className={styles['admin-panel-header__leading']}\n aria-hidden\n >\n {leadingIcon ?? defaultLeading}\n </div>\n ) : null}\n <div className={styles['admin-panel-header__title-stack']}>\n <div className={styles['admin-panel-header__title-row']}>\n <h2\n id={titleId}\n className={styles['admin-panel-header__title']}\n >\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 ? 'Collapse section' : 'Expand section'}\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","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":";;;;;;;;;;;~~AAmDA~~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"}
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 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 />} size=\"20\" />` — the pill does not resize raw SVG children. /\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n betaLabel?: string;\n showEnterpriseLabel?: boolean;\n enterpriseLabel?: string;\n showButton?: boolean;\n buttonLabel?: string;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n isExpanded?: boolean;\n onToggleExpand?: () => void;\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 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\n className={styles['admin-panel-header__leading']}\n aria-hidden\n >\n {leadingIcon ?? defaultLeading}\n </div>\n ) : null}\n <div className={styles['admin-panel-header__title-stack']}>\n <div className={styles['admin-panel-header__title-row']}>\n <h2\n id={titleId}\n className={styles['admin-panel-header__title']}\n >\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 ? 'Collapse section' : 'Expand section'}\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","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/dist/components/button/Button.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../icon/Icon.cjs"),o=require("../../utils/string.cjs"),e=require("./Button.module.scss.cjs"),C={"x-small":"12",small:"16",medium:"16",large:"20"};function N({appearance:r="default",className:i="",destructive:d=!1,emphasis:c="primary",children:b,leadingIcon:s,size:l="medium",trailingIcon:a,disabled:f,type:m="button",...p}){const u=C[l],_=e.default[`button--emphasis-${o.toKebab(c)}`],j=e.default[`button--size-${o.toKebab(l)}`],x=r==="inverted"?e.default["button--appearance-inverted"]:"",h=d?e.default["button--destructive"]:"",v=[e.default.button,_,j,x,h,i].filter(Boolean).join(" ");return t.jsxs("button",{className:v,type:m,disabled:f,...p,children:[s!=null?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:typeof s=="boolean"?t.jsx(n.default,{size:u}):s}):null,t.jsx("span",{className:e.default.button__label,children:b}),a!=null?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:typeof a=="boolean"?t.jsx(n.default,{size:u}):a}):null]})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("react"),z=require("../spinner/Spinner.cjs"),d=require("../../utils/string.cjs"),e=require("./Button.module.scss.cjs"),E={"x-small":"12",small:"12",medium:"16",large:"20"};function N({appearance:a="default",className:m="",destructive:b=!1,emphasis:u="primary",children:f,leadingIcon:o,loading:s=!1,size:i="medium",trailingIcon:r,disabled:_,type:p="button",...j}){const l=E[i],v=e.default[`button--emphasis-${d.toKebab(u)}`],h=e.default[`button--size-${d.toKebab(i)}`],x=a==="inverted"?e.default["button--appearance-inverted"]:"",C=b?e.default["button--destructive"]:"",S=[e.default.button,v,h,x,C,m].filter(Boolean).join(" "),c=u!=="link",q=s||c&&n.isValidElement(o);return t.jsxs("button",{className:S,type:p,disabled:_||s,...j,children:[q?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:s?t.jsx(z.default,{size:l,inverted:a==="inverted"}):n.cloneElement(o,{size:l})}):null,t.jsx("span",{className:e.default.button__label,children:f}),c&&!s&&n.isValidElement(r)?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:n.cloneElement(r,{size:l})}):null]})}exports.default=N;
 //# sourceMappingURL=Button.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import ~~type~~ { ButtonHTMLAttributes, ReactNode } from 'react';\nimport ~~Icon~~ from '@/components/icon/Icon';\nimport type { ~~IconSize~~ } from '@/components/~~icon~~/~~Icon~~';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n \| 'primary'\n \| 'secondary'\n \| 'tertiary'\n \| 'quaternary';\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: React.ReactNode;\n /* When true, uses destructive (danger) styling. /\n destructive?: boolean;\n /* Visual emphasis. Default: primary. /\n emphasis?: ButtonEmphasis;\n /* Leading icon ~~(e.g.~~ <Icon glyph={<~~SomeIcon~~ />} ~~size=\"16\"~~ ~~/>).~~ ~~Icon~~ ~~size~~ ~~should~~ ~~match button~~ size. /\n leadingIcon?: ReactNode;\n /* Size variant. Default: medium. /\n size?: ButtonSize;\n /* Trailing icon. /\n trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n 'x-small': '12',\n small: '16',\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 */\nexport default function Button({\n appearance = 'default',\n className = '',\n destructive = false,\n emphasis = 'primary',\n children,\n leadingIcon,\n size = 'medium',\n trailingIcon,\n disabled,\n type = 'button',\n ...rest\n}: ButtonProps) {\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 return (\n <button className={rootClass} type={type} disabled={disabled} {...rest}>\n {~~leadingIcon~~ ~~!= null~~ ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {~~typeof~~ ~~leadingIcon~~ === '~~boolean~~' ? (\n <~~Icon~~ size~~={iconSize~~} ~~/>\n )~~ : ~~(\n leadingIcon\n~~ )}\n </span>\n ) : null}\n <span className={styles['button__label']}>{children}</span>\n {~~trailingIcon~~ != ~~null~~ ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {~~typeof~~ trailingIcon ~~===~~ ~~'boolean'~~ ? ~~(\n <Icon~~ ~~size={iconSize~~} ~~/>\n )~~ : ~~(\n trailingIcon\n~~ )}\n </span>\n ) : null}\n </button>\n );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","jsx","~~Icon~~"],"mappings":"~~yPAmCMA~~,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOA,SAAwBC,EAAO,CAC7B,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,SACP,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAgB,CACd,MAAMC,~~EAAWb~~,~~EAAcQ~~,CAAI,EAC7BM,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,~~QAAQX~~,CAAQ,CAAC,EAAE,~~EAC9DY~~,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EAClDU,~~EACJhB~~,IAAe,~~WAAaa~~,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,~~EAAmBf~~,~~EAAcW~~,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,~~EACAhB~~,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,~~EAEX~~,~~cACG~~,~~SAAA~~,~~CAAO~~,~~UAAWiB~~,EAAW,KAAAT,EAAY,~~SAAAD~~,~~EAAqB~~,~~GAAGE~~,~~EAC/D~~,SAAA,~~CAAAL~~,~~GAAe~~,~~KACdc,~~EAAAA,IAAC,OAAA,CAAK,~~UAAWN~~,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,~~SAAA~~,~~OAAOR~~,~~GAAgB~~,~~UACtBc~~,EAAAA,~~IAACC~~,UAAA,~~CAAK~~,~~KAAMT~~,~~EAAU~~,~~EAEtBN~~,~~EAEJ~~,EACE,WACH,OAAA,CAAK,~~UAAWQ~~,EAAAA,QAAO,cAAmB,~~SAAAT~~,EAAS,~~EACnDG~~,~~GAAgB~~,~~KACfY~~,EAAAA,IAAC,~~QAAK~~,~~UAAWN~~,UAAO,mBAAmB,EAAG,cAAW,GACtD,~~SAAA~~,~~OAAON~~,~~GAAiB~~,~~UACvBY~~,~~EAAAA~~,~~IAACC~~,~~EAAAA~~,~~QAAA,CAAK,KAAMT,~~CAAA,~~CAAU~~,~~EAEtBJ,EAEJ,~~EACE,IAAA,EACN,CAEJ"}
1	+ {"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport type { IconSize } 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: React.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 injects the correct size. /\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 injects the correct size. /\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 */\nexport default function Button({\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}: ButtonProps) {\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 = loading \|\| (supportsIcons && React.isValidElement(leadingIcon));\n\n return (\n <button className={rootClass} type={type} disabled={disabled \|\| loading} {...rest}>\n {showLeadingSlot ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {loading\n ? <Spinner size={iconSize as SpinnerSize} inverted={appearance === 'inverted'} />\n : React.cloneElement(leadingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n <span className={styles['button__label']}>{children}</span>\n {supportsIcons && !loading && React.isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {React.cloneElement(trailingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n </button>\n );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","React","jsxs","jsx","Spinner"],"mappings":"kRAuCMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOA,SAAwBC,EAAO,CAC7B,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,EAAgB,CACd,MAAMC,EAAWd,EAAcS,CAAI,EAC7BM,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQZ,CAAQ,CAAC,EAAE,EAC9Da,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EAClDU,EACJjB,IAAe,WAAac,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,EAAmBhB,EAAcY,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,EACAjB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELmB,EAAgBjB,IAAa,OAC7BkB,EAAkBf,GAAYc,GAAiBE,EAAM,eAAejB,CAAW,EAErF,OACEkB,OAAC,UAAO,UAAWJ,EAAW,KAAAT,EAAY,SAAUD,GAAYH,EAAU,GAAGK,EAC1E,SAAA,CAAAU,EACCG,EAAAA,IAAC,OAAA,CAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAR,EACGkB,EAAAA,IAACC,EAAAA,QAAA,CAAQ,KAAMb,EAAyB,SAAUZ,IAAe,UAAA,CAAY,EAC7EsB,EAAM,aAAajB,EAAsD,CAAE,KAAMO,CAAA,CAAU,CAAA,CACjG,EACE,WACH,OAAA,CAAK,UAAWE,EAAAA,QAAO,cAAmB,SAAAV,EAAS,EACnDgB,GAAiB,CAACd,GAAWgB,EAAM,eAAed,CAAY,EAC7DgB,EAAAA,IAAC,OAAA,CAAK,UAAWV,UAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAQ,EAAM,aAAad,EAAuD,CAAE,KAAMI,EAAU,CAAA,CAC/F,EACE,IAAA,EACN,CAEJ"}

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

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+import { default as React, ButtonHTMLAttributes, ReactNode } 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> {
@@ -13,11 +13,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     destructive?: boolean;
     /** Visual emphasis. Default: primary. */
     emphasis?: ButtonEmphasis;
-    /** Leading icon (e.g. <Icon glyph={<SomeIcon />} size="16" />). Icon size should match button size. */
+    /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */
     leadingIcon?: ReactNode;
+    /** When true, shows a Spinner in the leading slot and disables the button. */
+    loading?: boolean;
     /** Size variant. Default: medium. */
     size?: ButtonSize;
-    /** Trailing icon. */
+    /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */
     trailingIcon?: ReactNode;
 }
 /**
@@ -25,5 +27,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * 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.
  */
-export default function Button({ appearance, className, destructive, emphasis, children, leadingIcon, size, trailingIcon, disabled, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function Button({ appearance, className, destructive, emphasis, children, leadingIcon, loading, size, trailingIcon, disabled, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAM7D~~,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,CAAC;~~AAEjB~~,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,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,~~uGAAuG~~;~~IACvG~~,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,~~qBAAqB~~;~~IACrB~~,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,UAAsB,EACtB,SAAc,EACd,WAAmB,EACnB,QAAoB,EACpB,QAAQ,EACR,WAAW,EACX,IAAe,EACf,YAAY,EACZ,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,WAAW,~~2CA0Cb~~"}
1	+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOzE,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,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,UAAsB,EACtB,SAAc,EACd,WAAmB,EACnB,QAAoB,EACpB,QAAQ,EACR,WAAW,EACX,OAAe,EACf,IAAe,EACf,YAAY,EACZ,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,WAAW,2CAuCb"}

package/dist/components/button/Button.js CHANGED Viewed

@@ -1,41 +1,43 @@
-import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import l from "../icon/Icon.js";
-import { toKebab as r } from "../../utils/string.js";
+import { jsxs as S, jsx as s } from "react/jsx-runtime";
+import n from "react";
+import j from "../spinner/Spinner.js";
+import { toKebab as u } from "../../utils/string.js";
 import t from "./Button.module.scss.js";
 const y = {
   "x-small": "12",
-  small: "16",
+  small: "12",
   medium: "16",
   large: "20"
 };
-function $({
-  appearance: u = "default",
-  className: i = "",
-  destructive: m = !1,
-  emphasis: c = "primary",
-  children: p,
-  leadingIcon: e,
-  size: a = "medium",
-  trailingIcon: o,
-  disabled: b,
-  type: d = "button",
-  ...f
+function A({
+  appearance: l = "default",
+  className: d = "",
+  destructive: p = !1,
+  emphasis: a = "primary",
+  children: b,
+  leadingIcon: i,
+  loading: e = !1,
+  size: r = "medium",
+  trailingIcon: m,
+  disabled: f,
+  type: _ = "button",
+  ...h
 }) {
-  const n = y[a], _ = t[`button--emphasis-${r(c)}`], h = t[`button--size-${r(a)}`], C = u === "inverted" ? t["button--appearance-inverted"] : "", N = m ? t["button--destructive"] : "", v = [
+  const o = y[r], v = t[`button--emphasis-${u(a)}`], C = t[`button--size-${u(r)}`], z = l === "inverted" ? t["button--appearance-inverted"] : "", E = p ? t["button--destructive"] : "", N = [
     t.button,
-    _,
-    h,
+    v,
     C,
-    N,
-    i
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ x("button", { className: v, type: d, disabled: b, ...f, children: [
-    e != null ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: typeof e == "boolean" ? /* @__PURE__ */ s(l, { size: n }) : e }) : null,
-    /* @__PURE__ */ s("span", { className: t.button__label, children: p }),
-    o != null ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: typeof o == "boolean" ? /* @__PURE__ */ s(l, { size: n }) : o }) : null
+    z,
+    E,
+    d
+  ].filter(Boolean).join(" "), c = a !== "link", x = e || c && n.isValidElement(i);
+  return /* @__PURE__ */ S("button", { className: N, type: _, disabled: f || e, ...h, children: [
+    x ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: e ? /* @__PURE__ */ s(j, { size: o, inverted: l === "inverted" }) : n.cloneElement(i, { size: o }) }) : null,
+    /* @__PURE__ */ s("span", { className: t.button__label, children: b }),
+    c && !e && n.isValidElement(m) ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: n.cloneElement(m, { size: o }) }) : null
   ] });
 }
 export {
-  $ as default
+  A as default
 };
 //# sourceMappingURL=Button.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import ~~type~~ { ButtonHTMLAttributes, ReactNode } from 'react';\nimport ~~Icon~~ from '@/components/icon/Icon';\nimport type { ~~IconSize~~ } from '@/components/~~icon~~/~~Icon~~';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n \| 'primary'\n \| 'secondary'\n \| 'tertiary'\n \| 'quaternary';\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: React.ReactNode;\n /* When true, uses destructive (danger) styling. /\n destructive?: boolean;\n /* Visual emphasis. Default: primary. /\n emphasis?: ButtonEmphasis;\n /* Leading icon ~~(e.g.~~ <Icon glyph={<~~SomeIcon~~ />} ~~size=\"16\"~~ ~~/>).~~ ~~Icon~~ ~~size~~ ~~should~~ ~~match button~~ size. /\n leadingIcon?: ReactNode;\n /* Size variant. Default: medium. /\n size?: ButtonSize;\n /* Trailing icon. /\n trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n 'x-small': '12',\n small: '16',\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 */\nexport default function Button({\n appearance = 'default',\n className = '',\n destructive = false,\n emphasis = 'primary',\n children,\n leadingIcon,\n size = 'medium',\n trailingIcon,\n disabled,\n type = 'button',\n ...rest\n}: ButtonProps) {\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 return (\n <button className={rootClass} type={type} disabled={disabled} {...rest}>\n {~~leadingIcon~~ ~~!= null~~ ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {~~typeof~~ ~~leadingIcon~~ === '~~boolean~~' ? (\n <~~Icon~~ size~~={iconSize~~} ~~/>\n )~~ : ~~(\n leadingIcon\n~~ )}\n </span>\n ) : null}\n <span className={styles['button__label']}>{children}</span>\n {~~trailingIcon~~ != ~~null~~ ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {~~typeof~~ trailingIcon ~~===~~ ~~'boolean'~~ ? ~~(\n <Icon~~ ~~size={iconSize~~} ~~/>\n )~~ : ~~(\n trailingIcon\n~~ )}\n </span>\n ) : null}\n </button>\n );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","jsx","~~Icon~~"],"mappings":"~~;;;;AAmCA~~,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAOA,SAAwBC,EAAO;AAAA,EAC7B,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,~~IAAWb~~,~~EAAcQ~~,CAAI,GAC7BM,IAAgBC,EAAO,oBAAoBC,~~EAAQX~~,CAAQ,CAAC,EAAE,~~GAC9DY~~,IAAYF,EAAO,gBAAgBC,EAAQR,CAAI,CAAC,EAAE,GAClDU,~~IACJhB~~,MAAe,~~aAAaa~~,EAAO,6BAA6B,IAAI,IAChEI,~~IAAmBf~~,~~IAAcW~~,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,~~IACAhB~~;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;~~AAEX~~,~~2BACG~~,~~UAAA~~,~~EAAO~~,~~WAAWiB~~,GAAW,MAAAT,GAAY,~~UAAAD~~,~~GAAqB~~,~~GAAGE~~,~~GAC/D~~,UAAA;AAAA,~~IAAAL~~,~~KAAe~~,~~OACd~~,~~gBAAAc,~~EAAC,QAAA,EAAK,~~WAAWN~~,EAAO,mBAAmB,GAAG,eAAW,IACtD,~~UAAA~~,~~OAAOR~~,~~KAAgB~~,~~YACtB,gBAAAc,~~EAACC,GAAA,~~EAAK~~,~~MAAMT~~,~~GAAU~~,~~IAEtBN~~,~~GAEJ~~,IACE;AAAA,sBACH,QAAA,EAAK,~~WAAWQ~~,EAAO,eAAmB,~~UAAAT~~,GAAS;AAAA,~~IACnDG~~,~~KAAgB~~,~~OACf~~,~~gBAAAY~~,EAAC,~~UAAK~~,~~WAAWN~~,EAAO,mBAAmB,GAAG,eAAW,IACtD,~~UAAA~~,~~OAAON~~,~~KAAiB~~,~~YACvB~~,~~gBAAAY~~,~~EAACC~~,~~GAAA~~,~~EAAK,MAAMT,~~EAAA,~~CAAU~~,~~IAEtBJ,GAEJ,~~IACE;AAAA,EAAA,GACN;AAEJ;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport type { IconSize } 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: React.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 injects the correct size. /\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 injects the correct size. /\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 */\nexport default function Button({\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}: ButtonProps) {\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 = loading \|\| (supportsIcons && React.isValidElement(leadingIcon));\n\n return (\n <button className={rootClass} type={type} disabled={disabled \|\| loading} {...rest}>\n {showLeadingSlot ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {loading\n ? <Spinner size={iconSize as SpinnerSize} inverted={appearance === 'inverted'} />\n : React.cloneElement(leadingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n <span className={styles['button__label']}>{children}</span>\n {supportsIcons && !loading && React.isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {React.cloneElement(trailingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n </button>\n );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","React","jsxs","jsx","Spinner"],"mappings":";;;;;AAuCA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAOA,SAAwBC,EAAO;AAAA,EAC7B,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,GAAgB;AACd,QAAMC,IAAWd,EAAcS,CAAI,GAC7BM,IAAgBC,EAAO,oBAAoBC,EAAQZ,CAAQ,CAAC,EAAE,GAC9Da,IAAYF,EAAO,gBAAgBC,EAAQR,CAAI,CAAC,EAAE,GAClDU,IACJjB,MAAe,aAAac,EAAO,6BAA6B,IAAI,IAChEI,IAAmBhB,IAAcY,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAjB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELmB,IAAgBjB,MAAa,QAC7BkB,IAAkBf,KAAYc,KAAiBE,EAAM,eAAejB,CAAW;AAErF,SACE,gBAAAkB,EAAC,YAAO,WAAWJ,GAAW,MAAAT,GAAY,UAAUD,KAAYH,GAAU,GAAGK,GAC1E,UAAA;AAAA,IAAAU,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAR,IACG,gBAAAkB,EAACC,GAAA,EAAQ,MAAMb,GAAyB,UAAUZ,MAAe,WAAA,CAAY,IAC7EsB,EAAM,aAAajB,GAAsD,EAAE,MAAMO,EAAA,CAAU,EAAA,CACjG,IACE;AAAA,sBACH,QAAA,EAAK,WAAWE,EAAO,eAAmB,UAAAV,GAAS;AAAA,IACnDgB,KAAiB,CAACd,KAAWgB,EAAM,eAAed,CAAY,IAC7D,gBAAAgB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAQ,EAAM,aAAad,GAAuD,EAAE,MAAMI,GAAU,EAAA,CAC/F,IACE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/button/Button.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_button_1odpk_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;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_1odpk_2~~:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}.~~_button_1odpk_2~~:disabled{cursor:not-allowed}.~~_button__label_1odpk_23~~{line-height:1}._button__icon-~~slot_1odpk_26~~{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-~~small_1odpk_32~~{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-~~small_1odpk_32~~ .~~_button__label_1odpk_23~~{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-~~small_1odpk_39~~{padding:var(--spacing-xs) var(--spacing-l)}._button--size-~~small_1odpk_39~~ .~~_button__label_1odpk_23~~{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-~~medium_1odpk_46~~{padding:var(--spacing-s) var(--spacing-xl)}._button--size-~~medium_1odpk_46~~ .~~_button__label_1odpk_23~~{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-~~large_1odpk_53~~{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-~~large_1odpk_53~~ .~~_button__label_1odpk_23~~{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-~~primary_1odpk_60~~{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-~~primary_1odpk_60~~:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-~~primary_1odpk_60~~:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-~~primary_1odpk_60~~:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-~~secondary_1odpk_74~~{--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_1odpk_74~~:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-~~secondary_1odpk_74~~:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-~~secondary_1odpk_74~~: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_1odpk_90~~{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-~~tertiary_1odpk_90~~:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-~~tertiary_1odpk_90~~:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-~~tertiary_1odpk_90~~:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-~~quaternary_1odpk_104~~{background-color:transparent;color:var(--link-color)}._button--emphasis-~~quaternary_1odpk_104~~:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-~~quaternary_1odpk_104~~:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-~~quaternary_1odpk_104~~:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--~~destructive_1odpk_117~~{--focus-ring-color: var(--error-text, var(--color-danger))}._button--~~destructive_1odpk_117~~._button--emphasis-~~primary_1odpk_60~~{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--~~destructive_1odpk_117~~._button--emphasis-~~primary_1odpk_60~~:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--~~destructive_1odpk_117~~._button--emphasis-~~primary_1odpk_60~~:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--~~destructive_1odpk_117~~._button--emphasis-~~primary_1odpk_60~~:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--~~destructive_1odpk_117~~._button--emphasis-~~secondary_1odpk_74~~{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--~~destructive_1odpk_117~~._button--emphasis-~~secondary_1odpk_74~~:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--~~destructive_1odpk_117~~._button--emphasis-~~secondary_1odpk_74~~:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--~~destructive_1odpk_117~~._button--emphasis-~~secondary_1odpk_74~~: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_1odpk_117~~._button--emphasis-~~tertiary_1odpk_90~~{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--~~destructive_1odpk_117~~._button--emphasis-~~tertiary_1odpk_90~~:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--~~destructive_1odpk_117~~._button--emphasis-~~tertiary_1odpk_90~~:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--~~destructive_1odpk_117~~._button--emphasis-~~tertiary_1odpk_90~~:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--~~destructive_1odpk_117~~._button--emphasis-~~quaternary_1odpk_104~~{color:var(--error-text, var(--color-danger))}._button--~~destructive_1odpk_117~~._button--emphasis-~~quaternary_1odpk_104~~:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--~~destructive_1odpk_117~~._button--emphasis-~~quaternary_1odpk_104~~:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--~~destructive_1odpk_117~~._button--emphasis-~~quaternary_1odpk_104~~:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~primary_1odpk_60~~{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~primary_1odpk_60~~:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~primary_1odpk_60~~:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~primary_1odpk_60~~:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~secondary_1odpk_74~~{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~secondary_1odpk_74~~:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~secondary_1odpk_74~~:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~secondary_1odpk_74~~: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_1odpk_174~~._button--emphasis-~~tertiary_1odpk_90~~{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~tertiary_1odpk_90~~:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~tertiary_1odpk_90~~:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~tertiary_1odpk_90~~:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~quaternary_1odpk_104~~{color:var(--sidebar-text)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~quaternary_1odpk_104~~:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~quaternary_1odpk_104~~:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-~~inverted_1odpk_174~~._button--emphasis-~~quaternary_1odpk_104~~:disabled{color:rgba(var(--sidebar-text-rgb),.32)}
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)}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.css');const t="_button_1odpk_2",o="_button__label_1odpk_23",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_1odpk_26","button--size-x-small":"_button--size-x-small_1odpk_32","button--size-small":"_button--size-small_1odpk_39","button--size-medium":"_button--size-medium_1odpk_46","button--size-large":"_button--size-large_1odpk_53","button--emphasis-primary":"_button--emphasis-primary_1odpk_60","button--emphasis-secondary":"_button--emphasis-secondary_1odpk_74","button--emphasis-tertiary":"_button--emphasis-tertiary_1odpk_90","button--emphasis-quaternary":"_button--emphasis-quaternary_1odpk_104","button--destructive":"_button--destructive_1odpk_117","button--appearance-inverted":"_button--appearance-inverted_1odpk_174"};exports.button=t;exports.button__label=o;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.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;
 //# sourceMappingURL=Button.module.scss.cjs.map

package/dist/components/button/Button.module.scss.js CHANGED Viewed

@@ -1,17 +1,18 @@
-import './Button.module.css';const t = "_button_1odpk_2", o = "_button__label_1odpk_23", _ = {
+import './Button.module.css';const t = "_button_doayp_2", o = "_button__label_doayp_24", _ = {
   button: t,
   button__label: o,
-  "button__icon-slot": "_button__icon-slot_1odpk_26",
-  "button--size-x-small": "_button--size-x-small_1odpk_32",
-  "button--size-small": "_button--size-small_1odpk_39",
-  "button--size-medium": "_button--size-medium_1odpk_46",
-  "button--size-large": "_button--size-large_1odpk_53",
-  "button--emphasis-primary": "_button--emphasis-primary_1odpk_60",
-  "button--emphasis-secondary": "_button--emphasis-secondary_1odpk_74",
-  "button--emphasis-tertiary": "_button--emphasis-tertiary_1odpk_90",
-  "button--emphasis-quaternary": "_button--emphasis-quaternary_1odpk_104",
-  "button--destructive": "_button--destructive_1odpk_117",
-  "button--appearance-inverted": "_button--appearance-inverted_1odpk_174"
+  "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"
 };
 export {
   t as button,

package/dist/components/button/Button.module.scss.js.map CHANGED Viewed

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

package/dist/components/card-button/CardButton.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),___=require("@mattermost/compass-icons/components/check-circle.js"),_=___?.default??___,h=require("../icon/Icon.cjs"),t=require("./CardButton.module.scss.cjs");function b({icon:d,title:u,description:s,selected:a=!1,className:c="",type:o="button",role:n,disabled:l,...i}){const r=n==="radio",f=[t.default["card-button"],a&&t.default["card-button--selected"],c].filter(Boolean).join(" ");return e.jsxs("button",{type:o,role:n,disabled:l,className:f,"aria-checked":r?a:void 0,"aria-pressed":r?void 0:a,...i,children:[e.jsx("span",{className:t.default["card-button__icon"],"aria-hidden":!0,children:d}),e.jsxs("span",{className:t.default["card-button__text"],children:[e.jsx("span",{className:t.default["card-button__title"],children:u}),s!=null&&e.jsx("span",{className:t.default["card-button__description"],children:s})]}),e.jsx("span",{className:t.default["card-button__check"],"aria-hidden":!0,children:e.jsx(h.default,{glyph:e.jsx(_,{}),size:"20"})})]})}exports.default=b;
2	+ //# sourceMappingURL=CardButton.cjs.map

package/dist/components/card-button/CardButton.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CardButton.cjs","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps\n extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {\n /** Leading icon. Pass `<Icon glyph={<SomeIcon />} size=\"24\" />` — the slot does not resize raw SVG children. */\n icon: ReactNode;\n /** Primary label. */\n title: ReactNode;\n /** Secondary line under the title. */\n description?: ReactNode;\n /** Selected / checked appearance with trailing check. Default: false. */\n selected?: boolean;\n className?: string;\n}\n\n/**\n * Card Buttons present a mutually exclusive (or single) choice as a compact\n * card: leading icon, title, optional description, and a check when selected.\n * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,\n * access mode, etc.).\n */\nexport default function CardButton({\n icon,\n title,\n description,\n selected = false,\n className = '',\n type = 'button',\n role,\n disabled,\n ...rest\n}: CardButtonProps) {\n const isRadio = role === 'radio';\n const rootClass = [\n styles['card-button'],\n selected && styles['card-button--selected'],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n type={type}\n role={role}\n disabled={disabled}\n className={rootClass}\n aria-checked={isRadio ? selected : undefined}\n aria-pressed={!isRadio ? selected : undefined}\n {...rest}\n >\n \n {icon}\n \n \n {title}\n {description != null && (\n \n {description}\n \n )}\n \n \n <Icon glyph={<CheckCircleIcon />} size=\"20\" />\n \n </button>\n );\n}\n"],"names":["CardButton","icon","title","description","selected","className","type","role","disabled","rest","isRadio","rootClass","styles","jsxs","jsx","Icon","CheckCircleIcon"],"mappings":"wRAwBA,SAAwBA,EAAW,CACjC,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,KAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAUH,IAAS,QACnBI,EAAY,CAChBC,EAAAA,QAAO,aAAa,EACpBR,GAAYQ,EAAAA,QAAO,uBAAuB,EAC1CP,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,SAAA,CACC,KAAAP,EACA,KAAAC,EACA,SAAAC,EACA,UAAWG,EACX,eAAcD,EAAUN,EAAW,OACnC,eAAeM,EAAqB,OAAXN,EACxB,GAAGK,EAEJ,SAAA,CAAAK,EAAAA,IAAC,QAAK,UAAWF,UAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAX,EACH,EACAY,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,mBAAmB,EACzC,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oBAAoB,EAAI,SAAAV,EAAM,EACrDC,GAAe,MACdW,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,0BAA0B,EAC/C,SAAAT,CAAA,CACH,CAAA,EAEJ,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,oBAAoB,EAAG,cAAW,GACxD,SAAAE,EAAAA,IAACC,UAAA,CAAK,MAAOD,MAACE,EAAA,CAAA,CAAgB,EAAI,KAAK,KAAK,CAAA,CAC9C,CAAA,CAAA,CAAA,CAGN"}