@mattermost/compass-ui 0.1.0-alpha.23 → 0.1.0-alpha.25

package/dist/components/icon-button/IconButton.css

@@ -1 +1 @@
-._icon-button_13ryy_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;--icon-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--icon-button-fg);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_13ryy_2:any-link,._icon-button_13ryy_2:hover,._icon-button_13ryy_2:focus,._icon-button_13ryy_2:active,._icon-button_13ryy_2:visited{color:var(--icon-button-fg);text-decoration:none}._icon-button_13ryy_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_13ryy_2:is(:disabled,._icon-button--disabled_13ryy_27){cursor:not-allowed;opacity:.5}._icon-button_13ryy_2:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active):not(._icon-button--active_13ryy_31):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--center-channel-color-rgb),.08);--icon-button-fg: rgba(var(--center-channel-color-rgb), .75);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_13ryy_2:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button__icon-slot_13ryy_41{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_13ryy_48{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-pill);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_13ryy_59{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_13ryy_63{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_13ryy_63 ._icon-button__count_13ryy_59{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_13ryy_63._icon-button--padding-compact_13ryy_72{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_13ryy_77{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_13ryy_77 ._icon-button__count_13ryy_59{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_13ryy_77._icon-button--padding-compact_13ryy_72{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_13ryy_91{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_13ryy_91 ._icon-button__count_13ryy_59{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_13ryy_91._icon-button--padding-compact_13ryy_72{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_13ryy_105{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_13ryy_105 ._icon-button__count_13ryy_59{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_13ryy_105._icon-button--padding-compact_13ryy_72{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_13ryy_119{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_13ryy_123{border-radius:var(--radius-pill)}._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--button-bg-rgb),.12);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--button-bg-rgb),.16);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--toggled_13ryy_31{background-color:var(--button-bg);--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_13ryy_31:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_13ryy_31:active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:color-mix(in srgb,black 16%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_13ryy_31 ._icon-button__unread-badge_13ryy_48{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_13ryy_159{background-color:transparent;--icon-button-fg: rgba(var(--sidebar-text-rgb), .64);color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_13ryy_159 ._icon-button__unread-badge_13ryy_48{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_13ryy_159:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active):not(._icon-button--toggled_13ryy_31):not(._icon-button--active_13ryy_31){background-color:rgba(var(--sidebar-text-rgb),.08);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--sidebar-text-rgb),.2);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--sidebar-text-rgb),.24);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31{background-color:var(--sidebar-text);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31:active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--sidebar-text-rgb),.88);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31 ._icon-button__unread-badge_13ryy_48{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--destructive_13ryy_210{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_13ryy_159._icon-button--destructive_13ryy_210:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_13ryy_159._icon-button--destructive_13ryy_210:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_13ryy_210{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_13ryy_210:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_13ryy_210:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}
+._icon-button_ft92e_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;--icon-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--icon-button-fg);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_ft92e_2:any-link,._icon-button_ft92e_2:hover,._icon-button_ft92e_2:focus,._icon-button_ft92e_2:active,._icon-button_ft92e_2:visited{color:var(--icon-button-fg);text-decoration:none}._icon-button_ft92e_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_ft92e_2:is(:disabled,._icon-button--disabled_ft92e_27){cursor:not-allowed;opacity:.5}._icon-button_ft92e_2:hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active):not(._icon-button--active_ft92e_31):not(._icon-button--toggled_ft92e_31){background-color:rgba(var(--center-channel-color-rgb),.08);--icon-button-fg: rgba(var(--center-channel-color-rgb), .75);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_ft92e_2:active:not(:disabled,._icon-button--disabled_ft92e_27):not(._icon-button--toggled_ft92e_31){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button__icon-slot_ft92e_41{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_ft92e_48{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-pill);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_ft92e_59{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_ft92e_63{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_ft92e_63 ._icon-button__count_ft92e_59{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_ft92e_63._icon-button--padding-compact_ft92e_72{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_ft92e_77{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_ft92e_77 ._icon-button__count_ft92e_59{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_ft92e_77._icon-button--padding-compact_ft92e_72{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_ft92e_91{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_ft92e_91 ._icon-button__count_ft92e_59{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_ft92e_91._icon-button--padding-compact_ft92e_72{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_ft92e_105{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_ft92e_105 ._icon-button__count_ft92e_59{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_ft92e_105._icon-button--padding-compact_ft92e_72{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_ft92e_119{width:auto;gap:var(--spacing-xxxs)}._icon-button--has-count_ft92e_119._icon-button--padding-compact_ft92e_72{width:auto}._icon-button--rounded_ft92e_126{border-radius:var(--radius-pill)}._icon-button--active_ft92e_31:not(:disabled,._icon-button--disabled_ft92e_27){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_ft92e_31:not(:disabled,._icon-button--disabled_ft92e_27):hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active){background-color:rgba(var(--button-bg-rgb),.12);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_ft92e_31:not(:disabled,._icon-button--disabled_ft92e_27):active:not(:disabled,._icon-button--disabled_ft92e_27){background-color:rgba(var(--button-bg-rgb),.16);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--toggled_ft92e_31{background-color:var(--button-bg);--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_ft92e_31:hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_ft92e_31:active:not(:disabled,._icon-button--disabled_ft92e_27){background-color:color-mix(in srgb,black 16%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_ft92e_31 ._icon-button__unread-badge_ft92e_48{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_ft92e_162{background-color:transparent;--icon-button-fg: rgba(var(--sidebar-text-rgb), .64);color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_ft92e_162 ._icon-button__unread-badge_ft92e_48{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_ft92e_162:hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active):not(._icon-button--toggled_ft92e_31):not(._icon-button--active_ft92e_31){background-color:rgba(var(--sidebar-text-rgb),.08);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_ft92e_162:active:not(:disabled,._icon-button--disabled_ft92e_27):not(._icon-button--toggled_ft92e_31){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_ft92e_162._icon-button--active_ft92e_31:not(:disabled,._icon-button--disabled_ft92e_27){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_ft92e_162._icon-button--active_ft92e_31:not(:disabled,._icon-button--disabled_ft92e_27):hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active){background-color:rgba(var(--sidebar-text-rgb),.2);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_ft92e_162._icon-button--active_ft92e_31:not(:disabled,._icon-button--disabled_ft92e_27):active:not(:disabled,._icon-button--disabled_ft92e_27){background-color:rgba(var(--sidebar-text-rgb),.24);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_ft92e_162._icon-button--toggled_ft92e_31{background-color:var(--sidebar-text);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_ft92e_162._icon-button--toggled_ft92e_31:hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_ft92e_162._icon-button--toggled_ft92e_31:active:not(:disabled,._icon-button--disabled_ft92e_27){background-color:rgba(var(--sidebar-text-rgb),.88);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_ft92e_162._icon-button--toggled_ft92e_31 ._icon-button__unread-badge_ft92e_48{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_ft92e_162._icon-button--destructive_ft92e_213{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_ft92e_162._icon-button--destructive_ft92e_213:hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_ft92e_162._icon-button--destructive_ft92e_213:active:not(:disabled,._icon-button--disabled_ft92e_27):not(._icon-button--toggled_ft92e_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_ft92e_213{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_ft92e_213:hover:not(:disabled,._icon-button--disabled_ft92e_27):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_ft92e_213:active:not(:disabled,._icon-button--disabled_ft92e_27):not(._icon-button--toggled_ft92e_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}

package/dist/components/icon-button/IconButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_13ryy_2","icon-button--disabled":"_icon-button--disabled_13ryy_27","icon-button--active":"_icon-button--active_13ryy_31","icon-button--toggled":"_icon-button--toggled_13ryy_31","icon-button__icon-slot":"_icon-button__icon-slot_13ryy_41","icon-button__unread-badge":"_icon-button__unread-badge_13ryy_48","icon-button__count":"_icon-button__count_13ryy_59","icon-button--size-x-small":"_icon-button--size-x-small_13ryy_63","icon-button--padding-compact":"_icon-button--padding-compact_13ryy_72","icon-button--size-small":"_icon-button--size-small_13ryy_77","icon-button--size-medium":"_icon-button--size-medium_13ryy_91","icon-button--size-large":"_icon-button--size-large_13ryy_105","icon-button--has-count":"_icon-button--has-count_13ryy_119","icon-button--rounded":"_icon-button--rounded_13ryy_123","icon-button--style-inverted":"_icon-button--style-inverted_13ryy_159","icon-button--destructive":"_icon-button--destructive_13ryy_210"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_ft92e_2","icon-button--disabled":"_icon-button--disabled_ft92e_27","icon-button--active":"_icon-button--active_ft92e_31","icon-button--toggled":"_icon-button--toggled_ft92e_31","icon-button__icon-slot":"_icon-button__icon-slot_ft92e_41","icon-button__unread-badge":"_icon-button__unread-badge_ft92e_48","icon-button__count":"_icon-button__count_ft92e_59","icon-button--size-x-small":"_icon-button--size-x-small_ft92e_63","icon-button--padding-compact":"_icon-button--padding-compact_ft92e_72","icon-button--size-small":"_icon-button--size-small_ft92e_77","icon-button--size-medium":"_icon-button--size-medium_ft92e_91","icon-button--size-large":"_icon-button--size-large_ft92e_105","icon-button--has-count":"_icon-button--has-count_ft92e_119","icon-button--rounded":"_icon-button--rounded_ft92e_126","icon-button--style-inverted":"_icon-button--style-inverted_ft92e_162","icon-button--destructive":"_icon-button--destructive_ft92e_213"};exports.default=t;
 //# sourceMappingURL=IconButton.module.scss.cjs.map

package/dist/components/icon-button/IconButton.module.scss.js

@@ -1,20 +1,20 @@
 import './IconButton.css';const t = {
-  "icon-button": "_icon-button_13ryy_2",
-  "icon-button--disabled": "_icon-button--disabled_13ryy_27",
-  "icon-button--active": "_icon-button--active_13ryy_31",
-  "icon-button--toggled": "_icon-button--toggled_13ryy_31",
-  "icon-button__icon-slot": "_icon-button__icon-slot_13ryy_41",
-  "icon-button__unread-badge": "_icon-button__unread-badge_13ryy_48",
-  "icon-button__count": "_icon-button__count_13ryy_59",
-  "icon-button--size-x-small": "_icon-button--size-x-small_13ryy_63",
-  "icon-button--padding-compact": "_icon-button--padding-compact_13ryy_72",
-  "icon-button--size-small": "_icon-button--size-small_13ryy_77",
-  "icon-button--size-medium": "_icon-button--size-medium_13ryy_91",
-  "icon-button--size-large": "_icon-button--size-large_13ryy_105",
-  "icon-button--has-count": "_icon-button--has-count_13ryy_119",
-  "icon-button--rounded": "_icon-button--rounded_13ryy_123",
-  "icon-button--style-inverted": "_icon-button--style-inverted_13ryy_159",
-  "icon-button--destructive": "_icon-button--destructive_13ryy_210"
+  "icon-button": "_icon-button_ft92e_2",
+  "icon-button--disabled": "_icon-button--disabled_ft92e_27",
+  "icon-button--active": "_icon-button--active_ft92e_31",
+  "icon-button--toggled": "_icon-button--toggled_ft92e_31",
+  "icon-button__icon-slot": "_icon-button__icon-slot_ft92e_41",
+  "icon-button__unread-badge": "_icon-button__unread-badge_ft92e_48",
+  "icon-button__count": "_icon-button__count_ft92e_59",
+  "icon-button--size-x-small": "_icon-button--size-x-small_ft92e_63",
+  "icon-button--padding-compact": "_icon-button--padding-compact_ft92e_72",
+  "icon-button--size-small": "_icon-button--size-small_ft92e_77",
+  "icon-button--size-medium": "_icon-button--size-medium_ft92e_91",
+  "icon-button--size-large": "_icon-button--size-large_ft92e_105",
+  "icon-button--has-count": "_icon-button--has-count_ft92e_119",
+  "icon-button--rounded": "_icon-button--rounded_ft92e_126",
+  "icon-button--style-inverted": "_icon-button--style-inverted_ft92e_162",
+  "icon-button--destructive": "_icon-button--destructive_ft92e_213"
 };
 export {
   t as default

package/dist/components/modal-header/ModalHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__y=require("@mattermost/compass-icons/components/close.js"),y=__y?.default??__y,__C=require("@mattermost/compass-icons/components/arrow-left.js"),C=__C?.default??__C,t=require("../icon/Icon.cjs"),m=require("../icon-button/IconButton.cjs"),k=require("../../utils/props.cjs"),a=require("./ModalHeader.module.scss.cjs");function p({className:h="",title:l,subtitle:s,subtitlePlacement:f="below",hideTitle:c=!1,titleId:r,showBackButton:_=!1,onBack:j,backLabel:x="Go back",backButtonProps:N,onClose:b,closeLabel:v="Close",closeButtonProps:d,divider:q=!0,headerAction:g,headerSlot:i}){const o=!c&&l!=null,n=o&&s!=null,u=f==="beside"&&n;return e.jsxs("div",{className:[a.default["modal-header"],!q&&a.default["modal-header--no-divider"],c&&a.default["modal-header--close-only"],i&&a.default["modal-header--has-slot"],h].filter(Boolean).join(" "),children:[e.jsxs("div",{className:a.default["modal-header__content"],children:[o?e.jsxs("div",{className:a.default["modal-header__titles"],children:[e.jsxs("div",{className:a.default["modal-header__primary"],children:[_&&e.jsx(m.default,{...N,"aria-label":x,icon:e.jsx(t.default,{glyph:e.jsx(C,{}),size:"20"}),onClick:j}),e.jsx("h2",{id:r,className:a.default["modal-header__title"],children:l}),u&&e.jsxs("div",{className:a.default["modal-header__subtitle-beside"],children:[e.jsx("span",{className:a.default["modal-header__subtitle-divider"],"aria-hidden":!0}),e.jsx("p",{className:a.default["modal-header__subtitle"],children:s})]})]}),n&&!u&&e.jsx("p",{className:a.default["modal-header__subtitle"],children:s})]}):r!=null&&l!=null?e.jsx("h2",{id:r,className:a.default["modal-header__title-sr"],children:l}):null,e.jsxs("div",{className:a.default["modal-header__actions"],children:[g,e.jsx(m.default,{...d,"aria-label":v,className:k.mergeClassNames(a.default["modal-header__close"],d==null?void 0:d.className),icon:e.jsx(t.default,{glyph:e.jsx(y,{}),size:"20"}),onClick:b})]})]}),i&&e.jsx("div",{className:a.default["modal-header__slot"],children:i})]})}exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__y=require("@mattermost/compass-icons/components/close.js"),y=__y?.default??__y,__w=require("@mattermost/compass-icons/components/arrow-left.js"),w=__w?.default??__w,h=require("../icon/Icon.cjs"),t=require("../icon-button/IconButton.cjs"),_=require("../../utils/props.cjs"),a=require("./ModalHeader.module.scss.cjs");function M({className:f="",title:l,subtitle:r,subtitlePlacement:j="below",hideTitle:m=!1,titleId:i,showBackButton:x=!1,onBack:N,backLabel:v="Go back",backButtonProps:d,onClose:b,closeLabel:q="Close",closeButtonProps:s,divider:g=!0,headerAction:C,headerSlot:c}){const n=!m&&l!=null,u=n&&r!=null,o=j==="beside"&&u;return e.jsxs("div",{className:[a.default["modal-header"],!g&&a.default["modal-header--no-divider"],m&&a.default["modal-header--close-only"],c&&a.default["modal-header--has-slot"],f].filter(Boolean).join(" "),children:[e.jsxs("div",{className:a.default["modal-header__content"],children:[n?e.jsxs("div",{className:a.default["modal-header__titles"],children:[e.jsxs("div",{className:a.default["modal-header__primary"],children:[x&&e.jsx(t.default,{...d,"aria-label":v,className:_.mergeClassNames(a.default["modal-header__back"],d==null?void 0:d.className),icon:e.jsx(h.default,{glyph:e.jsx(w,{}),size:"20"}),onClick:N}),e.jsx("h2",{id:i,className:a.default["modal-header__title"],children:l}),o&&e.jsxs("div",{className:a.default["modal-header__subtitle-beside"],children:[e.jsx("span",{className:a.default["modal-header__subtitle-divider"],"aria-hidden":!0}),e.jsx("p",{className:a.default["modal-header__subtitle"],children:r})]})]}),u&&!o&&e.jsx("p",{className:a.default["modal-header__subtitle"],children:r})]}):i!=null&&l!=null?e.jsx("h2",{id:i,className:a.default["modal-header__title-sr"],children:l}):null,e.jsxs("div",{className:a.default["modal-header__actions"],children:[C,e.jsx(t.default,{...s,"aria-label":q,className:_.mergeClassNames(a.default["modal-header__close"],s==null?void 0:s.className),icon:e.jsx(h.default,{glyph:e.jsx(y,{}),size:"20"}),onClick:b})]})]}),c&&e.jsx("div",{className:a.default["modal-header__slot"],children:c})]})}exports.default=M;
 //# sourceMappingURL=ModalHeader.cjs.map

package/dist/components/modal-header/ModalHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.cjs","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   * Padding is provided by the slot container; no extra wrapper is needed.\n   */\n  headerSlot?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  backLabel = 'Go back',\n  backButtonProps,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  divider = true,\n  headerAction,\n  headerSlot,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        headerSlot && styles['modal-header--has-slot'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  {...backButtonProps}\n                  aria-label={backLabel}\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            {...closeButtonProps}\n            aria-label={closeLabel}\n            className={mergeClassNames(\n              styles['modal-header__close'],\n              closeButtonProps?.className,\n            )}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n      {headerSlot && (\n        <div className={styles['modal-header__slot']}>{headerSlot}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","divider","headerAction","headerSlot","showTitleBlock","showSubtitle","beside","jsxs","styles","jsx","IconButton","Icon","ArrowLeftIcon","mergeClassNames","CloseIcon"],"mappings":"4ZA4DA,SAAwBA,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,QAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,UAAAC,EAAY,UACZ,gBAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,QAAAC,EAAU,GACV,aAAAC,EACA,WAAAC,CACF,EAAqB,CACnB,MAAMC,EAAiB,CAACZ,GAAaH,GAAS,KACxCgB,EAAeD,GAAkBd,GAAY,KAC7CgB,EAASf,IAAsB,UAAYc,EAEjD,OACEE,EAAAA,KAAC,MAAA,CACC,UAAW,CACTC,EAAAA,QAAO,cAAc,EACrB,CAACP,GAAWO,EAAAA,QAAO,0BAA0B,EAC7ChB,GAAagB,EAAAA,QAAO,0BAA0B,EAC9CL,GAAcK,EAAAA,QAAO,wBAAwB,EAC7CpB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAJ,EACCG,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,sBAAsB,EAC3C,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAd,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGb,EACJ,aAAYD,EACZ,WAAOe,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASjB,CAAA,CAAA,EAGbc,EAAAA,IAAC,MAAG,GAAIhB,EAAS,UAAWe,EAAAA,QAAO,qBAAqB,EACrD,SAAAnB,EACH,EACCiB,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,+BAA+B,EACpD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,gCAAgC,EAClD,cAAW,EAAA,CAAA,QAEZ,IAAA,CAAE,UAAWA,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAC5D,CAAA,EAEJ,EACCe,GAAgB,CAACC,GAChBG,EAAAA,IAAC,KAAE,UAAWD,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAE9D,EACEG,GAAW,MAAQJ,GAAS,KAC9BoB,EAAAA,IAAC,KAAA,CAAG,GAAIhB,EAAS,UAAWe,UAAO,wBAAwB,EACxD,WACH,EACE,KAEJD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAN,EACDO,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGV,EACJ,aAAYD,EACZ,UAAWc,EAAAA,gBACTL,EAAAA,QAAO,qBAAqB,EAC5BR,GAAA,YAAAA,EAAkB,SAAA,EAEpB,WAAOW,UAAA,CAAK,YAAQG,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAShB,CAAA,CAAA,CACX,CAAA,CACF,CAAA,EACF,EACCK,GACCM,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,oBAAoB,EAAI,SAAAL,CAAA,CAAW,CAAA,CAAA,CAAA,CAIlE"}
+{"version":3,"file":"ModalHeader.cjs","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   * Padding is provided by the slot container; no extra wrapper is needed.\n   */\n  headerSlot?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  backLabel = 'Go back',\n  backButtonProps,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  divider = true,\n  headerAction,\n  headerSlot,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        headerSlot && styles['modal-header--has-slot'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  {...backButtonProps}\n                  aria-label={backLabel}\n                  className={mergeClassNames(\n                    styles['modal-header__back'],\n                    backButtonProps?.className,\n                  )}\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            {...closeButtonProps}\n            aria-label={closeLabel}\n            className={mergeClassNames(\n              styles['modal-header__close'],\n              closeButtonProps?.className,\n            )}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n      {headerSlot && (\n        <div className={styles['modal-header__slot']}>{headerSlot}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","divider","headerAction","headerSlot","showTitleBlock","showSubtitle","beside","jsxs","styles","jsx","IconButton","mergeClassNames","Icon","ArrowLeftIcon","CloseIcon"],"mappings":"4ZA4DA,SAAwBA,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,QAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,UAAAC,EAAY,UACZ,gBAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,QAAAC,EAAU,GACV,aAAAC,EACA,WAAAC,CACF,EAAqB,CACnB,MAAMC,EAAiB,CAACZ,GAAaH,GAAS,KACxCgB,EAAeD,GAAkBd,GAAY,KAC7CgB,EAASf,IAAsB,UAAYc,EAEjD,OACEE,EAAAA,KAAC,MAAA,CACC,UAAW,CACTC,EAAAA,QAAO,cAAc,EACrB,CAACP,GAAWO,EAAAA,QAAO,0BAA0B,EAC7ChB,GAAagB,EAAAA,QAAO,0BAA0B,EAC9CL,GAAcK,EAAAA,QAAO,wBAAwB,EAC7CpB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAJ,EACCG,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,sBAAsB,EAC3C,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAd,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGb,EACJ,aAAYD,EACZ,UAAWe,EAAAA,gBACTH,EAAAA,QAAO,oBAAoB,EAC3BX,GAAA,YAAAA,EAAiB,SAAA,EAEnB,WAAOe,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASlB,CAAA,CAAA,EAGbc,EAAAA,IAAC,MAAG,GAAIhB,EAAS,UAAWe,EAAAA,QAAO,qBAAqB,EACrD,SAAAnB,EACH,EACCiB,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWC,UAAO,+BAA+B,EACpD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,gCAAgC,EAClD,cAAW,EAAA,CAAA,QAEZ,IAAA,CAAE,UAAWA,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAC5D,CAAA,EAEJ,EACCe,GAAgB,CAACC,GAChBG,EAAAA,IAAC,KAAE,UAAWD,EAAAA,QAAO,wBAAwB,EAAI,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAE9D,EACEG,GAAW,MAAQJ,GAAS,KAC9BoB,EAAAA,IAAC,KAAA,CAAG,GAAIhB,EAAS,UAAWe,UAAO,wBAAwB,EACxD,WACH,EACE,KAEJD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,uBAAuB,EAC3C,SAAA,CAAAN,EACDO,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGV,EACJ,aAAYD,EACZ,UAAWY,EAAAA,gBACTH,EAAAA,QAAO,qBAAqB,EAC5BR,GAAA,YAAAA,EAAkB,SAAA,EAEpB,WAAOY,UAAA,CAAK,YAAQE,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAShB,CAAA,CAAA,CACX,CAAA,CACF,CAAA,EACF,EACCK,GACCM,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,oBAAoB,EAAI,SAAAL,CAAA,CAAW,CAAA,CAAA,CAAA,CAIlE"}

package/dist/components/modal-header/ModalHeader.css

@@ -1 +1 @@
-._modal-header_1wwv5_2{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-header--no-divider_1wwv5_8{border-bottom:none}._modal-header--no-divider_1wwv5_8 ._modal-header__content_1wwv5_11,._modal-header--has-slot_1wwv5_14 ._modal-header__content_1wwv5_11{padding-bottom:0}._modal-header--close-only_1wwv5_17 ._modal-header__content_1wwv5_11{justify-content:flex-end}._modal-header__content_1wwv5_11{display:flex;align-items:flex-start;gap:10px;width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-header__titles_1wwv5_27{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:var(--spacing-m);min-width:0;padding:var(--spacing-xxxxs) 0}._modal-header__primary_1wwv5_36{display:flex;align-items:center;gap:var(--spacing-m);width:100%;min-height:var(--line-height-500)}._modal-header__title_1wwv5_27{flex:0 1 auto;min-width:0;margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);line-height:var(--line-height-500);color:var(--center-channel-color)}._modal-header__title-sr_1wwv5_53{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}._modal-header__subtitle_1wwv5_64{margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._modal-header__subtitle-beside_1wwv5_72{display:flex;flex-shrink:0;align-items:center;gap:var(--spacing-xs)}._modal-header__subtitle-beside_1wwv5_72 ._modal-header__subtitle_1wwv5_64{line-height:var(--line-height-200);white-space:nowrap}._modal-header__subtitle-divider_1wwv5_82{display:block;width:1px;height:var(--line-height-500);background-color:rgba(var(--center-channel-color-rgb),.16)}._modal-header__actions_1wwv5_88{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:7px;height:28px}._modal-header__close_1wwv5_96{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal-header__slot_1wwv5_101{padding:var(--spacing-l) var(--spacing-xxxl) var(--spacing-xxl)}
+._modal-header_6duhj_2{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12)}._modal-header--no-divider_6duhj_8{border-bottom:none}._modal-header--no-divider_6duhj_8 ._modal-header__content_6duhj_11,._modal-header--has-slot_6duhj_14 ._modal-header__content_6duhj_11{padding-bottom:0}._modal-header--close-only_6duhj_17 ._modal-header__content_6duhj_11{justify-content:flex-end}._modal-header__content_6duhj_11{display:flex;align-items:flex-start;gap:10px;width:100%;padding:var(--spacing-xxl) var(--spacing-xxxl)}._modal-header__titles_6duhj_27{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:var(--spacing-m);min-width:0;padding:var(--spacing-xxxxs) 0}._modal-header__primary_6duhj_36{display:flex;align-items:center;gap:var(--spacing-m);width:100%;min-height:var(--line-height-500)}._modal-header__title_6duhj_27{flex:0 1 auto;min-width:0;margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);line-height:var(--line-height-500);color:var(--center-channel-color)}._modal-header__title-sr_6duhj_53{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}._modal-header__subtitle_6duhj_64{margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._modal-header__subtitle-beside_6duhj_72{display:flex;flex-shrink:0;align-items:center;gap:var(--spacing-xs)}._modal-header__subtitle-beside_6duhj_72 ._modal-header__subtitle_6duhj_64{line-height:var(--line-height-200);white-space:nowrap}._modal-header__subtitle-divider_6duhj_82{display:block;width:1px;height:var(--line-height-500);background-color:rgba(var(--center-channel-color-rgb),.16)}._modal-header__actions_6duhj_88{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:7px;height:28px}._modal-header__back_6duhj_96{margin-left:-12px;margin-top:-6px;margin-bottom:-6px}._modal-header__close_6duhj_101{margin-right:-12px;margin-top:-6px;margin-bottom:-6px}._modal-header__slot_6duhj_106{padding:var(--spacing-l) var(--spacing-xxxl) var(--spacing-xxl)}

package/dist/components/modal-header/ModalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,OAAO,EACP,cAAsB,EACtB,MAAM,EACN,SAAqB,EACrB,eAAe,EACf,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,OAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,2CAuElB"}
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAA2B,EAC3B,SAAiB,EACjB,OAAO,EACP,cAAsB,EACtB,MAAM,EACN,SAAqB,EACrB,eAAe,EACf,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,OAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,2CA2ElB"}

package/dist/components/modal-header/ModalHeader.js

@@ -1,54 +1,58 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import __g from "@mattermost/compass-icons/components/close.js";const g=__g&&__g.default?__g.default:__g;
-import __j from "@mattermost/compass-icons/components/arrow-left.js";const j=__j&&__j.default?__j.default:__j;
-import _ from "../icon/Icon.js";
-import t from "../icon-button/IconButton.js";
-import { mergeClassNames as x } from "../../utils/props.js";
+import __x from "@mattermost/compass-icons/components/close.js";const x=__x&&__x.default?__x.default:__x;
+import __z from "@mattermost/compass-icons/components/arrow-left.js";const z=__z&&__z.default?__z.default:__z;
+import N from "../icon/Icon.js";
+import f from "../icon-button/IconButton.js";
+import { mergeClassNames as v } from "../../utils/props.js";
 import e from "./ModalHeader.module.scss.js";
 function q({
-  className: N = "",
+  className: b = "",
   title: d,
-  subtitle: s,
-  subtitlePlacement: f = "below",
-  hideTitle: o = !1,
-  titleId: i,
-  showBackButton: b = !1,
-  onBack: p,
-  backLabel: u = "Go back",
-  backButtonProps: v,
-  onClose: y,
-  closeLabel: C = "Close",
-  closeButtonProps: r,
-  divider: k = !0,
-  headerAction: w,
-  headerSlot: m
+  subtitle: i,
+  subtitlePlacement: t = "below",
+  hideTitle: c = !1,
+  titleId: r,
+  showBackButton: y = !1,
+  onBack: C,
+  backLabel: p = "Go back",
+  backButtonProps: s,
+  onClose: u,
+  closeLabel: w = "Close",
+  closeButtonProps: m,
+  divider: g = !0,
+  headerAction: j,
+  headerSlot: o
 }) {
-  const c = !o && d != null, n = c && s != null, h = f === "beside" && n;
+  const h = !c && d != null, n = h && i != null, _ = t === "beside" && n;
   return /* @__PURE__ */ l(
     "div",
     {
       className: [
         e["modal-header"],
-        !k && e["modal-header--no-divider"],
-        o && e["modal-header--close-only"],
-        m && e["modal-header--has-slot"],
-        N
+        !g && e["modal-header--no-divider"],
+        c && e["modal-header--close-only"],
+        o && e["modal-header--has-slot"],
+        b
       ].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ l("div", { className: e["modal-header__content"], children: [
-          c ? /* @__PURE__ */ l("div", { className: e["modal-header__titles"], children: [
+          h ? /* @__PURE__ */ l("div", { className: e["modal-header__titles"], children: [
             /* @__PURE__ */ l("div", { className: e["modal-header__primary"], children: [
-              b && /* @__PURE__ */ a(
-                t,
+              y && /* @__PURE__ */ a(
+                f,
                 {
-                  ...v,
-                  "aria-label": u,
-                  icon: /* @__PURE__ */ a(_, { glyph: /* @__PURE__ */ a(j, {}), size: "20" }),
-                  onClick: p
+                  ...s,
+                  "aria-label": p,
+                  className: v(
+                    e["modal-header__back"],
+                    s == null ? void 0 : s.className
+                  ),
+                  icon: /* @__PURE__ */ a(N, { glyph: /* @__PURE__ */ a(z, {}), size: "20" }),
+                  onClick: C
                 }
               ),
-              /* @__PURE__ */ a("h2", { id: i, className: e["modal-header__title"], children: d }),
-              h && /* @__PURE__ */ l("div", { className: e["modal-header__subtitle-beside"], children: [
+              /* @__PURE__ */ a("h2", { id: r, className: e["modal-header__title"], children: d }),
+              _ && /* @__PURE__ */ l("div", { className: e["modal-header__subtitle-beside"], children: [
                 /* @__PURE__ */ a(
                   "span",
                   {
@@ -56,29 +60,29 @@ function q({
                     "aria-hidden": !0
                   }
                 ),
-                /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: s })
+                /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: i })
               ] })
             ] }),
-            n && !h && /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: s })
-          ] }) : i != null && d != null ? /* @__PURE__ */ a("h2", { id: i, className: e["modal-header__title-sr"], children: d }) : null,
+            n && !_ && /* @__PURE__ */ a("p", { className: e["modal-header__subtitle"], children: i })
+          ] }) : r != null && d != null ? /* @__PURE__ */ a("h2", { id: r, className: e["modal-header__title-sr"], children: d }) : null,
           /* @__PURE__ */ l("div", { className: e["modal-header__actions"], children: [
-            w,
+            j,
             /* @__PURE__ */ a(
-              t,
+              f,
               {
-                ...r,
-                "aria-label": C,
-                className: x(
+                ...m,
+                "aria-label": w,
+                className: v(
                   e["modal-header__close"],
-                  r == null ? void 0 : r.className
+                  m == null ? void 0 : m.className
                 ),
-                icon: /* @__PURE__ */ a(_, { glyph: /* @__PURE__ */ a(g, {}), size: "20" }),
-                onClick: y
+                icon: /* @__PURE__ */ a(N, { glyph: /* @__PURE__ */ a(x, {}), size: "20" }),
+                onClick: u
               }
             )
           ] })
         ] }),
-        m && /* @__PURE__ */ a("div", { className: e["modal-header__slot"], children: m })
+        o && /* @__PURE__ */ a("div", { className: e["modal-header__slot"], children: o })
       ]
     }
   );

package/dist/components/modal-header/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   * Padding is provided by the slot container; no extra wrapper is needed.\n   */\n  headerSlot?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  backLabel = 'Go back',\n  backButtonProps,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  divider = true,\n  headerAction,\n  headerSlot,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        headerSlot && styles['modal-header--has-slot'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  {...backButtonProps}\n                  aria-label={backLabel}\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            {...closeButtonProps}\n            aria-label={closeLabel}\n            className={mergeClassNames(\n              styles['modal-header__close'],\n              closeButtonProps?.className,\n            )}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n      {headerSlot && (\n        <div className={styles['modal-header__slot']}>{headerSlot}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","divider","headerAction","headerSlot","showTitleBlock","showSubtitle","beside","jsxs","styles","jsx","IconButton","Icon","ArrowLeftIcon","mergeClassNames","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal-header/ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './ModalHeader.module.scss';\n\nexport type ModalSubtitlePlacement = 'below' | 'beside';\n\nexport interface ModalHeaderProps {\n  className?: string;\n  /** Heading text. Omit (with `hideTitle`) for close-only headers. */\n  title?: ReactNode;\n  /** Optional secondary text — placement controlled by `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits relative to the title.\n   * Figma: Subtitle = Below | Beside. Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** When true, title is visually hidden (close-only chrome; keep `title`/`titleId` for a11y). */\n  hideTitle?: boolean;\n  /** id for the title element — pair with dialog `aria-labelledby`. */\n  titleId?: string;\n  /** Back arrow before the title. */\n  showBackButton?: boolean;\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show bottom border. Figma: Divider = On. Default: true. */\n  divider?: boolean;\n  /**\n   * Optional control before close (Figma Controls = Button / Small Input / …).\n   * Host owns the Button, TextInput, etc.\n   */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   * Padding is provided by the slot container; no extra wrapper is needed.\n   */\n  headerSlot?: ReactNode;\n}\n\n/**\n * Modal Header — title row, optional subtitle (below or beside), optional back,\n * optional header action, and close. Compose into `Modal` or use standalone.\n *\n * @see https://www.figma.com/design/qdm5tKododENqnTvjLovDT/Patterns---Modals?node-id=789-15921\n */\nexport default function ModalHeader({\n  className = '',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  titleId,\n  showBackButton = false,\n  onBack,\n  backLabel = 'Go back',\n  backButtonProps,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  divider = true,\n  headerAction,\n  headerSlot,\n}: ModalHeaderProps) {\n  const showTitleBlock = !hideTitle && title != null;\n  const showSubtitle = showTitleBlock && subtitle != null;\n  const beside = subtitlePlacement === 'beside' && showSubtitle;\n\n  return (\n    <div\n      className={[\n        styles['modal-header'],\n        !divider && styles['modal-header--no-divider'],\n        hideTitle && styles['modal-header--close-only'],\n        headerSlot && styles['modal-header--has-slot'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['modal-header__content']}>\n        {showTitleBlock ? (\n          <div className={styles['modal-header__titles']}>\n            <div className={styles['modal-header__primary']}>\n              {showBackButton && (\n                <IconButton\n                  {...backButtonProps}\n                  aria-label={backLabel}\n                  className={mergeClassNames(\n                    styles['modal-header__back'],\n                    backButtonProps?.className,\n                  )}\n                  icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n                  onClick={onBack}\n                />\n              )}\n              <h2 id={titleId} className={styles['modal-header__title']}>\n                {title}\n              </h2>\n              {beside && (\n                <div className={styles['modal-header__subtitle-beside']}>\n                  <span\n                    className={styles['modal-header__subtitle-divider']}\n                    aria-hidden\n                  />\n                  <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n                </div>\n              )}\n            </div>\n            {showSubtitle && !beside && (\n              <p className={styles['modal-header__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        ) : titleId != null && title != null ? (\n          <h2 id={titleId} className={styles['modal-header__title-sr']}>\n            {title}\n          </h2>\n        ) : null}\n\n        <div className={styles['modal-header__actions']}>\n          {headerAction}\n          <IconButton\n            {...closeButtonProps}\n            aria-label={closeLabel}\n            className={mergeClassNames(\n              styles['modal-header__close'],\n              closeButtonProps?.className,\n            )}\n            icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n            onClick={onClose}\n          />\n        </div>\n      </div>\n      {headerSlot && (\n        <div className={styles['modal-header__slot']}>{headerSlot}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["ModalHeader","className","title","subtitle","subtitlePlacement","hideTitle","titleId","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","divider","headerAction","headerSlot","showTitleBlock","showSubtitle","beside","jsxs","styles","jsx","IconButton","mergeClassNames","Icon","ArrowLeftIcon","CloseIcon"],"mappings":";;;;;;;AA4DA,SAAwBA,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,kBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC;AAAA,EACA,YAAAC;AACF,GAAqB;AACnB,QAAMC,IAAiB,CAACZ,KAAaH,KAAS,MACxCgB,IAAeD,KAAkBd,KAAY,MAC7CgB,IAASf,MAAsB,YAAYc;AAEjD,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTC,EAAO,cAAc;AAAA,QACrB,CAACP,KAAWO,EAAO,0BAA0B;AAAA,QAC7ChB,KAAagB,EAAO,0BAA0B;AAAA,QAC9CL,KAAcK,EAAO,wBAAwB;AAAA,QAC7CpB;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWC,EAAO,uBAAuB,GAC3C,UAAA;AAAA,UAAAJ,IACC,gBAAAG,EAAC,OAAA,EAAI,WAAWC,EAAO,sBAAsB,GAC3C,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,uBAAuB,GAC3C,UAAA;AAAA,cAAAd,KACC,gBAAAe;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACE,GAAGb;AAAA,kBACJ,cAAYD;AAAA,kBACZ,WAAWe;AAAA,oBACTH,EAAO,oBAAoB;AAAA,oBAC3BX,KAAA,gBAAAA,EAAiB;AAAA,kBAAA;AAAA,kBAEnB,wBAAOe,GAAA,EAAK,yBAAQC,GAAA,EAAc,GAAI,MAAK,MAAK;AAAA,kBAChD,SAASlB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGb,gBAAAc,EAAC,QAAG,IAAIhB,GAAS,WAAWe,EAAO,qBAAqB,GACrD,UAAAnB,GACH;AAAA,cACCiB,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,gBAAA,gBAAAC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWD,EAAO,gCAAgC;AAAA,oBAClD,eAAW;AAAA,kBAAA;AAAA,gBAAA;AAAA,kCAEZ,KAAA,EAAE,WAAWA,EAAO,wBAAwB,GAAI,UAAAlB,EAAA,CAAS;AAAA,cAAA,EAAA,CAC5D;AAAA,YAAA,GAEJ;AAAA,YACCe,KAAgB,CAACC,KAChB,gBAAAG,EAAC,OAAE,WAAWD,EAAO,wBAAwB,GAAI,UAAAlB,EAAA,CAAS;AAAA,UAAA,EAAA,CAE9D,IACEG,KAAW,QAAQJ,KAAS,OAC9B,gBAAAoB,EAAC,MAAA,EAAG,IAAIhB,GAAS,WAAWe,EAAO,wBAAwB,GACxD,aACH,IACE;AAAA,UAEJ,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,uBAAuB,GAC3C,UAAA;AAAA,YAAAN;AAAA,YACD,gBAAAO;AAAA,cAACC;AAAA,cAAA;AAAA,gBACE,GAAGV;AAAA,gBACJ,cAAYD;AAAA,gBACZ,WAAWY;AAAA,kBACTH,EAAO,qBAAqB;AAAA,kBAC5BR,KAAA,gBAAAA,EAAkB;AAAA,gBAAA;AAAA,gBAEpB,wBAAOY,GAAA,EAAK,yBAAQE,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,gBAC5C,SAAShB;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QACCK,KACC,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,oBAAoB,GAAI,UAAAL,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIlE;"}

package/dist/components/modal-header/ModalHeader.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalHeader.css');const e={"modal-header":"_modal-header_1wwv5_2","modal-header--no-divider":"_modal-header--no-divider_1wwv5_8","modal-header__content":"_modal-header__content_1wwv5_11","modal-header--has-slot":"_modal-header--has-slot_1wwv5_14","modal-header--close-only":"_modal-header--close-only_1wwv5_17","modal-header__titles":"_modal-header__titles_1wwv5_27","modal-header__primary":"_modal-header__primary_1wwv5_36","modal-header__title":"_modal-header__title_1wwv5_27","modal-header__title-sr":"_modal-header__title-sr_1wwv5_53","modal-header__subtitle":"_modal-header__subtitle_1wwv5_64","modal-header__subtitle-beside":"_modal-header__subtitle-beside_1wwv5_72","modal-header__subtitle-divider":"_modal-header__subtitle-divider_1wwv5_82","modal-header__actions":"_modal-header__actions_1wwv5_88","modal-header__close":"_modal-header__close_1wwv5_96","modal-header__slot":"_modal-header__slot_1wwv5_101"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ModalHeader.css');const e={"modal-header":"_modal-header_6duhj_2","modal-header--no-divider":"_modal-header--no-divider_6duhj_8","modal-header__content":"_modal-header__content_6duhj_11","modal-header--has-slot":"_modal-header--has-slot_6duhj_14","modal-header--close-only":"_modal-header--close-only_6duhj_17","modal-header__titles":"_modal-header__titles_6duhj_27","modal-header__primary":"_modal-header__primary_6duhj_36","modal-header__title":"_modal-header__title_6duhj_27","modal-header__title-sr":"_modal-header__title-sr_6duhj_53","modal-header__subtitle":"_modal-header__subtitle_6duhj_64","modal-header__subtitle-beside":"_modal-header__subtitle-beside_6duhj_72","modal-header__subtitle-divider":"_modal-header__subtitle-divider_6duhj_82","modal-header__actions":"_modal-header__actions_6duhj_88","modal-header__back":"_modal-header__back_6duhj_96","modal-header__close":"_modal-header__close_6duhj_101","modal-header__slot":"_modal-header__slot_6duhj_106"};exports.default=e;
 //# sourceMappingURL=ModalHeader.module.scss.cjs.map

package/dist/components/modal-header/ModalHeader.module.scss.js

@@ -1,21 +1,22 @@
-import './ModalHeader.css';const e = {
-  "modal-header": "_modal-header_1wwv5_2",
-  "modal-header--no-divider": "_modal-header--no-divider_1wwv5_8",
-  "modal-header__content": "_modal-header__content_1wwv5_11",
-  "modal-header--has-slot": "_modal-header--has-slot_1wwv5_14",
-  "modal-header--close-only": "_modal-header--close-only_1wwv5_17",
-  "modal-header__titles": "_modal-header__titles_1wwv5_27",
-  "modal-header__primary": "_modal-header__primary_1wwv5_36",
-  "modal-header__title": "_modal-header__title_1wwv5_27",
-  "modal-header__title-sr": "_modal-header__title-sr_1wwv5_53",
-  "modal-header__subtitle": "_modal-header__subtitle_1wwv5_64",
-  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_1wwv5_72",
-  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_1wwv5_82",
-  "modal-header__actions": "_modal-header__actions_1wwv5_88",
-  "modal-header__close": "_modal-header__close_1wwv5_96",
-  "modal-header__slot": "_modal-header__slot_1wwv5_101"
+import './ModalHeader.css';const _ = {
+  "modal-header": "_modal-header_6duhj_2",
+  "modal-header--no-divider": "_modal-header--no-divider_6duhj_8",
+  "modal-header__content": "_modal-header__content_6duhj_11",
+  "modal-header--has-slot": "_modal-header--has-slot_6duhj_14",
+  "modal-header--close-only": "_modal-header--close-only_6duhj_17",
+  "modal-header__titles": "_modal-header__titles_6duhj_27",
+  "modal-header__primary": "_modal-header__primary_6duhj_36",
+  "modal-header__title": "_modal-header__title_6duhj_27",
+  "modal-header__title-sr": "_modal-header__title-sr_6duhj_53",
+  "modal-header__subtitle": "_modal-header__subtitle_6duhj_64",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_6duhj_72",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_6duhj_82",
+  "modal-header__actions": "_modal-header__actions_6duhj_88",
+  "modal-header__back": "_modal-header__back_6duhj_96",
+  "modal-header__close": "_modal-header__close_6duhj_101",
+  "modal-header__slot": "_modal-header__slot_6duhj_106"
 };
 export {
-  e as default
+  _ as default
 };
 //# sourceMappingURL=ModalHeader.module.scss.js.map

package/dist/components/modal-header/ModalHeader.module.scss.js.map

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

package/dist/components/password-input/PasswordInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react"),__ds=require("@mattermost/compass-icons/components/eye-off-outline.js"),ds=__ds?.default??__ds,__rs=require("@mattermost/compass-icons/components/eye-outline.js"),rs=__rs?.default??__rs,us=require("../icon/Icon.cjs"),j=require("../field/fieldDescribedBy.cjs"),cs=require("../field-message/FieldMessage.cjs"),ps=require("../../utils/props.cjs"),fs=require("../../utils/string.cjs"),l=require("./PasswordInput.module.scss.cjs"),vs={small:"12",medium:"16",large:"16"},ws=t.forwardRef(function({className:k="",size:x="medium",label:u,invalid:F=!1,message:c,messageTone:y,showPasswordLabel:R="Show password",hidePasswordLabel:D="Hide password",revealButtonProps:V,revealed:N,defaultRevealed:z=!1,onRevealedChange:n,id:E,value:p,defaultValue:q,placeholder:O,onFocus:o,onBlur:d,onChange:r,disabled:f,"aria-describedby":P,...U},a){const $=t.useId(),v=E??$,A=t.useRef(null),i=p!==void 0,[H,K]=t.useState(q??""),h=i?p:H,T=h!=null&&h!=="",w=N!==void 0,[Z,B]=t.useState(z),b=w?N:Z,m=b&&!f,[G,S]=t.useState(!1),J=G||T,L=t.useCallback(s=>{S(!0),o==null||o(s)},[o]),Q=t.useCallback(s=>{S(!1),d==null||d(s)},[d]),W=t.useCallback(s=>{i||K(s.target.value),r==null||r(s)},[i,r]),X=t.useCallback(s=>{A.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]),Y=t.useCallback(()=>{const s=!b;w||B(s),n==null||n(s)},[w,n,b]),{className:ss,onClick:_,onMouseDown:I,...es}=V??{},g=j.isFieldInvalid(F,c,y),C=j.hasFieldMessage(c),ts=l.default[`password-input--size-${fs.toKebab(x)}`],ls=g?l.default["password-input--invalid"]:"",as=u!=null&&J?l.default["password-input--label-floated"]:"",is=vs[x],ns=[l.default["password-input"],ts,ls,as,l.default["password-input--has-trailing-icon"],k].filter(Boolean).join(" "),M=C?`${v}-message`:void 0,os=y??"error";return e.jsxs("div",{className:ns,children:[e.jsxs("div",{className:l.default["password-input__wrapper"],children:[u!=null&&e.jsx("label",{className:l.default["password-input__label"],htmlFor:v,children:u}),e.jsxs("div",{className:l.default["password-input__inner"],children:[e.jsx("input",{ref:X,id:v,type:m?"text":"password",className:l.default["password-input__input"],value:i?p:void 0,defaultValue:i?void 0:q,placeholder:O,disabled:f,onFocus:L,onBlur:Q,onChange:W,"aria-invalid":g?!0:void 0,"aria-describedby":j.mergeFieldDescribedBy(P,M,void 0),...U}),e.jsx("span",{className:l.default["password-input__trailing-icon"],children:e.jsx("button",{...es,type:"button",className:ps.mergeClassNames(l.default["password-input__reveal"],ss),"aria-label":m?D:R,disabled:f,onClick:s=>{_==null||_(s),!s.defaultPrevented&&Y()},onMouseDown:s=>{s.preventDefault(),I==null||I(s)},children:e.jsx(us.default,{size:is,glyph:m?e.jsx(ds,{}):e.jsx(rs,{})})})})]})]}),C&&e.jsx(cs.default,{id:M,message:c,tone:os})]})});exports.default=ws;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react"),__rs=require("@mattermost/compass-icons/components/eye-off-outline.js"),rs=__rs?.default??__rs,__us=require("@mattermost/compass-icons/components/eye-outline.js"),us=__us?.default??__us,cs=require("../icon/Icon.cjs"),j=require("../field/fieldDescribedBy.cjs"),ps=require("../field-message/FieldMessage.cjs"),fs=require("../../utils/props.cjs"),vs=require("../../utils/string.cjs"),l=require("./PasswordInput.module.scss.cjs"),ws={small:"12",medium:"16",large:"16"},ms=t.forwardRef(function({className:F="",size:x="medium",label:u,invalid:R=!1,message:c,messageTone:y,showPasswordLabel:D="Show password",hidePasswordLabel:V="Hide password",revealButtonProps:z,revealable:N=!0,revealed:q,defaultRevealed:E=!1,onRevealedChange:n,id:O,value:p,defaultValue:h,placeholder:P,onFocus:o,onBlur:d,onChange:r,disabled:f,"aria-describedby":U,...$},a){const A=t.useId(),v=O??A,H=t.useRef(null),i=p!==void 0,[K,T]=t.useState(h??""),S=i?p:K,Z=S!=null&&S!=="",w=q!==void 0,[B,G]=t.useState(E),m=w?q:B,b=N&&m&&!f,[J,g]=t.useState(!1),L=J||Z,Q=t.useCallback(s=>{g(!0),o==null||o(s)},[o]),W=t.useCallback(s=>{g(!1),d==null||d(s)},[d]),X=t.useCallback(s=>{i||T(s.target.value),r==null||r(s)},[i,r]),Y=t.useCallback(s=>{H.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]),ss=t.useCallback(()=>{const s=!m;w||G(s),n==null||n(s)},[w,n,m]),{className:es,onClick:_,onMouseDown:I,...ts}=z??{},C=j.isFieldInvalid(R,c,y),M=j.hasFieldMessage(c),ls=l.default[`password-input--size-${vs.toKebab(x)}`],as=C?l.default["password-input--invalid"]:"",is=u!=null&&L?l.default["password-input--label-floated"]:"",ns=ws[x],os=[l.default["password-input"],ls,as,is,l.default["password-input--has-trailing-icon"],F].filter(Boolean).join(" "),k=M?`${v}-message`:void 0,ds=y??"error";return e.jsxs("div",{className:os,children:[e.jsxs("div",{className:l.default["password-input__wrapper"],children:[u!=null&&e.jsx("label",{className:l.default["password-input__label"],htmlFor:v,children:u}),e.jsxs("div",{className:l.default["password-input__inner"],children:[e.jsx("input",{ref:Y,id:v,type:b?"text":"password",className:l.default["password-input__input"],value:i?p:void 0,defaultValue:i?void 0:h,placeholder:P,disabled:f,onFocus:Q,onBlur:W,onChange:X,"aria-invalid":C?!0:void 0,"aria-describedby":j.mergeFieldDescribedBy(U,k,void 0),...$}),N&&e.jsx("span",{className:l.default["password-input__trailing-icon"],children:e.jsx("button",{...ts,type:"button",className:fs.mergeClassNames(l.default["password-input__reveal"],es),"aria-label":b?V:D,disabled:f,onClick:s=>{_==null||_(s),!s.defaultPrevented&&ss()},onMouseDown:s=>{s.preventDefault(),I==null||I(s)},children:e.jsx(cs.default,{size:ns,glyph:b?e.jsx(rs,{}):e.jsx(us,{})})})})]})]}),M&&e.jsx(ps.default,{id:k,message:c,tone:ds})]})});exports.default=ms;
 //# sourceMappingURL=PasswordInput.cjs.map

package/dist/components/password-input/PasswordInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.cjs","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useCallback, useId, useRef, useState } from 'react';\nimport EyeOffOutlineIcon from '@mattermost/compass-icons/components/eye-off-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './PasswordInput.module.scss';\n\nexport type PasswordInputSize = 'small' | 'medium' | 'large';\n\n/** Matches Text Input / FieldClearButton trailing chrome per size. */\nconst ICON_SIZE_MAP: Record<PasswordInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface PasswordInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label. Floats above the border when focused or filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: PasswordInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * Accessible name for the reveal toggle when the password is hidden.\n   * Default: `\"Show password\"`.\n   */\n  showPasswordLabel?: string;\n  /**\n   * Accessible name for the reveal toggle when the password is visible.\n   * Default: `\"Hide password\"`.\n   */\n  hidePasswordLabel?: string;\n  /** Extra attributes for the reveal toggle (e.g. `data-testid`). */\n  revealButtonProps?: BuiltInButtonProps;\n  /**\n   * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).\n   */\n  revealed?: boolean;\n  /** Uncontrolled initial reveal state. Default: `false`. */\n  defaultRevealed?: boolean;\n  /** Called when the reveal toggle changes visibility. */\n  onRevealedChange?: (revealed: boolean) => void;\n}\n\n/**\n * Password Inputs are the dedicated field for secrets — login, signup, invite\n * passwords. They look like a text input with a built-in show/hide toggle so the\n * affordance is obvious, the same way Search Input always ships a magnifier.\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      revealButtonProps,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isValueControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isValueControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const isRevealControlled = revealedProp !== undefined;\n    const [uncontrolledRevealed, setUncontrolledRevealed] =\n      useState(defaultRevealed);\n    const revealed = isRevealControlled ? revealedProp : uncontrolledRevealed;\n    const visible = revealed && !disabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isValueControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isValueControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const toggleRevealed = useCallback(() => {\n      const next = !revealed;\n      if (!isRevealControlled) setUncontrolledRevealed(next);\n      onRevealedChange?.(next);\n    }, [isRevealControlled, onRevealedChange, revealed]);\n\n    const {\n      className: revealClassName,\n      onClick: revealOnClick,\n      onMouseDown: revealOnMouseDown,\n      ...revealRest\n    } = revealButtonProps ?? {};\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`password-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['password-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['password-input--label-floated']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['password-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      styles['password-input--has-trailing-icon'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['password-input__wrapper']}>\n          {label != null && (\n            <label className={styles['password-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['password-input__inner']}>\n            <input\n              ref={setInputRef}\n              id={id}\n              type={visible ? 'text' : 'password'}\n              className={styles['password-input__input']}\n              value={isValueControlled ? valueProp : undefined}\n              defaultValue={isValueControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            <span className={styles['password-input__trailing-icon']}>\n              <button\n                {...revealRest}\n                type=\"button\"\n                className={mergeClassNames(\n                  styles['password-input__reveal'],\n                  revealClassName,\n                )}\n                aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n                disabled={disabled}\n                onClick={(e) => {\n                  revealOnClick?.(e);\n                  if (e.defaultPrevented) return;\n                  toggleRevealed();\n                }}\n                onMouseDown={(e) => {\n                  // Keep focus in the field when pressing the toggle.\n                  e.preventDefault();\n                  revealOnMouseDown?.(e);\n                }}\n              >\n                <Icon\n                  size={iconSize}\n                  glyph={visible ? <EyeOffOutlineIcon /> : <EyeOutlineIcon />}\n                />\n              </button>\n            </span>\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default PasswordInput;\n"],"names":["ICON_SIZE_MAP","PasswordInput","forwardRef","className","size","label","invalid","message","messageTone","showPasswordLabel","hidePasswordLabel","revealButtonProps","revealedProp","defaultRevealed","onRevealedChange","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isRevealControlled","uncontrolledRevealed","setUncontrolledRevealed","revealed","visible","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","toggleRevealed","next","revealClassName","revealOnClick","revealOnMouseDown","revealRest","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","mergeClassNames","Icon","EyeOffOutlineIcon","EyeOutlineIcon","FieldMessage"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.cjs","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useCallback, useId, useRef, useState } from 'react';\nimport EyeOffOutlineIcon from '@mattermost/compass-icons/components/eye-off-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './PasswordInput.module.scss';\n\nexport type PasswordInputSize = 'small' | 'medium' | 'large';\n\n/** Matches Text Input / FieldClearButton trailing chrome per size. */\nconst ICON_SIZE_MAP: Record<PasswordInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface PasswordInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label. Floats above the border when focused or filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: PasswordInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * Accessible name for the reveal toggle when the password is hidden.\n   * Default: `\"Show password\"`.\n   */\n  showPasswordLabel?: string;\n  /**\n   * Accessible name for the reveal toggle when the password is visible.\n   * Default: `\"Hide password\"`.\n   */\n  hidePasswordLabel?: string;\n  /**\n   * Whether to render the show/hide toggle. Default: `true`. Set `false` for\n   * secrets that should stay masked with no reveal affordance (for example\n   * System Console API keys). The input stays `type=\"password\"`, and\n   * `revealed`, `defaultRevealed`, `onRevealedChange`, `revealButtonProps`,\n   * `showPasswordLabel` and `hidePasswordLabel` are ignored.\n   */\n  revealable?: boolean;\n  /** Extra attributes for the reveal toggle (e.g. `data-testid`). */\n  revealButtonProps?: BuiltInButtonProps;\n  /**\n   * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).\n   */\n  revealed?: boolean;\n  /** Uncontrolled initial reveal state. Default: `false`. */\n  defaultRevealed?: boolean;\n  /** Called when the reveal toggle changes visibility. */\n  onRevealedChange?: (revealed: boolean) => void;\n}\n\n/**\n * Password Inputs are the dedicated field for secrets — login, signup, invite passwords.\n * They look like a text input with a built-in show/hide toggle so the affordance is obvious\n * before the user reads a single word.\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      revealButtonProps,\n      revealable = true,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isValueControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isValueControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const isRevealControlled = revealedProp !== undefined;\n    const [uncontrolledRevealed, setUncontrolledRevealed] =\n      useState(defaultRevealed);\n    const revealed = isRevealControlled ? revealedProp : uncontrolledRevealed;\n    const visible = revealable && revealed && !disabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isValueControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isValueControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const toggleRevealed = useCallback(() => {\n      const next = !revealed;\n      if (!isRevealControlled) setUncontrolledRevealed(next);\n      onRevealedChange?.(next);\n    }, [isRevealControlled, onRevealedChange, revealed]);\n\n    const {\n      className: revealClassName,\n      onClick: revealOnClick,\n      onMouseDown: revealOnMouseDown,\n      ...revealRest\n    } = revealButtonProps ?? {};\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`password-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['password-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['password-input--label-floated']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['password-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      styles['password-input--has-trailing-icon'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['password-input__wrapper']}>\n          {label != null && (\n            <label className={styles['password-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['password-input__inner']}>\n            <input\n              ref={setInputRef}\n              id={id}\n              type={visible ? 'text' : 'password'}\n              className={styles['password-input__input']}\n              value={isValueControlled ? valueProp : undefined}\n              defaultValue={isValueControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            {revealable && (\n              <span className={styles['password-input__trailing-icon']}>\n                <button\n                  {...revealRest}\n                  type=\"button\"\n                  className={mergeClassNames(\n                    styles['password-input__reveal'],\n                    revealClassName,\n                  )}\n                  aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n                  disabled={disabled}\n                  onClick={(e) => {\n                    revealOnClick?.(e);\n                    if (e.defaultPrevented) return;\n                    toggleRevealed();\n                  }}\n                  onMouseDown={(e) => {\n                    // Keep focus in the field when pressing the toggle.\n                    e.preventDefault();\n                    revealOnMouseDown?.(e);\n                  }}\n                >\n                  <Icon\n                    size={iconSize}\n                    glyph={visible ? <EyeOffOutlineIcon /> : <EyeOutlineIcon />}\n                  />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default PasswordInput;\n"],"names":["ICON_SIZE_MAP","PasswordInput","forwardRef","className","size","label","invalid","message","messageTone","showPasswordLabel","hidePasswordLabel","revealButtonProps","revealable","revealedProp","defaultRevealed","onRevealedChange","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isRevealControlled","uncontrolledRevealed","setUncontrolledRevealed","revealed","visible","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","toggleRevealed","next","revealClassName","revealOnClick","revealOnMouseDown","revealRest","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","mergeClassNames","Icon","EyeOffOutlineIcon","EyeOutlineIcon","FieldMessage"],"mappings":"qhBAqBMA,GAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAwDMC,GAAgBC,EAAAA,WACpB,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EACA,YAAAC,EACA,kBAAAC,EAAoB,gBACpB,kBAAAC,EAAoB,gBACpB,kBAAAC,EACA,WAAAC,EAAa,GACb,SAAUC,EACV,gBAAAC,EAAkB,GAClB,iBAAAC,EACA,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,mBAAoBC,EACpB,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKb,GAAUW,EACfG,EAAWC,EAAAA,OAAgC,IAAI,EAE/CC,EAAoBf,IAAc,OAClC,CAACgB,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDjB,GAAgB,EAAA,EAEZkB,EAAQJ,EAAqBf,EAAuBgB,EACpDI,EAAWD,GAAS,MAAQA,IAAU,GAEtCE,EAAqBzB,IAAiB,OACtC,CAAC0B,EAAsBC,CAAuB,EAClDL,EAAAA,SAASrB,CAAe,EACpB2B,EAAWH,EAAqBzB,EAAe0B,EAC/CG,EAAU9B,GAAc6B,GAAY,CAAClB,EAErC,CAACoB,EAAWC,CAAY,EAAIT,EAAAA,SAAS,EAAK,EAC1CU,EAAeF,GAAaN,EAE5BS,EAAcC,EAAAA,YACjBC,GAA0C,CACzCJ,EAAa,EAAI,EACjBxB,GAAA,MAAAA,EAAU4B,EACZ,EACA,CAAC5B,CAAO,CAAA,EAEJ6B,EAAaF,EAAAA,YAChBC,GAA0C,CACzCJ,EAAa,EAAK,EAClBvB,GAAA,MAAAA,EAAS2B,EACX,EACA,CAAC3B,CAAM,CAAA,EAEH6B,EAAeH,EAAAA,YAClBC,GAAqC,CAC/BhB,GAAmBE,EAAqBc,EAAE,OAAO,KAAK,EAC3D1B,GAAA,MAAAA,EAAW0B,EACb,EACA,CAAChB,EAAmBV,CAAQ,CAAA,EAGxB6B,EAAcJ,EAAAA,YACjBK,GAAkC,CACjCtB,EAAS,QAAUsB,EACf,OAAO1B,GAAQ,WACjBA,EAAI0B,CAAI,EACC1B,IACTA,EAAI,QAAU0B,EAElB,EACA,CAAC1B,CAAG,CAAA,EAGA2B,GAAiBN,EAAAA,YAAY,IAAM,CACvC,MAAMO,EAAO,CAACb,EACTH,GAAoBE,EAAwBc,CAAI,EACrDvC,GAAA,MAAAA,EAAmBuC,EACrB,EAAG,CAAChB,EAAoBvB,EAAkB0B,CAAQ,CAAC,EAE7C,CACJ,UAAWc,GACX,QAASC,EACT,YAAaC,EACb,GAAGC,EAAA,EACD/C,GAAqB,CAAA,EAEnBgD,EAAcC,EAAAA,eAAetD,EAASC,EAASC,CAAW,EAC1DqD,EAAcC,EAAAA,gBAAgBvD,CAAO,EACrCwD,GAAYC,EAAAA,QAAO,wBAAwBC,GAAAA,QAAQ7D,CAAI,CAAC,EAAE,EAC1D8D,GAAeP,EAAcK,UAAO,yBAAyB,EAAI,GACjEG,GACJ9D,GAAS,MAAQwC,EACbmB,EAAAA,QAAO,+BAA+B,EACtC,GACAI,GAAWpE,GAAcI,CAAI,EAE7BiE,GAAY,CAChBL,EAAAA,QAAO,gBAAgB,EACvBD,GACAG,GACAC,GACAH,EAAAA,QAAO,mCAAmC,EAC1C7D,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELmE,EAAYT,EAAc,GAAGhC,CAAE,WAAa,OAC5C0C,GAAe/D,GAAe,QAEpC,OACEgE,EAAAA,KAAC,MAAA,CAAI,UAAWH,GACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWR,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAA3D,GAAS,YACP,QAAA,CAAM,UAAW2D,EAAAA,QAAO,uBAAuB,EAAG,QAASnC,EACzD,SAAAxB,CAAA,CACH,EAEFmE,EAAAA,KAAC,MAAA,CAAI,UAAWR,EAAAA,QAAO,uBAAuB,EAC5C,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,IAAKtB,EACL,GAAAtB,EACA,KAAMa,EAAU,OAAS,WACzB,UAAWsB,EAAAA,QAAO,uBAAuB,EACzC,MAAOhC,EAAoBf,EAAY,OACvC,aAAce,EAAoB,OAAYd,EAC9C,YAAAC,EACA,SAAAI,EACA,QAASuB,EACT,OAAQG,EACR,SAAUC,EACV,eAAcS,EAAc,GAAO,OACnC,mBAAkBe,EAAAA,sBAChBlD,EACA8C,EACA,MAAA,EAED,GAAG7C,CAAA,CAAA,EAELb,GACC6D,EAAAA,IAAC,OAAA,CAAK,UAAWT,EAAAA,QAAO,+BAA+B,EACrD,SAAAS,EAAAA,IAAC,SAAA,CACE,GAAGf,GACJ,KAAK,SACL,UAAWiB,GAAAA,gBACTX,EAAAA,QAAO,wBAAwB,EAC/BT,EAAA,EAEF,aAAYb,EAAUhC,EAAoBD,EAC1C,SAAAc,EACA,QAAUyB,GAAM,CACdQ,GAAA,MAAAA,EAAgBR,GACZ,CAAAA,EAAE,kBACNK,GAAA,CACF,EACA,YAAcL,GAAM,CAElBA,EAAE,eAAA,EACFS,GAAA,MAAAA,EAAoBT,EACtB,EAEA,SAAAyB,EAAAA,IAACG,GAAAA,QAAA,CACC,KAAMR,GACN,MAAO1B,EAAU+B,MAACI,GAAA,CAAA,CAAkB,QAAMC,GAAA,CAAA,CAAe,CAAA,CAAA,CAC3D,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,EACF,EACCjB,GACCY,EAAAA,IAACM,GAAAA,QAAA,CAAa,GAAIT,EAAW,QAAA/D,EAAkB,KAAMgE,EAAA,CAAc,CAAA,EAEvE,CAEJ,CACF"}

package/dist/components/password-input/PasswordInput.d.ts

@@ -28,6 +28,14 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * Default: `"Hide password"`.
      */
     hidePasswordLabel?: string;
+    /**
+     * Whether to render the show/hide toggle. Default: `true`. Set `false` for
+     * secrets that should stay masked with no reveal affordance (for example
+     * System Console API keys). The input stays `type="password"`, and
+     * `revealed`, `defaultRevealed`, `onRevealedChange`, `revealButtonProps`,
+     * `showPasswordLabel` and `hidePasswordLabel` are ignored.
+     */
+    revealable?: boolean;
     /** Extra attributes for the reveal toggle (e.g. `data-testid`). */
     revealButtonProps?: BuiltInButtonProps;
     /**
@@ -40,9 +48,9 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     onRevealedChange?: (revealed: boolean) => void;
 }
 /**
- * Password Inputs are the dedicated field for secrets — login, signup, invite
- * passwords. They look like a text input with a built-in show/hide toggle so the
- * affordance is obvious, the same way Search Input always ships a magnifier.
+ * Password Inputs are the dedicated field for secrets — login, signup, invite passwords.
+ * They look like a text input with a built-in show/hide toggle so the affordance is obvious
+ * before the user reads a single word.
  */
 declare const PasswordInput: import('react').ForwardRefExoticComponent<PasswordInputProps & import('react').RefAttributes<HTMLInputElement>>;
 export default PasswordInput;

package/dist/components/password-input/PasswordInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAS7D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,QAAA,MAAM,aAAa,iHAuLlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAS7D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,QAAA,MAAM,aAAa,iHA0LlB,CAAC;AAEF,eAAe,aAAa,CAAC"}