@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/components/modal/Modal.js

@@ -1,25 +1,26 @@
 import { jsxs as e, jsx as l } from "react/jsx-runtime";
-import { useId as N } from "react";
+import { useId as v } from "react";
 import d from "../icon-button/IconButton.js";
 import m from "../icon/Icon.js";
-import u from "../scrollbar/Scrollbar.js";
-import __v from "@mattermost/compass-icons/components/close.js";const v=__v&&__v.default?__v.default:__v;
-import __y from "@mattermost/compass-icons/components/arrow-left.js";const y=__y&&__y.default?__y.default:__y;
+import y from "../scrollbar/Scrollbar.js";
+import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
+import __B from "@mattermost/compass-icons/components/arrow-left.js";const B=__B&&__B.default?__B.default:__B;
 import { toKebab as I } from "../../utils/string.js";
 import o from "./Modal.module.scss.js";
-function G({
-  size: s = "small",
-  title: n,
+function L({
+  size: n = "small",
+  title: s,
   subtitle: a,
-  showBackButton: c = !1,
-  onBack: t,
+  showBackButton: t = !1,
+  onBack: c,
   onClose: _,
   headerDivider: f = !0,
-  children: h,
+  bodyPadding: h = "default",
+  children: p,
   footer: i,
-  footerDivider: p = !0
+  footerDivider: u = !0
 }) {
-  const r = N(), b = o[`modal--size-${I(s)}`];
+  const r = v(), b = o[`modal--size-${I(n)}`], N = h === "menu";
   return /* @__PURE__ */ e(
     "div",
     {
@@ -37,16 +38,16 @@ function G({
             ].filter(Boolean).join(" "),
             children: [
               /* @__PURE__ */ e("div", { className: o["modal__header-inner"], children: [
-                c && /* @__PURE__ */ l(
+                t && /* @__PURE__ */ l(
                   d,
                   {
                     "aria-label": "Go back",
-                    icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(y, {}), size: "20" }),
-                    onClick: t
+                    icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(B, {}), size: "20" }),
+                    onClick: c
                   }
                 ),
                 /* @__PURE__ */ e("div", { className: o["modal__title-group"], children: [
-                  /* @__PURE__ */ l("h2", { id: r, className: o.modal__title, children: n }),
+                  /* @__PURE__ */ l("h2", { id: r, className: o.modal__title, children: s }),
                   a && /* @__PURE__ */ l("p", { className: o.modal__subtitle, children: a })
                 ] })
               ] }),
@@ -55,20 +56,29 @@ function G({
                 {
                   "aria-label": "Close",
                   className: o.modal__close,
-                  icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(v, {}), size: "20" }),
+                  icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(j, {}), size: "20" }),
                   onClick: _
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(u, { children: /* @__PURE__ */ l("div", { className: o["modal__body-inner"], children: h }) }) }),
+        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(y, { children: /* @__PURE__ */ l(
+          "div",
+          {
+            className: [
+              o["modal__body-inner"],
+              N && o["modal__body-inner--menu"]
+            ].filter(Boolean).join(" "),
+            children: p
+          }
+        ) }) }),
         i && /* @__PURE__ */ l(
           "div",
           {
             className: [
               o.modal__footer,
-              !p && o["modal__footer--no-divider"]
+              !u && o["modal__footer--no-divider"]
             ].filter(Boolean).join(" "),
             children: i
           }
@@ -78,6 +88,6 @@ function G({
   );
 }
 export {
-  G as default
+  L as default
 };
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useId } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\nexport interface ModalProps {\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Always visible. */\n  title: ReactNode;\n  /** Optional secondary line below the title. */\n  subtitle?: ReactNode;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Show divider between header and body. Figma: Divider = On. Default: true. */\n  headerDivider?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically a group of Buttons, right-aligned by default. */\n  footer?: ReactNode;\n  /** Show divider between body and footer. Figma: Divider = On. Default: true. */\n  footerDivider?: boolean;\n}\n\nexport default function Modal({\n  size = 'small',\n  title,\n  subtitle,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  children,\n  footer,\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n\n  return (\n    <div\n      className={[styles.modal, sizeClass].filter(Boolean).join(' ')}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <div\n        className={[\n          styles['modal__header'],\n          !headerDivider && styles['modal__header--no-divider'],\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={styles['modal__header-inner']}>\n          {showBackButton && (\n            <IconButton\n              aria-label=\"Go back\"\n              icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n              onClick={onBack}\n            />\n          )}\n          <div className={styles['modal__title-group']}>\n            <h2 id={titleId} className={styles['modal__title']}>\n              {title}\n            </h2>\n            {subtitle && (\n              <p className={styles['modal__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        </div>\n        <IconButton\n          aria-label=\"Close\"\n          className={styles['modal__close']}\n          icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n          onClick={onClose}\n        />\n      </div>\n\n      <div className={styles['modal__body']}>\n        <Scrollbar>\n          <div className={styles['modal__body-inner']}>{children}</div>\n        </Scrollbar>\n      </div>\n\n      {footer && (\n        <div\n          className={[\n            styles['modal__footer'],\n            !footerDivider && styles['modal__footer--no-divider'],\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","size","title","subtitle","showBackButton","onBack","onClose","headerDivider","children","footer","footerDivider","titleId","useId","sizeClass","styles","toKebab","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","CloseIcon","Scrollbar"],"mappings":";;;;;;;;;AAmCA,SAAwBA,EAAM;AAAA,EAC5B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQd,CAAI,CAAC,EAAE;AAEvD,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACF,EAAO,OAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC7D,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBF;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTF,EAAO;AAAA,cACP,CAACP,KAAiBO,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEX,UAAA;AAAA,cAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GACzC,UAAA;AAAA,gBAAAV,KACC,gBAAAa;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,cAAW;AAAA,oBACX,wBAAOC,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,oBAChD,SAASf;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,kBAAA,gBAAAG,EAAC,QAAG,IAAIN,GAAS,WAAWG,EAAO,cAChC,UAAAZ,GACH;AAAA,kBACCC,KACC,gBAAAc,EAAC,KAAA,EAAE,WAAWH,EAAO,iBAAqB,UAAAX,EAAA,CAAS;AAAA,gBAAA,EAAA,CAEvD;AAAA,cAAA,GACF;AAAA,cACA,gBAAAc;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAWJ,EAAO;AAAA,kBAClB,wBAAOK,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,kBAC5C,SAASf;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGD,OAAA,EAAI,WAAWQ,EAAO,aACrB,UAAA,gBAAAG,EAACK,GAAA,EACC,UAAA,gBAAAL,EAAC,OAAA,EAAI,WAAWH,EAAO,mBAAmB,GAAI,UAAAN,EAAA,CAAS,GACzD,GACF;AAAA,QAECC,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTH,EAAO;AAAA,cACP,CAACJ,KAAiBI,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEV,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useId } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so row labels align with the 32px header/footer margins. */\nexport type ModalBodyPadding = 'default' | 'menu';\n\nexport interface ModalProps {\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Always visible. */\n  title: ReactNode;\n  /** Optional secondary line below the title. */\n  subtitle?: ReactNode;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Show divider between header and body. Figma: Divider = On. Default: true. */\n  headerDivider?: boolean;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists (8px vertical / 16px horizontal so row labels align with\n   * the 32px header/footer margins).\n   */\n  bodyPadding?: ModalBodyPadding;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically a group of Buttons, right-aligned by default. */\n  footer?: ReactNode;\n  /** Show divider between body and footer. Figma: Divider = On. Default: true. */\n  footerDivider?: boolean;\n}\n\nexport default function Modal({\n  size = 'small',\n  title,\n  subtitle,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  bodyPadding = 'default',\n  children,\n  footer,\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const menuBody = bodyPadding === 'menu';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass].filter(Boolean).join(' ')}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <div\n        className={[\n          styles['modal__header'],\n          !headerDivider && styles['modal__header--no-divider'],\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={styles['modal__header-inner']}>\n          {showBackButton && (\n            <IconButton\n              aria-label=\"Go back\"\n              icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n              onClick={onBack}\n            />\n          )}\n          <div className={styles['modal__title-group']}>\n            <h2 id={titleId} className={styles['modal__title']}>\n              {title}\n            </h2>\n            {subtitle && (\n              <p className={styles['modal__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        </div>\n        <IconButton\n          aria-label=\"Close\"\n          className={styles['modal__close']}\n          icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n          onClick={onClose}\n        />\n      </div>\n\n      <div className={styles['modal__body']}>\n        <Scrollbar>\n          <div\n            className={[\n              styles['modal__body-inner'],\n              menuBody && styles['modal__body-inner--menu'],\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {children}\n          </div>\n        </Scrollbar>\n      </div>\n\n      {footer && (\n        <div\n          className={[\n            styles['modal__footer'],\n            !footerDivider && styles['modal__footer--no-divider'],\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","size","title","subtitle","showBackButton","onBack","onClose","headerDivider","bodyPadding","children","footer","footerDivider","titleId","useId","sizeClass","styles","toKebab","menuBody","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","CloseIcon","Scrollbar"],"mappings":";;;;;;;;;AA4CA,SAAwBA,EAAM;AAAA,EAC5B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQf,CAAI,CAAC,EAAE,GACjDgB,IAAWT,MAAgB;AAEjC,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACH,EAAO,OAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC7D,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBF;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTH,EAAO;AAAA,cACP,CAACR,KAAiBQ,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEX,UAAA;AAAA,cAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qBAAqB,GACzC,UAAA;AAAA,gBAAAX,KACC,gBAAAe;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,cAAW;AAAA,oBACX,wBAAOC,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,oBAChD,SAASjB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,gBAAAa,EAAC,OAAA,EAAI,WAAWH,EAAO,oBAAoB,GACzC,UAAA;AAAA,kBAAA,gBAAAI,EAAC,QAAG,IAAIP,GAAS,WAAWG,EAAO,cAChC,UAAAb,GACH;AAAA,kBACCC,KACC,gBAAAgB,EAAC,KAAA,EAAE,WAAWJ,EAAO,iBAAqB,UAAAZ,EAAA,CAAS;AAAA,gBAAA,EAAA,CAEvD;AAAA,cAAA,GACF;AAAA,cACA,gBAAAgB;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAWL,EAAO;AAAA,kBAClB,wBAAOM,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,kBAC5C,SAASjB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGD,OAAA,EAAI,WAAWS,EAAO,aACrB,4BAACS,GAAA,EACC,UAAA,gBAAAL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTJ,EAAO,mBAAmB;AAAA,cAC1BE,KAAYF,EAAO,yBAAyB;AAAA,YAAA,EAE3C,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEV,UAAAN;AAAA,UAAA;AAAA,QAAA,GAEL,EAAA,CACF;AAAA,QAECC,KACC,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTJ,EAAO;AAAA,cACP,CAACJ,KAAiBI,EAAO,2BAA2B;AAAA,YAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEV,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/modal/Modal.module.css

@@ -1 +1 @@
-._modal_e32ek_2{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-l);box-shadow:var(--elevation-6);display:flex;flex-direction:column;overflow:hidden}._modal--size-small_e32ek_11{width:600px}._modal--size-medium_e32ek_14{width:704px}._modal--size-large_e32ek_17{width:832px}._modal__header_e32ek_20{display:flex;align-items:flex-start;gap:var(--spacing-s);padding:var(--spacing-xxl) var(--spacing-xxxl);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);flex-shrink:0}._modal__header--no-divider_e32ek_28{border-bottom:none;padding-bottom:0}._modal__header-inner_e32ek_32{display:flex;align-items:center;gap:var(--spacing-m);flex:1;min-width:0;padding:var(--spacing-xxxxs) 0}._modal__title-group_e32ek_40{display:flex;flex-direction:column;gap:var(--spacing-xxxs);min-width:0}._modal__title_e32ek_40{font-family:var(--font-family-heading);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);line-height:var(--line-height-500);color:var(--center-channel-color);margin:0}._modal__subtitle_e32ek_54{font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.72);margin:0}._modal__close_e32ek_61{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal__body_e32ek_66{flex:1;min-height:0}._modal__body-inner_e32ek_70{padding:28px var(--spacing-xxxl)}._modal__footer_e32ek_73{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xs);padding:var(--spacing-xxl) var(--spacing-xxxl);border-top:1px solid rgba(var(--center-channel-color-rgb),.12);flex-shrink:0}._modal__footer--no-divider_e32ek_82{border-top:none;padding-top:0}
+._modal_1wwq4_2{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-l);box-shadow:var(--elevation-6);display:flex;flex-direction:column;overflow:hidden}._modal--size-small_1wwq4_11{width:600px}._modal--size-medium_1wwq4_14{width:704px}._modal--size-large_1wwq4_17{width:832px}._modal__header_1wwq4_20{display:flex;align-items:flex-start;gap:var(--spacing-s);padding:var(--spacing-xxl) var(--spacing-xxxl);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);flex-shrink:0}._modal__header--no-divider_1wwq4_28{border-bottom:none;padding-bottom:0}._modal__header-inner_1wwq4_32{display:flex;align-items:center;gap:var(--spacing-m);flex:1;min-width:0;padding:var(--spacing-xxxxs) 0}._modal__title-group_1wwq4_40{display:flex;flex-direction:column;gap:var(--spacing-xxxs);min-width:0}._modal__title_1wwq4_40{font-family:var(--font-family-heading);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);line-height:var(--line-height-500);color:var(--center-channel-color);margin:0}._modal__subtitle_1wwq4_54{font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.72);margin:0}._modal__close_1wwq4_61{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal__body_1wwq4_66{flex:1;min-height:0}._modal__body-inner_1wwq4_70{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_1wwq4_73{padding:var(--spacing-xs) var(--spacing-l)}._modal__footer_1wwq4_76{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xs);padding:var(--spacing-xxl) var(--spacing-xxxl);border-top:1px solid rgba(var(--center-channel-color-rgb),.12);flex-shrink:0}._modal__footer--no-divider_1wwq4_85{border-top:none;padding-top:0}

package/dist/components/modal/Modal.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.module.css');const _="_modal_e32ek_2",e="_modal__header_e32ek_20",o="_modal__title_e32ek_40",d="_modal__subtitle_e32ek_54",l="_modal__close_e32ek_61",a="_modal__body_e32ek_66",m="_modal__footer_e32ek_73",t={modal:_,"modal--size-small":"_modal--size-small_e32ek_11","modal--size-medium":"_modal--size-medium_e32ek_14","modal--size-large":"_modal--size-large_e32ek_17",modal__header:e,"modal__header--no-divider":"_modal__header--no-divider_e32ek_28","modal__header-inner":"_modal__header-inner_e32ek_32","modal__title-group":"_modal__title-group_e32ek_40",modal__title:o,modal__subtitle:d,modal__close:l,modal__body:a,"modal__body-inner":"_modal__body-inner_e32ek_70",modal__footer:m,"modal__footer--no-divider":"_modal__footer--no-divider_e32ek_82"};exports.default=t;exports.modal=_;exports.modal__body=a;exports.modal__close=l;exports.modal__footer=m;exports.modal__header=e;exports.modal__subtitle=d;exports.modal__title=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.module.css');const _="_modal_1wwq4_2",o="_modal__header_1wwq4_20",d="_modal__title_1wwq4_40",l="_modal__subtitle_1wwq4_54",e="_modal__close_1wwq4_61",a="_modal__body_1wwq4_66",m="_modal__footer_1wwq4_76",t={modal:_,"modal--size-small":"_modal--size-small_1wwq4_11","modal--size-medium":"_modal--size-medium_1wwq4_14","modal--size-large":"_modal--size-large_1wwq4_17",modal__header:o,"modal__header--no-divider":"_modal__header--no-divider_1wwq4_28","modal__header-inner":"_modal__header-inner_1wwq4_32","modal__title-group":"_modal__title-group_1wwq4_40",modal__title:d,modal__subtitle:l,modal__close:e,modal__body:a,"modal__body-inner":"_modal__body-inner_1wwq4_70","modal__body-inner--menu":"_modal__body-inner--menu_1wwq4_73",modal__footer:m,"modal__footer--no-divider":"_modal__footer--no-divider_1wwq4_85"};exports.default=t;exports.modal=_;exports.modal__body=a;exports.modal__close=e;exports.modal__footer=m;exports.modal__header=o;exports.modal__subtitle=l;exports.modal__title=d;
 //# sourceMappingURL=Modal.module.scss.cjs.map

