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

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

@@ -1,20 +1,20 @@
-import './Radio.css';const _ = "_radio_1hdqa_2", a = "_radio__input_1hdqa_14", i = "_radio__circle_1hdqa_33", d = "_radio__dot_1hdqa_59", o = "_radio__label_1hdqa_116", r = {
+import './Radio.css';const _ = "_radio_h0rbb_2", i = "_radio__input_h0rbb_17", r = "_radio__circle_h0rbb_36", a = "_radio__dot_h0rbb_62", o = "_radio__label_h0rbb_119", d = {
   radio: _,
-  radio__input: a,
-  radio__circle: i,
-  radio__dot: d,
-  "radio--invalid": "_radio--invalid_1hdqa_80",
+  radio__input: i,
+  radio__circle: r,
+  radio__dot: a,
+  "radio--invalid": "_radio--invalid_h0rbb_83",
   radio__label: o,
-  "radio--size-small": "_radio--size-small_1hdqa_119",
-  "radio--size-medium": "_radio--size-medium_1hdqa_140",
-  "radio--size-large": "_radio--size-large_1hdqa_161"
+  "radio--size-small": "_radio--size-small_h0rbb_122",
+  "radio--size-medium": "_radio--size-medium_h0rbb_143",
+  "radio--size-large": "_radio--size-large_h0rbb_164"
 };
 export {
-  r as default,
+  d as default,
   _ as radio,
-  i as radio__circle,
-  d as radio__dot,
-  a as radio__input,
+  r as radio__circle,
+  a as radio__dot,
+  i as radio__input,
   o as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__q=require("@mattermost/compass-icons/components/arrow-back-ios.js"),q=__q?.default??__q,__v=require("@mattermost/compass-icons/components/arrow-collapse.js"),v=__v?.default??__v,__y=require("@mattermost/compass-icons/components/arrow-expand.js"),y=__y?.default??__y,__C=require("@mattermost/compass-icons/components/close.js"),C=__C?.default??__C,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),z=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function k({title:f,secondaryTitle:i,tag:l,tagType:j="info",leadingIcon:t,onBack:d,backLabel:_="Back",onExpand:c,expanded:n=!1,expandLabel:x="Expand",collapseLabel:b="Collapse",onClose:o,closeLabel:g="Close",actionLabel:u,onActionClick:m,actionActive:h=!1,className:p=""}){const N=[a.default["right-sidebar-header"],p].filter(Boolean).join(" ");return e.jsxs("div",{className:N,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[d&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:d,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(q,{})})}),t&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:t}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:f}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(z.default,{label:l,type:j,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[u&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],h?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:m,"aria-pressed":h?!0:void 0,children:u}),c&&e.jsx(r.default,{size:"small","aria-label":n?b:x,onClick:c,icon:e.jsx(s.default,{size:"16",glyph:n?e.jsx(v,{}):e.jsx(y,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":g,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(C,{})})})]})]})}exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__z=require("@mattermost/compass-icons/components/arrow-back-ios.js"),z=__z?.default??__z,__C=require("@mattermost/compass-icons/components/arrow-collapse.js"),C=__C?.default??__C,__k=require("@mattermost/compass-icons/components/arrow-expand.js"),k=__k?.default??__k,__v=require("@mattermost/compass-icons/components/close.js"),v=__v?.default??__v,__w=require("@mattermost/compass-icons/components/dock-window.js"),w=__w?.default??__w,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),I=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function B({title:j,secondaryTitle:i,tag:l,tagType:x="info",leadingIcon:d,onBack:t,backLabel:_="Back",onExpand:n,expanded:c=!1,expandLabel:b="Expand",collapseLabel:g="Collapse",onPopout:o,popoutLabel:m="Open in new window",onClose:u,closeLabel:p="Close",actionLabel:h,onActionClick:N,actionActive:f=!1,className:q=""}){const y=[a.default["right-sidebar-header"],q].filter(Boolean).join(" ");return e.jsxs("div",{className:y,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:t,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(z,{})})}),d&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:d}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:j}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(I.default,{label:l,type:x,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[h&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],f?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:N,"aria-pressed":f?!0:void 0,children:h}),n&&e.jsx(r.default,{size:"small","aria-label":c?g:b,onClick:n,icon:e.jsx(s.default,{size:"16",glyph:c?e.jsx(C,{}):e.jsx(k,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":m,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(w,{})})}),u&&e.jsx(r.default,{size:"small","aria-label":p,onClick:u,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(v,{})})})]})]})}exports.default=B;
 //# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"giBA+CA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAb,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYZ,EACZ,QAASD,EACT,WAAOiB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDnB,GACCgB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAd,EACH,QAED,OAAA,CAAK,UAAWc,EAAAA,QAAO,6BAA6B,EAAI,SAAAlB,EAAM,EAC9DE,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOtB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCmB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJN,GACCa,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYb,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEa,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOd,EAAWY,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILf,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"8lBAoDA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,SAAAC,EACA,YAAAC,EAAc,qBACd,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAf,GACCiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYd,EACZ,QAASD,EACT,WAAOmB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDrB,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAhB,EACH,QAED,OAAA,CAAK,UAAWgB,EAAAA,QAAO,6BAA6B,EAAI,SAAApB,EAAM,EAC9DE,GACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOxB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCqB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJR,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYf,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEe,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOhB,EAAWc,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILjB,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYX,EACZ,QAASD,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAe,CAAA,CAAI,CAAA,CAAA,EAGpDhB,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACQ,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

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

