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

package/dist/components/menu-group-heading/index.js.map

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

package/dist/components/menu-item/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAd,GACCe,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"16\" />`. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"16\" />`. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAd,GACCe,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/dist/components/menu-item/MenuItem.d.ts

@@ -6,11 +6,11 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     secondaryLabel?: ReactNode;
     /** Where the secondary label appears. Default: 'below'. */
     secondaryLabelPosition?: 'inline' | 'below';
-    /** Custom content for the leading slot. When omitted, shows placeholder icon. */
+    /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size="16" />`. */
     leadingVisual?: ReactNode;
     /** Show the leading visual slot. Default: true. */
     leadingElement?: boolean;
-    /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */
+    /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size="16" />`. */
     trailingVisual?: ReactNode;
     /** Show the trailing visual slot. Default: false. */
     trailingElement?: boolean;

package/dist/components/menu-item/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sGAAsG;IACtG,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,cAAc,EACd,sBAAgC,EAChC,aAAa,EACb,cAAqB,EACrB,cAAc,EACd,eAAuB,EACvB,iBAAiB,EACjB,GAAW,EACX,YAAY,EACZ,WAAmB,EACnB,MAAc,EACd,SAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CAuEf"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,sJAAsJ;IACtJ,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2KAA2K;IAC3K,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,cAAc,EACd,sBAAgC,EAChC,aAAa,EACb,cAAqB,EACrB,cAAc,EACd,eAAuB,EACvB,iBAAiB,EACjB,GAAW,EACX,YAAY,EACZ,WAAmB,EACnB,MAAc,EACd,SAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CAuEf"}

package/dist/components/menu-item/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAuCA,SAAwBA,EAAS;AAAA,EAC/B,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC,IAAyB;AAAA,EACzB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAY;AAAA,IAChBC,EAAO,WAAW;AAAA,IAClBP,IAAcO,EAAO,wBAAwB,IAAI;AAAA,IACjDN,IAASM,EAAO,mBAAmB,IAAI;AAAA,IACvCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,UAAA,EAAO,WAAWF,GAAW,MAAAF,GAAY,UAAAD,GAAqB,GAAGE,GAChE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAA;AAAA,IAAAb,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAd,KACC,gBAAAe,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,KAAyB,GAAI,MAAK,KAAA,CAAK,EAAA,CAEzD,EAAA,CACF;AAAA,IAEF,gBAAAF,EAAC,OAAA,EAAI,WAAWF,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,kBAAkB,GAAI,UAAAjB,GAAM;AAAA,QACnDC,KAAkBC,MAA2B,YAC5C,gBAAAgB,EAAC,UAAK,WAAWD,EAAO,mCAAmC,GACxD,UAAAhB,EAAA,CACH;AAAA,QAEDM,uBACE,QAAA,EAAK,WAAWU,EAAO,0BAA0B,GAAG,eAAW,IAC7D,UAAAV,EAAA,CACH;AAAA,QAEDC,KAAO,gBAAAU,EAACI,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBb,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAOd;AAAA,YACP,UAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,GAEJ;AAAA,MACCR,KAAkBC,MAA2B,WAC5C,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC5C,UAAA,gBAAAC,EAAC,UAAK,WAAWD,EAAO,kCAAkC,GACvD,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IACCX,KACC,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,kBAAkB,GACvC,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACTD,EAAO,4BAA4B;AAAA,UAClCZ,IAEG,KADAY,EAAO,mCAAmC;AAAA,QAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAZ,uBAAmBe,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAU,GAAI,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA,EAC3D,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"16\" />`. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"16\" />`. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAuCA,SAAwBA,EAAS;AAAA,EAC/B,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC,IAAyB;AAAA,EACzB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAY;AAAA,IAChBC,EAAO,WAAW;AAAA,IAClBP,IAAcO,EAAO,wBAAwB,IAAI;AAAA,IACjDN,IAASM,EAAO,mBAAmB,IAAI;AAAA,IACvCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,UAAA,EAAO,WAAWF,GAAW,MAAAF,GAAY,UAAAD,GAAqB,GAAGE,GAChE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAA;AAAA,IAAAb,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAd,KACC,gBAAAe,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,KAAyB,GAAI,MAAK,KAAA,CAAK,EAAA,CAEzD,EAAA,CACF;AAAA,IAEF,gBAAAF,EAAC,OAAA,EAAI,WAAWF,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,kBAAkB,GAAI,UAAAjB,GAAM;AAAA,QACnDC,KAAkBC,MAA2B,YAC5C,gBAAAgB,EAAC,UAAK,WAAWD,EAAO,mCAAmC,GACxD,UAAAhB,EAAA,CACH;AAAA,QAEDM,uBACE,QAAA,EAAK,WAAWU,EAAO,0BAA0B,GAAG,eAAW,IAC7D,UAAAV,EAAA,CACH;AAAA,QAEDC,KAAO,gBAAAU,EAACI,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBb,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAOd;AAAA,YACP,UAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,GAEJ;AAAA,MACCR,KAAkBC,MAA2B,WAC5C,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC5C,UAAA,gBAAAC,EAAC,UAAK,WAAWD,EAAO,kCAAkC,GACvD,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IACCX,KACC,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,kBAAkB,GACvC,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACTD,EAAO,4BAA4B;AAAA,UAClCZ,IAEG,KADAY,EAAO,mCAAmC;AAAA,QAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAZ,uBAAmBe,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAU,GAAI,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA,EAC3D,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/message-separator/MessageSeparator.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__c=require("@mattermost/compass-icons/components/creation-outline.js"),c=__c?.default??__c,a=require("./MessageSeparator.module.scss.cjs"),g={date:"Today","new-messages":"new-messages","reply-count":"4 replies"};function p({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,className:n="",...d}){const o=t??g[s],u=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],n].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:o}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":"Summarize new messages with AI",children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(m.default,{size:"12",glyph:e.jsx(c,{})})}),"Summarize"]})]});return e.jsx("div",{className:u,role:"separator",...d,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__c=require("@mattermost/compass-icons/components/creation-outline.js"),c=__c?.default??__c,a=require("./MessageSeparator.module.scss.cjs"),g={date:"Today","new-messages":"New messages","reply-count":"4 replies"};function p({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,className:n="",...d}){const o=t??g[s],u=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],n].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:o}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":"Summarize new messages with AI",children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(m.default,{size:"12",glyph:e.jsx(c,{})})}),"Summarize"]})]});return e.jsx("div",{className:u,role:"separator",...d,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=p;
 //# sourceMappingURL=MessageSeparator.cjs.map

