npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.15 → 0.1.0-alpha.16 - Mend

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

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

Files changed (100) hide show

package/dist/components/radio/Radio.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_radio_1hdqa_2~~{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}.~~_radio__input_1hdqa_14~~{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}.~~_radio__input_1hdqa_14~~:focus-visible{outline:none}.~~_radio__circle_1hdqa_33~~{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}.~~_radio__input_1hdqa_14~~:focus-visible~.~~_radio__circle_1hdqa_33~~{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:not(:disabled)):hover .~~_radio__circle_1hdqa_33~~{border-color:rgba(var(--center-channel-color-rgb),.32)}.~~_radio__input_1hdqa_14~~:disabled~.~~_radio__circle_1hdqa_33~~{border-color:rgba(var(--center-channel-color-rgb),.16)}.~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}.~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~ .~~_radio__dot_1hdqa_59~~{background-color:var(--button-bg)}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:not(:disabled)):hover .~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~{border-color:var(--button-bg)}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:not(:disabled)):hover .~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~ .~~_radio__dot_1hdqa_59~~{background-color:var(--button-bg)}.~~_radio__input_1hdqa_14~~:focus-visible:checked~.~~_radio__circle_1hdqa_33~~{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}.~~_radio__input_1hdqa_14~~:disabled:checked~.~~_radio__circle_1hdqa_33~~{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}.~~_radio__input_1hdqa_14~~:disabled:checked~.~~_radio__circle_1hdqa_33~~ .~~_radio__dot_1hdqa_59~~{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--~~invalid_1hdqa_80~~ .~~_radio__circle_1hdqa_33~~{border-color:var(--error-text, var(--color-danger))}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:not(:disabled)):hover._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:not(:checked)~.~~_radio__circle_1hdqa_33~~{border-color:var(--error-text, var(--color-danger))}._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~ .~~_radio__dot_1hdqa_59~~{background-color:var(--error-text, var(--color-danger))}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:not(:disabled)):hover._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~{border-color:var(--error-text, var(--color-danger))}.~~_radio_1hdqa_2~~:has(.~~_radio__input_1hdqa_14~~:not(:disabled)):hover._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~ .~~_radio__dot_1hdqa_59~~{background-color:var(--error-text, var(--color-danger))}._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:focus-visible~.~~_radio__circle_1hdqa_33~~{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--~~invalid_1hdqa_80~~ .~~_radio__input_1hdqa_14~~:focus-visible:checked~.~~_radio__circle_1hdqa_33~~{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}.~~_radio__dot_1hdqa_59~~{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}.~~_radio__input_1hdqa_14~~:checked~.~~_radio__circle_1hdqa_33~~ .~~_radio__dot_1hdqa_59~~{transform:scale(1)}.~~_radio__label_1hdqa_116~~{line-height:1}._radio--size-~~small_1hdqa_119~~{gap:var(--spacing-xs)}._radio--size-~~small_1hdqa_119~~ .~~_radio__input_1hdqa_14~~,._radio--size-~~small_1hdqa_119~~ .~~_radio__circle_1hdqa_33~~{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._radio--size-~~small_1hdqa_119~~ .~~_radio__dot_1hdqa_59~~{width:6px;height:6px}._radio--size-~~small_1hdqa_119~~ .~~_radio__label_1hdqa_116~~{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-~~medium_1hdqa_140~~{gap:var(--spacing-xs)}._radio--size-~~medium_1hdqa_140~~ .~~_radio__input_1hdqa_14~~,._radio--size-~~medium_1hdqa_140~~ .~~_radio__circle_1hdqa_33~~{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._radio--size-~~medium_1hdqa_140~~ .~~_radio__dot_1hdqa_59~~{width:8px;height:8px}._radio--size-~~medium_1hdqa_140~~ .~~_radio__label_1hdqa_116~~{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-~~large_1hdqa_161~~{gap:var(--spacing-s)}._radio--size-~~large_1hdqa_161~~ .~~_radio__input_1hdqa_14~~,._radio--size-~~large_1hdqa_161~~ .~~_radio__circle_1hdqa_33~~{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._radio--size-~~large_1hdqa_161~~ .~~_radio__dot_1hdqa_59~~{width:10px;height:10px}._radio--size-~~large_1hdqa_161~~ .~~_radio__label_1hdqa_116~~{font-size:var(--font-size-200);line-height:var(--line-height-200)}
1	+ ._radio_h0rbb_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_h0rbb_2._radio_h0rbb_2{margin:0}._radio_h0rbb_2:has(._radio__input_h0rbb_17:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_h0rbb_17{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_h0rbb_17:focus-visible{outline:none}._radio__circle_h0rbb_36{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_h0rbb_17:focus-visible~._radio__circle_h0rbb_36{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover ._radio__circle_h0rbb_36{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_h0rbb_17:disabled~._radio__circle_h0rbb_36{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--button-bg)}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{border-color:var(--button-bg)}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--button-bg)}._radio__input_h0rbb_17:focus-visible:checked~._radio__circle_h0rbb_36{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_h0rbb_17:disabled:checked~._radio__circle_h0rbb_36{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_h0rbb_17:disabled:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_h0rbb_83 ._radio__circle_h0rbb_36{border-color:var(--error-text, var(--color-danger))}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:not(:checked)~._radio__circle_h0rbb_36{border-color:var(--error-text, var(--color-danger))}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--error-text, var(--color-danger))}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{border-color:var(--error-text, var(--color-danger))}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--error-text, var(--color-danger))}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:focus-visible~._radio__circle_h0rbb_36{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:focus-visible:checked~._radio__circle_h0rbb_36{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_h0rbb_62{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{transform:scale(1)}._radio__label_h0rbb_119{line-height:1}._radio--size-small_h0rbb_122{gap:var(--spacing-xs)}._radio--size-small_h0rbb_122 ._radio__input_h0rbb_17,._radio--size-small_h0rbb_122 ._radio__circle_h0rbb_36{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._radio--size-small_h0rbb_122 ._radio__dot_h0rbb_62{width:6px;height:6px}._radio--size-small_h0rbb_122 ._radio__label_h0rbb_119{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_h0rbb_143{gap:var(--spacing-xs)}._radio--size-medium_h0rbb_143 ._radio__input_h0rbb_17,._radio--size-medium_h0rbb_143 ._radio__circle_h0rbb_36{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._radio--size-medium_h0rbb_143 ._radio__dot_h0rbb_62{width:8px;height:8px}._radio--size-medium_h0rbb_143 ._radio__label_h0rbb_119{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_h0rbb_164{gap:var(--spacing-s)}._radio--size-large_h0rbb_164 ._radio__input_h0rbb_17,._radio--size-large_h0rbb_164 ._radio__circle_h0rbb_36{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._radio--size-large_h0rbb_164 ._radio__dot_h0rbb_62{width:10px;height:10px}._radio--size-large_h0rbb_164 ._radio__label_h0rbb_119{font-size:var(--font-size-200);line-height:var(--line-height-200)}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_1hdqa_2",i="_radio__input_1hdqa_14",a="_radio__circle_1hdqa_33",d="_radio__dot_1hdqa_59",o="_radio__label_1hdqa_116",r={radio:_,radio__input:i,radio__circle:a,radio__dot:d,"radio--invalid":"_radio--invalid_1hdqa_80",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"};exports.default=r;exports.radio=_;exports.radio__circle=a;exports.radio__dot=d;exports.radio__input=i;exports.radio__label=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_h0rbb_2",i="_radio__input_h0rbb_17",r="_radio__circle_h0rbb_36",o="_radio__dot_h0rbb_62",a="_radio__label_h0rbb_119",d={radio:_,radio__input:i,radio__circle:r,radio__dot:o,"radio--invalid":"_radio--invalid_h0rbb_83",radio__label:a,"radio--size-small":"_radio--size-small_h0rbb_122","radio--size-medium":"_radio--size-medium_h0rbb_143","radio--size-large":"_radio--size-large_h0rbb_164"};exports.default=d;exports.radio=_;exports.radio__circle=r;exports.radio__dot=o;exports.radio__input=i;exports.radio__label=a;
 //# sourceMappingURL=Radio.module.scss.cjs.map

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

@@ -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/section-notice/SectionNotice.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 <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 CHANGED Viewed

	@@ -1 +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)}
1	+ ._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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;AA2DA,MAAMA,IAAsD;AAAA,EAC1D,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,GAAI;AAAA,EACzD,2BAAUF,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACE,KAAuB,GAAI;AAAA,EAC5D,0BAASH,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACG,KAAiB,GAAI;AAAA,EACrD,2BAAUJ,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACI,KAAuB,GAAI;AAAA,EAC5D,wBAAOL,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,EAAA,CAAI;AAC3D;AAOA,SAAwBI,EAAc;AAAA,EACpC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAuB;AACrB,QAAMC,IAAYC,EAAO,wBAAwBjB,EAAK,YAAA,CAAa,EAAE,GAE/DkB,IAAY,CAACD,EAAO,gBAAgB,GAAGD,GAAWjB,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,GAELoB,IAAelB,MAAS,SAAYA,IAAOV,EAAcS,CAAI,GAE7DoB,IAAahB,KAAsB,QAAQE,KAAwB;AAEzE,SACE,gBAAAe,EAAC,OAAA,EAAK,GAAGN,GAAM,WAAWG,GACxB,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,MAAAE,KAAgB,QACf,gBAAA1B,EAAC,QAAA,EAAK,WAAWwB,EAAO,sBAAsB,GAAG,eAAW,IAC1D,4BAACK,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,MAEF,gBAAAD,EAAC,OAAA,EAAI,WAAWJ,EAAO,sBAAsB,GAC3C,UAAA;AAAA,QAAA,gBAAAxB,EAAC,~~KAAA~~,~~EAAE~~,WAAWwB,EAAO,uBAAuB,GAAI,UAAAf,GAAM;AAAA,~~QACrDC~~,KAAe,QACd,gBAAAV,EAAC,OAAA,EAAI,WAAWwB,EAAO,6BAA6B,GACjD,UAAAd,GACH;AAAA,QAEDiB,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,UAAAb,KAAsB,QACrB,gBAAAX;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,UAAUf;AAAA,cACV,SAASC;AAAA,cACT,SAASJ;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJE,KAAwB,QACvB,gBAAAb;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,UAAUb;AAAA,cACV,SAASC;AAAA,cACT,SAASJ;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACCM,KAAa,QACZ,gBAAAnB;AAAA,MAAC+B;AAAA,MAAA;AAAA,QACE,GAAGV;AAAA,QACJ,WAAWW;AAAA,UACTR,EAAO,yBAAyB;AAAA,UAChCH,KAAA,gBAAAA,EAAoB;AAAA,QAAA;AAAA,QAEtB,cAAYD;AAAA,QACZ,MAAK;AAAA,QACL,wBAAOrB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACiC,KAAU,GAAI;AAAA,QAC5C,SAASd;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
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 <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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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

package/dist/components/select/Select.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),n=require("react"),__xe=require("@mattermost/compass-icons/components/chevron-down.js"),xe=__xe?.default??__xe,U=require("../icon/Icon.cjs"),_e=require("../menu-item/MenuItem.cjs"),K=require("../popover-menu/PopoverMenu.cjs"),je=require("../../hooks/use-anchored-popup-portal.cjs"),ge=require("../../hooks/use-outside-close.cjs"),ke=require("../../hooks/use-popover-transition.cjs"),ye=require("../../utils/string.cjs"),l=require("./Select.module.scss.cjs"),L=280;function Ie({option:u,listboxId:b,selected:_,active:k,onSelect:v,onHover:y}){return c.jsx("li",{className:l.default.select__option,role:"presentation",children:c.jsx(_e.default,{id:`${b}-option-${u.value}`,role:"option",label:u.label,secondaryLabel:u.secondaryLabel,leadingElement:u.leadingVisual!=null,leadingVisual:u.leadingVisual,trailingElement:_,active:k,disabled:u.disabled,"aria-selected":_,onMouseDown:d=>d.preventDefault(),onMouseEnter:y,onPointerUp:()=>{u.disabled||v(u)}})})}const Pe=n.forwardRef(function({options:b,value:_,defaultValue:k="",onChange:v,placeholder:y,label:d,leadingIcon:I,size:G="medium",invalid:D=!1,disabled:h=!1,id:X,name:R,className:J="","aria-label":q,listboxLabel:Q="Options",portalContainer:W=null,zIndex:Y},j){const Z=n.useId(),P=X??Z,m=`${P}-listbox`,C=n.useRef(null),E=n.useRef(null),M=n.useRef(null),ee=n.useCallback(e=>{M.current=e,typeof j=="function"?j(e):j&&(j.current=e)},[j]),S=_!==void 0,[te,le]=n.useState(k),f=S?_:te,[a,N]=n.useState(!1),[se,O]=n.useState(!1),[i,p]=n.useState(-1),w=n.useMemo(()=>b.find(e=>e.value===f),[b,f]),o=n.useMemo(()=>b.filter(e=>e.value!==""),[b]),V=f!=="",{mounted:$,visible:ne}=ke.usePopoverTransition(a),{placement:ae,maxHeight:oe,style:ce,portalRef:A,renderPortal:re}=je.useAnchoredPopupPortal(E,$,{preferredHeight:L,maxHeightCap:L,portalContainer:W,zIndex:Y}),x=n.useCallback(()=>{N(!1),p(-1)},[]),g=n.useCallback(()=>{h||N(!0)},[h]);ge.useOutsideClose(C,a,x,A),n.useEffect(()=>{a&&p(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=o.findIndex(r=>r.value===f);if(t>=0)return t;const s=o.findIndex(r=>!r.disabled);return s>=0?s:0})},[a,o,f]);const H=n.useCallback(e=>{S||le(e),v==null||v(e)},[S,v]),B=n.useCallback(e=>{var t;e.disabled||(H(e.value),x(),(t=M.current)==null||t.focus())},[H,x]),F=n.useCallback(e=>{const t=o.map((s,r)=>({o:s,i:r})).filter(({o:s})=>!s.disabled);if(t.length===0){p(-1);return}p(s=>{const r=t.findIndex(({i:me})=>me===s),he=r<0?e>0?0:t.length-1:(r+e+t.length)%t.length;return t[he].i})},[o]);n.useEffect(()=>{var s;if(!a||i<0)return;const e=o[i];if(!e)return;const t=document.getElementById(`${m}-option-${e.value}`);(s=t==null?void 0:t.scrollIntoView)==null||s.call(t,{block:"nearest"})},[a,i,o,m]);const ue=e=>{var t;if(!h)switch(e.key){case"ArrowDown":e.preventDefault(),a?F(1):g();break;case"ArrowUp":e.preventDefault(),a?F(-1):g();break;case"Home":if(a&&o.length>0){e.preventDefault();const s=o.findIndex(r=>!r.disabled);p(s>=0?s:0)}break;case"End":if(a&&o.length>0){e.preventDefault();for(let s=o.length-1;s>=0;s--)if(!((t=o[s])!=null&&t.disabled)){p(s);break}}break;case"Enter":case" ":e.preventDefault(),a&&i>=0&&o[i]?B(o[i]):a||g();break;case"Escape":a&&(e.preventDefault(),x());break;case"Tab":x();break}},ie=se||a||V,T=(w==null?void 0:w.label)??y??"",de=!V&&T!=="",z=i>=0?o[i]:void 0,fe=a&&z!=null?`${m}-option-${z.value}`:void 0,pe=l.default[`select--size-${ye.toKebab(G)}`],be=[l.default.select,pe,D?l.default["select--invalid"]:"",d!=null&&ie?l.default["select--label-floated"]:"",I!=null?l.default["select--has-leading-icon"]:"",a?l.default["select--open"]:"",h?l.default["select--disabled"]:"",J].filter(Boolean).join(" "),ve=[l.default.select__control,de?l.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return c.jsxs("div",{className:be,ref:C,children:[c.jsxs("div",{className:l.default.select__wrapper,ref:E,children:[d!=null&&c.jsx("label",{className:l.default.select__label,htmlFor:P,children:d}),c.jsxs("button",{ref:ee,id:P,type:"button",role:"combobox",className:ve,disabled:h,"aria-haspopup":"listbox","aria-expanded":a,"aria-controls":m,"aria-activedescendant":fe,"aria-invalid":D?!0:void 0,"aria-label":q,onClick:()=>a?x():g(),onFocus:()=>O(!0),onBlur:()=>O(!1),onKeyDown:ue,children:[I!=null&&c.jsx("span",{className:l.default["select__leading-icon"],"aria-hidden":!0,children:c.jsx(U.IconSlotContext.Provider,{value:{size:"16"},children:I})}),c.jsx("span",{className:l.default.select__value,children:T}),c.jsx("span",{className:l.default["select__trailing-icon"],"aria-hidden":!0,children:c.jsx(U.default,{size:"12",glyph:c.jsx(xe,{})})})]})]}),R!=null&&!h&&c.jsx("input",{type:"hidden",name:R,value:f}),$&&re(c.jsx("div",{ref:A,className:[l.default.select__popup,ae==="above"?l.default["select__popup--above"]:"",ne?l.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:ce,children:c.jsx(K.default,{className:l.default.select__menu,children:c.jsx(K.PopoverMenuScroll,{maxHeight:oe,children:c.jsx("ul",{id:m,className:l.default.select__list,role:"listbox","aria-label":typeof d=="string"?d:q??Q,children:o.map((e,t)=>c.jsx(Ie,{option:e,listboxId:m,selected:e.value===f,active:t===i,onSelect:B,onHover:()=>p(t)},e.value))})})})}))]})});exports.default=Pe;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),s=require("react"),__Pe=require("@mattermost/compass-icons/components/chevron-down.js"),Pe=__Pe?.default??__Pe,G=require("../icon/Icon.cjs"),ge=require("../menu-item/MenuItem.cjs"),M=require("../popover-menu/PopoverMenu.cjs"),ke=require("../../hooks/use-anchored-popup-portal.cjs"),Ie=require("../../hooks/use-outside-close.cjs"),ye=require("../../hooks/use-popover-transition.cjs"),Se=require("../../utils/menuItemProps.cjs"),we=require("../../utils/string.cjs"),n=require("./Select.module.scss.cjs"),X=280;function De({option:u,menuItemProps:v,listboxId:I,selected:_,active:y,onSelect:b,onHover:S,dividerAfter:d=!1}){return l.jsxs(l.Fragment,{children:[l.jsx("li",{className:n.default.select__option,role:"presentation",children:l.jsx(ge.default,{...Se.mergeMenuItemProps(v,u.menuItemProps),id:`${I}-option-${u.value}`,role:"option",label:u.label,secondaryLabel:u.secondaryLabel,leadingElement:u.leadingVisual!=null,leadingVisual:u.leadingVisual,trailingElement:_,active:y,disabled:u.disabled,"aria-selected":_,onMouseDown:j=>j.preventDefault(),onMouseEnter:S,onPointerUp:()=>{u.disabled||b(u)}})}),d?l.jsx("li",{role:"presentation",children:l.jsx(M.PopoverMenuDivider,{"aria-hidden":"true"})}):null]})}const Re=s.forwardRef(function({options:v,menuItemProps:I,value:_,defaultValue:y="",onChange:b,placeholder:S,label:d,leadingIcon:j,size:J="medium",invalid:q=!1,disabled:h=!1,id:Q,name:C,className:W="","aria-label":E,listboxLabel:Y="Options",portalContainer:Z=null,zIndex:ee},P){const te=s.useId(),w=Q??te,m=`${w}-listbox`,N=s.useRef(null),O=s.useRef(null),A=s.useRef(null),le=s.useCallback(e=>{A.current=e,typeof P=="function"?P(e):P&&(P.current=e)},[P]),D=_!==void 0,[se,ne]=s.useState(y),f=D?_:se,[r,V]=s.useState(!1),[ae,$]=s.useState(!1),[c,p]=s.useState(-1),g=s.useRef(!1),re=s.useCallback(e=>{e!==c&&(g.current=!0,p(e))},[c]),R=s.useMemo(()=>v.find(e=>e.value===f),[v,f]),o=s.useMemo(()=>v.filter(e=>e.value!==""),[v]),B=f!=="",{mounted:H,visible:oe}=ye.usePopoverTransition(r),{placement:ce,maxHeight:ue,style:ie,portalRef:F,renderPortal:de}=ke.useAnchoredPopupPortal(O,H,{preferredHeight:X,maxHeightCap:X,portalContainer:Z,zIndex:ee}),x=s.useCallback(()=>{V(!1),p(-1)},[]),k=s.useCallback(()=>{h||V(!0)},[h]);Ie.useOutsideClose(N,r,x,F),s.useEffect(()=>{r&&p(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=o.findIndex(i=>i.value===f);if(t>=0)return t;const a=o.findIndex(i=>!i.disabled);return a>=0?a:0})},[r,o,f]);const T=s.useCallback(e=>{D||ne(e),b==null||b(e)},[D,b]),z=s.useCallback(e=>{var t;e.disabled||(T(e.value),x(),(t=A.current)==null||t.focus())},[T,x]),U=s.useCallback(e=>{g.current=!1;const t=o.map((a,i)=>({o:a,i})).filter(({o:a})=>!a.disabled);if(t.length===0){p(-1);return}p(a=>{const i=t.findIndex(({i:je})=>je===a),_e=i<0?e>0?0:t.length-1:(i+e+t.length)%t.length;return t[_e].i})},[o]);s.useEffect(()=>{var a;if(!r||c<0)return;if(g.current){g.current=!1;return}const e=o[c];if(!e)return;const t=document.getElementById(`${m}-option-${e.value}`);(a=t==null?void 0:t.scrollIntoView)==null||a.call(t,{block:"nearest"})},[r,c,o,m]);const fe=e=>{var t;if(!h)switch(e.key){case"ArrowDown":e.preventDefault(),r?U(1):k();break;case"ArrowUp":e.preventDefault(),r?U(-1):k();break;case"Home":if(r&&o.length>0){e.preventDefault();const a=o.findIndex(i=>!i.disabled);p(a>=0?a:0)}break;case"End":if(r&&o.length>0){e.preventDefault();for(let a=o.length-1;a>=0;a--)if(!((t=o[a])!=null&&t.disabled)){p(a);break}}break;case"Enter":case" ":e.preventDefault(),r&&c>=0&&o[c]?z(o[c]):r||k();break;case"Escape":r&&(e.preventDefault(),x());break;case"Tab":x();break}},pe=ae||r||B,K=(R==null?void 0:R.label)??S??"",ve=!B&&K!=="",L=c>=0?o[c]:void 0,be=r&&L!=null?`${m}-option-${L.value}`:void 0,he=n.default[`select--size-${we.toKebab(J)}`],me=[n.default.select,he,q?n.default["select--invalid"]:"",d!=null&&pe?n.default["select--label-floated"]:"",j!=null?n.default["select--has-leading-icon"]:"",r?n.default["select--open"]:"",h?n.default["select--disabled"]:"",W].filter(Boolean).join(" "),xe=[n.default.select__control,ve?n.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return l.jsxs("div",{className:me,ref:N,children:[l.jsxs("div",{className:n.default.select__wrapper,ref:O,children:[d!=null&&l.jsx("label",{className:n.default.select__label,htmlFor:w,children:d}),l.jsxs("button",{ref:le,id:w,type:"button",role:"combobox",className:xe,disabled:h,"aria-haspopup":"listbox","aria-expanded":r,"aria-controls":m,"aria-activedescendant":be,"aria-invalid":q?!0:void 0,"aria-label":E,onClick:()=>r?x():k(),onFocus:()=>$(!0),onBlur:()=>$(!1),onKeyDown:fe,children:[j!=null&&l.jsx("span",{className:n.default["select__leading-icon"],"aria-hidden":!0,children:l.jsx(G.IconSlotContext.Provider,{value:{size:"16"},children:j})}),l.jsx("span",{className:n.default.select__value,children:K}),l.jsx("span",{className:n.default["select__trailing-icon"],"aria-hidden":!0,children:l.jsx(G.default,{size:"12",glyph:l.jsx(Pe,{})})})]})]}),C!=null&&!h&&l.jsx("input",{type:"hidden",name:C,value:f}),H&&de(l.jsx("div",{ref:F,className:[n.default.select__popup,ce==="above"?n.default["select__popup--above"]:"",oe?n.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:ie,children:l.jsx(M.default,{className:n.default.select__menu,children:l.jsx(M.PopoverMenuScroll,{maxHeight:ue,children:l.jsx("ul",{id:m,className:n.default.select__list,role:"listbox","aria-label":typeof d=="string"?d:E??Y,children:o.map((e,t)=>l.jsx(De,{option:e,menuItemProps:I,listboxId:m,selected:e.value===f,active:t===c,onSelect:z,onHover:()=>re(t),dividerAfter:e.dividerAfter},e.value))})})})}))]})});exports.default=Re;
 //# sourceMappingURL=Select.cjs.map

package/dist/components/select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' \| 'medium' \| 'large';\n\nexport type SelectOption = {\n value: string;\n /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. /\n label: string;\n disabled?: boolean;\n leadingVisual?: ReactNode;\n /* Accepts translated nodes. /\n secondaryLabel?: ReactNode;\n};\n\nexport interface SelectProps {\n options: SelectOption[];\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /* Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. /\n placeholder?: string;\n label?: ReactNode;\n /* Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. /\n leadingIcon?: ReactNode;\n size?: SelectSize;\n invalid?: boolean;\n disabled?: boolean;\n id?: string;\n name?: string;\n className?: string;\n 'aria-label'?: string;\n /\n Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n /\n listboxLabel?: string;\n /* Portal mount node for the menu; defaults to `document.body`. /\n portalContainer?: HTMLElement \| null;\n /* Stacking order for the portaled menu. /\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nfunction SelectOptionRow({\n option,\n listboxId,\n selected,\n active,\n onSelect,\n onHover,\n}: {\n option: SelectOption;\n listboxId: string;\n selected: boolean;\n active: boolean;\n onSelect: (option: SelectOption) => void;\n onHover: () => void;\n}) {\n return (\n <li className={styles.select__option} role=\"presentation\">\n <MenuItem\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={option.leadingVisual != null}\n leadingVisual={option.leadingVisual}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => ev.preventDefault()}\n onMouseEnter={onHover}\n onPointerUp={() => {\n if (!option.disabled) onSelect(option);\n }}\n />\n </li>\n );\n}\n\n/\n { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n value: valueProp,\n defaultValue = '',\n onChange,\n placeholder,\n label,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n id: idProp,\n name,\n className = '',\n 'aria-label': ariaLabel,\n listboxLabel = 'Options',\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n\n const setButtonRef = useCallback(\n (node: HTMLButtonElement \| null) => {\n buttonRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const value = isControlled ? valueProp! : uncontrolledValue;\n\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const selectedOption = useMemo(\n () => options.find((o) => o.value === value),\n [options, value],\n );\n\n const listOptions = useMemo(\n () => options.filter((o) => o.value !== ''),\n [options],\n );\n\n const hasValue = value !== '';\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (listOptions.length === 0) return -1;\n if (prev >= 0 && prev < listOptions.length) return prev;\n const selectedIdx = listOptions.findIndex((o) => o.value === value);\n if (selectedIdx >= 0) return selectedIdx;\n const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n return firstEnabled >= 0 ? firstEnabled : 0;\n });\n }, [isOpen, listOptions, value]);\n\n const commitValue = useCallback(\n (next: string) => {\n if (!isControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n const selectOption = useCallback(\n (option: SelectOption) => {\n if (option.disabled) return;\n commitValue(option.value);\n close();\n buttonRef.current?.focus();\n },\n [commitValue, close],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n const enabled = listOptions\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled);\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [listOptions],\n );\n\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return;\n const option = listOptions[activeIndex];\n if (!option) return;\n const el = document.getElementById(`${listboxId}-option-${option.value}`);\n el?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, listOptions, listboxId]);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n const idx = listOptions.findIndex((o) => !o.disabled);\n setActiveIndex(idx >= 0 ? idx : 0);\n }\n break;\n case 'End':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n for (let i = listOptions.length - 1; i >= 0; i--) {\n if (!listOptions[i]?.disabled) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n selectOption(listOptions[activeIndex]);\n } else if (!isOpen) {\n open();\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const labelFloated = isFocused \|\| isOpen \|\| hasValue;\n const displayLabel = selectedOption?.label ?? placeholder ?? '';\n const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n const activeOption = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n const activeDescendant =\n isOpen && activeOption != null\n ? `${listboxId}-option-${activeOption.value}`\n : undefined;\n\n const sizeClass = styles[`select--size-${toKebab(size)}`];\n const rootClass = [\n styles.select,\n sizeClass,\n invalid ? styles['select--invalid'] : '',\n label != null && labelFloated ? styles['select--label-floated'] : '',\n leadingIcon != null ? styles['select--has-leading-icon'] : '',\n isOpen ? styles['select--open'] : '',\n disabled ? styles['select--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const controlClass = [\n styles.select__control,\n showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.select__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.select__label} htmlFor={id}>\n {label}\n </label>\n )}\n <button\n ref={setButtonRef}\n id={id}\n type=\"button\"\n role=\"combobox\"\n className={controlClass}\n disabled={disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-activedescendant={activeDescendant}\n aria-invalid={invalid ? true : undefined}\n aria-label={ariaLabel}\n onClick={() => (isOpen ? close() : open())}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon != null && (\n <span className={styles['select__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <span className={styles.select__value}>{displayLabel}</span>\n <span className={styles['select__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </button>\n </div>\n\n {name != null && !disabled && (\n <input type=\"hidden\" name={name} value={value} />\n )}\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.select__popup,\n placement === 'above' ? styles['select__popup--above'] : '',\n popupVisible ? styles['select__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.select__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n <ul\n id={listboxId}\n className={styles.select__list}\n role=\"listbox\"\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {listOptions.map((option, index) => (\n <SelectOptionRow\n key={option.value}\n option={option}\n listboxId={listboxId}\n selected={option.value === value}\n active={index === activeIndex}\n onSelect={selectOption}\n onHover={() => setActiveIndex(index)}\n />\n ))}\n </ul>\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","listboxId","selected","active","onSelect","onHover","styles","jsx","MenuItem","ev","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","i","currentPos","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","jsxs","IconSlotContext","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuDivider,\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' \| 'medium' \| 'large';\n\n// Select rows use `onPointerUp`, so `onClick` is left for callers.\ntype SelectMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onClick'>\n>;\n\nexport type SelectOption = {\n value: string;\n /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. /\n label: string;\n disabled?: boolean;\n leadingVisual?: ReactNode;\n /* Accepts translated nodes. /\n secondaryLabel?: ReactNode;\n /* When true, renders a menu divider after this option. /\n dividerAfter?: boolean;\n /\n Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Select; the props Select owns (ARIA, selection, handlers) can't be set.\n /\n menuItemProps?: SelectMenuItemProps;\n};\n\nexport interface SelectProps {\n options: SelectOption[];\n /\n `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins.\n /\n menuItemProps?: SelectMenuItemProps;\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /* Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. /\n placeholder?: string;\n label?: ReactNode;\n /* Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. /\n leadingIcon?: ReactNode;\n size?: SelectSize;\n invalid?: boolean;\n disabled?: boolean;\n id?: string;\n name?: string;\n className?: string;\n 'aria-label'?: string;\n /\n Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n /\n listboxLabel?: string;\n /* Portal mount node for the menu; defaults to `document.body`. /\n portalContainer?: HTMLElement \| null;\n /* Stacking order for the portaled menu. /\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nfunction SelectOptionRow({\n option,\n menuItemProps,\n listboxId,\n selected,\n active,\n onSelect,\n onHover,\n dividerAfter = false,\n}: {\n option: SelectOption;\n menuItemProps?: SelectMenuItemProps;\n listboxId: string;\n selected: boolean;\n active: boolean;\n onSelect: (option: SelectOption) => void;\n onHover: () => void;\n dividerAfter?: boolean;\n}) {\n return (\n <>\n <li className={styles.select__option} role=\"presentation\">\n <MenuItem\n {...mergeMenuItemProps(menuItemProps, option.menuItemProps)}\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={option.leadingVisual != null}\n leadingVisual={option.leadingVisual}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => ev.preventDefault()}\n onMouseEnter={onHover}\n onPointerUp={() => {\n if (!option.disabled) onSelect(option);\n }}\n />\n </li>\n {dividerAfter ? (\n <li role=\"presentation\">\n <PopoverMenuDivider aria-hidden=\"true\" />\n </li>\n ) : null}\n </>\n );\n}\n\n/\n { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n menuItemProps,\n value: valueProp,\n defaultValue = '',\n onChange,\n placeholder,\n label,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n id: idProp,\n name,\n className = '',\n 'aria-label': ariaLabel,\n listboxLabel = 'Options',\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n\n const setButtonRef = useCallback(\n (node: HTMLButtonElement \| null) => {\n buttonRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const value = isControlled ? valueProp! : uncontrolledValue;\n\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n\n const selectedOption = useMemo(\n () => options.find((o) => o.value === value),\n [options, value],\n );\n\n const listOptions = useMemo(\n () => options.filter((o) => o.value !== ''),\n [options],\n );\n\n const hasValue = value !== '';\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (listOptions.length === 0) return -1;\n if (prev >= 0 && prev < listOptions.length) return prev;\n const selectedIdx = listOptions.findIndex((o) => o.value === value);\n if (selectedIdx >= 0) return selectedIdx;\n const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n return firstEnabled >= 0 ? firstEnabled : 0;\n });\n }, [isOpen, listOptions, value]);\n\n const commitValue = useCallback(\n (next: string) => {\n if (!isControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n const selectOption = useCallback(\n (option: SelectOption) => {\n if (option.disabled) return;\n commitValue(option.value);\n close();\n buttonRef.current?.focus();\n },\n [commitValue, close],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = listOptions\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled);\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [listOptions],\n );\n\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const option = listOptions[activeIndex];\n if (!option) return;\n const el = document.getElementById(`${listboxId}-option-${option.value}`);\n el?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, listOptions, listboxId]);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n const idx = listOptions.findIndex((o) => !o.disabled);\n setActiveIndex(idx >= 0 ? idx : 0);\n }\n break;\n case 'End':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n for (let i = listOptions.length - 1; i >= 0; i--) {\n if (!listOptions[i]?.disabled) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n selectOption(listOptions[activeIndex]);\n } else if (!isOpen) {\n open();\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const labelFloated = isFocused \|\| isOpen \|\| hasValue;\n const displayLabel = selectedOption?.label ?? placeholder ?? '';\n const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n const activeOption = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n const activeDescendant =\n isOpen && activeOption != null\n ? `${listboxId}-option-${activeOption.value}`\n : undefined;\n\n const sizeClass = styles[`select--size-${toKebab(size)}`];\n const rootClass = [\n styles.select,\n sizeClass,\n invalid ? styles['select--invalid'] : '',\n label != null && labelFloated ? styles['select--label-floated'] : '',\n leadingIcon != null ? styles['select--has-leading-icon'] : '',\n isOpen ? styles['select--open'] : '',\n disabled ? styles['select--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const controlClass = [\n styles.select__control,\n showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.select__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.select__label} htmlFor={id}>\n {label}\n </label>\n )}\n <button\n ref={setButtonRef}\n id={id}\n type=\"button\"\n role=\"combobox\"\n className={controlClass}\n disabled={disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-activedescendant={activeDescendant}\n aria-invalid={invalid ? true : undefined}\n aria-label={ariaLabel}\n onClick={() => (isOpen ? close() : open())}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon != null && (\n <span className={styles['select__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <span className={styles.select__value}>{displayLabel}</span>\n <span className={styles['select__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </button>\n </div>\n\n {name != null && !disabled && (\n <input type=\"hidden\" name={name} value={value} />\n )}\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.select__popup,\n placement === 'above' ? styles['select__popup--above'] : '',\n popupVisible ? styles['select__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.select__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n <ul\n id={listboxId}\n className={styles.select__list}\n role=\"listbox\"\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {listOptions.map((option, index) => (\n <SelectOptionRow\n key={option.value}\n option={option}\n menuItemProps={menuItemProps}\n listboxId={listboxId}\n selected={option.value === value}\n active={index === activeIndex}\n onSelect={selectOption}\n onHover={() => hoverRow(index)}\n dividerAfter={option.dividerAfter}\n />\n ))}\n </ul>\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","menuItemProps","listboxId","selected","active","onSelect","onHover","dividerAfter","jsxs","Fragment","jsx","styles","MenuItem","mergeMenuItemProps","ev","PopoverMenuDivider","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","currentPos","i","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","IconSlotContext","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll"],"mappings":"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"}

package/dist/components/select/Select.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_select_h9fbq_2~~{position:relative;display:flex;flex-direction:column;width:100%}.~~_select__wrapper_h9fbq_8~~{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:pointer}.~~_select_h9fbq_2~~:not(._select--~~disabled_h9fbq_16~~):hover:not(:focus-within) .~~_select__wrapper_h9fbq_8~~{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}.~~_select_h9fbq_2~~:focus-within .~~_select__wrapper_h9fbq_8~~{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._select--~~disabled_h9fbq_16~~ .~~_select__wrapper_h9fbq_8~~{opacity:.56;cursor:not-allowed}.~~_select__label_h9fbq_26~~{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}.~~_select_h9fbq_2~~:focus-within .~~_select__label_h9fbq_26~~{color:var(--button-bg)}.~~_select__control_h9fbq_56~~{display:flex;align-items:center;width:100%;margin:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color);text-align:left;cursor:pointer;gap:var(--spacing-xs)}.~~_select__control_h9fbq_56~~:focus{outline:none}.~~_select__control_h9fbq_56~~:focus-visible{outline:none}.~~_select__control_h9fbq_56~~:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._select__control--~~placeholder_h9fbq_82~~ .~~_select__value_h9fbq_82~~{color:rgba(var(--center-channel-color-rgb),.64)}.~~_select__value_h9fbq_82~~{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._select__leading-~~icon_h9fbq_92~~{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._select__trailing-~~icon_h9fbq_99~~{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._select--~~open_h9fbq_108~~ ._select__trailing-~~icon_h9fbq_99~~{transform:rotate(180deg)}.~~_select__popup_h9fbq_111~~{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._select__popup--~~above_h9fbq_118~~{transform-origin:bottom center}._select__popup--~~visible_h9fbq_121~~{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}.~~_select__menu_h9fbq_127~~{width:100%;min-width:100%;max-width:none}.~~_select__list_h9fbq_132~~{margin:0;padding:0;list-style:none}.~~_select__option_h9fbq_137~~{display:block;width:100%;list-style:none}.~~_select__option_h9fbq_137~~[aria-disabled=true]{cursor:not-allowed}._select__option-content--~~disabled_h9fbq_145~~{opacity:.4}._select--size-~~small_h9fbq_148~~ .~~_select__wrapper_h9fbq_8~~{min-height:32px}._select--size-~~small_h9fbq_148~~ .~~_select__control_h9fbq_56~~{padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-75)}._select--size-~~small_h9fbq_148~~ ._select__trailing-~~icon_h9fbq_99~~ svg{width:var(--icon-size-12);height:var(--icon-size-12)}._select--size-~~small_h9fbq_148~~._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._select--size-~~medium_h9fbq_167~~ .~~_select__wrapper_h9fbq_8~~{min-height:40px}._select--size-~~medium_h9fbq_167~~ .~~_select__control_h9fbq_56~~{padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-100);line-height:var(--line-height-100)}._select--size-~~medium_h9fbq_167~~ .~~_select__label_h9fbq_26~~{font-size:var(--font-size-100);left:var(--spacing-m)}._select--size-~~medium_h9fbq_167~~ ._select__trailing-~~icon_h9fbq_99~~ svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-~~medium_h9fbq_167~~._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._select--size-~~large_h9fbq_190~~ .~~_select__wrapper_h9fbq_8~~{min-height:48px}._select--size-~~large_h9fbq_190~~ .~~_select__control_h9fbq_56~~{padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200)}._select--size-~~large_h9fbq_190~~ .~~_select__label_h9fbq_26~~{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._select--size-~~large_h9fbq_190~~ ._select__trailing-~~icon_h9fbq_99~~ svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-~~large_h9fbq_190~~._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}.~~_select_h9fbq_2~~:has(.~~_select__label_h9fbq_26~~):not(._select--label-~~floated_h9fbq_47~~) .~~_select__value_h9fbq_82~~{color:transparent}._select--~~invalid_h9fbq_217~~ .~~_select__wrapper_h9fbq_8~~{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._select--~~invalid_h9fbq_217~~:focus-within .~~_select__wrapper_h9fbq_8~~{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._select--~~invalid_h9fbq_217~~ .~~_select__label_h9fbq_26~~{color:var(--error-text, var(--color-danger))}._select--~~invalid_h9fbq_217~~:focus-within .~~_select__label_h9fbq_26~~{color:var(--error-text, var(--color-danger))}._select--has-leading-~~icon_h9fbq_229~~ .~~_select__label_h9fbq_26~~{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-xs) - var(--spacing-xxxs))}._select--has-leading-~~icon_h9fbq_229~~._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~{left:var(--spacing-xs)}._select--has-leading-~~icon_h9fbq_229~~._select--size-~~medium_h9fbq_167~~ .~~_select__label_h9fbq_26~~,._select--has-leading-~~icon_h9fbq_229~~._select--size-~~large_h9fbq_190~~ .~~_select__label_h9fbq_26~~{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-s))}._select--has-leading-~~icon_h9fbq_229~~._select--size-~~medium_h9fbq_167~~._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~,._select--has-leading-~~icon_h9fbq_229~~._select--size-~~large_h9fbq_190~~._select--label-~~floated_h9fbq_47~~ .~~_select__label_h9fbq_26~~{left:var(--spacing-m)}
1	+ ._select_1udb3_2{position:relative;display:flex;flex-direction:column;width:100%}._select__wrapper_1udb3_8{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:pointer}._select_1udb3_2:not(._select--disabled_1udb3_16):hover:not(:focus-within) ._select__wrapper_1udb3_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._select_1udb3_2:focus-within ._select__wrapper_1udb3_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._select--disabled_1udb3_16 ._select__wrapper_1udb3_8{opacity:.56;cursor:not-allowed}._select__label_1udb3_26{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._select--label-floated_1udb3_47 ._select__label_1udb3_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._select_1udb3_2:focus-within ._select__label_1udb3_26{color:var(--button-bg)}._select__control_1udb3_56{display:flex;align-items:center;width:100%;margin:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color);text-align:left;cursor:pointer;gap:var(--spacing-xs)}._select__control_1udb3_56:focus{outline:none}._select__control_1udb3_56:focus-visible{outline:none}._select__control_1udb3_56:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._select__control--placeholder_1udb3_82 ._select__value_1udb3_82{color:rgba(var(--center-channel-color-rgb),.64)}._select__value_1udb3_82{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._select__leading-icon_1udb3_92{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._select__trailing-icon_1udb3_99{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._select--open_1udb3_108 ._select__trailing-icon_1udb3_99{transform:rotate(180deg)}._select__popup_1udb3_111{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._select__popup--above_1udb3_118{transform-origin:bottom center}._select__popup--visible_1udb3_121{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._select__popup_1udb3_111 ._select__menu_1udb3_127{width:100%;min-width:100%;max-width:none}._select__list_1udb3_132{margin:0;padding:0;list-style:none}._select__option_1udb3_137{display:block;width:100%;list-style:none}._select__option_1udb3_137[aria-disabled=true]{cursor:not-allowed}._select__option-content--disabled_1udb3_145{opacity:.4}._select--size-small_1udb3_148 ._select__wrapper_1udb3_8{min-height:32px}._select--size-small_1udb3_148 ._select__control_1udb3_56{padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-75)}._select--size-small_1udb3_148 ._select__trailing-icon_1udb3_99 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._select--size-small_1udb3_148._select--label-floated_1udb3_47 ._select__label_1udb3_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._select--size-medium_1udb3_167 ._select__wrapper_1udb3_8{min-height:40px}._select--size-medium_1udb3_167 ._select__control_1udb3_56{padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-100);line-height:var(--line-height-100)}._select--size-medium_1udb3_167 ._select__label_1udb3_26{font-size:var(--font-size-100);left:var(--spacing-m)}._select--size-medium_1udb3_167 ._select__trailing-icon_1udb3_99 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-medium_1udb3_167._select--label-floated_1udb3_47 ._select__label_1udb3_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._select--size-large_1udb3_190 ._select__wrapper_1udb3_8{min-height:48px}._select--size-large_1udb3_190 ._select__control_1udb3_56{padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200)}._select--size-large_1udb3_190 ._select__label_1udb3_26{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._select--size-large_1udb3_190 ._select__trailing-icon_1udb3_99 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-large_1udb3_190._select--label-floated_1udb3_47 ._select__label_1udb3_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._select_1udb3_2:has(._select__label_1udb3_26):not(._select--label-floated_1udb3_47) ._select__value_1udb3_82{color:transparent}._select--invalid_1udb3_217 ._select__wrapper_1udb3_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._select--invalid_1udb3_217:focus-within ._select__wrapper_1udb3_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._select--invalid_1udb3_217 ._select__label_1udb3_26{color:var(--error-text, var(--color-danger))}._select--invalid_1udb3_217:focus-within ._select__label_1udb3_26{color:var(--error-text, var(--color-danger))}._select--has-leading-icon_1udb3_229 ._select__label_1udb3_26{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-xs) - var(--spacing-xxxs))}._select--has-leading-icon_1udb3_229._select--label-floated_1udb3_47 ._select__label_1udb3_26{left:var(--spacing-xs)}._select--has-leading-icon_1udb3_229._select--size-medium_1udb3_167 ._select__label_1udb3_26,._select--has-leading-icon_1udb3_229._select--size-large_1udb3_190 ._select__label_1udb3_26{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-s))}._select--has-leading-icon_1udb3_229._select--size-medium_1udb3_167._select--label-floated_1udb3_47 ._select__label_1udb3_26,._select--has-leading-icon_1udb3_229._select--size-large_1udb3_190._select--label-floated_1udb3_47 ._select__label_1udb3_26{left:var(--spacing-m)}

package/dist/components/select/Select.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
+import { MenuItemOwnedProps, MenuItemPassthroughProps } from '../menu-item/MenuItem';
 export type SelectSize = 'small' | 'medium' | 'large';
+type SelectMenuItemProps = MenuItemPassthroughProps<Exclude<MenuItemOwnedProps, 'onClick'>>;
 export type SelectOption = {
     value: string;
     /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. */
@@ -8,9 +10,23 @@ export type SelectOption = {
     leadingVisual?: ReactNode;
     /** Accepts translated nodes. */
     secondaryLabel?: ReactNode;
+    /** When true, renders a menu divider after this option. */
+    dividerAfter?: boolean;
+    /**
+     * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,
+     * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the
+     * Select; the props Select owns (ARIA, selection, handlers) can't be set.
+     */
+    menuItemProps?: SelectMenuItemProps;
 };
 export interface SelectProps {
     options: SelectOption[];
+    /**
+     * `MenuItem` props applied to every option row, e.g.
+     * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own
+     * `menuItemProps` wins.
+     */
+    menuItemProps?: SelectMenuItemProps;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;

package/dist/components/select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAuBtD~~,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;~~AAEtD~~,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;~~CAC5B~~,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;~~AA0CD~~;;;GAGG;AACH,QAAA,MAAM,MAAM,~~2GAiUV~~,CAAC;AAEH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AActD,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,gCAAgC,CAAC;AAYxC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,wBAAwB,CACjD,OAAO,CAAC,kBAAkB,EAAE,SAAS,CAAC,CACvC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsDD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GAmVV,CAAC;AAEH,eAAe,MAAM,CAAC"}