@@ -23,6 +23,10 @@ export interface RightSidebarHeaderProps {
     expandLabel?: string;
     /** Accessible name for the expand button while expanded. Default: "Collapse". */
     collapseLabel?: string;
+    /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */
+    onPopout?: () => void;
+    /** Accessible name for the pop out button. Default: "Open in new window". */
+    popoutLabel?: string;
     /** When set, shows a close button and calls this on click. */
     onClose?: () => void;
     /** Accessible name for the close button. Default: "Close". */
@@ -35,5 +39,5 @@ export interface RightSidebarHeaderProps {
     actionActive?: boolean;
     className?: string;
 }
-export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RightSidebarHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAsFzB"}
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,QAAQ,EACR,WAAkC,EAClC,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CA8FzB"}

package/dist/components/right-sidebar-header/RightSidebarHeader.js

@@ -1,84 +1,87 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import __k from "@mattermost/compass-icons/components/arrow-back-ios.js";const k=__k&&__k.default?__k.default:__k;
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/arrow-back-ios.js";const u=__u&&__u.default?__u.default:__u;
 import __v from "@mattermost/compass-icons/components/arrow-collapse.js";const v=__v&&__v.default?__v.default:__v;
-import __I from "@mattermost/compass-icons/components/arrow-expand.js";const I=__I&&__I.default?__I.default:__I;
-import __x from "@mattermost/compass-icons/components/close.js";const x=__x&&__x.default?__x.default:__x;
+import __x from "@mattermost/compass-icons/components/arrow-expand.js";const x=__x&&__x.default?__x.default:__x;
+import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
+import __B from "@mattermost/compass-icons/components/dock-window.js";const B=__B&&__B.default?__B.default:__B;
 import i from "../icon/Icon.js";
 import s from "../icon-button/IconButton.js";
-import j from "../tag/Tag.js";
-import r from "./RightSidebarHeader.module.scss.js";
-function F({
-  title: _,
+import A from "../tag/Tag.js";
+import a from "./RightSidebarHeader.module.scss.js";
+function J({
+  title: b,
   secondaryTitle: l,
   tag: o,
-  tagType: b = "info",
-  leadingIcon: t,
+  tagType: g = "info",
+  leadingIcon: c,
   onBack: d,
-  backLabel: g = "Back",
-  onExpand: c,
-  expanded: n = !1,
-  expandLabel: f = "Expand",
-  collapseLabel: N = "Collapse",
-  onClose: h,
-  closeLabel: y = "Close",
-  actionLabel: m,
-  onActionClick: C,
-  actionActive: p = !1,
-  className: u = ""
+  backLabel: f = "Back",
+  onExpand: n,
+  expanded: t = !1,
+  expandLabel: N = "Expand",
+  collapseLabel: y = "Collapse",
+  onPopout: h,
+  popoutLabel: z = "Open in new window",
+  onClose: m,
+  closeLabel: C = "Close",
+  actionLabel: p,
+  onActionClick: k,
+  actionActive: _ = !1,
+  className: w = ""
 }) {
-  const z = [r["right-sidebar-header"], u].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: z, children: [
-    /* @__PURE__ */ a("div", { className: r["right-sidebar-header__left"], children: [
-      /* @__PURE__ */ a("div", { className: r["right-sidebar-header__primary"], children: [
+  const I = [a["right-sidebar-header"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { className: I, children: [
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__left"], children: [
+      /* @__PURE__ */ r("div", { className: a["right-sidebar-header__primary"], children: [
         d && /* @__PURE__ */ e(
           s,
           {
-            className: r["right-sidebar-header__back"],
+            className: a["right-sidebar-header__back"],
             size: "small",
-            "aria-label": g,
+            "aria-label": f,
             onClick: d,
-            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(k, {}) })
+            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
           }
         ),
-        t && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__leading-icon"], children: t }),
-        /* @__PURE__ */ e("span", { className: r["right-sidebar-header__title"], children: _ }),
-        o && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
-          j,
+        c && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__leading-icon"], children: c }),
+        /* @__PURE__ */ e("span", { className: a["right-sidebar-header__title"], children: b }),
+        o && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
+          A,
           {
             label: o,
-            type: b,
+            type: g,
             size: "x-small",
             casing: "all-caps"
           }
         ) })
       ] }),
-      l && /* @__PURE__ */ e("div", { className: r["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: r["right-sidebar-header__secondary-text"], children: l }) })
+      l && /* @__PURE__ */ e("div", { className: a["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: a["right-sidebar-header__secondary-text"], children: l }) })
     ] }),
-    /* @__PURE__ */ a("div", { className: r["right-sidebar-header__actions"], children: [
-      m && /* @__PURE__ */ e(
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__actions"], children: [
+      p && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: [
-            r["right-sidebar-header__action"],
-            p ? r["right-sidebar-header__action--active"] : ""
+            a["right-sidebar-header__action"],
+            _ ? a["right-sidebar-header__action--active"] : ""
           ].filter(Boolean).join(" "),
-          onClick: C,
-          "aria-pressed": p ? !0 : void 0,
-          children: m
+          onClick: k,
+          "aria-pressed": _ ? !0 : void 0,
+          children: p
         }
       ),
-      c && /* @__PURE__ */ e(
+      n && /* @__PURE__ */ e(
         s,
         {
           size: "small",
-          "aria-label": n ? N : f,
-          onClick: c,
+          "aria-label": t ? y : N,
+          onClick: n,
           icon: /* @__PURE__ */ e(
             i,
             {
               size: "16",
-              glyph: n ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(I, {})
+              glyph: t ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(x, {})
             }
           )
         }
@@ -87,15 +90,24 @@ function F({
         s,
         {
           size: "small",
-          "aria-label": y,
+          "aria-label": z,
           onClick: h,
-          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(x, {}) })
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(B, {}) })
+        }
+      ),
+      m && /* @__PURE__ */ e(
+        s,
+        {
+          size: "small",
+          "aria-label": C,
+          onClick: m,
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(j, {}) })
         }
       )
     ] })
   ] });
 }
 export {
-  F as default
+  J as default
 };
 //# sourceMappingURL=RightSidebarHeader.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

package/dist/components/section-notice/SectionNotice.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../button/Button.cjs"),y=require("../icon-button/IconButton.cjs"),l=require("../icon/Icon.cjs"),__j=require("@mattermost/compass-icons/components/information-outline.js"),j=__j?.default??__j,__O=require("@mattermost/compass-icons/components/alert-outline.js"),O=__O?.default??__O,__S=require("@mattermost/compass-icons/components/alert-circle-outline.js"),S=__S?.default??__S,__k=require("@mattermost/compass-icons/components/check-circle-outline.js"),k=__k?.default??__k,__A=require("@mattermost/compass-icons/components/close.js"),A=__A?.default??__A,b=require("../../utils/props.cjs"),s=require("./SectionNotice.module.scss.cjs"),w={info:e.jsx(l.default,{size:"20",glyph:e.jsx(j,{})}),warning:e.jsx(l.default,{size:"20",glyph:e.jsx(S,{})}),danger:e.jsx(l.default,{size:"20",glyph:e.jsx(O,{})}),success:e.jsx(l.default,{size:"20",glyph:e.jsx(k,{})}),hint:e.jsx(l.default,{size:"20",glyph:e.jsx(j,{})})};function M({className:f="",type:t="info",icon:o,title:x,description:a,primaryButtonLabel:n,onPrimaryAction:h,secondaryButtonLabel:c,onSecondaryAction:_,primaryActionDisabled:m,primaryActionLoading:g,secondaryActionDisabled:C,secondaryActionLoading:N,onDismiss:r,dismissLabel:q="Dismiss",dismissButtonProps:i,...v}){const I=s.default[`section-notice--type-${t.toLowerCase()}`],z=[s.default["section-notice"],I,f].filter(Boolean).join(" "),u=o!==void 0?o:w[t],p=n!=null||c!=null;return e.jsxs("div",{...v,className:z,children:[e.jsxs("div",{className:s.default["section-notice__content"],children:[u!=null&&e.jsx("span",{className:s.default["section-notice__icon"],"aria-hidden":!0,children:e.jsx(l.IconSlotContext.Provider,{value:{size:"20"},children:u})}),e.jsxs("div",{className:s.default["section-notice__body"],children:[e.jsx("p",{className:s.default["section-notice__title"],children:x}),a!=null&&e.jsx("div",{className:s.default["section-notice__description"],children:a}),p&&e.jsxs("div",{className:s.default["section-notice__actions"],children:[n!=null&&e.jsx(d.default,{emphasis:"primary",size:"small",disabled:m,loading:g,onClick:h,children:n}),c!=null&&e.jsx(d.default,{emphasis:"secondary",size:"small",disabled:C,loading:N,onClick:_,children:c})]})]})]}),r!=null&&e.jsx(y.default,{...i,className:b.mergeClassNames(s.default["section-notice__dismiss"],i==null?void 0:i.className),"aria-label":q,size:"small",icon:e.jsx(l.default,{size:"16",glyph:e.jsx(A,{})}),onClick:r})]})}exports.default=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../button/Button.cjs"),y=require("../icon-button/IconButton.cjs"),s=require("../icon/Icon.cjs"),__j=require("@mattermost/compass-icons/components/information-outline.js"),j=__j?.default??__j,__O=require("@mattermost/compass-icons/components/alert-outline.js"),O=__O?.default??__O,__S=require("@mattermost/compass-icons/components/alert-circle-outline.js"),S=__S?.default??__S,__k=require("@mattermost/compass-icons/components/check-circle-outline.js"),k=__k?.default??__k,__A=require("@mattermost/compass-icons/components/close.js"),A=__A?.default??__A,b=require("../../utils/props.cjs"),l=require("./SectionNotice.module.scss.cjs"),w={info:e.jsx(s.default,{size:"20",glyph:e.jsx(j,{})}),warning:e.jsx(s.default,{size:"20",glyph:e.jsx(S,{})}),danger:e.jsx(s.default,{size:"20",glyph:e.jsx(O,{})}),success:e.jsx(s.default,{size:"20",glyph:e.jsx(k,{})}),hint:e.jsx(s.default,{size:"20",glyph:e.jsx(j,{})})};function M({className:f="",type:t="info",icon:o,title:x,description:a,primaryButtonLabel:n,onPrimaryAction:h,secondaryButtonLabel:c,onSecondaryAction:_,primaryActionDisabled:m,primaryActionLoading:g,secondaryActionDisabled:C,secondaryActionLoading:N,onDismiss:r,dismissLabel:q="Dismiss",dismissButtonProps:i,...v}){const I=l.default[`section-notice--type-${t.toLowerCase()}`],z=[l.default["section-notice"],I,f].filter(Boolean).join(" "),u=o!==void 0?o:w[t],p=n!=null||c!=null;return e.jsxs("div",{...v,className:z,children:[e.jsxs("div",{className:l.default["section-notice__content"],children:[u!=null&&e.jsx("span",{className:l.default["section-notice__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:u})}),e.jsxs("div",{className:l.default["section-notice__body"],children:[e.jsx("h4",{className:l.default["section-notice__title"],children:x}),a!=null&&e.jsx("div",{className:l.default["section-notice__description"],children:a}),p&&e.jsxs("div",{className:l.default["section-notice__actions"],children:[n!=null&&e.jsx(d.default,{emphasis:"primary",size:"small",disabled:m,loading:g,onClick:h,children:n}),c!=null&&e.jsx(d.default,{emphasis:"tertiary",size:"small",disabled:C,loading:N,onClick:_,children:c})]})]})]}),r!=null&&e.jsx(y.default,{...i,className:b.mergeClassNames(l.default["section-notice__dismiss"],i==null?void 0:i.className),"aria-label":q,size:"small",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(A,{})}),onClick:r})]})}exports.default=M;
 //# sourceMappingURL=SectionNotice.cjs.map

package/dist/components/section-notice/SectionNotice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNotice.cjs","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} />` — SectionNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Title / headline. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: ReactNode;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Disables the primary action button. */\n  primaryActionDisabled?: boolean;\n  /** Shows a spinner in the primary action button and disables it. */\n  primaryActionLoading?: boolean;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: ReactNode;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Disables the secondary action button. */\n  secondaryActionDisabled?: boolean;\n  /** Shows a spinner in the secondary action button and disables it. */\n  secondaryActionLoading?: boolean;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  primaryActionDisabled,\n  primaryActionLoading,\n  secondaryActionDisabled,\n  secondaryActionLoading,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <p className={styles['section-notice__title']}>{title}</p>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  disabled={primaryActionDisabled}\n                  loading={primaryActionLoading}\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"secondary\"\n                  size=\"small\"\n                  disabled={secondaryActionDisabled}\n                  loading={secondaryActionLoading}\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['section-notice__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","primaryActionDisabled","primaryActionLoading","secondaryActionDisabled","secondaryActionLoading","onDismiss","dismissLabel","dismissButtonProps","rest","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","IconSlotContext","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":"upBA2DMA,EAAsD,CAC1D,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACC,IAAuB,EAAI,EACzD,cAAUF,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACE,IAAuB,EAAI,EAC5D,aAASH,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACG,IAAiB,EAAI,EACrD,cAAUJ,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACI,IAAuB,EAAI,EAC5D,WAAOL,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOC,EAAAA,IAACC,IAAuB,CAAA,CAAI,CAC3D,EAOA,SAAwBI,EAAc,CACpC,UAAAC,EAAY,GACZ,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,kBAAAC,EACA,sBAAAC,EACA,qBAAAC,EACA,wBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,UACf,mBAAAC,EACA,GAAGC,CACL,EAAuB,CACrB,MAAMC,EAAYC,EAAAA,QAAO,wBAAwBjB,EAAK,YAAA,CAAa,EAAE,EAE/DkB,EAAY,CAACD,UAAO,gBAAgB,EAAGD,EAAWjB,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,EAELoB,EAAelB,IAAS,OAAYA,EAAOV,EAAcS,CAAI,EAE7DoB,EAAahB,GAAsB,MAAQE,GAAwB,KAEzE,OACEe,EAAAA,KAAC,MAAA,CAAK,GAAGN,EAAM,UAAWG,EACxB,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAE,GAAgB,MACf1B,EAAAA,IAAC,OAAA,CAAK,UAAWwB,EAAAA,QAAO,sBAAsB,EAAG,cAAW,GAC1D,eAACK,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EAEFD,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAxB,MAAC,IAAA,CAAE,UAAWwB,EAAAA,QAAO,uBAAuB,EAAI,SAAAf,EAAM,EACrDC,GAAe,MACdV,MAAC,MAAA,CAAI,UAAWwB,EAAAA,QAAO,6BAA6B,EACjD,SAAAd,EACH,EAEDiB,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWJ,UAAO,yBAAyB,EAC7C,SAAA,CAAAb,GAAsB,MACrBX,EAAAA,IAAC8B,EAAAA,QAAA,CACC,SAAS,UACT,KAAK,QACL,SAAUf,EACV,QAASC,EACT,QAASJ,EAER,SAAAD,CAAA,CAAA,EAGJE,GAAwB,MACvBb,EAAAA,IAAC8B,EAAAA,QAAA,CACC,SAAS,YACT,KAAK,QACL,SAAUb,EACV,QAASC,EACT,QAASJ,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,EACF,EACCM,GAAa,MACZnB,EAAAA,IAAC+B,EAAAA,QAAA,CACE,GAAGV,EACJ,UAAWW,EAAAA,gBACTR,EAAAA,QAAO,yBAAyB,EAChCH,GAAA,YAAAA,EAAoB,SAAA,EAEtB,aAAYD,EACZ,KAAK,QACL,WAAOrB,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACiC,IAAU,EAAI,EAC5C,QAASd,CAAA,CAAA,CACX,EAEJ,CAEJ"}
+{"version":3,"file":"SectionNotice.cjs","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} />` — SectionNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Title / headline. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: ReactNode;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Disables the primary action button. */\n  primaryActionDisabled?: boolean;\n  /** Shows a spinner in the primary action button and disables it. */\n  primaryActionLoading?: boolean;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: ReactNode;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Disables the secondary action button. */\n  secondaryActionDisabled?: boolean;\n  /** Shows a spinner in the secondary action button and disables it. */\n  secondaryActionLoading?: boolean;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  primaryActionDisabled,\n  primaryActionLoading,\n  secondaryActionDisabled,\n  secondaryActionLoading,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <h4 className={styles['section-notice__title']}>{title}</h4>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  disabled={primaryActionDisabled}\n                  loading={primaryActionLoading}\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"tertiary\"\n                  size=\"small\"\n                  disabled={secondaryActionDisabled}\n                  loading={secondaryActionLoading}\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['section-notice__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","primaryActionDisabled","primaryActionLoading","secondaryActionDisabled","secondaryActionLoading","onDismiss","dismissLabel","dismissButtonProps","rest","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","IconSlotContext","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":"upBA2DMA,EAAsD,CAC1D,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACC,IAAuB,EAAI,EACzD,cAAUF,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACE,IAAuB,EAAI,EAC5D,aAASH,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACG,IAAiB,EAAI,EACrD,cAAUJ,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACI,IAAuB,EAAI,EAC5D,WAAOL,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOC,EAAAA,IAACC,IAAuB,CAAA,CAAI,CAC3D,EAOA,SAAwBI,EAAc,CACpC,UAAAC,EAAY,GACZ,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,kBAAAC,EACA,sBAAAC,EACA,qBAAAC,EACA,wBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,UACf,mBAAAC,EACA,GAAGC,CACL,EAAuB,CACrB,MAAMC,EAAYC,EAAAA,QAAO,wBAAwBjB,EAAK,YAAA,CAAa,EAAE,EAE/DkB,EAAY,CAACD,UAAO,gBAAgB,EAAGD,EAAWjB,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,EAELoB,EAAelB,IAAS,OAAYA,EAAOV,EAAcS,CAAI,EAE7DoB,EAAahB,GAAsB,MAAQE,GAAwB,KAEzE,OACEe,EAAAA,KAAC,MAAA,CAAK,GAAGN,EAAM,UAAWG,EACxB,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAE,GAAgB,MACf1B,EAAAA,IAAC,OAAA,CAAK,UAAWwB,EAAAA,QAAO,sBAAsB,EAAG,cAAW,GAC1D,eAACK,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EAEFD,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAxB,MAAC,KAAA,CAAG,UAAWwB,EAAAA,QAAO,uBAAuB,EAAI,SAAAf,EAAM,EACtDC,GAAe,MACdV,MAAC,MAAA,CAAI,UAAWwB,EAAAA,QAAO,6BAA6B,EACjD,SAAAd,EACH,EAEDiB,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWJ,UAAO,yBAAyB,EAC7C,SAAA,CAAAb,GAAsB,MACrBX,EAAAA,IAAC8B,EAAAA,QAAA,CACC,SAAS,UACT,KAAK,QACL,SAAUf,EACV,QAASC,EACT,QAASJ,EAER,SAAAD,CAAA,CAAA,EAGJE,GAAwB,MACvBb,EAAAA,IAAC8B,EAAAA,QAAA,CACC,SAAS,WACT,KAAK,QACL,SAAUb,EACV,QAASC,EACT,QAASJ,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,EACF,EACCM,GAAa,MACZnB,EAAAA,IAAC+B,EAAAA,QAAA,CACE,GAAGV,EACJ,UAAWW,EAAAA,gBACTR,EAAAA,QAAO,yBAAyB,EAChCH,GAAA,YAAAA,EAAoB,SAAA,EAEtB,aAAYD,EACZ,KAAK,QACL,WAAOrB,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACiC,IAAU,EAAI,EAC5C,QAASd,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/section-notice/SectionNotice.css

@@ -1 +1 @@
-._section-notice_853w8_2{display:flex;flex-direction:column;align-items:flex-end;position:relative;border-radius:var(--radius-s);border:1px solid rgba(var(--color-info-rgb),.16);background-color:rgba(var(--color-info-rgb),.04)}._section-notice__content_853w8_11{display:flex;align-items:flex-start;gap:var(--spacing-m);padding:var(--spacing-m);width:100%}._section-notice__icon_853w8_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-info)}._section-notice__body_853w8_25{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xs);min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._section-notice__title_853w8_34{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);margin:0}._section-notice__description_853w8_41{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._section-notice__actions_853w8_47{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._section-notice__dismiss_853w8_53{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}._section-notice--type-warning_853w8_58{background-color:rgba(var(--color-warning-rgb),.04);border-color:rgba(var(--color-warning-rgb),.16)}._section-notice--type-warning_853w8_58 ._section-notice__icon_853w8_18{color:var(--color-warning)}._section-notice--type-danger_853w8_65{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._section-notice--type-danger_853w8_65 ._section-notice__icon_853w8_18{color:var(--error-text, var(--color-danger))}._section-notice--type-success_853w8_72{background-color:rgba(var(--color-success-rgb),.04);border-color:rgba(var(--color-success-rgb),.16)}._section-notice--type-success_853w8_72 ._section-notice__icon_853w8_18{color:var(--color-success)}._section-notice--type-hint_853w8_79{background-color:rgba(var(--center-channel-color-rgb),.04);border-color:rgba(var(--center-channel-color-rgb),.16)}._section-notice--type-hint_853w8_79 ._section-notice__icon_853w8_18{color:rgba(var(--center-channel-color-rgb),.64)}
+._section-notice_1fkh6_2{display:flex;flex-direction:column;align-items:flex-end;position:relative;border-radius:var(--radius-s);border:1px solid rgba(var(--color-info-rgb),.16);background-color:rgba(var(--color-info-rgb),.04)}._section-notice__content_1fkh6_11{display:flex;align-items:flex-start;gap:var(--spacing-m);padding:var(--spacing-m);width:100%}._section-notice__icon_1fkh6_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-info)}._section-notice__body_1fkh6_25{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xs);min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._section-notice__title_1fkh6_34{margin:0;padding:0;font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);letter-spacing:var(--letter-spacing-normal);text-transform:none;color:var(--center-channel-color)}._section-notice__description_1fkh6_45{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._section-notice__actions_1fkh6_51{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._section-notice__dismiss_1fkh6_57{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}._section-notice--type-warning_1fkh6_62{background-color:rgba(var(--color-warning-rgb),.04);border-color:rgba(var(--color-warning-rgb),.16)}._section-notice--type-warning_1fkh6_62 ._section-notice__icon_1fkh6_18{color:var(--color-warning)}._section-notice--type-danger_1fkh6_69{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._section-notice--type-danger_1fkh6_69 ._section-notice__icon_1fkh6_18{color:var(--error-text, var(--color-danger))}._section-notice--type-success_1fkh6_76{background-color:rgba(var(--color-success-rgb),.04);border-color:rgba(var(--color-success-rgb),.16)}._section-notice--type-success_1fkh6_76 ._section-notice__icon_1fkh6_18{color:var(--color-success)}._section-notice--type-hint_1fkh6_83{background-color:rgba(var(--center-channel-color-rgb),.04);border-color:rgba(var(--center-channel-color-rgb),.16)}._section-notice--type-hint_1fkh6_83 ._section-notice__icon_1fkh6_18{color:rgba(var(--center-channel-color-rgb),.64)}

package/dist/components/section-notice/SectionNotice.js

@@ -1,7 +1,7 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import h from "../button/Button.js";
 import A from "../icon-button/IconButton.js";
-import n, { IconSlotContext as j } from "../icon/Icon.js";
+import l, { IconSlotContext as j } from "../icon/Icon.js";
 import __f from "@mattermost/compass-icons/components/information-outline.js";const f=__f&&__f.default?__f.default:__f;
 import __S from "@mattermost/compass-icons/components/alert-outline.js";const S=__S&&__S.default?__S.default:__S;
 import __w from "@mattermost/compass-icons/components/alert-circle-outline.js";const w=__w&&__w.default?__w.default:__w;
@@ -10,11 +10,11 @@ import __E from "@mattermost/compass-icons/components/close.js";const E=__E&&__E
 import { mergeClassNames as F } from "../../utils/props.js";
 import i from "./SectionNotice.module.scss.js";
 const T = {
-  info: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(f, {}) }),
-  warning: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(w, {}) }),
-  danger: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(S, {}) }),
-  success: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(D, {}) }),
-  hint: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(f, {}) })
+  info: /* @__PURE__ */ e(l, { size: "20", glyph: /* @__PURE__ */ e(f, {}) }),
+  warning: /* @__PURE__ */ e(l, { size: "20", glyph: /* @__PURE__ */ e(w, {}) }),
+  danger: /* @__PURE__ */ e(l, { size: "20", glyph: /* @__PURE__ */ e(S, {}) }),
+  success: /* @__PURE__ */ e(l, { size: "20", glyph: /* @__PURE__ */ e(D, {}) }),
+  hint: /* @__PURE__ */ e(l, { size: "20", glyph: /* @__PURE__ */ e(f, {}) })
 };
 function V({
   className: p = "",
@@ -32,17 +32,17 @@ function V({
   secondaryActionLoading: z,
   onDismiss: m,
   dismissLabel: v = "Dismiss",
-  dismissButtonProps: o,
+  dismissButtonProps: n,
   ...y
 }) {
   const O = i[`section-notice--type-${t.toLowerCase()}`], k = [i["section-notice"], O, p].filter(Boolean).join(" "), d = r !== void 0 ? r : T[t], x = c != null || s != null;
-  return /* @__PURE__ */ l("div", { ...y, className: k, children: [
-    /* @__PURE__ */ l("div", { className: i["section-notice__content"], children: [
+  return /* @__PURE__ */ o("div", { ...y, className: k, children: [
+    /* @__PURE__ */ o("div", { className: i["section-notice__content"], children: [
       d != null && /* @__PURE__ */ e("span", { className: i["section-notice__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(j.Provider, { value: { size: "20" }, children: d }) }),
-      /* @__PURE__ */ l("div", { className: i["section-notice__body"], children: [
-        /* @__PURE__ */ e("p", { className: i["section-notice__title"], children: _ }),
+      /* @__PURE__ */ o("div", { className: i["section-notice__body"], children: [
+        /* @__PURE__ */ e("h4", { className: i["section-notice__title"], children: _ }),
         a != null && /* @__PURE__ */ e("div", { className: i["section-notice__description"], children: a }),
-        x && /* @__PURE__ */ l("div", { className: i["section-notice__actions"], children: [
+        x && /* @__PURE__ */ o("div", { className: i["section-notice__actions"], children: [
           c != null && /* @__PURE__ */ e(
             h,
             {
@@ -57,7 +57,7 @@ function V({
           s != null && /* @__PURE__ */ e(
             h,
             {
-              emphasis: "secondary",
+              emphasis: "tertiary",
               size: "small",
               disabled: u,
               loading: z,
@@ -71,14 +71,14 @@ function V({
     m != null && /* @__PURE__ */ e(
       A,
       {
-        ...o,
+        ...n,
         className: F(
           i["section-notice__dismiss"],
-          o == null ? void 0 : o.className
+          n == null ? void 0 : n.className
         ),
         "aria-label": v,
         size: "small",
-        icon: /* @__PURE__ */ e(n, { size: "16", glyph: /* @__PURE__ */ e(E, {}) }),
+        icon: /* @__PURE__ */ e(l, { size: "16", glyph: /* @__PURE__ */ e(E, {}) }),
         onClick: m
       }
     )

package/dist/components/section-notice/SectionNotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNotice.js","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} />` — SectionNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Title / headline. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: ReactNode;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Disables the primary action button. */\n  primaryActionDisabled?: boolean;\n  /** Shows a spinner in the primary action button and disables it. */\n  primaryActionLoading?: boolean;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: ReactNode;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Disables the secondary action button. */\n  secondaryActionDisabled?: boolean;\n  /** Shows a spinner in the secondary action button and disables it. */\n  secondaryActionLoading?: boolean;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  primaryActionDisabled,\n  primaryActionLoading,\n  secondaryActionDisabled,\n  secondaryActionLoading,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <p className={styles['section-notice__title']}>{title}</p>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  disabled={primaryActionDisabled}\n                  loading={primaryActionLoading}\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"secondary\"\n                  size=\"small\"\n                  disabled={secondaryActionDisabled}\n                  loading={secondaryActionLoading}\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['section-notice__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","primaryActionDisabled","primaryActionLoading","secondaryActionDisabled","secondaryActionLoading","onDismiss","dismissLabel","dismissButtonProps","rest","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","IconSlotContext","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"SectionNotice.js","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} />` — SectionNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Title / headline. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: ReactNode;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Disables the primary action button. */\n  primaryActionDisabled?: boolean;\n  /** Shows a spinner in the primary action button and disables it. */\n  primaryActionLoading?: boolean;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: ReactNode;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Disables the secondary action button. */\n  secondaryActionDisabled?: boolean;\n  /** Shows a spinner in the secondary action button and disables it. */\n  secondaryActionLoading?: boolean;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  primaryActionDisabled,\n  primaryActionLoading,\n  secondaryActionDisabled,\n  secondaryActionLoading,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <h4 className={styles['section-notice__title']}>{title}</h4>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  disabled={primaryActionDisabled}\n                  loading={primaryActionLoading}\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"tertiary\"\n                  size=\"small\"\n                  disabled={secondaryActionDisabled}\n                  loading={secondaryActionLoading}\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['section-notice__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","primaryActionDisabled","primaryActionLoading","secondaryActionDisabled","secondaryActionLoading","onDismiss","dismissLabel","dismissButtonProps","rest","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","IconSlotContext","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":"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"}

package/dist/components/section-notice/SectionNotice.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SectionNotice.css');const e={"section-notice":"_section-notice_853w8_2","section-notice__content":"_section-notice__content_853w8_11","section-notice__icon":"_section-notice__icon_853w8_18","section-notice__body":"_section-notice__body_853w8_25","section-notice__title":"_section-notice__title_853w8_34","section-notice__description":"_section-notice__description_853w8_41","section-notice__actions":"_section-notice__actions_853w8_47","section-notice__dismiss":"_section-notice__dismiss_853w8_53","section-notice--type-warning":"_section-notice--type-warning_853w8_58","section-notice--type-danger":"_section-notice--type-danger_853w8_65","section-notice--type-success":"_section-notice--type-success_853w8_72","section-notice--type-hint":"_section-notice--type-hint_853w8_79"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SectionNotice.css');const e={"section-notice":"_section-notice_1fkh6_2","section-notice__content":"_section-notice__content_1fkh6_11","section-notice__icon":"_section-notice__icon_1fkh6_18","section-notice__body":"_section-notice__body_1fkh6_25","section-notice__title":"_section-notice__title_1fkh6_34","section-notice__description":"_section-notice__description_1fkh6_45","section-notice__actions":"_section-notice__actions_1fkh6_51","section-notice__dismiss":"_section-notice__dismiss_1fkh6_57","section-notice--type-warning":"_section-notice--type-warning_1fkh6_62","section-notice--type-danger":"_section-notice--type-danger_1fkh6_69","section-notice--type-success":"_section-notice--type-success_1fkh6_76","section-notice--type-hint":"_section-notice--type-hint_1fkh6_83"};exports.default=e;
 //# sourceMappingURL=SectionNotice.module.scss.cjs.map

package/dist/components/section-notice/SectionNotice.module.scss.js

@@ -1,16 +1,16 @@
 import './SectionNotice.css';const t = {
-  "section-notice": "_section-notice_853w8_2",
-  "section-notice__content": "_section-notice__content_853w8_11",
-  "section-notice__icon": "_section-notice__icon_853w8_18",
-  "section-notice__body": "_section-notice__body_853w8_25",
-  "section-notice__title": "_section-notice__title_853w8_34",
-  "section-notice__description": "_section-notice__description_853w8_41",
-  "section-notice__actions": "_section-notice__actions_853w8_47",
-  "section-notice__dismiss": "_section-notice__dismiss_853w8_53",
-  "section-notice--type-warning": "_section-notice--type-warning_853w8_58",
-  "section-notice--type-danger": "_section-notice--type-danger_853w8_65",
-  "section-notice--type-success": "_section-notice--type-success_853w8_72",
-  "section-notice--type-hint": "_section-notice--type-hint_853w8_79"
+  "section-notice": "_section-notice_1fkh6_2",
+  "section-notice__content": "_section-notice__content_1fkh6_11",
+  "section-notice__icon": "_section-notice__icon_1fkh6_18",
+  "section-notice__body": "_section-notice__body_1fkh6_25",
+  "section-notice__title": "_section-notice__title_1fkh6_34",
+  "section-notice__description": "_section-notice__description_1fkh6_45",
+  "section-notice__actions": "_section-notice__actions_1fkh6_51",
+  "section-notice__dismiss": "_section-notice__dismiss_1fkh6_57",
+  "section-notice--type-warning": "_section-notice--type-warning_1fkh6_62",
+  "section-notice--type-danger": "_section-notice--type-danger_1fkh6_69",
+  "section-notice--type-success": "_section-notice--type-success_1fkh6_76",
+  "section-notice--type-hint": "_section-notice--type-hint_1fkh6_83"
 };
 export {
   t as default