package/dist/components/message-separator/MessageSeparator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'new-messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAF,EACH,EAECN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,iCAAiC,EAAG,cAAW,GACpE,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,EAAG,EACjE,EACCC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}
+{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAF,EACH,EAECN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,iCAAiC,EAAG,cAAW,GACpE,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,EAAG,EACjE,EACCC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}

package/dist/components/message-separator/MessageSeparator.d.ts

@@ -3,7 +3,7 @@ export type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';
 export interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {
     /** Separator variant. Default: Date. */
     type?: MessageSeparatorType;
-    /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */
+    /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */
     label?: string;
     /** Show AI summarize button (New Messages type only). Default: false. */
     showAiSummary?: boolean;

package/dist/components/message-separator/MessageSeparator.js

@@ -4,7 +4,7 @@ import __u from "@mattermost/compass-icons/components/creation-outline.js";const
 import e from "./MessageSeparator.module.scss.js";
 const _ = {
   date: "Today",
-  "new-messages": "new-messages",
+  "new-messages": "New messages",
   "reply-count": "4 replies"
 };
 function w({

package/dist/components/message-separator/MessageSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'new-messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAC9C,UAAAF,GACH;AAAA,IAECN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWH,EAAO,iCAAiC,GAAG,eAAW,IACpE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,GAAG,GACjE;AAAA,IACCC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAC9C,UAAAF,GACH;AAAA,IAECN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWH,EAAO,iCAAiC,GAAG,eAAW,IACpE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,GAAG,GACjE;AAAA,IACCC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}

package/dist/components/modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("react"),s=require("../icon-button/IconButton.cjs"),i=require("../icon/Icon.cjs"),v=require("../scrollbar/Scrollbar.cjs"),__N=require("@mattermost/compass-icons/components/close.js"),N=__N?.default??__N,__q=require("@mattermost/compass-icons/components/arrow-left.js"),q=__q?.default??__q,y=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function g({size:t="small",title:r,subtitle:a,showBackButton:n=!1,onBack:u,onClose:c,headerDivider:m=!0,bodyPadding:f="default",children:_,footer:o,footerDivider:j=!0}){const d=b.useId(),x=l.default[`modal--size-${y.toKebab(t)}`],h=f==="menu";return e.jsxs("div",{className:[l.default.modal,x].filter(Boolean).join(" "),role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsxs("div",{className:[l.default.modal__header,!m&&l.default["modal__header--no-divider"]].filter(Boolean).join(" "),children:[e.jsxs("div",{className:l.default["modal__header-inner"],children:[n&&e.jsx(s.default,{"aria-label":"Go back",icon:e.jsx(i.default,{glyph:e.jsx(q,{}),size:"20"}),onClick:u}),e.jsxs("div",{className:l.default["modal__title-group"],children:[e.jsx("h2",{id:d,className:l.default.modal__title,children:r}),a&&e.jsx("p",{className:l.default.modal__subtitle,children:a})]})]}),e.jsx(s.default,{"aria-label":"Close",className:l.default.modal__close,icon:e.jsx(i.default,{glyph:e.jsx(N,{}),size:"20"}),onClick:c})]}),e.jsx("div",{className:l.default.modal__body,children:e.jsx(v.default,{children:e.jsx("div",{className:[l.default["modal__body-inner"],h&&l.default["modal__body-inner--menu"]].filter(Boolean).join(" "),children:_})})}),o&&e.jsx("div",{className:[l.default.modal__footer,!j&&l.default["modal__footer--no-divider"]].filter(Boolean).join(" "),children:o})]})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("react"),p=require("../scrollbar/Scrollbar.cjs"),w=require("../modal-footer/ModalFooter.cjs"),z=require("../modal-header/ModalHeader.cjs"),B=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function C({className:t="",style:i,size:u="small",title:c,subtitle:m,subtitlePlacement:b="below",hideTitle:f=!1,showBackButton:_=!1,onBack:j,onClose:q,headerDivider:v=!0,headerAction:x,bodyPadding:s="default",scrollable:y=!0,children:M,footer:o,footerLeading:r,footerType:a="2-actions",footerDivider:h=!0}){const d=S.useId(),g=l.default[`modal--size-${B.toKebab(u)}`],I=[l.default["modal__body-inner"],s==="menu"&&l.default["modal__body-inner--menu"],s==="none"&&l.default["modal__body-inner--none"]].filter(Boolean).join(" "),n=e.jsx("div",{className:I,children:M}),N=o!=null||r!=null||a==="spacer-small"||a==="spacer-large";return e.jsxs("div",{className:[l.default.modal,g,t].filter(Boolean).join(" "),style:i,role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsx(z.default,{title:c,titleId:d,subtitle:m,subtitlePlacement:b,hideTitle:f,showBackButton:_,onBack:j,onClose:q,divider:v,headerAction:x}),e.jsx("div",{className:l.default.modal__body,children:y?e.jsx(p.default,{children:n}):n}),N&&e.jsx(w.default,{type:a,divider:h,leading:r,children:o})]})}exports.default=C;
 //# sourceMappingURL=Modal.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","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":"kdA4CA,SAAwBA,EAAM,CAC5B,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EAAc,UACd,SAAAC,EACA,OAAAC,EACA,cAAAC,EAAgB,EAClB,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQf,CAAI,CAAC,EAAE,EACjDgB,EAAWT,IAAgB,OAEjC,OACEU,EAAAA,KAAC,MAAA,CACC,UAAW,CAACH,UAAO,MAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,KAAK,SACL,aAAW,OACX,kBAAiBF,EAEjB,SAAA,CAAAM,EAAAA,KAAC,MAAA,CACC,UAAW,CACTH,EAAAA,QAAO,cACP,CAACR,GAAiBQ,EAAAA,QAAO,2BAA2B,CAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qBAAqB,EACzC,SAAA,CAAAX,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,aAAW,UACX,WAAOC,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASjB,CAAA,CAAA,EAGba,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAI,EAAAA,IAAC,MAAG,GAAIP,EAAS,UAAWG,EAAAA,QAAO,aAChC,SAAAb,EACH,EACCC,GACCgB,EAAAA,IAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,gBAAqB,SAAAZ,CAAA,CAAS,CAAA,CAAA,CAEvD,CAAA,EACF,EACAgB,EAAAA,IAACC,EAAAA,QAAA,CACC,aAAW,QACX,UAAWL,EAAAA,QAAO,aAClB,WAAOM,UAAA,CAAK,YAAQE,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASjB,CAAA,CAAA,CACX,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWS,UAAO,YACrB,eAACS,UAAA,CACC,SAAAL,EAAAA,IAAC,MAAA,CACC,UAAW,CACTJ,EAAAA,QAAO,mBAAmB,EAC1BE,GAAYF,EAAAA,QAAO,yBAAyB,CAAA,EAE3C,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAN,CAAA,CAAA,EAEL,CAAA,CACF,EAECC,GACCS,EAAAA,IAAC,MAAA,CACC,UAAW,CACTJ,EAAAA,QAAO,cACP,CAACJ,GAAiBI,EAAAA,QAAO,2BAA2B,CAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAL,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\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. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  headerAction,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        onClose={onClose}\n        divider={headerDivider}\n        headerAction={headerAction}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","onClose","headerDivider","headerAction","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":"6WA2EA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,GAChB,aAAAC,EACA,YAAAC,EAAc,UACd,WAAAC,EAAa,GACb,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,YACb,cAAAC,EAAgB,EAClB,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQrB,CAAI,CAAC,EAAE,EACjDsB,EAAiB,CACrBF,EAAAA,QAAO,mBAAmB,EAC1BV,IAAgB,QAAUU,EAAAA,QAAO,yBAAyB,EAC1DV,IAAgB,QAAUU,EAAAA,QAAO,yBAAyB,CAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,EAELG,EAAYC,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAiB,SAAAV,EAAS,EACtDa,EACJZ,GAAU,MACVC,GAAiB,MACjBC,IAAe,gBACfA,IAAe,eAEjB,OACEW,EAAAA,KAAC,MAAA,CACC,UAAW,CAACN,EAAAA,QAAO,MAAOD,EAAWrB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxE,MAAAC,EACA,KAAK,SACL,aAAW,OACX,kBAAiBkB,EAEjB,SAAA,CAAAO,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAA1B,EACA,QAAAgB,EACA,SAAAf,EACA,kBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,QAAAC,EACA,QAASC,EACT,aAAAC,CAAA,CAAA,EAGFe,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,YACpB,SAAAT,EAAaa,EAAAA,IAACI,EAAAA,QAAA,CAAW,SAAAL,CAAA,CAAU,EAAeA,EACrD,EAECE,GACCD,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAMd,EACN,QAASC,EACT,QAASF,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}

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

@@ -1,34 +1,66 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { ModalFooterType } from '../modal-footer/ModalFooter';
+import { ModalSubtitlePlacement } from '../modal-header/ModalHeader';
 export type ModalSize = 'small' | 'medium' | 'large';
-/** Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so row labels align with the 32px header/footer margins. */
-export type ModalBodyPadding = 'default' | 'menu';
+/**
+ * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so
+ * row labels align with the 32px header/footer margins. `none` removes inset
+ * for host-owned full-bleed layouts (e.g. settings sidebars).
+ */
+export type ModalBodyPadding = 'default' | 'menu' | 'none';
+export type { ModalFooterType, ModalSubtitlePlacement };
 export interface ModalProps {
+    /** Extra class on the dialog root (size + chrome classes still apply). */
+    className?: string;
+    /** Inline style on the dialog root — prefer `className` for layout overrides. */
+    style?: CSSProperties;
     /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */
     size?: ModalSize;
-    /** Modal heading text. Always visible. */
+    /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */
     title: ReactNode;
-    /** Optional secondary line below the title. */
+    /** Optional secondary line — placement via `subtitlePlacement`. */
     subtitle?: ReactNode;
+    /**
+     * Where the subtitle sits. Figma Modal Header: Below | Beside.
+     * Default: `below`.
+     */
+    subtitlePlacement?: ModalSubtitlePlacement;
+    /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */
+    hideTitle?: boolean;
     /** When true, shows a back-arrow button before the title. */
     showBackButton?: boolean;
     /** Called when the back button is clicked. */
     onBack?: () => void;
     /** Called when the × close button is clicked. */
     onClose?: () => void;
-    /** Show divider between header and body. Figma: Divider = On. Default: true. */
+    /** Show divider between header and body. Default: true. */
     headerDivider?: boolean;
+    /** Optional control before close (Button, search field, …). */
+    headerAction?: ReactNode;
     /**
      * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for
-     * MenuItem lists (8px vertical / 16px horizontal so row labels align with
-     * the 32px header/footer margins).
+     * MenuItem lists. Use `none` when the host owns padding.
      */
     bodyPadding?: ModalBodyPadding;
+    /**
+     * When true (default), wraps body content in Scrollbar. Set false when the
+     * host manages scroll inside panes.
+     */
+    scrollable?: boolean;
     /** Body content. */
     children: ReactNode;
-    /** Footer slot — typically a group of Buttons, right-aligned by default. */
+    /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */
     footer?: ReactNode;
-    /** Show divider between body and footer. Figma: Divider = On. Default: true. */
+    /** Left footer slot (pagination status, PaginationDots, …). */
+    footerLeading?: ReactNode;
+    /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */
+    footerType?: ModalFooterType;
+    /** Show divider between body and footer. Default: true. */
     footerDivider?: boolean;
 }
-export default function Modal({ size, title, subtitle, showBackButton, onBack, onClose, headerDivider, bodyPadding, children, footer, footerDivider, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.
+ * Host owns portal, overlay, focus trap, and open/close.
+ */
+export default function Modal({ className, style, size, title, subtitle, subtitlePlacement, hideTitle, showBackButton, onBack, onClose, headerDivider, headerAction, bodyPadding, scrollable, children, footer, footerLeading, footerType, footerDivider, }: ModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,yIAAyI;AACzI,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,UAAU;IACzB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAc,EACd,KAAK,EACL,QAAQ,EACR,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,aAAoB,EACpB,WAAuB,EACvB,QAAQ,EACR,MAAM,EACN,aAAoB,GACrB,EAAE,UAAU,2CA0EZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAInF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AAExD,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,aAAoB,EACpB,YAAY,EACZ,WAAuB,EACvB,UAAiB,EACjB,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAwB,EACxB,aAAoB,GACrB,EAAE,UAAU,2CAsDZ"}

package/dist/components/modal/Modal.js

@@ -1,86 +1,68 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
-import { useId as v } from "react";
-import d from "../icon-button/IconButton.js";
-import m from "../icon/Icon.js";
-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 L({
-  size: n = "small",
-  title: s,
-  subtitle: a,
-  showBackButton: t = !1,
-  onBack: c,
-  onClose: _,
-  headerDivider: f = !0,
-  bodyPadding: h = "default",
-  children: p,
-  footer: i,
-  footerDivider: u = !0
+import { jsxs as z, jsx as o } from "react/jsx-runtime";
+import { useId as B } from "react";
+import C from "../scrollbar/Scrollbar.js";
+import F from "../modal-footer/ModalFooter.js";
+import g from "../modal-header/ModalHeader.js";
+import { toKebab as H } from "../../utils/string.js";
+import l from "./Modal.module.scss.js";
+function E({
+  className: d = "",
+  style: m,
+  size: t = "small",
+  title: c,
+  subtitle: u,
+  subtitlePlacement: b = "below",
+  hideTitle: f = !1,
+  showBackButton: p = !1,
+  onBack: _,
+  onClose: y,
+  headerDivider: h = !0,
+  headerAction: v,
+  bodyPadding: r = "default",
+  scrollable: j = !0,
+  children: I,
+  footer: a,
+  footerLeading: n,
+  footerType: e = "2-actions",
+  footerDivider: x = !0
 }) {
-  const r = v(), b = o[`modal--size-${I(n)}`], N = h === "menu";
-  return /* @__PURE__ */ e(
+  const i = B(), M = l[`modal--size-${H(t)}`], N = [
+    l["modal__body-inner"],
+    r === "menu" && l["modal__body-inner--menu"],
+    r === "none" && l["modal__body-inner--none"]
+  ].filter(Boolean).join(" "), s = /* @__PURE__ */ o("div", { className: N, children: I }), w = a != null || n != null || e === "spacer-small" || e === "spacer-large";
+  return /* @__PURE__ */ z(
     "div",
     {
-      className: [o.modal, b].filter(Boolean).join(" "),
+      className: [l.modal, M, d].filter(Boolean).join(" "),
+      style: m,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": r,
+      "aria-labelledby": i,
       children: [
-        /* @__PURE__ */ e(
-          "div",
+        /* @__PURE__ */ o(
+          g,
           {
-            className: [
-              o.modal__header,
-              !f && o["modal__header--no-divider"]
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ e("div", { className: o["modal__header-inner"], children: [
-                t && /* @__PURE__ */ l(
-                  d,
-                  {
-                    "aria-label": "Go back",
-                    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: s }),
-                  a && /* @__PURE__ */ l("p", { className: o.modal__subtitle, children: a })
-                ] })
-              ] }),
-              /* @__PURE__ */ l(
-                d,
-                {
-                  "aria-label": "Close",
-                  className: o.modal__close,
-                  icon: /* @__PURE__ */ l(m, { glyph: /* @__PURE__ */ l(j, {}), size: "20" }),
-                  onClick: _
-                }
-              )
-            ]
+            title: c,
+            titleId: i,
+            subtitle: u,
+            subtitlePlacement: b,
+            hideTitle: f,
+            showBackButton: p,
+            onBack: _,
+            onClose: y,
+            divider: h,
+            headerAction: v
           }
         ),
-        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(y, { children: /* @__PURE__ */ l(
-          "div",
+        /* @__PURE__ */ o("div", { className: l.modal__body, children: j ? /* @__PURE__ */ o(C, { children: s }) : s }),
+        w && /* @__PURE__ */ o(
+          F,
           {
-            className: [
-              o["modal__body-inner"],
-              N && o["modal__body-inner--menu"]
-            ].filter(Boolean).join(" "),
-            children: p
-          }
-        ) }) }),
-        i && /* @__PURE__ */ l(
-          "div",
-          {
-            className: [
-              o.modal__footer,
-              !u && o["modal__footer--no-divider"]
-            ].filter(Boolean).join(" "),
-            children: i
+            type: e,
+            divider: x,
+            leading: n,
+            children: a
           }
         )
       ]
@@ -88,6 +70,6 @@ function L({
   );
 }
 export {
-  L as default
+  E 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\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;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\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. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  headerAction,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        onClose={onClose}\n        divider={headerDivider}\n        headerAction={headerAction}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","onClose","headerDivider","headerAction","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":";;;;;;;AA2EA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAClB,GAAe;AACb,QAAMC,IAAUC,EAAA,GACVC,IAAYC,EAAO,eAAeC,EAAQrB,CAAI,CAAC,EAAE,GACjDsB,IAAiB;AAAA,IACrBF,EAAO,mBAAmB;AAAA,IAC1BV,MAAgB,UAAUU,EAAO,yBAAyB;AAAA,IAC1DV,MAAgB,UAAUU,EAAO,yBAAyB;AAAA,EAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,GAELG,IAAY,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAAiB,UAAAV,GAAS,GACtDa,IACJZ,KAAU,QACVC,KAAiB,QACjBC,MAAe,kBACfA,MAAe;AAEjB,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACN,EAAO,OAAOD,GAAWrB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACxE,OAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBkB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAA1B;AAAA,YACA,SAAAgB;AAAA,YACA,UAAAf;AAAA,YACA,mBAAAC;AAAA,YACA,WAAAC;AAAA,YACA,gBAAAC;AAAA,YACA,QAAAC;AAAA,YACA,SAAAC;AAAA,YACA,SAASC;AAAA,YACT,cAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAe,EAAC,OAAA,EAAI,WAAWJ,EAAO,aACpB,UAAAT,IAAa,gBAAAa,EAACI,GAAA,EAAW,UAAAL,EAAA,CAAU,IAAeA,GACrD;AAAA,QAECE,KACC,gBAAAD;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAMd;AAAA,YACN,SAASC;AAAA,YACT,SAASF;AAAA,YAER,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -1 +1 @@
-._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}
+._modal_18mtm_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_18mtm_11{width:600px}._modal--size-medium_18mtm_14{width:704px}._modal--size-large_18mtm_17{width:832px}._modal__body_18mtm_20{flex:1;min-height:0}._modal__body-inner_18mtm_24{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_18mtm_27{padding:var(--spacing-xs) var(--spacing-l)}._modal__body-inner--none_18mtm_30{padding:0}._modal__body_18mtm_20>._modal__body-inner_18mtm_24{height:100%}

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_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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Modal.module.css');const _="_modal_18mtm_2",m="_modal__body_18mtm_20",o={modal:_,"modal--size-small":"_modal--size-small_18mtm_11","modal--size-medium":"_modal--size-medium_18mtm_14","modal--size-large":"_modal--size-large_18mtm_17",modal__body:m,"modal__body-inner":"_modal__body-inner_18mtm_24","modal__body-inner--menu":"_modal__body-inner--menu_18mtm_27","modal__body-inner--none":"_modal__body-inner--none_18mtm_30"};exports.default=o;exports.modal=_;exports.modal__body=m;
 //# sourceMappingURL=Modal.module.scss.cjs.map