package/dist/components/modal/Modal.module.scss.js

@@ -1,28 +1,29 @@
-import './Modal.module.css';const _ = "_modal_e32ek_2", e = "_modal__header_e32ek_20", o = "_modal__title_e32ek_40", d = "_modal__subtitle_e32ek_54", l = "_modal__close_e32ek_61", a = "_modal__body_e32ek_66", m = "_modal__footer_e32ek_73", t = {
+import './Modal.module.css';const _ = "_modal_1wwq4_2", o = "_modal__header_1wwq4_20", d = "_modal__title_1wwq4_40", l = "_modal__subtitle_1wwq4_54", e = "_modal__close_1wwq4_61", a = "_modal__body_1wwq4_66", m = "_modal__footer_1wwq4_76", t = {
   modal: _,
-  "modal--size-small": "_modal--size-small_e32ek_11",
-  "modal--size-medium": "_modal--size-medium_e32ek_14",
-  "modal--size-large": "_modal--size-large_e32ek_17",
-  modal__header: e,
-  "modal__header--no-divider": "_modal__header--no-divider_e32ek_28",
-  "modal__header-inner": "_modal__header-inner_e32ek_32",
-  "modal__title-group": "_modal__title-group_e32ek_40",
-  modal__title: o,
-  modal__subtitle: d,
-  modal__close: l,
+  "modal--size-small": "_modal--size-small_1wwq4_11",
+  "modal--size-medium": "_modal--size-medium_1wwq4_14",
+  "modal--size-large": "_modal--size-large_1wwq4_17",
+  modal__header: o,
+  "modal__header--no-divider": "_modal__header--no-divider_1wwq4_28",
+  "modal__header-inner": "_modal__header-inner_1wwq4_32",
+  "modal__title-group": "_modal__title-group_1wwq4_40",
+  modal__title: d,
+  modal__subtitle: l,
+  modal__close: e,
   modal__body: a,
-  "modal__body-inner": "_modal__body-inner_e32ek_70",
+  "modal__body-inner": "_modal__body-inner_1wwq4_70",
+  "modal__body-inner--menu": "_modal__body-inner--menu_1wwq4_73",
   modal__footer: m,
-  "modal__footer--no-divider": "_modal__footer--no-divider_e32ek_82"
+  "modal__footer--no-divider": "_modal__footer--no-divider_1wwq4_85"
 };
 export {
   t as default,
   _ as modal,
   a as modal__body,
-  l as modal__close,
+  e as modal__close,
   m as modal__footer,
-  e as modal__header,
-  d as modal__subtitle,
-  o as modal__title
+  o as modal__header,
+  l as modal__subtitle,
+  d as modal__title
 };
 //# sourceMappingURL=Modal.module.scss.js.map

package/dist/components/modal/Modal.module.scss.js.map

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

package/dist/components/modal/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Modal } from './Modal';
-export type { ModalProps, ModalSize } from './Modal';
+export type { ModalBodyPadding, ModalProps, ModalSize } from './Modal';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.css

