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

package/dist/components/checkbox/Checkbox.module.css

@@ -1 +1 @@
-@keyframes _checkbox-icon-enter_13j3t_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_13j3t_10{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_13j3t_21{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_13j3t_21:focus-visible{outline:none}._checkbox__box_13j3t_41{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._checkbox__input_13j3t_21:focus-visible~._checkbox__box_13j3t_41{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:not(:disabled)):hover ._checkbox__box_13j3t_41{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_13j3t_21:disabled~._checkbox__box_13j3t_41{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_13j3t_21:checked~._checkbox__box_13j3t_41,._checkbox--indeterminate_13j3t_62 ._checkbox__box_13j3t_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_13j3t_21:checked~._checkbox__box_13j3t_41 ._checkbox__icon_13j3t_66,._checkbox--indeterminate_13j3t_62 ._checkbox__box_13j3t_41 ._checkbox__icon_13j3t_66{color:var(--color-neutral-0)}._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:not(:disabled)):hover ._checkbox__input_13j3t_21:checked~._checkbox__box_13j3t_41,._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:not(:disabled)):hover._checkbox--indeterminate_13j3t_62 ._checkbox__box_13j3t_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_13j3t_21:focus-visible:checked~._checkbox__box_13j3t_41,._checkbox--indeterminate_13j3t_62 ._checkbox__input_13j3t_21:focus-visible~._checkbox__box_13j3t_41{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_13j3t_21:disabled:checked~._checkbox__box_13j3t_41,._checkbox--indeterminate_13j3t_62 ._checkbox__input_13j3t_21:disabled~._checkbox__box_13j3t_41{background-color:rgba(var(--color-neutral-900-rgb),.32);border-color:transparent}._checkbox__input_13j3t_21:disabled:checked~._checkbox__box_13j3t_41 ._checkbox__icon_13j3t_66,._checkbox--indeterminate_13j3t_62 ._checkbox__input_13j3t_21:disabled~._checkbox__box_13j3t_41 ._checkbox__icon_13j3t_66{color:var(--color-neutral-0)}._checkbox--invalid_13j3t_84 ._checkbox__box_13j3t_41{border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.5)}._checkbox--invalid_13j3t_84 ._checkbox__input_13j3t_21:checked~._checkbox__box_13j3t_41,._checkbox--invalid_13j3t_84._checkbox--indeterminate_13j3t_62 ._checkbox__box_13j3t_41{background-color:var(--error-text, var(--color-danger));border-color:var(--error-text, var(--color-danger))}._checkbox--invalid_13j3t_84 ._checkbox__input_13j3t_21:checked~._checkbox__box_13j3t_41 ._checkbox__icon_13j3t_66,._checkbox--invalid_13j3t_84._checkbox--indeterminate_13j3t_62 ._checkbox__box_13j3t_41 ._checkbox__icon_13j3t_66{color:var(--color-neutral-0)}._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:not(:disabled)):hover._checkbox--invalid_13j3t_84 ._checkbox__input_13j3t_21:checked~._checkbox__box_13j3t_41,._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:not(:disabled)):hover._checkbox--invalid_13j3t_84._checkbox--indeterminate_13j3t_62 ._checkbox__box_13j3t_41{background-color:var(--error-text, var(--color-danger));border-color:var(--error-text, var(--color-danger))}._checkbox--invalid_13j3t_84 ._checkbox__input_13j3t_21:focus-visible~._checkbox__box_13j3t_41{box-shadow:0 0 0 2px var(--error-text, var(--color-danger))}._checkbox--invalid_13j3t_84 ._checkbox__input_13j3t_21:focus-visible:checked~._checkbox__box_13j3t_41,._checkbox--invalid_13j3t_84._checkbox--indeterminate_13j3t_62 ._checkbox__input_13j3t_21:focus-visible~._checkbox__box_13j3t_41{border-color:rgba(var(--color-neutral-0-rgb),.24);box-shadow:0 0 0 2px var(--error-text, var(--color-danger))}._checkbox_13j3t_10:has(._checkbox__input_13j3t_21:not(:disabled)):hover._checkbox--invalid_13j3t_84 ._checkbox__input_13j3t_21:not(:checked)~._checkbox__box_13j3t_41{border-color:var(--error-text, var(--color-danger))}._checkbox__icon_13j3t_66{display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutral-0);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_13j3t_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_13j3t_117{line-height:1}._checkbox--size-small_13j3t_120 ._checkbox__input_13j3t_21{width:var(--icon-size-12);height:var(--icon-size-12)}._checkbox--size-small_13j3t_120 ._checkbox__box_13j3t_41{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs)}._checkbox--size-small_13j3t_120 ._checkbox__label_13j3t_117{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_13j3t_133 ._checkbox__input_13j3t_21{width:var(--icon-size-16);height:var(--icon-size-16)}._checkbox--size-medium_13j3t_133 ._checkbox__box_13j3t_41{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs)}._checkbox--size-medium_13j3t_133 ._checkbox__label_13j3t_117{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_13j3t_146 ._checkbox__input_13j3t_21{width:var(--icon-size-20);height:var(--icon-size-20)}._checkbox--size-large_13j3t_146 ._checkbox__box_13j3t_41{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s)}._checkbox--size-large_13j3t_146 ._checkbox__label_13j3t_117{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+@keyframes _checkbox-icon-enter_1pc8o_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_1pc8o_10{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_1pc8o_21{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_1pc8o_21:focus-visible{outline:none}._checkbox__box_1pc8o_41{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover ._checkbox__box_1pc8o_41{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1pc8o_21:focus-visible:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_1pc8o_21:disabled:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_1pc8o_21:disabled:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox--invalid_1pc8o_84 ._checkbox__box_1pc8o_41{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:focus-visible:checked~._checkbox__box_1pc8o_41,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:not(:checked)~._checkbox__box_1pc8o_41{border-color:var(--error-text)}._checkbox__icon_1pc8o_66{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_1pc8o_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_1pc8o_117{line-height:1}._checkbox--size-small_1pc8o_120 ._checkbox__input_1pc8o_21{width:var(--icon-size-12);height:var(--icon-size-12)}._checkbox--size-small_1pc8o_120 ._checkbox__box_1pc8o_41{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs)}._checkbox--size-small_1pc8o_120 ._checkbox__label_1pc8o_117{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_1pc8o_133 ._checkbox__input_1pc8o_21{width:var(--icon-size-16);height:var(--icon-size-16)}._checkbox--size-medium_1pc8o_133 ._checkbox__box_1pc8o_41{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs)}._checkbox--size-medium_1pc8o_133 ._checkbox__label_1pc8o_117{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_1pc8o_146 ._checkbox__input_1pc8o_21{width:var(--icon-size-20);height:var(--icon-size-20)}._checkbox--size-large_1pc8o_146 ._checkbox__box_1pc8o_41{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s)}._checkbox--size-large_1pc8o_146 ._checkbox__label_1pc8o_117{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/checkbox/Checkbox.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.module.css');const c="_checkbox_13j3t_10",e="_checkbox__input_13j3t_21",_="_checkbox__box_13j3t_41",o="_checkbox__icon_13j3t_66",b="_checkbox__label_13j3t_117",t={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_13j3t_62",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_13j3t_84","checkbox-icon-enter":"_checkbox-icon-enter_13j3t_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_13j3t_120","checkbox--size-medium":"_checkbox--size-medium_13j3t_133","checkbox--size-large":"_checkbox--size-large_13j3t_146"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=b;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.module.css');const c="_checkbox_1pc8o_10",e="_checkbox__input_1pc8o_21",_="_checkbox__box_1pc8o_41",o="_checkbox__icon_1pc8o_66",b="_checkbox__label_1pc8o_117",x={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_1pc8o_62",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_1pc8o_84","checkbox-icon-enter":"_checkbox-icon-enter_1pc8o_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_1pc8o_120","checkbox--size-medium":"_checkbox--size-medium_1pc8o_133","checkbox--size-large":"_checkbox--size-large_1pc8o_146"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=b;exports.default=x;
 //# sourceMappingURL=Checkbox.module.scss.cjs.map

package/dist/components/checkbox/Checkbox.module.scss.js

@@ -1,15 +1,15 @@
-import './Checkbox.module.css';const c = "_checkbox_13j3t_10", _ = "_checkbox__input_13j3t_21", e = "_checkbox__box_13j3t_41", o = "_checkbox__icon_13j3t_66", b = "_checkbox__label_13j3t_117", x = {
+import './Checkbox.module.css';const c = "_checkbox_1pc8o_10", _ = "_checkbox__input_1pc8o_21", e = "_checkbox__box_1pc8o_41", o = "_checkbox__icon_1pc8o_66", b = "_checkbox__label_1pc8o_117", x = {
   checkbox: c,
   checkbox__input: _,
   checkbox__box: e,
-  "checkbox--indeterminate": "_checkbox--indeterminate_13j3t_62",
+  "checkbox--indeterminate": "_checkbox--indeterminate_1pc8o_62",
   checkbox__icon: o,
-  "checkbox--invalid": "_checkbox--invalid_13j3t_84",
-  "checkbox-icon-enter": "_checkbox-icon-enter_13j3t_1",
+  "checkbox--invalid": "_checkbox--invalid_1pc8o_84",
+  "checkbox-icon-enter": "_checkbox-icon-enter_1pc8o_1",
   checkbox__label: b,
-  "checkbox--size-small": "_checkbox--size-small_13j3t_120",
-  "checkbox--size-medium": "_checkbox--size-medium_13j3t_133",
-  "checkbox--size-large": "_checkbox--size-large_13j3t_146"
+  "checkbox--size-small": "_checkbox--size-small_1pc8o_120",
+  "checkbox--size-medium": "_checkbox--size-medium_1pc8o_133",
+  "checkbox--size-large": "_checkbox--size-large_1pc8o_146"
 };
 export {
   c as checkbox,

package/dist/components/chip/Chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__f=require("@mattermost/compass-icons/components/close-circle.js"),f=__f?.default??__f,_=require("../icon/Icon.cjs"),j=require("../user-avatar/UserAvatar.cjs"),b=require("../../utils/string.cjs"),l=require("./Chip.module.scss.cjs"),x={small:"10",medium:"12","medium-compact":"12",large:"16"},C={small:"12",medium:"16","medium-compact":"16",large:"20"};function N({children:c,size:s="medium",leadingIcon:a,leadingAvatar:t,onRemove:i,removeLabel:u="Remove",error:o=!1,colored:n=!1,className:d="",...m}){const r=x[s],p=C[s],h=[l.default.chip,l.default[`chip--size-${b.toKebab(s)}`],o&&l.default["chip--error"],n&&l.default["chip--colored"],d].filter(Boolean).join(" ");return e.jsxs("div",{className:h,...m,children:[t!=null?e.jsx("span",{className:l.default["chip__avatar-slot"],children:e.jsx(j.default,{src:t.src,alt:t.alt,size:p})}):a!=null?e.jsx("span",{className:l.default["chip__icon-slot"],"aria-hidden":!0,children:e.jsx(_.default,{glyph:a,size:r})}):null,e.jsx("span",{className:l.default.chip__label,children:c}),i!=null?e.jsx("button",{type:"button",className:l.default.chip__remove,onClick:i,"aria-label":u,children:e.jsx(f,{size:Number(r),"aria-hidden":!0})}):null]})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),j=require("react"),__q=require("@mattermost/compass-icons/components/close-circle.js"),q=__q?.default??__q,M=require("../icon/Icon.cjs"),A=require("../user-avatar/UserAvatar.cjs"),I=require("../../utils/string.cjs"),g=require("./ChipGroup.cjs"),u=require("./Chip.module.scss.cjs"),D={small:"10",medium:"12","medium-compact":"12",large:"16"},k={small:"12",medium:"16","medium-compact":"16",large:"20"};function y(n){return typeof n=="string"||typeof n=="number"?String(n).trim():Array.isArray(n)?n.map(y).filter(Boolean).join(" "):""}function w(n){var d;const s=(m,b)=>{let e=m;for(;e;){if(e instanceof HTMLElement&&e.dataset.chip!=null||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)return e;e=b==="next"?e.nextElementSibling:e.previousElementSibling}return null},l=n.parentElement,o=l==null?void 0:l.nextElementSibling,r=o instanceof HTMLInputElement||o instanceof HTMLTextAreaElement?o:null;return s(n.nextElementSibling,"next")??s(n.previousElementSibling,"previous")??r??(l==null?void 0:l.querySelector("input, textarea"))??((d=l==null?void 0:l.parentElement)==null?void 0:d.querySelector("input, textarea"))??null}function L({children:n,size:s="medium",leadingIcon:l,leadingAvatar:o,onRemove:r,error:d=!1,colored:m=!1,className:b="",...e}){const x=j.useContext(g.ChipGroupContext),h=D[s],T=k[s],f=y(n),S=e["aria-label"]??(r!=null&&f!==""?`${f}. Press Delete to remove.`:f!==""?f:void 0),p=r!=null,_=t=>{const c=t.currentTarget.closest("[data-chip]"),i=c instanceof HTMLElement?w(c):null,v=t.currentTarget;r==null||r(t),window.setTimeout(()=>{v.isConnected||i==null||i.isConnected&&(i.dataset.chip!=null?g.activateChip(i):i.focus({focusVisible:!0}))},0)},C=[u.default.chip,u.default[`chip--size-${I.toKebab(s)}`],d&&u.default["chip--error"],m&&u.default["chip--colored"],b].filter(Boolean).join(" "),E=t=>{var c,i;(c=e.onKeyDown)==null||c.call(e,t),!(x||!p||t.defaultPrevented)&&(t.key==="Delete"||t.key==="Backspace"||t.key==="Enter"||t.key===" ")&&(t.preventDefault(),(i=t.currentTarget.querySelector("[data-chip-remove]"))==null||i.click())};return a.jsxs("div",{className:C,...e,role:p?"button":e.role,tabIndex:p?x?-1:0:e.tabIndex,"aria-label":p?S:e["aria-label"],"data-chip":"",onKeyDown:E,children:[o!=null?a.jsx("span",{className:u.default["chip__avatar-slot"],children:a.jsx(A.default,{src:o.src,alt:o.alt,size:T})}):l!=null?a.jsx("span",{className:u.default["chip__icon-slot"],"aria-hidden":!0,children:a.jsx(M.default,{glyph:l,size:h})}):null,a.jsx("span",{className:u.default.chip__label,children:n}),r!=null?a.jsx("button",{type:"button",className:u.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:t=>{t.preventDefault()},onClick:_,children:a.jsx(q,{size:Number(h),"aria-hidden":!0})}):null]})}exports.default=L;
 //# sourceMappingURL=Chip.cjs.map

package/dist/components/chip/Chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leadingIcon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) button and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Accessible label for the remove button. Default: \"Remove\". */\n  removeLabel?: string;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  removeLabel = 'Remove',\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          onClick={onRemove}\n          aria-label={removeLabel}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","Chip","children","size","leadingIcon","leadingAvatar","onRemove","removeLabel","error","colored","className","rest","iconSize","avatarSize","rootClass","styles","toKebab","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"gWAkCMA,EAA4C,CAChD,MAAO,KACP,OAAQ,KACR,iBAAkB,KAClB,MAAO,IACT,EAEMC,EAAoD,CACxD,MAAO,KACP,OAAQ,KACR,iBAAkB,KAClB,MAAO,IACT,EAOA,SAAwBC,EAAK,CAC3B,SAAAC,EACA,KAAAC,EAAO,SACP,YAAAC,EACA,cAAAC,EACA,SAAAC,EACA,YAAAC,EAAc,SACd,MAAAC,EAAQ,GACR,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAc,CACZ,MAAMC,EAAWb,EAAcI,CAAI,EAC7BU,EAAab,EAAgBG,CAAI,EAEjCW,EAAY,CAChBC,EAAAA,QAAO,KACPA,EAAAA,QAAO,cAAcC,EAAAA,QAAQb,CAAI,CAAC,EAAE,EACpCK,GAASO,EAAAA,QAAO,aAAa,EAC7BN,GAAWM,EAAAA,QAAO,eAAe,EACjCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAY,GAAGH,EAC5B,SAAA,CAAAN,GAAiB,KAChBa,EAAAA,IAAC,OAAA,CAAK,UAAWH,UAAO,mBAAmB,EACzC,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAKd,EAAc,IACnB,IAAKA,EAAc,IACnB,KAAMQ,CAAA,CAAA,EAEV,EACET,GAAe,KACjBc,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,iBAAiB,EAAG,cAAW,GACrD,eAACK,EAAAA,QAAA,CAAK,MAAOhB,EAAa,KAAMQ,CAAA,CAAU,EAC5C,EACE,WACH,OAAA,CAAK,UAAWG,EAAAA,QAAO,YAAiB,SAAAb,EAAS,EACjDI,GAAY,KACXY,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWH,EAAAA,QAAO,aAClB,QAAST,EACT,aAAYC,EAEZ,eAACc,EAAA,CAAgB,KAAM,OAAOT,CAAQ,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,EAErD,IAAA,EACN,CAEJ"}
+{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","e","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.d.ts

@@ -7,15 +7,13 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
     size?: ChipSize;
     /** Leading icon from @mattermost/compass-icons. */
     leadingIcon?: ReactNode;
-    /** Leading avatar. Overrides leadingIcon when both are provided. */
+    /** Leading avatar. Overrides leading-icon when both are provided. */
     leadingAvatar?: {
         src: string;
         alt: string;
     };
-    /** When provided, shows the remove (×) button and calls this on click. */
+    /** When provided, shows the remove (×) control and calls this on click. */
     onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
-    /** Accessible label for the remove button. Default: "Remove". */
-    removeLabel?: string;
     /** Shows an error border. */
     error?: boolean;
     /** Adds a colored background overlay. */
@@ -27,5 +25,5 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
  * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip
  * stands on its own and is removable or selectable, depending on context.
  */
-export default function Chip({ children, size, leadingIcon, leadingAvatar, onRemove, removeLabel, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export default function Chip({ children, size, leadingIcon, leadingAvatar, onRemove, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASnE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oEAAoE;IACpE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,WAAsB,EACtB,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CA0CX"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7G,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAkGX"}

package/dist/components/chip/Chip.js

@@ -1,62 +1,104 @@
-import { jsxs as _, jsx as e } from "react/jsx-runtime";
-import __f from "@mattermost/compass-icons/components/close-circle.js";const f=__f&&__f.default?__f.default:__f;
-import b from "../icon/Icon.js";
-import N from "../user-avatar/UserAvatar.js";
-import { toKebab as C } from "../../utils/string.js";
-import l from "./Chip.module.scss.js";
-const z = {
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { useContext as A } from "react";
+import __I from "@mattermost/compass-icons/components/close-circle.js";const I=__I&&__I.default?__I.default:__I;
+import M from "../icon/Icon.js";
+import D from "../user-avatar/UserAvatar.js";
+import { toKebab as k } from "../../utils/string.js";
+import { ChipGroupContext as w, activateChip as L } from "./ChipGroup.js";
+import i from "./Chip.module.scss.js";
+const N = {
   small: "10",
   medium: "12",
   "medium-compact": "12",
   large: "16"
-}, A = {
+}, H = {
   small: "12",
   medium: "16",
   "medium-compact": "16",
   large: "20"
 };
-function E({
-  children: c,
-  size: o = "medium",
-  leadingIcon: i,
-  leadingAvatar: r,
-  onRemove: s,
-  removeLabel: m = "Remove",
-  error: t = !1,
-  colored: n = !1,
-  className: p = "",
-  ...u
+function y(n) {
+  return typeof n == "string" || typeof n == "number" ? String(n).trim() : Array.isArray(n) ? n.map(y).filter(Boolean).join(" ") : "";
+}
+function j(n) {
+  var m;
+  const u = (d, b) => {
+    let e = d;
+    for (; e; ) {
+      if (e instanceof HTMLElement && e.dataset.chip != null || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement)
+        return e;
+      e = b === "next" ? e.nextElementSibling : e.previousElementSibling;
+    }
+    return null;
+  }, l = n.parentElement, a = l == null ? void 0 : l.nextElementSibling, r = a instanceof HTMLInputElement || a instanceof HTMLTextAreaElement ? a : null;
+  return u(n.nextElementSibling, "next") ?? u(n.previousElementSibling, "previous") ?? r ?? (l == null ? void 0 : l.querySelector("input, textarea")) ?? ((m = l == null ? void 0 : l.parentElement) == null ? void 0 : m.querySelector("input, textarea")) ?? null;
+}
+function Z({
+  children: n,
+  size: u = "medium",
+  leadingIcon: l,
+  leadingAvatar: a,
+  onRemove: r,
+  error: m = !1,
+  colored: d = !1,
+  className: b = "",
+  ...e
 }) {
-  const a = z[o], h = A[o], d = [
-    l.chip,
-    l[`chip--size-${C(o)}`],
-    t && l["chip--error"],
-    n && l["chip--colored"],
-    p
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: d, ...u, children: [
-    r != null ? /* @__PURE__ */ e("span", { className: l["chip__avatar-slot"], children: /* @__PURE__ */ e(
-      N,
-      {
-        src: r.src,
-        alt: r.alt,
-        size: h
-      }
-    ) }) : i != null ? /* @__PURE__ */ e("span", { className: l["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(b, { glyph: i, size: a }) }) : null,
-    /* @__PURE__ */ e("span", { className: l.chip__label, children: c }),
-    s != null ? /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: l.chip__remove,
-        onClick: s,
-        "aria-label": m,
-        children: /* @__PURE__ */ e(f, { size: Number(a), "aria-hidden": !0 })
-      }
-    ) : null
-  ] });
+  const h = A(w), x = N[u], T = H[u], p = y(n), g = e["aria-label"] ?? (r != null && p !== "" ? `${p}. Press Delete to remove.` : p !== "" ? p : void 0), f = r != null, E = (t) => {
+    const s = t.currentTarget.closest("[data-chip]"), o = s instanceof HTMLElement ? j(s) : null, _ = t.currentTarget;
+    r == null || r(t), window.setTimeout(() => {
+      _.isConnected || o == null || o.isConnected && (o.dataset.chip != null ? L(o) : o.focus({ focusVisible: !0 }));
+    }, 0);
+  }, S = [
+    i.chip,
+    i[`chip--size-${k(u)}`],
+    m && i["chip--error"],
+    d && i["chip--colored"],
+    b
+  ].filter(Boolean).join(" "), C = (t) => {
+    var s, o;
+    (s = e.onKeyDown) == null || s.call(e, t), !(h || !f || t.defaultPrevented) && (t.key === "Delete" || t.key === "Backspace" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), (o = t.currentTarget.querySelector("[data-chip-remove]")) == null || o.click());
+  };
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: S,
+      ...e,
+      role: f ? "button" : e.role,
+      tabIndex: f ? h ? -1 : 0 : e.tabIndex,
+      "aria-label": f ? g : e["aria-label"],
+      "data-chip": "",
+      onKeyDown: C,
+      children: [
+        a != null ? /* @__PURE__ */ c("span", { className: i["chip__avatar-slot"], children: /* @__PURE__ */ c(
+          D,
+          {
+            src: a.src,
+            alt: a.alt,
+            size: T
+          }
+        ) }) : l != null ? /* @__PURE__ */ c("span", { className: i["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(M, { glyph: l, size: x }) }) : null,
+        /* @__PURE__ */ c("span", { className: i.chip__label, children: n }),
+        r != null ? /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: i.chip__remove,
+            "data-chip-remove": "",
+            tabIndex: -1,
+            "aria-hidden": !0,
+            onMouseDown: (t) => {
+              t.preventDefault();
+            },
+            onClick: E,
+            children: /* @__PURE__ */ c(I, { size: Number(x), "aria-hidden": !0 })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 export {
-  E as default
+  Z as default
 };
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leadingIcon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) button and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Accessible label for the remove button. Default: \"Remove\". */\n  removeLabel?: string;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  removeLabel = 'Remove',\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          onClick={onRemove}\n          aria-label={removeLabel}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","Chip","children","size","leadingIcon","leadingAvatar","onRemove","removeLabel","error","colored","className","rest","iconSize","avatarSize","rootClass","styles","toKebab","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":";;;;;;AAkCA,MAAMA,IAA4C;AAAA,EAChD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,OAAO;AACT,GAEMC,IAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,OAAO;AACT;AAOA,SAAwBC,EAAK;AAAA,EAC3B,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAWb,EAAcI,CAAI,GAC7BU,IAAab,EAAgBG,CAAI,GAEjCW,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPA,EAAO,cAAcC,EAAQb,CAAI,CAAC,EAAE;AAAA,IACpCK,KAASO,EAAO,aAAa;AAAA,IAC7BN,KAAWM,EAAO,eAAe;AAAA,IACjCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO,EAAC,OAAA,EAAI,WAAWH,GAAY,GAAGH,GAC5B,UAAA;AAAA,IAAAN,KAAiB,OAChB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,EAAO,mBAAmB,GACzC,UAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKd,EAAc;AAAA,QACnB,KAAKA,EAAc;AAAA,QACnB,MAAMQ;AAAA,MAAA;AAAA,IAAA,GAEV,IACET,KAAe,OACjB,gBAAAc,EAAC,QAAA,EAAK,WAAWH,EAAO,iBAAiB,GAAG,eAAW,IACrD,4BAACK,GAAA,EAAK,OAAOhB,GAAa,MAAMQ,EAAA,CAAU,GAC5C,IACE;AAAA,sBACH,QAAA,EAAK,WAAWG,EAAO,aAAiB,UAAAb,GAAS;AAAA,IACjDI,KAAY,OACX,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWH,EAAO;AAAA,QAClB,SAAST;AAAA,QACT,cAAYC;AAAA,QAEZ,4BAACc,GAAA,EAAgB,MAAM,OAAOT,CAAQ,GAAG,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA,IAErD;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","e","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.module.css

@@ -1 +1 @@
-._chip_1cqqu_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;cursor:default;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._chip_1cqqu_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_1cqqu_2:focus-within{border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_1cqqu_24{position:relative}._chip__icon-slot_1cqqu_27,._chip__avatar-slot_1cqqu_33{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_1cqqu_39{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;background:none;border:none;padding:0;cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_1cqqu_39:focus-visible{outline:none}._chip--colored_1cqqu_55:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#d95d1c29;pointer-events:none}._chip--error_1cqqu_62{border-color:var(--error-text, var(--color-danger))}._chip--size-small_1cqqu_65{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_1cqqu_65:has(._chip__remove_1cqqu_39){padding-right:var(--spacing-xxs)}._chip--size-small_1cqqu_65 ._chip__label_1cqqu_24{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_1cqqu_65 ._chip__remove_1cqqu_39{padding:1px}._chip--size-medium_1cqqu_80{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_1cqqu_80:has(._chip__remove_1cqqu_39){padding-right:var(--spacing-xxs)}._chip--size-medium_1cqqu_80 ._chip__label_1cqqu_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_1cqqu_80 ._chip__remove_1cqqu_39{padding:2px}._chip--size-medium-compact_1cqqu_94{gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--size-medium-compact_1cqqu_94:has(._chip__remove_1cqqu_39){padding-right:var(--spacing-xxxs)}._chip--size-medium-compact_1cqqu_94 ._chip__label_1cqqu_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-medium-compact_1cqqu_94 ._chip__remove_1cqqu_39{padding:2px}._chip--size-large_1cqqu_108{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_1cqqu_108:has(._chip__remove_1cqqu_39){padding-right:var(--spacing-s)}._chip--size-large_1cqqu_108 ._chip__label_1cqqu_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_1cqqu_108 ._chip__remove_1cqqu_39{padding:2px}
+._chip_cbmf6_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:visible;cursor:default;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition)}._chip_cbmf6_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_cbmf6_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_cbmf6_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_cbmf6_29{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_cbmf6_35,._chip__avatar-slot_cbmf6_41{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_cbmf6_47{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-full);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_cbmf6_47:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_cbmf6_63:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_cbmf6_71{border-color:var(--error-text, var(--color-danger))}._chip--size-small_cbmf6_74{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_cbmf6_74:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxs)}._chip--size-small_cbmf6_74 ._chip__label_cbmf6_29{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_cbmf6_74 ._chip__remove_cbmf6_47{padding:1px}._chip--size-medium_cbmf6_89{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_cbmf6_89:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxs)}._chip--size-medium_cbmf6_89 ._chip__label_cbmf6_29{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_cbmf6_89 ._chip__remove_cbmf6_47{padding:2px}._chip--size-medium-compact_cbmf6_103{gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--size-medium-compact_cbmf6_103:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxxs)}._chip--size-medium-compact_cbmf6_103 ._chip__label_cbmf6_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-medium-compact_cbmf6_103 ._chip__remove_cbmf6_47{padding:2px}._chip--size-large_cbmf6_117{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_cbmf6_117:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-s)}._chip--size-large_cbmf6_117 ._chip__label_cbmf6_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_cbmf6_117 ._chip__remove_cbmf6_47{padding:2px}

package/dist/components/chip/Chip.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.module.css');const _="_chip_1cqqu_2",c="_chip__label_1cqqu_24",i="_chip__remove_1cqqu_39",e={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_1cqqu_27","chip__avatar-slot":"_chip__avatar-slot_1cqqu_33",chip__remove:i,"chip--colored":"_chip--colored_1cqqu_55","chip--error":"_chip--error_1cqqu_62","chip--size-small":"_chip--size-small_1cqqu_65","chip--size-medium":"_chip--size-medium_1cqqu_80","chip--size-medium-compact":"_chip--size-medium-compact_1cqqu_94","chip--size-large":"_chip--size-large_1cqqu_108"};exports.chip=_;exports.chip__label=c;exports.chip__remove=i;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.module.css');const _="_chip_cbmf6_2",c="_chip__label_cbmf6_29",i="_chip__remove_cbmf6_47",e={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_cbmf6_35","chip__avatar-slot":"_chip__avatar-slot_cbmf6_41",chip__remove:i,"chip--colored":"_chip--colored_cbmf6_63","chip--error":"_chip--error_cbmf6_71","chip--size-small":"_chip--size-small_cbmf6_74","chip--size-medium":"_chip--size-medium_cbmf6_89","chip--size-medium-compact":"_chip--size-medium-compact_cbmf6_103","chip--size-large":"_chip--size-large_cbmf6_117"};exports.chip=_;exports.chip__label=c;exports.chip__remove=i;exports.default=e;
 //# sourceMappingURL=Chip.module.scss.cjs.map

package/dist/components/chip/Chip.module.scss.js

@@ -1,15 +1,15 @@
-import './Chip.module.css';const _ = "_chip_1cqqu_2", c = "_chip__label_1cqqu_24", i = "_chip__remove_1cqqu_39", e = {
+import './Chip.module.css';const _ = "_chip_cbmf6_2", c = "_chip__label_cbmf6_29", i = "_chip__remove_cbmf6_47", e = {
   chip: _,
   chip__label: c,
-  "chip__icon-slot": "_chip__icon-slot_1cqqu_27",
-  "chip__avatar-slot": "_chip__avatar-slot_1cqqu_33",
+  "chip__icon-slot": "_chip__icon-slot_cbmf6_35",
+  "chip__avatar-slot": "_chip__avatar-slot_cbmf6_41",
   chip__remove: i,
-  "chip--colored": "_chip--colored_1cqqu_55",
-  "chip--error": "_chip--error_1cqqu_62",
-  "chip--size-small": "_chip--size-small_1cqqu_65",
-  "chip--size-medium": "_chip--size-medium_1cqqu_80",
-  "chip--size-medium-compact": "_chip--size-medium-compact_1cqqu_94",
-  "chip--size-large": "_chip--size-large_1cqqu_108"
+  "chip--colored": "_chip--colored_cbmf6_63",
+  "chip--error": "_chip--error_cbmf6_71",
+  "chip--size-small": "_chip--size-small_cbmf6_74",
+  "chip--size-medium": "_chip--size-medium_cbmf6_89",
+  "chip--size-medium-compact": "_chip--size-medium-compact_cbmf6_103",
+  "chip--size-large": "_chip--size-large_cbmf6_117"
 };
 export {
   _ as chip,

package/dist/components/chip/ChipGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),b=require("react"),M=require("./ChipGroup.module.scss.cjs"),v=b.createContext(!1);function l(o){return[...o.querySelectorAll("[data-chip]")]}function E(o){const s=o.closest('[role="toolbar"]');s&&l(s).forEach(a=>{a.tabIndex=a===o?0:-1}),o.focus({focusVisible:!0})}function j({children:o,className:s="",disabled:a=!1,onKeyDown:f,onFocus:d,...g}){const h=b.useRef(null);b.useLayoutEffect(()=>{const r=h.current;if(r==null)return;const t=l(r);if(t.length===0)return;if(a){t.forEach(e=>{e.tabIndex=-1});return}const n=t.find(e=>e===document.activeElement);if(n!=null){t.forEach(e=>{e.tabIndex=e===n?0:-1});return}t.some(e=>e.tabIndex===0)||(t[0].tabIndex=0,t.slice(1).forEach(e=>{e.tabIndex=-1}))},[o,a]);const C=r=>{if(d==null||d(r),a)return;const t=r.target;if(!(t instanceof HTMLElement))return;const n=t.closest("[data-chip]"),e=r.currentTarget;n==null||!e.contains(n)||l(e).forEach(c=>{c.tabIndex=c===n?0:-1})},I=r=>{if(f==null||f(r),r.defaultPrevented||a)return;const t=h.current;if(t==null)return;const n=l(t);if(n.length===0)return;const e=document.activeElement;if(!(e instanceof HTMLElement)||!t.contains(e))return;const c=e.closest("[data-chip]"),p=n.findIndex(i=>i===c);if(p<0)return;const u=i=>{const x=n[Math.max(0,Math.min(n.length-1,i))];x!=null&&(r.preventDefault(),E(x))};switch(r.key){case"ArrowRight":case"ArrowDown":u(p+1);break;case"ArrowLeft":case"ArrowUp":u(p-1);break;case"Home":u(0);break;case"End":u(n.length-1);break;case"Delete":case"Backspace":case"Enter":case" ":{const i=c==null?void 0:c.querySelector("[data-chip-remove]");i!=null&&!i.disabled&&(r.preventDefault(),i.click());break}}},k=[M.default["chip-group"],s].filter(Boolean).join(" ");return m.jsx(v.Provider,{value:!0,children:m.jsx("div",{...g,ref:h,className:k,role:"toolbar","aria-orientation":"horizontal","aria-disabled":a||void 0,onKeyDown:I,onFocus:C,children:o})})}exports.ChipGroupContext=v;exports.activateChip=E;exports.default=j;
+//# sourceMappingURL=ChipGroup.cjs.map

package/dist/components/chip/ChipGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.cjs","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './ChipGroup.module.scss';\n\nexport const ChipGroupContext = createContext(false);\n\nexport interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** When true, chips are not a tab stop. */\n  disabled?: boolean;\n}\n\nfunction chipsIn(toolbar: ParentNode): HTMLElement[] {\n  return [...toolbar.querySelectorAll<HTMLElement>('[data-chip]')];\n}\n\n/** Roving tabindex + focus for a chip inside a ChipGroup. */\nexport function activateChip(el: HTMLElement) {\n  const toolbar = el.closest('[role=\"toolbar\"]');\n  if (toolbar) {\n    chipsIn(toolbar).forEach((chip) => {\n      chip.tabIndex = chip === el ? 0 : -1;\n    });\n  }\n  el.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move\n * between chips; Delete, Backspace, Enter, and Space remove the focused chip.\n * The × is mouse-only.\n */\nexport default function ChipGroup({\n  children,\n  className = '',\n  disabled = false,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: ChipGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n    if (disabled) {\n      chips.forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n      return;\n    }\n    const focused = chips.find((chip) => chip === document.activeElement);\n    if (focused != null) {\n      chips.forEach((chip) => {\n        chip.tabIndex = chip === focused ? 0 : -1;\n      });\n      return;\n    }\n    if (!chips.some((chip) => chip.tabIndex === 0)) {\n      chips[0].tabIndex = 0;\n      chips.slice(1).forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n    }\n  }, [children, disabled]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    if (disabled) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const chip = target.closest<HTMLElement>('[data-chip]');\n    const toolbar = e.currentTarget;\n    if (chip == null || !toolbar.contains(chip)) return;\n    chipsIn(toolbar).forEach((c) => {\n      c.tabIndex = c === chip ? 0 : -1;\n    });\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || disabled) return;\n\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !toolbar.contains(active)) return;\n    const chip = active.closest<HTMLElement>('[data-chip]');\n    const index = chips.findIndex((c) => c === chip);\n    if (index < 0) return;\n\n    const moveTo = (nextIndex: number) => {\n      const next = chips[Math.max(0, Math.min(chips.length - 1, nextIndex))];\n      if (next == null) return;\n      e.preventDefault();\n      activateChip(next);\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        moveTo(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        moveTo(index - 1);\n        break;\n      case 'Home':\n        moveTo(0);\n        break;\n      case 'End':\n        moveTo(chips.length - 1);\n        break;\n      case 'Delete':\n      case 'Backspace':\n      case 'Enter':\n      case ' ': {\n        const btn = chip?.querySelector<HTMLButtonElement>('[data-chip-remove]');\n        if (btn != null && !btn.disabled) {\n          e.preventDefault();\n          btn.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const rootClass = [styles['chip-group'], className].filter(Boolean).join(' ');\n\n  return (\n    <ChipGroupContext.Provider value={true}>\n      <div\n        {...rest}\n        ref={ref}\n        className={rootClass}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n      >\n        {children}\n      </div>\n    </ChipGroupContext.Provider>\n  );\n}\n"],"names":["ChipGroupContext","createContext","chipsIn","toolbar","activateChip","el","chip","ChipGroup","children","className","disabled","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","chips","focused","handleFocus","e","target","handleKeyDown","active","index","c","moveTo","nextIndex","next","btn","rootClass","styles","jsx"],"mappings":"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"}

package/dist/components/chip/ChipGroup.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const ChipGroupContext: import('react').Context<boolean>;
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** When true, chips are not a tab stop. */
+    disabled?: boolean;
+}
+/** Roving tabindex + focus for a chip inside a ChipGroup. */
+export declare function activateChip(el: HTMLElement): void;
+/**
+ * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move
+ * between chips; Delete, Backspace, Enter, and Space remove the focused chip.
+ * The × is mouse-only.
+ */
+export default function ChipGroup({ children, className, disabled, onKeyDown, onFocus, ...rest }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChipGroup.d.ts.map

package/dist/components/chip/ChipGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../src/components/chip/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,gBAAgB,kCAAuB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,QAQ3C;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAiHhB"}

package/dist/components/chip/ChipGroup.js

@@ -0,0 +1,112 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as I, useLayoutEffect as k, createContext as C } from "react";
+import A from "./ChipGroup.module.scss.js";
+const w = C(!1);
+function f(o) {
+  return [...o.querySelectorAll("[data-chip]")];
+}
+function L(o) {
+  const i = o.closest('[role="toolbar"]');
+  i && f(i).forEach((a) => {
+    a.tabIndex = a === o ? 0 : -1;
+  }), o.focus({ focusVisible: !0 });
+}
+function H({
+  children: o,
+  className: i = "",
+  disabled: a = !1,
+  onKeyDown: u,
+  onFocus: h,
+  ...x
+}) {
+  const d = I(null);
+  k(() => {
+    const r = d.current;
+    if (r == null) return;
+    const e = f(r);
+    if (e.length === 0) return;
+    if (a) {
+      e.forEach((t) => {
+        t.tabIndex = -1;
+      });
+      return;
+    }
+    const n = e.find((t) => t === document.activeElement);
+    if (n != null) {
+      e.forEach((t) => {
+        t.tabIndex = t === n ? 0 : -1;
+      });
+      return;
+    }
+    e.some((t) => t.tabIndex === 0) || (e[0].tabIndex = 0, e.slice(1).forEach((t) => {
+      t.tabIndex = -1;
+    }));
+  }, [o, a]);
+  const v = (r) => {
+    if (h == null || h(r), a) return;
+    const e = r.target;
+    if (!(e instanceof HTMLElement)) return;
+    const n = e.closest("[data-chip]"), t = r.currentTarget;
+    n == null || !t.contains(n) || f(t).forEach((c) => {
+      c.tabIndex = c === n ? 0 : -1;
+    });
+  }, E = (r) => {
+    if (u == null || u(r), r.defaultPrevented || a) return;
+    const e = d.current;
+    if (e == null) return;
+    const n = f(e);
+    if (n.length === 0) return;
+    const t = document.activeElement;
+    if (!(t instanceof HTMLElement) || !e.contains(t)) return;
+    const c = t.closest("[data-chip]"), p = n.findIndex((s) => s === c);
+    if (p < 0) return;
+    const l = (s) => {
+      const m = n[Math.max(0, Math.min(n.length - 1, s))];
+      m != null && (r.preventDefault(), L(m));
+    };
+    switch (r.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        l(p + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        l(p - 1);
+        break;
+      case "Home":
+        l(0);
+        break;
+      case "End":
+        l(n.length - 1);
+        break;
+      case "Delete":
+      case "Backspace":
+      case "Enter":
+      case " ": {
+        const s = c == null ? void 0 : c.querySelector("[data-chip-remove]");
+        s != null && !s.disabled && (r.preventDefault(), s.click());
+        break;
+      }
+    }
+  }, g = [A["chip-group"], i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ b(w.Provider, { value: !0, children: /* @__PURE__ */ b(
+    "div",
+    {
+      ...x,
+      ref: d,
+      className: g,
+      role: "toolbar",
+      "aria-orientation": "horizontal",
+      "aria-disabled": a || void 0,
+      onKeyDown: E,
+      onFocus: v,
+      children: o
+    }
+  ) });
+}
+export {
+  w as ChipGroupContext,
+  L as activateChip,
+  H as default
+};
+//# sourceMappingURL=ChipGroup.js.map

package/dist/components/chip/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './ChipGroup.module.scss';\n\nexport const ChipGroupContext = createContext(false);\n\nexport interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** When true, chips are not a tab stop. */\n  disabled?: boolean;\n}\n\nfunction chipsIn(toolbar: ParentNode): HTMLElement[] {\n  return [...toolbar.querySelectorAll<HTMLElement>('[data-chip]')];\n}\n\n/** Roving tabindex + focus for a chip inside a ChipGroup. */\nexport function activateChip(el: HTMLElement) {\n  const toolbar = el.closest('[role=\"toolbar\"]');\n  if (toolbar) {\n    chipsIn(toolbar).forEach((chip) => {\n      chip.tabIndex = chip === el ? 0 : -1;\n    });\n  }\n  el.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move\n * between chips; Delete, Backspace, Enter, and Space remove the focused chip.\n * The × is mouse-only.\n */\nexport default function ChipGroup({\n  children,\n  className = '',\n  disabled = false,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: ChipGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n    if (disabled) {\n      chips.forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n      return;\n    }\n    const focused = chips.find((chip) => chip === document.activeElement);\n    if (focused != null) {\n      chips.forEach((chip) => {\n        chip.tabIndex = chip === focused ? 0 : -1;\n      });\n      return;\n    }\n    if (!chips.some((chip) => chip.tabIndex === 0)) {\n      chips[0].tabIndex = 0;\n      chips.slice(1).forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n    }\n  }, [children, disabled]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    if (disabled) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const chip = target.closest<HTMLElement>('[data-chip]');\n    const toolbar = e.currentTarget;\n    if (chip == null || !toolbar.contains(chip)) return;\n    chipsIn(toolbar).forEach((c) => {\n      c.tabIndex = c === chip ? 0 : -1;\n    });\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || disabled) return;\n\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !toolbar.contains(active)) return;\n    const chip = active.closest<HTMLElement>('[data-chip]');\n    const index = chips.findIndex((c) => c === chip);\n    if (index < 0) return;\n\n    const moveTo = (nextIndex: number) => {\n      const next = chips[Math.max(0, Math.min(chips.length - 1, nextIndex))];\n      if (next == null) return;\n      e.preventDefault();\n      activateChip(next);\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        moveTo(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        moveTo(index - 1);\n        break;\n      case 'Home':\n        moveTo(0);\n        break;\n      case 'End':\n        moveTo(chips.length - 1);\n        break;\n      case 'Delete':\n      case 'Backspace':\n      case 'Enter':\n      case ' ': {\n        const btn = chip?.querySelector<HTMLButtonElement>('[data-chip-remove]');\n        if (btn != null && !btn.disabled) {\n          e.preventDefault();\n          btn.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const rootClass = [styles['chip-group'], className].filter(Boolean).join(' ');\n\n  return (\n    <ChipGroupContext.Provider value={true}>\n      <div\n        {...rest}\n        ref={ref}\n        className={rootClass}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n      >\n        {children}\n      </div>\n    </ChipGroupContext.Provider>\n  );\n}\n"],"names":["ChipGroupContext","createContext","chipsIn","toolbar","activateChip","el","chip","ChipGroup","children","className","disabled","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","chips","focused","handleFocus","e","target","handleKeyDown","active","index","c","moveTo","nextIndex","next","btn","rootClass","styles","jsx"],"mappings":"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"}

package/dist/components/chip/ChipGroup.module.css

@@ -0,0 +1 @@
+._chip-group_p9ypv_2{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xxs);min-width:0}

package/dist/components/chip/ChipGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChipGroup.module.css');const e={"chip-group":"_chip-group_p9ypv_2"};exports.default=e;
+//# sourceMappingURL=ChipGroup.module.scss.cjs.map