@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js

@@ -1,24 +1,39 @@
-import './ChannelSidebarItem.module.css';const e = {
-  "channel-sidebar-item": "_channel-sidebar-item_1e5ys_2",
-  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_1e5ys_11",
-  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_1e5ys_20",
-  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_1e5ys_27",
-  "channel-sidebar-item__left": "_channel-sidebar-item__left_1e5ys_34",
-  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_1e5ys_42",
-  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_1e5ys_50",
-  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_1e5ys_55",
-  "channel-sidebar-item__content": "_channel-sidebar-item__content_1e5ys_71",
-  "channel-sidebar-item__name": "_channel-sidebar-item__name_1e5ys_79",
-  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_1e5ys_92",
-  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_1e5ys_100",
-  "channel-sidebar-item__right": "_channel-sidebar-item__right_1e5ys_108",
-  "channel-sidebar-item__call": "_channel-sidebar-item__call_1e5ys_117",
-  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_1e5ys_127",
-  "channel-sidebar-item--active": "_channel-sidebar-item--active_1e5ys_130",
-  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_1e5ys_139",
-  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_1e5ys_139",
-  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_1e5ys_146",
-  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_1e5ys_162"
+import './ChannelSidebarItem.css';const e = {
+  "channel-sidebar-item": "_channel-sidebar-item_1w0n4_13",
+  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_1w0n4_21",
+  "channel-sidebar-item__actions": "_channel-sidebar-item__actions_1w0n4_21",
+  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_1w0n4_31",
+  "channel-sidebar-item__actions--always": "_channel-sidebar-item__actions--always_1w0n4_41",
+  "channel-sidebar-item__actions--open": "_channel-sidebar-item__actions--open_1w0n4_45",
+  "channel-sidebar-item__toggle": "_channel-sidebar-item__toggle_1w0n4_49",
+  "focus-ring-in": "_focus-ring-in_1w0n4_1",
+  "-host-shadow-a": "_-host-shadow-a_1w0n4_62",
+  "-host-shadow-b": "_-host-shadow-b_1w0n4_62",
+  "channel-sidebar-item__menu-icon": "_channel-sidebar-item__menu-icon_1w0n4_93",
+  "channel-sidebar-item--active": "_channel-sidebar-item--active_1w0n4_115",
+  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_1w0n4_118",
+  "channel-sidebar-item__left": "_channel-sidebar-item__left_1w0n4_125",
+  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_1w0n4_148",
+  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_1w0n4_156",
+  "channel-sidebar-item__icon-container--custom": "_channel-sidebar-item__icon-container--custom_1w0n4_161",
+  "channel-sidebar-item__trailing-visual": "_channel-sidebar-item__trailing-visual_1w0n4_169",
+  "channel-sidebar-item__trailing-visual--with-menu": "_channel-sidebar-item__trailing-visual--with-menu_1w0n4_177",
+  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_1w0n4_181",
+  "channel-sidebar-item__content": "_channel-sidebar-item__content_1w0n4_197",
+  "channel-sidebar-item__name": "_channel-sidebar-item__name_1w0n4_205",
+  "channel-sidebar-item__status-hint": "_channel-sidebar-item__status-hint_1w0n4_218",
+  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_1w0n4_229",
+  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_1w0n4_237",
+  "channel-sidebar-item__right": "_channel-sidebar-item__right_1w0n4_245",
+  "channel-sidebar-item__call": "_channel-sidebar-item__call_1w0n4_254",
+  "channel-sidebar-item--actions-open": "_channel-sidebar-item--actions-open_1w0n4_261",
+  "channel-sidebar-item--actions-always": "_channel-sidebar-item--actions-always_1w0n4_266",
+  "channel-sidebar-item--no-hover-menu": "_channel-sidebar-item--no-hover-menu_1w0n4_269",
+  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_1w0n4_276",
+  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_1w0n4_288",
+  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_1w0n4_288",
+  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_1w0n4_295",
+  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_1w0n4_314"
 };
 export {
   e as default

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js.map

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

package/dist/components/checkbox/Checkbox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),v=require("../../hooks/use-controllable.cjs"),O=require("../icon/Icon.cjs"),__E=require("@mattermost/compass-icons/components/check.js"),E=__E?.default??__E,__M=require("@mattermost/compass-icons/components/minus.js"),M=__M?.default??__M,R=require("../../utils/string.cjs"),e=require("./Checkbox.module.scss.cjs"),S={small:"10",medium:"12",large:"16"},y={check:E,minus:M};function z({className:b="",indeterminate:n=!1,size:l="medium",valid:u=!0,children:a,id:x,checked:i,defaultChecked:r,disabled:f,onChange:m,...C}){const d=t.useRef(null),_=t.useId(),h=x??_,[k,p]=v.useControllable(i,r,m),c=n?"minus":k?"check":null;t.useEffect(()=>{const o=d.current;o&&(o.indeterminate=n)},[n]);const j=e.default[`checkbox--size-${R.toKebab(l)}`],I=u?"":e.default["checkbox--invalid"],g=n?e.default["checkbox--indeterminate"]:"",N=[e.default.checkbox,j,I,g,b].filter(Boolean).join(" "),q=S[l];return s.jsxs("label",{className:N,htmlFor:h,children:[s.jsx("input",{ref:d,id:h,type:"checkbox",className:e.default.checkbox__input,checked:i,defaultChecked:r,disabled:f,"aria-invalid":u?void 0:!0,onChange:p,...C}),s.jsx("span",{className:e.default.checkbox__box,children:c!==null&&(()=>{const o=y[c];return s.jsx("span",{className:e.default.checkbox__icon,children:s.jsx(O.default,{glyph:s.jsx(o,{}),size:q})},c)})()}),a!=null&&s.jsx("span",{className:e.default.checkbox__label,children:a})]})}exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("react"),R=require("../../hooks/use-controllable.cjs"),y=require("../icon/Icon.cjs"),__E=require("@mattermost/compass-icons/components/check.js"),E=__E?.default??__E,__M=require("@mattermost/compass-icons/components/minus.js"),M=__M?.default??__M,S=require("../../utils/string.cjs"),e=require("./Checkbox.module.scss.cjs"),z={small:"10",medium:"12",large:"16"},w={check:E,minus:M},x=o.forwardRef(function({className:b="",indeterminate:c=!1,size:a="medium",invalid:u=!1,children:i,id:f,checked:r,defaultChecked:d,disabled:m,onChange:C,...k},_){const t=o.useRef(null);o.useImperativeHandle(_,()=>t.current);const p=o.useId(),h=f??p,[I,j]=R.useControllable(r,d,C),l=c?"minus":I?"check":null;o.useEffect(()=>{const n=t.current;n&&(n.indeterminate=c)},[c]);const N=e.default[`checkbox--size-${S.toKebab(a)}`],g=u?e.default["checkbox--invalid"]:"",q=c?e.default["checkbox--indeterminate"]:"",v=[e.default.checkbox,N,g,q,b].filter(Boolean).join(" "),O=z[a];return s.jsxs("label",{className:v,htmlFor:h,children:[s.jsx("input",{ref:t,id:h,type:"checkbox",className:e.default.checkbox__input,checked:r,defaultChecked:d,disabled:m,"aria-invalid":u?!0:void 0,onChange:j,...k,...c?{"aria-checked":"mixed"}:{}}),s.jsx("span",{className:e.default.checkbox__box,children:l!==null&&(()=>{const n=w[l];return s.jsx("span",{className:e.default.checkbox__icon,children:s.jsx(y.default,{glyph:s.jsx(n,{}),size:O})},l)})()}),i!=null&&s.jsx("span",{className:e.default.checkbox__label,children:i})]})});x.displayName="Checkbox";exports.default=x;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' | 'medium' | 'large';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */\n  indeterminate?: boolean;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: CheckboxSize;\n  /** When false, uses error/destructive styling (red fill when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the checkbox. */\n  children?: React.ReactNode;\n}\n\n/** Icon size from design system scale for each checkbox size (fits inside box). */\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\n/** Compass icon component per checked/indeterminate state. */\nconst ICON_COMPONENT: Record<'check' | 'minus', ElementType> = {\n  check: CheckIcon,\n  minus: MinusIcon,\n};\n\n/**\n * A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n  className = '',\n  indeterminate = false,\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: CheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const showingIcon = indeterminate\n    ? 'minus'\n    : resolvedChecked\n      ? 'check'\n      : null;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (input) input.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['checkbox--invalid'];\n  const indeterminateClass = indeterminate\n    ? styles['checkbox--indeterminate']\n    : '';\n\n  const rootClass = [\n    styles.checkbox,\n    sizeClass,\n    invalidClass,\n    indeterminateClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSize = CHECKBOX_ICON_SIZE[size];\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"checkbox\"\n        className={styles['checkbox__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['checkbox__box']}>\n        {showingIcon !== null &&\n          (() => {\n            const IconComponent = ICON_COMPONENT[showingIcon];\n            return (\n              <span key={showingIcon} className={styles['checkbox__icon']}>\n                <Icon glyph={<IconComponent />} size={iconSize} />\n              </span>\n            );\n          })()}\n      </span>\n      {children != null && (\n        <span className={styles['checkbox__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":"2aA8BMA,EAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAGMC,EAAyD,CAC7D,MAAOC,EACP,MAAOC,CACT,EAMA,SAAwBC,EAAS,CAC/B,UAAAC,EAAY,GACZ,cAAAC,EAAgB,GAChB,KAAAC,EAAO,SACP,MAAAC,EAAQ,GACR,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxCC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCZ,EACAC,EACAE,CAAA,EAGIU,EAAclB,EAChB,QACAe,EACE,QACA,KAENI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAQV,EAAS,QACnBU,MAAa,cAAgBpB,EACnC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMqB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQtB,CAAI,CAAC,EAAE,EACpDuB,EAAetB,EAAQ,GAAKoB,EAAAA,QAAO,mBAAmB,EACtDG,EAAqBzB,EACvBsB,UAAO,yBAAyB,EAChC,GAEEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAWjC,EAAmBO,CAAI,EAExC,OACE2B,EAAAA,KAAC,QAAA,CAAM,UAAWF,EAAW,QAASZ,EACpC,SAAA,CAAAe,EAAAA,IAAC,QAAA,CACC,IAAKnB,EACL,GAAAI,EACA,KAAK,WACL,UAAWQ,EAAAA,QAAO,gBAClB,QAAAjB,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAQ,OAAY,GAClC,SAAUc,EACT,GAAGP,CAAA,CAAA,EAENoB,MAAC,QAAK,UAAWP,EAAAA,QAAO,cACrB,SAAAJ,IAAgB,OACd,IAAM,CACL,MAAMY,EAAgBnC,EAAeuB,CAAW,EAChD,OACEW,EAAAA,IAAC,OAAA,CAAuB,UAAWP,EAAAA,QAAO,eACxC,SAAAO,MAACE,EAAAA,QAAA,CAAK,YAAQD,EAAA,CAAA,CAAc,EAAI,KAAMH,CAAA,CAAU,GADvCT,CAEX,CAEJ,IAAG,CACP,EACCf,GAAY,MACX0B,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,gBAAqB,SAAAnB,CAAA,CAAS,CAAA,EAE1D,CAEJ"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' | 'medium' | 'large';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */\n  indeterminate?: boolean;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: CheckboxSize;\n  /** When true, uses error/destructive styling (red fill when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the checkbox. */\n  children?: React.ReactNode;\n}\n\n/** Icon size from design system scale for each checkbox size (fits inside box). */\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\n/** Compass icon component per checked/indeterminate state. */\nconst ICON_COMPONENT: Record<'check' | 'minus', ElementType> = {\n  check: CheckIcon,\n  minus: MinusIcon,\n};\n\n/**\n * A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className = '',\n    indeterminate = false,\n    size = 'medium',\n    invalid = false,\n    children,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const showingIcon = indeterminate\n    ? 'minus'\n    : resolvedChecked\n      ? 'check'\n      : null;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (input) input.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['checkbox--invalid'] : '';\n  const indeterminateClass = indeterminate\n    ? styles['checkbox--indeterminate']\n    : '';\n\n  const rootClass = [\n    styles.checkbox,\n    sizeClass,\n    invalidClass,\n    indeterminateClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSize = CHECKBOX_ICON_SIZE[size];\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"checkbox\"\n        className={styles['checkbox__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n        {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}\n      />\n      <span className={styles['checkbox__box']}>\n        {showingIcon !== null &&\n          (() => {\n            const IconComponent = ICON_COMPONENT[showingIcon];\n            return (\n              <span key={showingIcon} className={styles['checkbox__icon']}>\n                <Icon glyph={<IconComponent />} size={iconSize} />\n              </span>\n            );\n          })()}\n      </span>\n      {children != null && (\n        <span className={styles['checkbox__label']}>{children}</span>\n      )}\n    </label>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","forwardRef","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","ref","inputRef","useRef","useImperativeHandle","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":"2aAoCMA,EAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAGMC,EAAyD,CAC7D,MAAOC,EACP,MAAOC,CACT,EAMMC,EAAWC,EAAAA,WAA4C,SAC3D,CACE,UAAAC,EAAY,GACZ,cAAAC,EAAgB,GAChB,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EAC9CC,EAAAA,oBAAoBH,EAAK,IAAMC,EAAS,OAA2B,EACnE,MAAMG,EAAcC,EAAAA,MAAA,EACdC,EAAKZ,GAAUU,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCd,EACAC,EACAE,CAAA,EAGIY,EAAcpB,EAChB,QACAiB,EACE,QACA,KAENI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAQX,EAAS,QACnBW,MAAa,cAAgBtB,EACnC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMuB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQxB,CAAI,CAAC,EAAE,EACpDyB,EAAexB,EAAUsB,UAAO,mBAAmB,EAAI,GACvDG,EAAqB3B,EACvBwB,UAAO,yBAAyB,EAChC,GAEEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACA5B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL8B,EAAWpC,EAAmBQ,CAAI,EAExC,OACE6B,EAAAA,KAAC,QAAA,CAAM,UAAWF,EAAW,QAASZ,EACpC,SAAA,CAAAe,EAAAA,IAAC,QAAA,CACC,IAAKpB,EACL,GAAAK,EACA,KAAK,WACL,UAAWQ,EAAAA,QAAO,gBAClB,QAAAnB,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUgB,EACT,GAAGT,EACH,GAAIT,EAAgB,CAAE,eAAgB,SAAqB,CAAA,CAAC,CAAA,EAE/D+B,MAAC,QAAK,UAAWP,EAAAA,QAAO,cACrB,SAAAJ,IAAgB,OACd,IAAM,CACL,MAAMY,EAAgBtC,EAAe0B,CAAW,EAChD,OACEW,EAAAA,IAAC,OAAA,CAAuB,UAAWP,EAAAA,QAAO,eACxC,SAAAO,MAACE,EAAAA,QAAA,CAAK,YAAQD,EAAA,CAAA,CAAc,EAAI,KAAMH,CAAA,CAAU,GADvCT,CAEX,CAEJ,IAAG,CACP,EACCjB,GAAY,MACX4B,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,gBAAqB,SAAArB,CAAA,CAAS,CAAA,EAE1D,CAEJ,CAAC,EAEDN,EAAS,YAAc"}

package/dist/components/checkbox/Checkbox.css

@@ -0,0 +1 @@
+@keyframes _checkbox-icon-enter_18sf4_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_18sf4_21{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_18sf4_21._checkbox_18sf4_21{margin:0}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_18sf4_36{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_18sf4_36:focus-visible{outline:none}._checkbox__box_18sf4_55{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_18sf4_36:focus-visible~._checkbox__box_18sf4_55{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover ._checkbox__box_18sf4_55{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_18sf4_36:disabled~._checkbox__box_18sf4_55{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80,._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80{color:var(--button-color)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18sf4_36:focus-visible:checked~._checkbox__box_18sf4_55,._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:focus-visible~._checkbox__box_18sf4_55{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_18sf4_36:disabled:checked~._checkbox__box_18sf4_55,._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:disabled~._checkbox__box_18sf4_55{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_18sf4_36:disabled:checked~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80,._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:disabled~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80{color:var(--button-color)}._checkbox--invalid_18sf4_98 ._checkbox__box_18sf4_55{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80,._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80{color:var(--button-color)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:focus-visible~._checkbox__box_18sf4_55{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:focus-visible:checked~._checkbox__box_18sf4_55,._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:focus-visible~._checkbox__box_18sf4_55{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:not(:checked)~._checkbox__box_18sf4_55{border-color:var(--error-text)}._checkbox__icon_18sf4_80{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_18sf4_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_18sf4_131{line-height:1}._checkbox--size-small_18sf4_134 ._checkbox__input_18sf4_36{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18sf4_134 ._checkbox__box_18sf4_55{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18sf4_134 ._checkbox__label_18sf4_131{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_18sf4_149 ._checkbox__input_18sf4_36{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18sf4_149 ._checkbox__box_18sf4_55{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18sf4_149 ._checkbox__label_18sf4_131{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_18sf4_164 ._checkbox__input_18sf4_36{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18sf4_164 ._checkbox__box_18sf4_55{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18sf4_164 ._checkbox__label_18sf4_131{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/checkbox/Checkbox.d.ts

@@ -7,8 +7,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     indeterminate?: boolean;
     /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
     size?: CheckboxSize;
-    /** When false, uses error/destructive styling (red fill when checked). Default: true. */
-    valid?: boolean;
+    /** When true, uses error/destructive styling (red fill when checked). */
+    invalid?: boolean;
     /** Label content. Rendered next to the checkbox. */
     children?: React.ReactNode;
 }
@@ -16,5 +16,6 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * A Checkbox lets people pick any number of options from a set, or toggle a single setting
  * on or off. Each box represents one independent choice — pick none, some, or all.
  */
-export default function Checkbox({ className, indeterminate, size, valid, children, id: idProp, checked, defaultChecked, disabled, onChange, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAWjD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uFAAuF;IACvF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yFAAyF;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,aAAqB,EACrB,IAAe,EACf,KAAY,EACZ,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,2CAqEf"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAiBjD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uFAAuF;IACvF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;GAGG;AACH,QAAA,MAAM,QAAQ,4GAsFZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -1,72 +1,75 @@
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
-import { useRef as E, useId as j, useEffect as y } from "react";
-import { useControllable as z } from "../../hooks/use-controllable.js";
-import B from "../icon/Icon.js";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { forwardRef as E, useRef as j, useImperativeHandle as z, useId as R, useEffect as w } from "react";
+import { useControllable as B } from "../../hooks/use-controllable.js";
+import H from "../icon/Icon.js";
 import __K from "@mattermost/compass-icons/components/check.js";const K=__K&&__K.default?__K.default:__K;
 import __M from "@mattermost/compass-icons/components/minus.js";const M=__M&&__M.default?__M.default:__M;
-import { toKebab as R } from "../../utils/string.js";
+import { toKebab as S } from "../../utils/string.js";
 import o from "./Checkbox.module.scss.js";
-const S = {
+const F = {
   small: "10",
   medium: "12",
   large: "16"
-}, w = {
+}, P = {
   check: K,
   minus: M
-};
-function A({
+}, T = E(function({
   className: h = "",
-  indeterminate: n = !1,
-  size: t = "medium",
-  valid: l = !0,
-  children: i,
+  indeterminate: c = !1,
+  size: l = "medium",
+  invalid: a = !1,
+  children: r,
   id: p,
-  checked: r,
-  defaultChecked: a,
+  checked: i,
+  defaultChecked: m,
   disabled: f,
   onChange: b,
-  ...C
-}) {
-  const m = E(null), x = j(), u = p ?? x, [d, k] = z(
-    r,
-    a,
+  ...d
+}, x) {
+  const n = j(null);
+  z(x, () => n.current);
+  const C = R(), u = p ?? C, [k, I] = B(
+    i,
+    m,
     b
-  ), c = n ? "minus" : d ? "check" : null;
-  y(() => {
-    const s = m.current;
-    s && (s.indeterminate = n);
-  }, [n]);
-  const _ = o[`checkbox--size-${R(t)}`], I = l ? "" : o["checkbox--invalid"], N = n ? o["checkbox--indeterminate"] : "", g = [
+  ), t = c ? "minus" : k ? "check" : null;
+  w(() => {
+    const s = n.current;
+    s && (s.indeterminate = c);
+  }, [c]);
+  const _ = o[`checkbox--size-${S(l)}`], N = a ? o["checkbox--invalid"] : "", g = c ? o["checkbox--indeterminate"] : "", v = [
     o.checkbox,
     _,
-    I,
     N,
+    g,
     h
-  ].filter(Boolean).join(" "), O = S[t];
-  return /* @__PURE__ */ v("label", { className: g, htmlFor: u, children: [
+  ].filter(Boolean).join(" "), O = F[l];
+  return /* @__PURE__ */ y("label", { className: v, htmlFor: u, children: [
     /* @__PURE__ */ e(
       "input",
       {
-        ref: m,
+        ref: n,
         id: u,
         type: "checkbox",
         className: o.checkbox__input,
-        checked: r,
-        defaultChecked: a,
+        checked: i,
+        defaultChecked: m,
         disabled: f,
-        "aria-invalid": l ? void 0 : !0,
-        onChange: k,
-        ...C
+        "aria-invalid": a ? !0 : void 0,
+        onChange: I,
+        ...d,
+        ...c ? { "aria-checked": "mixed" } : {}
       }
     ),
-    /* @__PURE__ */ e("span", { className: o.checkbox__box, children: c !== null && (() => {
-      const s = w[c];
-      return /* @__PURE__ */ e("span", { className: o.checkbox__icon, children: /* @__PURE__ */ e(B, { glyph: /* @__PURE__ */ e(s, {}), size: O }) }, c);
+    /* @__PURE__ */ e("span", { className: o.checkbox__box, children: t !== null && (() => {
+      const s = P[t];
+      return /* @__PURE__ */ e("span", { className: o.checkbox__icon, children: /* @__PURE__ */ e(H, { glyph: /* @__PURE__ */ e(s, {}), size: O }) }, t);
     })() }),
-    i != null && /* @__PURE__ */ e("span", { className: o.checkbox__label, children: i })
+    r != null && /* @__PURE__ */ e("span", { className: o.checkbox__label, children: r })
   ] });
-}
+});
+T.displayName = "Checkbox";
 export {
-  A as default
+  T as default
 };
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' | 'medium' | 'large';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */\n  indeterminate?: boolean;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: CheckboxSize;\n  /** When false, uses error/destructive styling (red fill when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the checkbox. */\n  children?: React.ReactNode;\n}\n\n/** Icon size from design system scale for each checkbox size (fits inside box). */\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\n/** Compass icon component per checked/indeterminate state. */\nconst ICON_COMPONENT: Record<'check' | 'minus', ElementType> = {\n  check: CheckIcon,\n  minus: MinusIcon,\n};\n\n/**\n * A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n  className = '',\n  indeterminate = false,\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: CheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const showingIcon = indeterminate\n    ? 'minus'\n    : resolvedChecked\n      ? 'check'\n      : null;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (input) input.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['checkbox--invalid'];\n  const indeterminateClass = indeterminate\n    ? styles['checkbox--indeterminate']\n    : '';\n\n  const rootClass = [\n    styles.checkbox,\n    sizeClass,\n    invalidClass,\n    indeterminateClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSize = CHECKBOX_ICON_SIZE[size];\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"checkbox\"\n        className={styles['checkbox__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['checkbox__box']}>\n        {showingIcon !== null &&\n          (() => {\n            const IconComponent = ICON_COMPONENT[showingIcon];\n            return (\n              <span key={showingIcon} className={styles['checkbox__icon']}>\n                <Icon glyph={<IconComponent />} size={iconSize} />\n              </span>\n            );\n          })()}\n      </span>\n      {children != null && (\n        <span className={styles['checkbox__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":";;;;;;;;AA8BA,MAAMA,IAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAAyD;AAAA,EAC7D,OAAOC;AAAA,EACP,OAAOC;AACT;AAMA,SAAwBC,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCZ;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIU,IAAclB,IAChB,UACAe,IACE,UACA;AAEN,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAQV,EAAS;AACvB,IAAIU,QAAa,gBAAgBpB;AAAA,EACnC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMqB,IAAYC,EAAO,kBAAkBC,EAAQtB,CAAI,CAAC,EAAE,GACpDuB,IAAetB,IAAQ,KAAKoB,EAAO,mBAAmB,GACtDG,IAAqBzB,IACvBsB,EAAO,yBAAyB,IAChC,IAEEI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACA1B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAWjC,EAAmBO,CAAI;AAExC,SACE,gBAAA2B,EAAC,SAAA,EAAM,WAAWF,GAAW,SAASZ,GACpC,UAAA;AAAA,IAAA,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKnB;AAAA,QACL,IAAAI;AAAA,QACA,MAAK;AAAA,QACL,WAAWQ,EAAO;AAAA,QAClB,SAAAjB;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAQ,SAAY;AAAA,QAClC,UAAUc;AAAA,QACT,GAAGP;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAoB,EAAC,UAAK,WAAWP,EAAO,eACrB,UAAAJ,MAAgB,SACd,MAAM;AACL,YAAMY,IAAgBnC,EAAeuB,CAAW;AAChD,aACE,gBAAAW,EAAC,QAAA,EAAuB,WAAWP,EAAO,gBACxC,UAAA,gBAAAO,EAACE,GAAA,EAAK,yBAAQD,GAAA,CAAA,CAAc,GAAI,MAAMH,EAAA,CAAU,KADvCT,CAEX;AAAA,IAEJ,KAAG,CACP;AAAA,IACCf,KAAY,QACX,gBAAA0B,EAAC,QAAA,EAAK,WAAWP,EAAO,iBAAqB,UAAAnB,EAAA,CAAS;AAAA,EAAA,GAE1D;AAEJ;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' | 'medium' | 'large';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */\n  indeterminate?: boolean;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: CheckboxSize;\n  /** When true, uses error/destructive styling (red fill when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the checkbox. */\n  children?: React.ReactNode;\n}\n\n/** Icon size from design system scale for each checkbox size (fits inside box). */\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\n/** Compass icon component per checked/indeterminate state. */\nconst ICON_COMPONENT: Record<'check' | 'minus', ElementType> = {\n  check: CheckIcon,\n  minus: MinusIcon,\n};\n\n/**\n * A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className = '',\n    indeterminate = false,\n    size = 'medium',\n    invalid = false,\n    children,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const showingIcon = indeterminate\n    ? 'minus'\n    : resolvedChecked\n      ? 'check'\n      : null;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (input) input.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['checkbox--invalid'] : '';\n  const indeterminateClass = indeterminate\n    ? styles['checkbox--indeterminate']\n    : '';\n\n  const rootClass = [\n    styles.checkbox,\n    sizeClass,\n    invalidClass,\n    indeterminateClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSize = CHECKBOX_ICON_SIZE[size];\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"checkbox\"\n        className={styles['checkbox__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n        {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}\n      />\n      <span className={styles['checkbox__box']}>\n        {showingIcon !== null &&\n          (() => {\n            const IconComponent = ICON_COMPONENT[showingIcon];\n            return (\n              <span key={showingIcon} className={styles['checkbox__icon']}>\n                <Icon glyph={<IconComponent />} size={iconSize} />\n              </span>\n            );\n          })()}\n      </span>\n      {children != null && (\n        <span className={styles['checkbox__label']}>{children}</span>\n      )}\n    </label>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","forwardRef","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","ref","inputRef","useRef","useImperativeHandle","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":";;;;;;;;AAoCA,MAAMA,IAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAAyD;AAAA,EAC7D,OAAOC;AAAA,EACP,OAAOC;AACT,GAMMC,IAAWC,EAA4C,SAC3D;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI;AAC9C,EAAAC,EAAoBH,GAAK,MAAMC,EAAS,OAA2B;AACnE,QAAMG,IAAcC,EAAA,GACdC,IAAKZ,KAAUU,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCd;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIY,IAAcpB,IAChB,UACAiB,IACE,UACA;AAEN,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAQX,EAAS;AACvB,IAAIW,QAAa,gBAAgBtB;AAAA,EACnC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMuB,IAAYC,EAAO,kBAAkBC,EAAQxB,CAAI,CAAC,EAAE,GACpDyB,IAAexB,IAAUsB,EAAO,mBAAmB,IAAI,IACvDG,IAAqB3B,IACvBwB,EAAO,yBAAyB,IAChC,IAEEI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACA5B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL8B,IAAWpC,EAAmBQ,CAAI;AAExC,SACE,gBAAA6B,EAAC,SAAA,EAAM,WAAWF,GAAW,SAASZ,GACpC,UAAA;AAAA,IAAA,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,IAAAK;AAAA,QACA,MAAK;AAAA,QACL,WAAWQ,EAAO;AAAA,QAClB,SAAAnB;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUgB;AAAA,QACT,GAAGT;AAAA,QACH,GAAIT,IAAgB,EAAE,gBAAgB,YAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,IAE/D,gBAAA+B,EAAC,UAAK,WAAWP,EAAO,eACrB,UAAAJ,MAAgB,SACd,MAAM;AACL,YAAMY,IAAgBtC,EAAe0B,CAAW;AAChD,aACE,gBAAAW,EAAC,QAAA,EAAuB,WAAWP,EAAO,gBACxC,UAAA,gBAAAO,EAACE,GAAA,EAAK,yBAAQD,GAAA,CAAA,CAAc,GAAI,MAAMH,EAAA,CAAU,KADvCT,CAEX;AAAA,IAEJ,KAAG,CACP;AAAA,IACCjB,KAAY,QACX,gBAAA4B,EAAC,QAAA,EAAK,WAAWP,EAAO,iBAAqB,UAAArB,EAAA,CAAS;AAAA,EAAA,GAE1D;AAEJ,CAAC;AAEDN,EAAS,cAAc;"}

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.css');const c="_checkbox_18sf4_21",e="_checkbox__input_18sf4_36",_="_checkbox__box_18sf4_55",o="_checkbox__icon_18sf4_80",b="_checkbox__label_18sf4_131",x={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_18sf4_76",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_18sf4_98","checkbox-icon-enter":"_checkbox-icon-enter_18sf4_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_18sf4_134","checkbox--size-medium":"_checkbox--size-medium_18sf4_149","checkbox--size-large":"_checkbox--size-large_18sf4_164"};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.css';const c = "_checkbox_18sf4_21", _ = "_checkbox__input_18sf4_36", e = "_checkbox__box_18sf4_55", o = "_checkbox__icon_18sf4_80", b = "_checkbox__label_18sf4_131", x = {
   checkbox: c,
   checkbox__input: _,
   checkbox__box: e,
-  "checkbox--indeterminate": "_checkbox--indeterminate_13j3t_62",
+  "checkbox--indeterminate": "_checkbox--indeterminate_18sf4_76",
   checkbox__icon: o,
-  "checkbox--invalid": "_checkbox--invalid_13j3t_84",
-  "checkbox-icon-enter": "_checkbox-icon-enter_13j3t_1",
+  "checkbox--invalid": "_checkbox--invalid_18sf4_98",
+  "checkbox-icon-enter": "_checkbox-icon-enter_18sf4_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_18sf4_134",
+  "checkbox--size-medium": "_checkbox--size-medium_18sf4_149",
+  "checkbox--size-large": "_checkbox--size-large_18sf4_164"
 };
 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 u=require("react/jsx-runtime"),q=require("react"),__M=require("@mattermost/compass-icons/components/close-circle.js"),M=__M?.default??__M,A=require("../icon/Icon.cjs"),I=require("../user-avatar/UserAvatar.cjs"),D=require("../../utils/string.cjs"),y=require("./ChipGroup.cjs"),a=require("./Chip.module.scss.cjs"),k={small:"10",medium:"12",large:"16"},w={small:"12",medium:"16",large:"20"};function T(t){return typeof t=="string"||typeof t=="number"?String(t).trim():Array.isArray(t)?t.map(T).filter(Boolean).join(" "):""}function L(t){var r;const s=(b,h)=>{let n=b;for(;n;){if(n instanceof HTMLElement&&n.dataset.chip!=null||n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)return n;n=h==="next"?n.nextElementSibling:n.previousElementSibling}return null},l=t.parentElement,c=l==null?void 0:l.nextElementSibling,f=c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement?c:null;return s(t.nextElementSibling,"next")??s(t.previousElementSibling,"previous")??f??(l==null?void 0:l.querySelector("input, textarea"))??((r=l==null?void 0:l.parentElement)==null?void 0:r.querySelector("input, textarea"))??null}function N({children:t,size:s="medium",compact:l=!1,leadingIcon:c,leadingAvatar:f,onRemove:r,error:b=!1,colored:h=!1,className:n="",...i}){const x=q.useContext(y.ChipGroupContext),g=k[s],S=w[s],d=T(t),_=i["aria-label"]??(r!=null&&d!==""?`${d}. Press Delete to remove.`:d!==""?d:void 0),m=r!=null,C=e=>{const p=e.currentTarget.closest("[data-chip]"),o=p instanceof HTMLElement?L(p):null,j=e.currentTarget;r==null||r(e),window.setTimeout(()=>{j.isConnected||o==null||o.isConnected&&(o.dataset.chip!=null?y.activateChip(o):o.focus({focusVisible:!0}))},0)},E=[a.default.chip,a.default[`chip--size-${D.toKebab(s)}`],l&&a.default["chip--compact"],b&&a.default["chip--error"],h&&a.default["chip--colored"],n].filter(Boolean).join(" "),v=e=>{var p,o;(p=i.onKeyDown)==null||p.call(i,e),!(x||!m||e.defaultPrevented)&&(e.key==="Delete"||e.key==="Backspace"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),(o=e.currentTarget.querySelector("[data-chip-remove]"))==null||o.click())};return u.jsxs("div",{className:E,...i,role:m?"button":i.role,tabIndex:m?x?-1:0:i.tabIndex,"aria-label":m?_:i["aria-label"],"data-chip":"",onKeyDown:v,children:[f!=null?u.jsx("span",{className:a.default["chip__avatar-slot"],children:u.jsx(I.default,{src:f.src,alt:f.alt,size:S})}):c!=null?u.jsx("span",{className:a.default["chip__icon-slot"],"aria-hidden":!0,children:u.jsx(A.default,{glyph:c,size:g})}):null,u.jsx("span",{className:a.default.chip__label,children:t}),r!=null?u.jsx("button",{type:"button",className:a.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:e=>{e.preventDefault()},onClick:C,children:u.jsx(M,{size:Number(g),"aria-hidden":!0})}):null]})}exports.default=N;
 //# 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 {\n  useContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} 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' | 'large';\n\n/**\n * Removable chips derive their accessible name from string children as\n * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.\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  /** Reduces vertical and horizontal padding. */\n  compact?: boolean;\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  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '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 (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {\n        return el;\n      }\n      el =\n        direction === 'next'\n          ? el.nextElementSibling\n          : 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  compact = false,\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    compact && styles['chip--compact'],\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.stopPropagation();\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","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"gZA6CMA,EAA4C,CAChD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAEMC,EAAoD,CACxD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAEA,SAASC,EAAsBC,EAA6B,CAC1D,OAAI,OAAOA,GAAa,UAAY,OAAOA,GAAa,SAC/C,OAAOA,CAAQ,EAAE,KAAA,EAEtB,MAAM,QAAQA,CAAQ,EACjBA,EAAS,IAAID,CAAqB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAE9D,EACT,CAEA,SAASE,EAAuBC,EAAyC,OACvE,MAAMC,EAAO,CACXC,EACAC,IACuB,CACvB,IAAIC,EAAqBF,EACzB,KAAOE,GAAI,CAIT,GAHIA,aAAc,aAAeA,EAAG,QAAQ,MAAQ,MAGhDA,aAAc,kBAAoBA,aAAc,oBAClD,OAAOA,EAETA,EACED,IAAc,OACVC,EAAG,mBACHA,EAAG,sBACX,CACA,OAAO,IACT,EAEMC,EAASL,EAAO,cAChBM,EAAaD,GAAA,YAAAA,EAAQ,mBACrBE,EACJD,aAAsB,kBACtBA,aAAsB,oBAClBA,EACA,KAEN,OACEL,EAAKD,EAAO,mBAAoB,MAAM,GACtCC,EAAKD,EAAO,uBAAwB,UAAU,GAC9CO,IACAF,GAAA,YAAAA,EAAQ,cAAc,uBACtBG,EAAAH,GAAA,YAAAA,EAAQ,gBAAR,YAAAG,EAAuB,cAAc,qBACrC,IAEJ,CAOA,SAAwBC,EAAK,CAC3B,SAAAX,EACA,KAAAY,EAAO,SACP,QAAAC,EAAU,GACV,YAAAC,EACA,cAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,GACR,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAc,CACZ,MAAMC,EAAUC,EAAAA,WAAWC,kBAAgB,EACrCC,EAAW3B,EAAce,CAAI,EAC7Ba,EAAa3B,EAAgBc,CAAI,EACjCc,EAAY3B,EAAsBC,CAAQ,EAC1C2B,EACJP,EAAK,YAAY,IAChBJ,GAAY,MAAQU,IAAc,GAC/B,GAAGA,CAAS,4BACZA,IAAc,GACZA,EACA,QACFE,EAAYZ,GAAY,KAExBa,EAAgB,GAAqC,CACzD,MAAM3B,EAAS,EAAE,cAAc,QAAQ,aAAa,EAC9C4B,EACJ5B,aAAkB,YAAcD,EAAuBC,CAAM,EAAI,KAC7D6B,EAAe,EAAE,cACvBf,GAAA,MAAAA,EAAW,GACX,OAAO,WAAW,IAAM,CAClBe,EAAa,aAAeD,GAAa,MACxCA,EAAU,cACXA,EAAU,QAAQ,MAAQ,KAC5BE,EAAAA,aAAaF,CAAS,EAEtBA,EAAU,MAAM,CAAE,aAAc,EAAA,CAAsB,EAE1D,EAAG,CAAC,CACN,EAEMG,EAAY,CAChBC,EAAAA,QAAO,KACPA,EAAAA,QAAO,cAAcC,EAAAA,QAAQvB,CAAI,CAAC,EAAE,EACpCC,GAAWqB,EAAAA,QAAO,eAAe,EACjCjB,GAASiB,EAAAA,QAAO,aAAa,EAC7BhB,GAAWgB,EAAAA,QAAO,eAAe,EACjCf,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELiB,EAAiB,GAAqC,UAC1D1B,EAAAU,EAAK,YAAL,MAAAV,EAAA,KAAAU,EAAiB,GACb,EAAAC,GAAW,CAACO,GAAa,EAAE,oBAE7B,EAAE,MAAQ,UACV,EAAE,MAAQ,aACV,EAAE,MAAQ,SACV,EAAE,MAAQ,OAEV,EAAE,eAAA,EACF,EAAE,gBAAA,GACFS,EAAA,EAAE,cACC,cAAiC,oBAAoB,IADxD,MAAAA,EAEI,QAER,EAEA,OACEC,EAAAA,KAAC,MAAA,CACC,UAAWL,EACV,GAAGb,EACJ,KAAMQ,EAAY,SAAWR,EAAK,KAClC,SAAUQ,EAAaP,EAAU,GAAK,EAAKD,EAAK,SAChD,aAAYQ,EAAYD,EAAmBP,EAAK,YAAY,EAC5D,YAAU,GACV,UAAWgB,EAEV,SAAA,CAAArB,GAAiB,KAChBwB,EAAAA,IAAC,OAAA,CAAK,UAAWL,UAAO,mBAAmB,EACzC,SAAAK,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAKzB,EAAc,IACnB,IAAKA,EAAc,IACnB,KAAMU,CAAA,CAAA,EAEV,EACEX,GAAe,KACjByB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,iBAAiB,EAAG,cAAW,GACrD,eAACO,EAAAA,QAAA,CAAK,MAAO3B,EAAa,KAAMU,CAAA,CAAU,EAC5C,EACE,WACH,OAAA,CAAK,UAAWU,EAAAA,QAAO,YAAiB,SAAAlC,EAAS,EACjDgB,GAAY,KACXuB,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWL,EAAAA,QAAO,aAClB,mBAAiB,GACjB,SAAU,GACV,cAAW,GACX,YAAc,GAAM,CAClB,EAAE,eAAA,CACJ,EACA,QAASL,EAET,eAACa,EAAA,CAAgB,KAAM,OAAOlB,CAAQ,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,EAErD,IAAA,CAAA,CAAA,CAGV"}

package/dist/components/chip/Chip.css

@@ -0,0 +1 @@
+._chip_avr9t_13{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;min-width:0;max-width:100%;cursor:default;outline:none}._chip_avr9t_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:0;animation:_focus-ring-in_avr9t_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._chip_avr9t_13:focus-visible{animation:none}}@keyframes _focus-ring-in_avr9t_1{0%{outline-color:transparent;outline-offset:0}}._chip_avr9t_13:hover{transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition);background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_avr9t_13:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_avr9t_54{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_avr9t_60,._chip__avatar-slot_avr9t_66{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_avr9t_72{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-pill);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_avr9t_72:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip__remove_avr9t_72:not(._-host-shadow-a_avr9t_88):not(._-host-shadow-b_avr9t_88){border-radius:var(--radius-pill)}._chip--colored_avr9t_91:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_avr9t_99{border-color:var(--error-text, var(--color-danger))}._chip--size-small_avr9t_102{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_avr9t_102:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxs)}._chip--size-small_avr9t_102 ._chip__label_avr9t_54{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_avr9t_102 ._chip__remove_avr9t_72{padding:1px}._chip--size-medium_avr9t_117{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_avr9t_117:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxs)}._chip--size-medium_avr9t_117 ._chip__label_avr9t_54{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_avr9t_117 ._chip__remove_avr9t_72{padding:var(--spacing-xxxxs)}._chip--size-large_avr9t_131{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_avr9t_131:has(._chip__remove_avr9t_72){padding-right:var(--spacing-s)}._chip--size-large_avr9t_131 ._chip__label_avr9t_54{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_avr9t_131 ._chip__remove_avr9t_72{padding:var(--spacing-xxxxs)}._chip--compact_avr9t_145{padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--compact_avr9t_145:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxxs)}._chip--size-large_avr9t_131._chip--compact_avr9t_145{padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-large_avr9t_131._chip--compact_avr9t_145:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxs)}

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

@@ -1,21 +1,25 @@
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
-export type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';
+export type ChipSize = 'small' | 'medium' | 'large';
+/**
+ * Removable chips derive their accessible name from string children as
+ * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.
+ */
 export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Chip label. */
     children: ReactNode;
     /** Visual size. Default: Medium. */
     size?: ChipSize;
+    /** Reduces vertical and horizontal padding. */
+    compact?: boolean;
     /** 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 +31,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, compact, 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,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;GAGG;AACH,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,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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;AA+DD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,OAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAoGX"}