@@ -1 +1 @@
-._more-unreads-banner_1fap4_2{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);background-color:var(--mention-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._more-unreads-banner_1fap4_2:hover{background-color:rgba(var(--mention-bg-rgb),.92);box-shadow:var(--elevation-2)}._more-unreads-banner_1fap4_2:active{box-shadow:var(--elevation-1)}._more-unreads-banner_1fap4_2:focus-visible{outline:none;box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--link-color)}._more-unreads-banner__icon_1fap4_26{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mention-color)}._more-unreads-banner__label_1fap4_33{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--mention-color);white-space:nowrap}._more-unreads-banner--size-small_1fap4_40{padding:var(--spacing-xxs) var(--spacing-s)}._more-unreads-banner--size-small_1fap4_40 ._more-unreads-banner__label_1fap4_33{font-size:var(--font-size-75)}._more-unreads-banner--size-large_1fap4_46{padding:var(--spacing-s) var(--spacing-l)}._more-unreads-banner--size-large_1fap4_46 ._more-unreads-banner__label_1fap4_33{font-size:var(--font-size-100)}._more-unreads-banner--size-large_1fap4_46 ._more-unreads-banner__icon_1fap4_26 svg{width:var(--icon-size-16);height:var(--icon-size-16)}
+._more-unreads-banner_1jk9k_2{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);background-color:var(--mention-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);cursor:pointer;transition:background-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}._more-unreads-banner_1jk9k_2:hover{background-color:rgba(var(--mention-bg-rgb),.92);box-shadow:var(--elevation-2)}._more-unreads-banner_1jk9k_2:active{box-shadow:var(--elevation-1)}._more-unreads-banner_1jk9k_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._more-unreads-banner__icon_1jk9k_28{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mention-color)}._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--mention-color);white-space:nowrap}._more-unreads-banner--size-small_1jk9k_42{padding:var(--spacing-xxs) var(--spacing-s)}._more-unreads-banner--size-small_1jk9k_42 ._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-75)}._more-unreads-banner--size-large_1jk9k_48{padding:var(--spacing-s) var(--spacing-l)}._more-unreads-banner--size-large_1jk9k_48 ._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-100)}._more-unreads-banner--size-large_1jk9k_48 ._more-unreads-banner__icon_1jk9k_28 svg{width:var(--icon-size-16);height:var(--icon-size-16)}

package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.module.css');const e={"more-unreads-banner":"_more-unreads-banner_1fap4_2","more-unreads-banner__icon":"_more-unreads-banner__icon_1fap4_26","more-unreads-banner__label":"_more-unreads-banner__label_1fap4_33","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1fap4_40","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1fap4_46"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.module.css');const e={"more-unreads-banner":"_more-unreads-banner_1jk9k_2","more-unreads-banner__icon":"_more-unreads-banner__icon_1jk9k_28","more-unreads-banner__label":"_more-unreads-banner__label_1jk9k_35","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1jk9k_42","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1jk9k_48"};exports.default=e;
 //# sourceMappingURL=MoreUnreadsBanner.module.scss.cjs.map

package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.js

@@ -1,9 +1,9 @@
 import './MoreUnreadsBanner.module.css';const e = {
-  "more-unreads-banner": "_more-unreads-banner_1fap4_2",
-  "more-unreads-banner__icon": "_more-unreads-banner__icon_1fap4_26",
-  "more-unreads-banner__label": "_more-unreads-banner__label_1fap4_33",
-  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1fap4_40",
-  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1fap4_46"
+  "more-unreads-banner": "_more-unreads-banner_1jk9k_2",
+  "more-unreads-banner__icon": "_more-unreads-banner__icon_1jk9k_28",
+  "more-unreads-banner__label": "_more-unreads-banner__label_1jk9k_35",
+  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1jk9k_42",
+  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1jk9k_48"
 };
 export {
   e as default

package/dist/components/pagination-dots/PaginationDots.module.css

@@ -1 +1 @@
-._pagination-dots_1nh7u_2{display:inline-flex;overflow:hidden}._pagination-dots--horizontal_1nh7u_6{flex-direction:row;align-items:center}._pagination-dots--vertical_1nh7u_10{flex-direction:column;justify-content:center}._pagination-dots--inverted_1nh7u_14 ._pagination-dots__dot_1nh7u_14{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_1nh7u_14 ._pagination-dots__dot--active_1nh7u_17{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_1nh7u_21 ._pagination-dots__dot_1nh7u_14{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_1nh7u_21 ._pagination-dots__dot--active_1nh7u_17{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots--on-primary_1nh7u_21 ._pagination-dots__item_1nh7u_28:focus-visible ._pagination-dots__dot_1nh7u_14{box-shadow:0 0 0 3px var(--color-info),0 0 0 5px var(--button-color)}._pagination-dots__item_1nh7u_28{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer;flex-shrink:0}._pagination-dots__item_1nh7u_28:focus-visible{outline:none}._pagination-dots__item_1nh7u_28:focus-visible ._pagination-dots__dot_1nh7u_14{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--link-color)}._pagination-dots__dot_1nh7u_14{display:block;width:6px;height:6px;border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),width var(--duration-quick) var(--ease-transition),height var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._pagination-dots__dot--active_1nh7u_17{background-color:var(--button-bg);box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.16)}
+._pagination-dots_1r0u8_2{display:inline-flex;overflow:visible}._pagination-dots--horizontal_1r0u8_6{flex-direction:row;align-items:center}._pagination-dots--vertical_1r0u8_10{flex-direction:column;justify-content:center}._pagination-dots--inverted_1r0u8_14 ._pagination-dots__dot_1r0u8_14{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_1r0u8_14 ._pagination-dots__dot--active_1r0u8_17{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_1r0u8_21{--focus-ring-color: var(--button-color)}._pagination-dots--on-primary_1r0u8_21 ._pagination-dots__dot_1r0u8_14{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_1r0u8_21 ._pagination-dots__dot--active_1r0u8_17{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots__item_1r0u8_31{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;flex-shrink:0;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._pagination-dots__item_1r0u8_31:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._pagination-dots__dot_1r0u8_14{display:block;width:6px;height:6px;border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),width var(--duration-quick) var(--ease-transition),height var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._pagination-dots__dot--active_1r0u8_17{background-color:var(--button-bg);box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.16)}

package/dist/components/pagination-dots/PaginationDots.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.module.css');const t={"pagination-dots":"_pagination-dots_1nh7u_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1nh7u_6","pagination-dots--vertical":"_pagination-dots--vertical_1nh7u_10","pagination-dots--inverted":"_pagination-dots--inverted_1nh7u_14","pagination-dots__dot":"_pagination-dots__dot_1nh7u_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1nh7u_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1nh7u_21","pagination-dots__item":"_pagination-dots__item_1nh7u_28"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.module.css');const t={"pagination-dots":"_pagination-dots_1r0u8_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1r0u8_6","pagination-dots--vertical":"_pagination-dots--vertical_1r0u8_10","pagination-dots--inverted":"_pagination-dots--inverted_1r0u8_14","pagination-dots__dot":"_pagination-dots__dot_1r0u8_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1r0u8_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1r0u8_21","pagination-dots__item":"_pagination-dots__item_1r0u8_31"};exports.default=t;
 //# sourceMappingURL=PaginationDots.module.scss.cjs.map

package/dist/components/pagination-dots/PaginationDots.module.scss.js

@@ -1,12 +1,12 @@
 import './PaginationDots.module.css';const t = {
-  "pagination-dots": "_pagination-dots_1nh7u_2",
-  "pagination-dots--horizontal": "_pagination-dots--horizontal_1nh7u_6",
-  "pagination-dots--vertical": "_pagination-dots--vertical_1nh7u_10",
-  "pagination-dots--inverted": "_pagination-dots--inverted_1nh7u_14",
-  "pagination-dots__dot": "_pagination-dots__dot_1nh7u_14",
-  "pagination-dots__dot--active": "_pagination-dots__dot--active_1nh7u_17",
-  "pagination-dots--on-primary": "_pagination-dots--on-primary_1nh7u_21",
-  "pagination-dots__item": "_pagination-dots__item_1nh7u_28"
+  "pagination-dots": "_pagination-dots_1r0u8_2",
+  "pagination-dots--horizontal": "_pagination-dots--horizontal_1r0u8_6",
+  "pagination-dots--vertical": "_pagination-dots--vertical_1r0u8_10",
+  "pagination-dots--inverted": "_pagination-dots--inverted_1r0u8_14",
+  "pagination-dots__dot": "_pagination-dots__dot_1r0u8_14",
+  "pagination-dots__dot--active": "_pagination-dots__dot--active_1r0u8_17",
+  "pagination-dots--on-primary": "_pagination-dots--on-primary_1r0u8_21",
+  "pagination-dots__item": "_pagination-dots__item_1r0u8_31"
 };
 export {
   t as default

package/dist/components/radio/Radio.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs");function v({className:r="",size:n="medium",valid:s=!0,children:t,id:d,checked:o,defaultChecked:i,disabled:u,onChange:c,name:_,value:m,...f}){const b=C.useId(),l=d??b,[,j]=h.useControllable(o,i,c),p=e.default[`radio--size-${q.toKebab(n)}`],g=s?"":e.default["radio--invalid"],x=[e.default.radio,p,g,r].filter(Boolean).join(" ");return a.jsxs("label",{className:x,htmlFor:l,children:[a.jsx("input",{id:l,type:"radio",name:_,value:m,className:e.default.radio__input,checked:o,defaultChecked:i,disabled:u,"aria-invalid":s?void 0:!0,onChange:j,...f}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),t!=null&&a.jsx("span",{className:e.default.radio__label,children:t})]})}exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs");function v({className:r="",size:n="medium",invalid:s=!1,children:o,id:d,checked:t,defaultChecked:l,disabled:u,onChange:c,name:_,value:f,...m}){const b=C.useId(),i=d??b,[,j]=h.useControllable(t,l,c),p=e.default[`radio--size-${q.toKebab(n)}`],g=s?e.default["radio--invalid"]:"",x=[e.default.radio,p,g,r].filter(Boolean).join(" ");return a.jsxs("label",{className:x,htmlFor:i,children:[a.jsx("input",{id:i,type:"radio",name:_,value:f,className:e.default.radio__input,checked:t,defaultChecked:l,disabled:u,"aria-invalid":s?!0:void 0,onChange:j,...m}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),o!=null&&a.jsx("span",{className:e.default.radio__label,children:o})]})}exports.default=v;
 //# sourceMappingURL=Radio.cjs.map

package/dist/components/radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When false, uses error/destructive styling (red when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['radio--invalid'];\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EAAQ,GACR,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBX,EAASC,EAAgBE,CAAQ,EAEpES,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EACjDmB,EAAelB,EAAQ,GAAKgB,EAAAA,QAAO,gBAAgB,EAEnDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEsB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EACpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,GAAAT,EACA,KAAK,QACL,KAAAL,EACA,MAAAC,EACA,UAAWQ,EAAAA,QAAO,aAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAQ,OAAY,GAClC,SAAUa,EACT,GAAGJ,CAAA,CAAA,EAENY,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACCf,GAAY,MACXoB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAf,CAAA,CAAS,CAAA,EAEvD,CAEJ"}
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When true, uses error/destructive styling (red when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  invalid = false,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBX,EAASC,EAAgBE,CAAQ,EAEpES,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EACjDmB,EAAelB,EAAUgB,UAAO,gBAAgB,EAAI,GAEpDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEsB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EAEpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,GAAAT,EACA,KAAK,QACL,KAAAL,EACA,MAAAC,EACA,UAAWQ,EAAAA,QAAO,aAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUa,EACT,GAAGJ,CAAA,CAAA,EAENY,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACCf,GAAY,MACXoB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAf,CAAA,CAAS,CAAA,EAEvD,CAEJ"}

package/dist/components/radio/Radio.d.ts

@@ -5,8 +5,8 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
     size?: RadioSize;
-    /** When false, uses error/destructive styling (red when checked). Default: true. */
-    valid?: boolean;
+    /** When true, uses error/destructive styling (red when checked). */
+    invalid?: boolean;
     /** Label content. Rendered next to the radio. */
     children?: React.ReactNode;
 }
@@ -15,5 +15,5 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are
  * few enough to show at once and the user benefits from seeing every option side-by-side.
  */
-export default function Radio({ className, size, valid, children, id: idProp, checked, defaultChecked, disabled, onChange, name, value, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default function Radio({ className, size, invalid, children, id: idProp, checked, defaultChecked, disabled, onChange, name, value, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,IAAe,EACf,KAAY,EACZ,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,2CAmCZ"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,IAAe,EACf,OAAe,EACf,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,2CAoCZ"}

package/dist/components/radio/Radio.js

@@ -4,10 +4,10 @@ import { useControllable as v } from "../../hooks/use-controllable.js";
 import { toKebab as x } from "../../utils/string.js";
 import a from "./Radio.module.scss.js";
 function K({
-  className: t = "",
-  size: l = "medium",
-  valid: i = !0,
-  children: s,
+  className: n = "",
+  size: t = "medium",
+  invalid: s = !1,
+  children: i,
   id: d,
   checked: r,
   defaultChecked: e,
@@ -15,14 +15,14 @@ function K({
   onChange: c,
   name: p,
   value: u,
-  ..._
+  ...f
 }) {
-  const f = j(), n = d ?? f, [, b] = v(r, e, c), C = a[`radio--size-${x(l)}`], N = i ? "" : a["radio--invalid"], h = [a.radio, C, N, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g("label", { className: h, htmlFor: n, children: [
+  const _ = j(), l = d ?? _, [, b] = v(r, e, c), C = a[`radio--size-${x(t)}`], N = s ? a["radio--invalid"] : "", h = [a.radio, C, N, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ g("label", { className: h, htmlFor: l, children: [
     /* @__PURE__ */ o(
       "input",
       {
-        id: n,
+        id: l,
         type: "radio",
         name: p,
         value: u,
@@ -30,13 +30,13 @@ function K({
         checked: r,
         defaultChecked: e,
         disabled: m,
-        "aria-invalid": i ? void 0 : !0,
+        "aria-invalid": s ? !0 : void 0,
         onChange: b,
-        ..._
+        ...f
       }
     ),
     /* @__PURE__ */ o("span", { className: a.radio__circle, children: /* @__PURE__ */ o("span", { className: a.radio__dot, "aria-hidden": !0 }) }),
-    s != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: s })
+    i != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: i })
   ] });
 }
 export {

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When false, uses error/destructive styling (red when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['radio--invalid'];\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBX,GAASC,GAAgBE,CAAQ,GAEpES,IAAYC,EAAO,eAAeC,EAAQlB,CAAI,CAAC,EAAE,GACjDmB,IAAelB,IAAQ,KAAKgB,EAAO,gBAAgB,GAEnDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GACpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAT;AAAA,QACA,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,OAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,SAAAb;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAQ,SAAY;AAAA,QAClC,UAAUa;AAAA,QACT,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAY,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACCf,KAAY,QACX,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAf,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When true, uses error/destructive styling (red when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  invalid = false,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBX,GAASC,GAAgBE,CAAQ,GAEpES,IAAYC,EAAO,eAAeC,EAAQlB,CAAI,CAAC,EAAE,GACjDmB,IAAelB,IAAUgB,EAAO,gBAAgB,IAAI,IAEpDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GAEpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAT;AAAA,QACA,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,OAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,SAAAb;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUa;AAAA,QACT,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAY,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACCf,KAAY,QACX,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAf,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ;"}

package/dist/components/radio/Radio.module.css

@@ -1 +1 @@
-._radio_1e67f_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_1e67f_2:has(._radio__input_1e67f_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_1e67f_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_1e67f_13:focus-visible{outline:none}._radio__circle_1e67f_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_1e67f_13:focus-visible~._radio__circle_1e67f_33{box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.56)}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover ._radio__circle_1e67f_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_1e67f_13:disabled~._radio__circle_1e67f_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--button-bg)}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{border-color:var(--button-bg)}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--button-bg)}._radio__input_1e67f_13:focus-visible:checked~._radio__circle_1e67f_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_1e67f_13:disabled:checked~._radio__circle_1e67f_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_1e67f_13:disabled:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_1e67f_80 ._radio__circle_1e67f_33{border-color:var(--error-text, var(--color-danger))}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover._radio--invalid_1e67f_80 ._radio__input_1e67f_13:not(:checked)~._radio__circle_1e67f_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--error-text, var(--color-danger))}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33{border-color:var(--error-text, var(--color-danger))}._radio_1e67f_2:has(._radio__input_1e67f_13:not(:disabled)):hover._radio--invalid_1e67f_80 ._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:focus-visible~._radio__circle_1e67f_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_1e67f_80 ._radio__input_1e67f_13:focus-visible:checked~._radio__circle_1e67f_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_1e67f_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_1e67f_13:checked~._radio__circle_1e67f_33 ._radio__dot_1e67f_59{transform:scale(1)}._radio__label_1e67f_116{line-height:1}._radio--size-small_1e67f_119{gap:var(--spacing-xs)}._radio--size-small_1e67f_119 ._radio__input_1e67f_13,._radio--size-small_1e67f_119 ._radio__circle_1e67f_33{width:12px;height:12px}._radio--size-small_1e67f_119 ._radio__dot_1e67f_59{width:6px;height:6px}._radio--size-small_1e67f_119 ._radio__label_1e67f_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_1e67f_138{gap:var(--spacing-xs)}._radio--size-medium_1e67f_138 ._radio__input_1e67f_13,._radio--size-medium_1e67f_138 ._radio__circle_1e67f_33{width:16px;height:16px}._radio--size-medium_1e67f_138 ._radio__dot_1e67f_59{width:8px;height:8px}._radio--size-medium_1e67f_138 ._radio__label_1e67f_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_1e67f_157{gap:var(--spacing-s)}._radio--size-large_1e67f_157 ._radio__input_1e67f_13,._radio--size-large_1e67f_157 ._radio__circle_1e67f_33{width:20px;height:20px}._radio--size-large_1e67f_157 ._radio__dot_1e67f_59{width:10px;height:10px}._radio--size-large_1e67f_157 ._radio__label_1e67f_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+._radio_difs7_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_difs7_2:has(._radio__input_difs7_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_difs7_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_difs7_13:focus-visible{outline:none}._radio__circle_difs7_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_difs7_13:disabled~._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_difs7_80 ._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:not(:checked)~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_difs7_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{transform:scale(1)}._radio__label_difs7_116{line-height:1}._radio--size-small_difs7_119{gap:var(--spacing-xs)}._radio--size-small_difs7_119 ._radio__input_difs7_13,._radio--size-small_difs7_119 ._radio__circle_difs7_33{width:12px;height:12px}._radio--size-small_difs7_119 ._radio__dot_difs7_59{width:6px;height:6px}._radio--size-small_difs7_119 ._radio__label_difs7_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_difs7_138{gap:var(--spacing-xs)}._radio--size-medium_difs7_138 ._radio__input_difs7_13,._radio--size-medium_difs7_138 ._radio__circle_difs7_33{width:16px;height:16px}._radio--size-medium_difs7_138 ._radio__dot_difs7_59{width:8px;height:8px}._radio--size-medium_difs7_138 ._radio__label_difs7_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_difs7_157{gap:var(--spacing-s)}._radio--size-large_difs7_157 ._radio__input_difs7_13,._radio--size-large_difs7_157 ._radio__circle_difs7_33{width:20px;height:20px}._radio--size-large_difs7_157 ._radio__dot_difs7_59{width:10px;height:10px}._radio--size-large_difs7_157 ._radio__label_difs7_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/radio/Radio.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.module.css');const _="_radio_1e67f_2",i="_radio__input_1e67f_13",o="_radio__circle_1e67f_33",a="_radio__dot_1e67f_59",e="_radio__label_1e67f_116",d={radio:_,radio__input:i,radio__circle:o,radio__dot:a,"radio--invalid":"_radio--invalid_1e67f_80",radio__label:e,"radio--size-small":"_radio--size-small_1e67f_119","radio--size-medium":"_radio--size-medium_1e67f_138","radio--size-large":"_radio--size-large_1e67f_157"};exports.default=d;exports.radio=_;exports.radio__circle=o;exports.radio__dot=a;exports.radio__input=i;exports.radio__label=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.module.css');const i="_radio_difs7_2",_="_radio__input_difs7_13",d="_radio__circle_difs7_33",o="_radio__dot_difs7_59",a="_radio__label_difs7_116",r={radio:i,radio__input:_,radio__circle:d,radio__dot:o,"radio--invalid":"_radio--invalid_difs7_80",radio__label:a,"radio--size-small":"_radio--size-small_difs7_119","radio--size-medium":"_radio--size-medium_difs7_138","radio--size-large":"_radio--size-large_difs7_157"};exports.default=r;exports.radio=i;exports.radio__circle=d;exports.radio__dot=o;exports.radio__input=_;exports.radio__label=a;
 //# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/radio/Radio.module.scss.js

@@ -1,20 +1,20 @@
-import './Radio.module.css';const _ = "_radio_1e67f_2", i = "_radio__input_1e67f_13", a = "_radio__circle_1e67f_33", o = "_radio__dot_1e67f_59", d = "_radio__label_1e67f_116", r = {
+import './Radio.module.css';const _ = "_radio_difs7_2", i = "_radio__input_difs7_13", d = "_radio__circle_difs7_33", a = "_radio__dot_difs7_59", o = "_radio__label_difs7_116", r = {
   radio: _,
   radio__input: i,
-  radio__circle: a,
-  radio__dot: o,
-  "radio--invalid": "_radio--invalid_1e67f_80",
-  radio__label: d,
-  "radio--size-small": "_radio--size-small_1e67f_119",
-  "radio--size-medium": "_radio--size-medium_1e67f_138",
-  "radio--size-large": "_radio--size-large_1e67f_157"
+  radio__circle: d,
+  radio__dot: a,
+  "radio--invalid": "_radio--invalid_difs7_80",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_difs7_119",
+  "radio--size-medium": "_radio--size-medium_difs7_138",
+  "radio--size-large": "_radio--size-large_difs7_157"
 };
 export {
   r as default,
   _ as radio,
-  a as radio__circle,
-  o as radio__dot,
+  d as radio__circle,
+  a as radio__dot,
   i as radio__input,
-  d as radio__label
+  o as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/right-sidebar/RightSidebarHeader/RightSidebarHeader.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TagType } from '../../Tag/Tag';
+import { TagType } from '../../tag/Tag';
 export interface RightSidebarHeaderProps {
     /** Primary title text. */
     title: string;

package/dist/components/search-input/SearchInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),$=require("../../utils/string.cjs"),g=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/magnify.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/close-circle.js"),D=__D?.default??__D,s=require("./SearchInput.module.scss.cjs"),G={small:"12",medium:"16",large:"20"},H=a.forwardRef(function({className:q="",size:p="medium",label:o,onClear:d,id:y,value:f,defaultValue:I,placeholder:C,onFocus:n,onBlur:r,onChange:l,disabled:i,...k},u){const R=a.useId(),_=y??R,h=a.useRef(null),c=f!==void 0,[z,m]=a.useState(I??""),j=c?f:z,x=j!=null&&j!=="",[M,b]=a.useState(!1),w=M||x,T=a.useCallback(e=>{b(!0),n==null||n(e)},[n]),V=a.useCallback(e=>{b(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||m(e.target.value),l==null||l(e)},[c,l]),O=a.useCallback(e=>{h.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),A=a.useCallback(()=>{var S;if(i)return;if(d){d(),(S=h.current)==null||S.focus();return}const e=h.current;e!=null&&(e.value="",c||m(""),l==null||l({target:e,currentTarget:e}),e.focus())},[i,c,l,d]),v=x&&!i,E=s.default[`searchInput--size-${$.toKebab(p)}`],K=o!=null&&w?s.default["searchInput--label-floated"]:"",L=s.default["searchInput--has-leading-icon"],U=v?s.default["searchInput--has-trailing-icon"]:"",N=G[p],Z=[s.default.searchInput,E,K,L,U,q].filter(Boolean).join(" ");return t.jsx("div",{className:Z,children:t.jsxs("div",{className:s.default.searchInput__wrapper,children:[o!=null&&t.jsx("label",{className:s.default.searchInput__label,htmlFor:_,children:o}),t.jsxs("div",{className:s.default.searchInput__inner,children:[t.jsx("span",{className:s.default.searchInput__leadingIcon,"aria-hidden":!0,children:t.jsx(g.default,{size:N,glyph:t.jsx(B,{})})}),t.jsx("input",{ref:O,id:_,type:"search",className:s.default.searchInput__input,value:c?f:void 0,defaultValue:c?void 0:I,placeholder:C,disabled:i,onFocus:T,onBlur:V,onChange:F,...k}),v&&t.jsx("span",{className:s.default.searchInput__trailingIcon,children:t.jsx("button",{type:"button",className:s.default.searchInput__clearButton,onClick:A,"aria-label":"Clear search",tabIndex:-1,children:t.jsx(g.default,{size:N,glyph:t.jsx(D,{})})})})]})]})})});exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),a=require("react"),W=require("../../utils/string.cjs"),k=require("../icon/Icon.cjs"),__X=require("@mattermost/compass-icons/components/magnify.js"),X=__X?.default??__X,__Y=require("@mattermost/compass-icons/components/close-circle.js"),Y=__Y?.default??__Y,t=require("./SearchInput.module.scss.cjs"),B={small:"12",medium:"16",large:"20"},D={small:"12",medium:"16",large:"16"},K=a.forwardRef(function({className:q="",size:f="medium",label:h,invalid:I=!1,onClear:p,id:R,value:_,defaultValue:j,placeholder:y,onFocus:i,onBlur:r,onChange:l,disabled:u,onKeyDown:d,...M},n){const z=a.useId(),x=R??z,m=a.useRef(null),c=_!==void 0,[E,b]=a.useState(j??""),C=c?_:E,o=C!=null&&C!=="",[A,S]=a.useState(!1),O=A||o,T=a.useCallback(e=>{S(!0),i==null||i(e)},[i]),V=a.useCallback(e=>{S(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||b(e.target.value),l==null||l(e)},[c,l]),L=a.useCallback(e=>{m.current=e,typeof n=="function"?n(e):n&&(n.current=e)},[n]),v=a.useCallback(()=>{var g;if(u)return;if(p){p(),(g=m.current)==null||g.focus();return}const e=m.current;e!=null&&(e.value="",c||b(""),l==null||l({target:e,currentTarget:e}),e.focus())},[u,c,l,p]),P=a.useCallback(e=>{d==null||d(e),!(e.defaultPrevented||u)&&e.key==="Escape"&&o&&(e.preventDefault(),v())},[u,v,o,d]),N=o&&!u,Z=t.default[`search-input--size-${W.toKebab(f)}`],U=I?t.default["search-input--invalid"]:"",$=h!=null&&O?t.default["search-input--label-floated"]:"",w=t.default["search-input--has-leading-icon"],G=N?t.default["search-input--has-trailing-icon"]:"",H=B[f],J=D[f],Q=[t.default["search-input"],Z,U,$,w,G,q].filter(Boolean).join(" ");return s.jsx("div",{className:Q,children:s.jsxs("div",{className:t.default["search-input__wrapper"],children:[h!=null&&s.jsx("label",{className:t.default["search-input__label"],htmlFor:x,children:h}),s.jsxs("div",{className:t.default["search-input__inner"],children:[s.jsx("span",{className:t.default["search-input__leading-icon"],"aria-hidden":!0,children:s.jsx(k.default,{size:H,glyph:s.jsx(X,{})})}),s.jsx("input",{ref:L,id:x,type:"search",className:t.default["search-input__input"],value:c?_:void 0,defaultValue:c?void 0:j,placeholder:y,disabled:u,onFocus:T,onBlur:V,onChange:F,onKeyDown:P,"aria-invalid":I?!0:void 0,...M}),N&&s.jsx("span",{className:t.default["search-input__trailing-icon"],children:s.jsx("button",{type:"button",className:t.default["search-input__clear-button"],onClick:v,"aria-label":"Clear search",tabIndex:-1,children:s.jsx(k.default,{size:J,glyph:s.jsx(Y,{})})})})]})]})})});exports.default=K;
 //# sourceMappingURL=SearchInput.cjs.map