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

package/dist/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nexport default function Switch({\n  className = '',\n  size = 'medium',\n  children,\n  secondaryLabel,\n  semiBold = false,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: SwitchProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']} aria-hidden>\n        {/* Native checkbox (visually hidden via CSS); provides semantics, keyboard, and form support */}\n        <input\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} />\n      </span>\n    </label>\n  );\n}\n"],"names":["Switch","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA4BA,SAAwBA,EAAO;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAcC,EAAA,GACdC,IAAKR,KAAUM,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCV;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIQ,IAAYC,EAAO,gBAAgBC,EAAQlB,CAAI,CAAC,EAAE,GAClDmB,IAAgBhB,IAAWc,EAAO,mBAAmB,IAAI,IACzDG,IACJlB,KAAkB,OAAOe,EAAO,wBAAwB,IAAI,IAExDI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACArB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAuB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAAST,GAClC,UAAA;AAAA,KAAAX,KAAY,QAAQC,KAAkB,SACtC,gBAAAoB,EAAC,UAAK,WAAWL,EAAO,gBACrB,UAAA;AAAA,MAAAhB,KAAY,QACX,gBAAAsB,EAAC,QAAA,EAAK,WAAWN,EAAO,eAAmB,UAAAhB,GAAS;AAAA,MAErDC,KAAkB,QACjB,gBAAAqB,EAAC,QAAA,EAAK,WAAWN,EAAO,yBAAyB,GAC9C,UAAAf,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,sBAED,QAAA,EAAK,WAAWe,EAAO,eAAkB,eAAW,IAEnD,UAAA;AAAA,MAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAX;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,WAAWK,EAAO;AAAA,UAClB,SAAAZ;AAAA,UACA,gBAAAC;AAAA,UACA,UAAAC;AAAA,UACA,gBAAcM;AAAA,UACd,UAAUC;AAAA,UACT,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,gBAAAc,EAAC,QAAA,EAAK,WAAWN,EAAO,aAAc,CAAG;AAAA,IAAA,EAAA,CAC3C;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nexport default function Switch({\n  className = '',\n  size = 'medium',\n  children,\n  secondaryLabel,\n  semiBold = false,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: SwitchProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']}>\n        <input\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} aria-hidden />\n      </span>\n    </label>\n  );\n}\n"],"names":["Switch","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA4BA,SAAwBA,EAAO;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAcC,EAAA,GACdC,IAAKR,KAAUM,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCV;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIQ,IAAYC,EAAO,gBAAgBC,EAAQlB,CAAI,CAAC,EAAE,GAClDmB,IAAgBhB,IAAWc,EAAO,mBAAmB,IAAI,IACzDG,IACJlB,KAAkB,OAAOe,EAAO,wBAAwB,IAAI,IAExDI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACArB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAuB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAAST,GAClC,UAAA;AAAA,KAAAX,KAAY,QAAQC,KAAkB,SACtC,gBAAAoB,EAAC,UAAK,WAAWL,EAAO,gBACrB,UAAA;AAAA,MAAAhB,KAAY,QACX,gBAAAsB,EAAC,QAAA,EAAK,WAAWN,EAAO,eAAmB,UAAAhB,GAAS;AAAA,MAErDC,KAAkB,QACjB,gBAAAqB,EAAC,QAAA,EAAK,WAAWN,EAAO,yBAAyB,GAC9C,UAAAf,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA;AAAA,MAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAX;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,WAAWK,EAAO;AAAA,UAClB,SAAAZ;AAAA,UACA,gBAAAC;AAAA,UACA,UAAAC;AAAA,UACA,gBAAcM;AAAA,UACd,UAAUC;AAAA,UACT,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEL,QAAA,EAAK,WAAWQ,EAAO,cAAiB,eAAW,GAAA,CAAC;AAAA,IAAA,EAAA,CACvD;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/switch/Switch.module.css

@@ -1 +1 @@
-._switch_11cfw_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._switch_11cfw_2:has(._switch__input_11cfw_12:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_11cfw_2:has(._switch__input_11cfw_12:disabled) ._switch__secondary-label_11cfw_16{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_11cfw_12{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_11cfw_12:focus-visible{outline:none}._switch__labels_11cfw_33{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_11cfw_33{line-height:1}._switch__secondary-label_11cfw_16{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_11cfw_47{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_11cfw_47:has(._switch__input_11cfw_12:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_11cfw_2:has(._switch__input_11cfw_12:not(:disabled)):hover ._switch__track_11cfw_47{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_11cfw_47:has(._switch__input_11cfw_12:checked){background-color:var(--button-bg)}._switch_11cfw_2:has(._switch__input_11cfw_12:not(:disabled)):hover ._switch__track_11cfw_47:has(._switch__input_11cfw_12:checked){background-color:var(--button-bg)}._switch__track_11cfw_47:has(._switch__input_11cfw_12:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_11cfw_47:has(._switch__input_11cfw_12:disabled){opacity:.32}._switch__track_11cfw_47:has(._switch__input_11cfw_12:disabled:checked){background-color:rgba(var(--color-neutral-900-rgb),.32)}._switch__knob_11cfw_77{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-full);background-color:var(--color-neutral-0);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_11cfw_88 ._switch__track_11cfw_47{width:26px;height:16px}._switch--size-small_11cfw_88 ._switch__track_11cfw_47:has(._switch__input_11cfw_12:checked) ._switch__knob_11cfw_77{transform:translateY(-50%) translate(10px)}._switch--size-small_11cfw_88 ._switch__knob_11cfw_77{width:12px;height:12px}._switch--size-small_11cfw_88 ._switch__label_11cfw_33,._switch--size-small_11cfw_88 ._switch__secondary-label_11cfw_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_11cfw_107 ._switch__track_11cfw_47{width:32px;height:20px}._switch--size-medium_11cfw_107 ._switch__track_11cfw_47:has(._switch__input_11cfw_12:checked) ._switch__knob_11cfw_77{transform:translateY(-50%) translate(12px)}._switch--size-medium_11cfw_107 ._switch__knob_11cfw_77{width:16px;height:16px}._switch--size-medium_11cfw_107 ._switch__label_11cfw_33{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_11cfw_107 ._switch__secondary-label_11cfw_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_11cfw_126 ._switch__track_11cfw_47{width:40px;height:24px}._switch--size-large_11cfw_126 ._switch__track_11cfw_47:has(._switch__input_11cfw_12:checked) ._switch__knob_11cfw_77{transform:translateY(-50%) translate(16px)}._switch--size-large_11cfw_126 ._switch__knob_11cfw_77{width:20px;height:20px}._switch--size-large_11cfw_126 ._switch__label_11cfw_33{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_11cfw_126 ._switch__secondary-label_11cfw_16{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_11cfw_145 ._switch__label_11cfw_33{font-weight:var(--font-weight-semibold)}._switch--with-secondary_11cfw_148{align-items:center}._switch--with-secondary_11cfw_148 ._switch__labels_11cfw_33{padding-top:0;padding-bottom:0}
+._switch_1hxbi_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._switch_1hxbi_2:has(._switch__input_1hxbi_12:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_1hxbi_2:has(._switch__input_1hxbi_12:disabled) ._switch__secondary-label_1hxbi_16{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_1hxbi_12{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_1hxbi_12:focus-visible{outline:none}._switch__labels_1hxbi_33{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_1hxbi_33{line-height:1}._switch__secondary-label_1hxbi_16{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_1hxbi_47{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_1hxbi_2:has(._switch__input_1hxbi_12:not(:disabled)):hover ._switch__track_1hxbi_47{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked){background-color:var(--button-bg)}._switch_1hxbi_2:has(._switch__input_1hxbi_12:not(:disabled)):hover ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked){background-color:var(--button-bg)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:disabled){opacity:.32}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_1hxbi_77{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-full);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_1hxbi_88 ._switch__track_1hxbi_47{width:26px;height:16px}._switch--size-small_1hxbi_88 ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked) ._switch__knob_1hxbi_77{transform:translateY(-50%) translate(10px)}._switch--size-small_1hxbi_88 ._switch__knob_1hxbi_77{width:12px;height:12px}._switch--size-small_1hxbi_88 ._switch__label_1hxbi_33,._switch--size-small_1hxbi_88 ._switch__secondary-label_1hxbi_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_1hxbi_107 ._switch__track_1hxbi_47{width:32px;height:20px}._switch--size-medium_1hxbi_107 ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked) ._switch__knob_1hxbi_77{transform:translateY(-50%) translate(12px)}._switch--size-medium_1hxbi_107 ._switch__knob_1hxbi_77{width:16px;height:16px}._switch--size-medium_1hxbi_107 ._switch__label_1hxbi_33{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_1hxbi_107 ._switch__secondary-label_1hxbi_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_1hxbi_126 ._switch__track_1hxbi_47{width:40px;height:24px}._switch--size-large_1hxbi_126 ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked) ._switch__knob_1hxbi_77{transform:translateY(-50%) translate(16px)}._switch--size-large_1hxbi_126 ._switch__knob_1hxbi_77{width:20px;height:20px}._switch--size-large_1hxbi_126 ._switch__label_1hxbi_33{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_1hxbi_126 ._switch__secondary-label_1hxbi_16{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_1hxbi_145 ._switch__label_1hxbi_33{font-weight:var(--font-weight-semibold)}._switch--with-secondary_1hxbi_148{align-items:center}._switch--with-secondary_1hxbi_148 ._switch__labels_1hxbi_33{padding-top:0;padding-bottom:0}

package/dist/components/switch/Switch.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.module.css');const _="_switch__input_11cfw_12",s="_switch__labels_11cfw_33",c="_switch__label_11cfw_33",t="_switch__track_11cfw_47",i="_switch__knob_11cfw_77",w={switch:"_switch_11cfw_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_11cfw_16",switch__labels:s,switch__label:c,switch__track:t,switch__knob:i,"switch--size-small":"_switch--size-small_11cfw_88","switch--size-medium":"_switch--size-medium_11cfw_107","switch--size-large":"_switch--size-large_11cfw_126","switch--semi-bold":"_switch--semi-bold_11cfw_145","switch--with-secondary":"_switch--with-secondary_11cfw_148"};exports.default=w;exports.switch__input=_;exports.switch__knob=i;exports.switch__label=c;exports.switch__labels=s;exports.switch__track=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.module.css');const _="_switch__input_1hxbi_12",i="_switch__labels_1hxbi_33",s="_switch__label_1hxbi_33",t="_switch__track_1hxbi_47",c="_switch__knob_1hxbi_77",h={switch:"_switch_1hxbi_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_1hxbi_16",switch__labels:i,switch__label:s,switch__track:t,switch__knob:c,"switch--size-small":"_switch--size-small_1hxbi_88","switch--size-medium":"_switch--size-medium_1hxbi_107","switch--size-large":"_switch--size-large_1hxbi_126","switch--semi-bold":"_switch--semi-bold_1hxbi_145","switch--with-secondary":"_switch--with-secondary_1hxbi_148"};exports.default=h;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=s;exports.switch__labels=i;exports.switch__track=t;
 //# sourceMappingURL=Switch.module.scss.cjs.map

package/dist/components/switch/Switch.module.scss.js

@@ -1,23 +1,23 @@
-import './Switch.module.css';const _ = "_switch__input_11cfw_12", s = "_switch__labels_11cfw_33", c = "_switch__label_11cfw_33", t = "_switch__track_11cfw_47", i = "_switch__knob_11cfw_77", w = {
-  switch: "_switch_11cfw_2",
+import './Switch.module.css';const _ = "_switch__input_1hxbi_12", i = "_switch__labels_1hxbi_33", s = "_switch__label_1hxbi_33", t = "_switch__track_1hxbi_47", h = "_switch__knob_1hxbi_77", c = {
+  switch: "_switch_1hxbi_2",
   switch__input: _,
-  "switch__secondary-label": "_switch__secondary-label_11cfw_16",
-  switch__labels: s,
-  switch__label: c,
+  "switch__secondary-label": "_switch__secondary-label_1hxbi_16",
+  switch__labels: i,
+  switch__label: s,
   switch__track: t,
-  switch__knob: i,
-  "switch--size-small": "_switch--size-small_11cfw_88",
-  "switch--size-medium": "_switch--size-medium_11cfw_107",
-  "switch--size-large": "_switch--size-large_11cfw_126",
-  "switch--semi-bold": "_switch--semi-bold_11cfw_145",
-  "switch--with-secondary": "_switch--with-secondary_11cfw_148"
+  switch__knob: h,
+  "switch--size-small": "_switch--size-small_1hxbi_88",
+  "switch--size-medium": "_switch--size-medium_1hxbi_107",
+  "switch--size-large": "_switch--size-large_1hxbi_126",
+  "switch--semi-bold": "_switch--semi-bold_1hxbi_145",
+  "switch--with-secondary": "_switch--with-secondary_1hxbi_148"
 };
 export {
-  w as default,
+  c as default,
   _ as switch__input,
-  i as switch__knob,
-  c as switch__label,
-  s as switch__labels,
+  h as switch__knob,
+  s as switch__label,
+  i as switch__labels,
   t as switch__track
 };
 //# sourceMappingURL=Switch.module.scss.js.map

package/dist/components/tabs/Tabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),e=require("./Tabs.module.scss.cjs");function r({tabs:n,activeKey:d,onChange:u,className:i="",controls:l}){const o=[e.default.tabs,i].filter(Boolean).join(" ");return s.jsxs("div",{className:o,children:[s.jsx("div",{className:e.default["tabs__tab-list"],role:"tablist",children:n.map(a=>{const t=a.key===d,c=[e.default.tabs__tab,t?e.default["tabs__tab--active"]:""].filter(Boolean).join(" ");return s.jsxs("button",{role:"tab",type:"button","aria-selected":t,className:c,onClick:()=>u(a.key),children:[s.jsx("span",{className:e.default["tabs__tab-label"],children:a.label}),a.countBadge!=null&&s.jsx("span",{className:[e.default["tabs__count-badge"],t?e.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:a.countBadge}),a.unreadBadge&&!t&&s.jsx("span",{className:e.default["tabs__unread-badge"],"aria-label":"Unread"})]},a.key)})}),l!=null&&s.jsx("div",{className:e.default.tabs__controls,children:l})]})}exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),c=require("react"),t=require("./Tabs.module.scss.cjs");function j({tabs:i,activeKey:o,onChange:f,className:y="",controls:_}){const h=[t.default.tabs,y].filter(Boolean).join(" "),b=c.useRef([]),[m,u]=c.useState(o);c.useEffect(()=>{u(o)},[o]);const s=i.map(e=>e.key),p=s.includes(m)?m:o,r=e=>{var l;u(e);const n=s.indexOf(e);(l=b.current[n])==null||l.focus()},x=(e,n)=>{const l=s.indexOf(n);l<0||s.length===0||(e.key==="ArrowRight"?(e.preventDefault(),r(s[(l+1)%s.length])):e.key==="ArrowLeft"?(e.preventDefault(),r(s[(l-1+s.length)%s.length])):e.key==="Home"?(e.preventDefault(),r(s[0])):e.key==="End"?(e.preventDefault(),r(s[s.length-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),f(n)))};return a.jsxs("div",{className:h,children:[a.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:i.map((e,n)=>{const l=e.key===o,g=[t.default.tabs__tab,l?t.default["tabs__tab--active"]:""].filter(Boolean).join(" ");return a.jsxs("button",{ref:d=>{b.current[n]=d},id:e.id,role:"tab",type:"button",tabIndex:p===e.key?0:-1,"aria-selected":l,"aria-controls":e.panelId,className:g,onClick:()=>{u(e.key),f(e.key)},onKeyDown:d=>x(d,e.key),children:[a.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&a.jsx("span",{className:[t.default["tabs__count-badge"],l?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!l&&a.jsx("span",{className:t.default["tabs__unread-badge"],children:a.jsx("span",{className:t.default["tabs__unread-label"],children:"Unread"})})]},e.key)})}),_!=null&&a.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=j;
 //# sourceMappingURL=Tabs.cjs.map

package/dist/components/tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label text. */\n  label: string;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab) => {\n          const isActive = tab.key === activeKey;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              role=\"tab\"\n              type=\"button\"\n              aria-selected={isActive}\n              className={tabClass}\n              onClick={() => onChange(tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span\n                  className={styles['tabs__unread-badge']}\n                  aria-label=\"Unread\"\n                />\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","jsxs","jsx","tab","isActive","tabClass"],"mappings":"qLAgCA,SAAwBA,EAAK,CAC3B,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,CACF,EAAc,CACZ,MAAMC,EAAY,CAACC,EAAAA,QAAO,KAAMH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEnE,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,gBAAgB,EAAG,KAAK,UAC5C,SAAAN,EAAK,IAAKS,GAAQ,CACjB,MAAMC,EAAWD,EAAI,MAAQR,EACvBU,EAAW,CACfL,EAAAA,QAAO,UACPI,EAAWJ,EAAAA,QAAO,mBAAmB,EAAI,EAAA,EAExC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEC,EAAAA,KAAC,SAAA,CAEC,KAAK,MACL,KAAK,SACL,gBAAeG,EACf,UAAWC,EACX,QAAS,IAAMT,EAASO,EAAI,GAAG,EAE/B,SAAA,CAAAD,MAAC,QAAK,UAAWF,EAAAA,QAAO,iBAAiB,EAAI,WAAI,MAAM,EAEtDG,EAAI,YAAc,MACjBD,EAAAA,IAAC,OAAA,CACC,UAAW,CACTF,EAAAA,QAAO,mBAAmB,EAC1BI,EAAWJ,EAAAA,QAAO,2BAA2B,EAAI,EAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAG,EAAI,UAAA,CAAA,EAIRA,EAAI,aAAe,CAACC,GACnBF,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,oBAAoB,EACtC,aAAW,QAAA,CAAA,CACb,CAAA,EA1BGG,EAAI,GAAA,CA8Bf,CAAC,CAAA,CACH,EAECL,GAAY,MACXI,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,eAAoB,SAAAF,CAAA,CAAS,CAAA,EAExD,CAEJ"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label text. */\n  label: string;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const focusKey = keys.includes(focusedKey) ? focusedKey : activeKey;\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, key: string) => {\n    const index = keys.indexOf(key);\n    if (index < 0 || keys.length === 0) return;\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(keys[(index + 1) % keys.length]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(keys[(index - 1 + keys.length) % keys.length]);\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(keys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(keys[keys.length - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      onChange(key);\n    }\n  };\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              className={tabClass}\n              onClick={() => {\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>{'Unread'}</span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","focusKey","moveFocus","key","index","_a","handleKeyDown","event","jsxs","jsx","isActive","tabClass","node"],"mappings":"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"}

package/dist/components/tabs/Tabs.d.ts

@@ -8,6 +8,10 @@ export interface TabItem {
     countBadge?: number;
     /** When true, shows an unread dot badge. */
     unreadBadge?: boolean;
+    /** Optional id for this tab (pair with `panelId` for `aria-controls`). */
+    id?: string;
+    /** Optional id of the host tabpanel this tab controls. */
+    panelId?: string;
 }
 export interface TabsProps {
     /** Array of tab items to display. */

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,GACT,EAAE,SAAS,2CAuDX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,GACT,EAAE,SAAS,2CAqGX"}

package/dist/components/tabs/Tabs.js

@@ -1,55 +1,71 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import a from "./Tabs.module.scss.js";
-function m({
-  tabs: o,
-  activeKey: i,
-  onChange: c,
-  className: r = "",
-  controls: l
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useRef as x, useState as N, useEffect as D } from "react";
+import l from "./Tabs.module.scss.js";
+function A({
+  tabs: d,
+  activeKey: o,
+  onChange: u,
+  className: b = "",
+  controls: f
 }) {
-  const d = [a.tabs, r].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { className: d, children: [
-    /* @__PURE__ */ s("div", { className: a["tabs__tab-list"], role: "tablist", children: o.map((e) => {
-      const t = e.key === i, b = [
-        a.tabs__tab,
-        t ? a["tabs__tab--active"] : ""
+  const y = [l.tabs, b].filter(Boolean).join(" "), m = x([]), [_, c] = N(o);
+  D(() => {
+    c(o);
+  }, [o]);
+  const s = d.map((e) => e.key), h = s.includes(_) ? _ : o, r = (e) => {
+    var n;
+    c(e);
+    const a = s.indexOf(e);
+    (n = m.current[a]) == null || n.focus();
+  }, k = (e, a) => {
+    const n = s.indexOf(a);
+    n < 0 || s.length === 0 || (e.key === "ArrowRight" ? (e.preventDefault(), r(s[(n + 1) % s.length])) : e.key === "ArrowLeft" ? (e.preventDefault(), r(s[(n - 1 + s.length) % s.length])) : e.key === "Home" ? (e.preventDefault(), r(s[0])) : e.key === "End" ? (e.preventDefault(), r(s[s.length - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u(a)));
+  };
+  return /* @__PURE__ */ p("div", { className: y, children: [
+    /* @__PURE__ */ t("div", { className: l["tabs__tab-list"], role: "tablist", children: d.map((e, a) => {
+      const n = e.key === o, g = [
+        l.tabs__tab,
+        n ? l["tabs__tab--active"] : ""
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ p(
         "button",
         {
+          ref: (i) => {
+            m.current[a] = i;
+          },
+          id: e.id,
           role: "tab",
           type: "button",
-          "aria-selected": t,
-          className: b,
-          onClick: () => c(e.key),
+          tabIndex: h === e.key ? 0 : -1,
+          "aria-selected": n,
+          "aria-controls": e.panelId,
+          className: g,
+          onClick: () => {
+            c(e.key), u(e.key);
+          },
+          onKeyDown: (i) => k(i, e.key),
           children: [
-            /* @__PURE__ */ s("span", { className: a["tabs__tab-label"], children: e.label }),
-            e.countBadge != null && /* @__PURE__ */ s(
+            /* @__PURE__ */ t("span", { className: l["tabs__tab-label"], children: e.label }),
+            e.countBadge != null && /* @__PURE__ */ t(
               "span",
               {
                 className: [
-                  a["tabs__count-badge"],
-                  t ? a["tabs__count-badge--active"] : ""
+                  l["tabs__count-badge"],
+                  n ? l["tabs__count-badge--active"] : ""
                 ].filter(Boolean).join(" "),
                 children: e.countBadge
               }
             ),
-            e.unreadBadge && !t && /* @__PURE__ */ s(
-              "span",
-              {
-                className: a["tabs__unread-badge"],
-                "aria-label": "Unread"
-              }
-            )
+            e.unreadBadge && !n && /* @__PURE__ */ t("span", { className: l["tabs__unread-badge"], children: /* @__PURE__ */ t("span", { className: l["tabs__unread-label"], children: "Unread" }) })
           ]
         },
         e.key
       );
     }) }),
-    l != null && /* @__PURE__ */ s("div", { className: a.tabs__controls, children: l })
+    f != null && /* @__PURE__ */ t("div", { className: l.tabs__controls, children: f })
   ] });
 }
 export {
-  m as default
+  A as default
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label text. */\n  label: string;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab) => {\n          const isActive = tab.key === activeKey;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              role=\"tab\"\n              type=\"button\"\n              aria-selected={isActive}\n              className={tabClass}\n              onClick={() => onChange(tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span\n                  className={styles['tabs__unread-badge']}\n                  aria-label=\"Unread\"\n                />\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","jsxs","jsx","tab","isActive","tabClass"],"mappings":";;AAgCA,SAAwBA,EAAK;AAAA,EAC3B,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,GAAc;AACZ,QAAMC,IAAY,CAACC,EAAO,MAAMH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEnE,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWF,EAAO,gBAAgB,GAAG,MAAK,WAC5C,UAAAN,EAAK,IAAI,CAACS,MAAQ;AACjB,YAAMC,IAAWD,EAAI,QAAQR,GACvBU,IAAW;AAAA,QACfL,EAAO;AAAA,QACPI,IAAWJ,EAAO,mBAAmB,IAAI;AAAA,MAAA,EAExC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,aACE,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,iBAAeG;AAAA,UACf,WAAWC;AAAA,UACX,SAAS,MAAMT,EAASO,EAAI,GAAG;AAAA,UAE/B,UAAA;AAAA,YAAA,gBAAAD,EAAC,UAAK,WAAWF,EAAO,iBAAiB,GAAI,YAAI,OAAM;AAAA,YAEtDG,EAAI,cAAc,QACjB,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACTF,EAAO,mBAAmB;AAAA,kBAC1BI,IAAWJ,EAAO,2BAA2B,IAAI;AAAA,gBAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,gBAEV,UAAAG,EAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAIRA,EAAI,eAAe,CAACC,KACnB,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,EAAO,oBAAoB;AAAA,gBACtC,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QA1BGG,EAAI;AAAA,MAAA;AAAA,IA8Bf,CAAC,EAAA,CACH;AAAA,IAECL,KAAY,QACX,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,gBAAoB,UAAAF,EAAA,CAAS;AAAA,EAAA,GAExD;AAEJ;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label text. */\n  label: string;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const focusKey = keys.includes(focusedKey) ? focusedKey : activeKey;\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, key: string) => {\n    const index = keys.indexOf(key);\n    if (index < 0 || keys.length === 0) return;\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(keys[(index + 1) % keys.length]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(keys[(index - 1 + keys.length) % keys.length]);\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(keys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(keys[keys.length - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      onChange(key);\n    }\n  };\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              className={tabClass}\n              onClick={() => {\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>{'Unread'}</span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","focusKey","moveFocus","key","index","_a","handleKeyDown","event","jsxs","jsx","isActive","tabClass","node"],"mappings":"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"}

package/dist/components/tabs/Tabs.module.css

@@ -1 +1 @@
-._tabs_1jw11_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_1jw11_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_1jw11_7{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);overflow:hidden;border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);transition:background-color var(--duration-quick) var(--ease-transition)}._tabs__tab_1jw11_7:hover:not(._tabs__tab--active_1jw11_25){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_1jw11_25{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_1jw11_25 ._tabs__tab-label_1jw11_31{color:var(--link-color)}._tabs__tab--active_1jw11_25 ._tabs__count-badge_1jw11_34{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab-label_1jw11_31{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_1jw11_34{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_1jw11_62{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_1jw11_66{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-full);background-color:var(--mention-bg)}._tabs__controls_1jw11_75{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}
+._tabs_8ct09_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_8ct09_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_8ct09_7{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);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),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tabs__tab_8ct09_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_8ct09_7:hover:not(._tabs__tab--active_8ct09_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_8ct09_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_8ct09_31 ._tabs__tab-label_8ct09_37{color:var(--link-color)}._tabs__tab--active_8ct09_31 ._tabs__count-badge_8ct09_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab-label_8ct09_37{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_8ct09_40{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_8ct09_68{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_8ct09_72{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-full);background-color:var(--mention-bg)}._tabs__unread-label_8ct09_81{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._tabs__controls_8ct09_92{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}

package/dist/components/tabs/Tabs.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.module.css');const _="_tabs_1jw11_2",t="_tabs__tab_1jw11_7",a="_tabs__controls_1jw11_75",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_1jw11_7",tabs__tab:t,"tabs__tab--active":"_tabs__tab--active_1jw11_25","tabs__tab-label":"_tabs__tab-label_1jw11_31","tabs__count-badge":"_tabs__count-badge_1jw11_34","tabs__count-badge--active":"_tabs__count-badge--active_1jw11_62","tabs__unread-badge":"_tabs__unread-badge_1jw11_66",tabs__controls:a};exports.default=b;exports.tabs=_;exports.tabs__controls=a;exports.tabs__tab=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.module.css');const _="_tabs_8ct09_2",t="_tabs__tab_8ct09_7",a="_tabs__controls_8ct09_92",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_8ct09_7",tabs__tab:t,"tabs__tab--active":"_tabs__tab--active_8ct09_31","tabs__tab-label":"_tabs__tab-label_8ct09_37","tabs__count-badge":"_tabs__count-badge_8ct09_40","tabs__count-badge--active":"_tabs__count-badge--active_8ct09_68","tabs__unread-badge":"_tabs__unread-badge_8ct09_72","tabs__unread-label":"_tabs__unread-label_8ct09_81",tabs__controls:a};exports.default=b;exports.tabs=_;exports.tabs__controls=a;exports.tabs__tab=t;
 //# sourceMappingURL=Tabs.module.scss.cjs.map

package/dist/components/tabs/Tabs.module.scss.js

@@ -1,12 +1,13 @@
-import './Tabs.module.css';const _ = "_tabs_1jw11_2", t = "_tabs__tab_1jw11_7", a = "_tabs__controls_1jw11_75", b = {
+import './Tabs.module.css';const _ = "_tabs_8ct09_2", t = "_tabs__tab_8ct09_7", a = "_tabs__controls_8ct09_92", b = {
   tabs: _,
-  "tabs__tab-list": "_tabs__tab-list_1jw11_7",
+  "tabs__tab-list": "_tabs__tab-list_8ct09_7",
   tabs__tab: t,
-  "tabs__tab--active": "_tabs__tab--active_1jw11_25",
-  "tabs__tab-label": "_tabs__tab-label_1jw11_31",
-  "tabs__count-badge": "_tabs__count-badge_1jw11_34",
-  "tabs__count-badge--active": "_tabs__count-badge--active_1jw11_62",
-  "tabs__unread-badge": "_tabs__unread-badge_1jw11_66",
+  "tabs__tab--active": "_tabs__tab--active_8ct09_31",
+  "tabs__tab-label": "_tabs__tab-label_8ct09_37",
+  "tabs__count-badge": "_tabs__count-badge_8ct09_40",
+  "tabs__count-badge--active": "_tabs__count-badge--active_8ct09_68",
+  "tabs__unread-badge": "_tabs__unread-badge_8ct09_72",
+  "tabs__unread-label": "_tabs__unread-label_8ct09_81",
   tabs__controls: a
 };
 export {

package/dist/components/tabs/Tabs.module.scss.js.map

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

package/dist/components/tag/Tag.module.css

@@ -1 +1 @@
-._tag_jtn7u_2{display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;max-width:100%;border-radius:var(--radius-s);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);white-space:nowrap}._tag__icon_jtn7u_14{display:inline-flex;align-items:center;flex-shrink:0}._tag__label_jtn7u_19{line-height:var(--line-height-25)}._tag--size-x-small_jtn7u_22{gap:var(--spacing-xxxs);padding:0 var(--spacing-xxxs);font-size:var(--font-size-25);letter-spacing:.1px}._tag--size-small_jtn7u_28{gap:var(--spacing-xxs);padding:var(--spacing-xxxxs) var(--spacing-xxs);font-size:var(--font-size-75)}._tag--type-default_jtn7u_33{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._tag--type-info_jtn7u_37{background-color:var(--color-blue-300);color:var(--color-neutral-0)}._tag--type-info-dim_jtn7u_41{background-color:rgba(var(--color-blue-500-rgb),.12);color:var(--color-blue-500)}._tag--type-danger_jtn7u_45{background-color:var(--color-red-400);color:var(--color-neutral-0)}._tag--type-success_jtn7u_49{background-color:var(--color-green-500);color:var(--color-neutral-0)}._tag--type-warning_jtn7u_53{background-color:var(--color-yellow-400);color:var(--center-channel-color)}._tag--casing-all-caps_jtn7u_57{text-transform:uppercase}
+._tag_ne839_2{display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;max-width:100%;border-radius:var(--radius-s);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);white-space:nowrap}._tag__icon_ne839_14{display:inline-flex;align-items:center;flex-shrink:0}._tag__label_ne839_19{line-height:var(--line-height-25)}._tag--size-x-small_ne839_22{gap:var(--spacing-xxxs);padding:0 var(--spacing-xxxs);font-size:var(--font-size-25);letter-spacing:.1px}._tag--size-small_ne839_28{gap:var(--spacing-xxs);padding:var(--spacing-xxxxs) var(--spacing-xxs);font-size:var(--font-size-75)}._tag--type-default_ne839_33{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._tag--type-info_ne839_37{background-color:var(--sidebar-text-active-border);color:var(--button-color)}._tag--type-info-dim_ne839_41{background-color:rgba(var(--button-bg-rgb),.12);color:var(--button-color)}._tag--type-danger_ne839_45{background-color:var(--color-danger);color:var(--button-color)}._tag--type-success_ne839_49{background-color:var(--color-success);color:var(--button-color)}._tag--type-warning_ne839_53{background-color:var(--color-warning);color:var(--neutral-0)}._tag--casing-all-caps_ne839_57{text-transform:uppercase}

package/dist/components/tag/Tag.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tag.module.css');const t="_tag_jtn7u_2",a="_tag__icon_jtn7u_14",_="_tag__label_jtn7u_19",e={tag:t,tag__icon:a,tag__label:_,"tag--size-x-small":"_tag--size-x-small_jtn7u_22","tag--size-small":"_tag--size-small_jtn7u_28","tag--type-default":"_tag--type-default_jtn7u_33","tag--type-info":"_tag--type-info_jtn7u_37","tag--type-info-dim":"_tag--type-info-dim_jtn7u_41","tag--type-danger":"_tag--type-danger_jtn7u_45","tag--type-success":"_tag--type-success_jtn7u_49","tag--type-warning":"_tag--type-warning_jtn7u_53","tag--casing-all-caps":"_tag--casing-all-caps_jtn7u_57"};exports.default=e;exports.tag=t;exports.tag__icon=a;exports.tag__label=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tag.module.css');const t="_tag_ne839_2",a="_tag__icon_ne839_14",_="_tag__label_ne839_19",e={tag:t,tag__icon:a,tag__label:_,"tag--size-x-small":"_tag--size-x-small_ne839_22","tag--size-small":"_tag--size-small_ne839_28","tag--type-default":"_tag--type-default_ne839_33","tag--type-info":"_tag--type-info_ne839_37","tag--type-info-dim":"_tag--type-info-dim_ne839_41","tag--type-danger":"_tag--type-danger_ne839_45","tag--type-success":"_tag--type-success_ne839_49","tag--type-warning":"_tag--type-warning_ne839_53","tag--casing-all-caps":"_tag--casing-all-caps_ne839_57"};exports.default=e;exports.tag=t;exports.tag__icon=a;exports.tag__label=_;
 //# sourceMappingURL=Tag.module.scss.cjs.map

package/dist/components/tag/Tag.module.scss.js

@@ -1,21 +1,21 @@
-import './Tag.module.css';const t = "_tag_jtn7u_2", a = "_tag__icon_jtn7u_14", _ = "_tag__label_jtn7u_19", g = {
-  tag: t,
-  tag__icon: a,
+import './Tag.module.css';const a = "_tag_ne839_2", t = "_tag__icon_ne839_14", _ = "_tag__label_ne839_19", e = {
+  tag: a,
+  tag__icon: t,
   tag__label: _,
-  "tag--size-x-small": "_tag--size-x-small_jtn7u_22",
-  "tag--size-small": "_tag--size-small_jtn7u_28",
-  "tag--type-default": "_tag--type-default_jtn7u_33",
-  "tag--type-info": "_tag--type-info_jtn7u_37",
-  "tag--type-info-dim": "_tag--type-info-dim_jtn7u_41",
-  "tag--type-danger": "_tag--type-danger_jtn7u_45",
-  "tag--type-success": "_tag--type-success_jtn7u_49",
-  "tag--type-warning": "_tag--type-warning_jtn7u_53",
-  "tag--casing-all-caps": "_tag--casing-all-caps_jtn7u_57"
+  "tag--size-x-small": "_tag--size-x-small_ne839_22",
+  "tag--size-small": "_tag--size-small_ne839_28",
+  "tag--type-default": "_tag--type-default_ne839_33",
+  "tag--type-info": "_tag--type-info_ne839_37",
+  "tag--type-info-dim": "_tag--type-info-dim_ne839_41",
+  "tag--type-danger": "_tag--type-danger_ne839_45",
+  "tag--type-success": "_tag--type-success_ne839_49",
+  "tag--type-warning": "_tag--type-warning_ne839_53",
+  "tag--casing-all-caps": "_tag--casing-all-caps_ne839_57"
 };
 export {
-  g as default,
-  t as tag,
-  a as tag__icon,
+  e as default,
+  a as tag,
+  t as tag__icon,
   _ as tag__label
 };
 //# sourceMappingURL=Tag.module.scss.js.map

package/dist/components/text-area/TextArea.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"),D=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),E=t.forwardRef(function({className:j="",size:m="medium",label:n,invalid:v=!1,maxLength:d,showCharacterCount:x=!1,id:N,value:o,defaultValue:b,placeholder:p,onFocus:r,onBlur:i,onChange:u,disabled:q,readOnly:I,rows:S=3,...T},h){const k=t.useId(),f=N??k,a=o!==void 0,[y,C]=t.useState(b??""),c=a?o:y,R=c!=null&&c!=="",[V,_]=t.useState(!1),g=V||R,z=t.useCallback(l=>{_(!0),r==null||r(l)},[r]),F=t.useCallback(l=>{_(!1),i==null||i(l)},[i]),M=t.useCallback(l=>{a||C(l.target.value),u==null||u(l)},[a,u]),$=e.default[`textArea--size-${D.toKebab(m)}`],w=v?e.default["textArea--invalid"]:"",K=n!=null&&g?e.default["textArea--label-floated"]:"",O=[e.default.textArea,$,w,K,j].filter(Boolean).join(" "),U=typeof c=="string"?c.length:0,A=x&&d!=null?`${f}-counter`:void 0;return s.jsxs("div",{className:O,children:[s.jsxs("div",{className:e.default.textArea__wrapper,children:[n!=null&&s.jsx("label",{className:e.default.textArea__label,htmlFor:f,children:n}),s.jsx("textarea",{ref:h,id:f,className:e.default.textArea__input,value:a?o:void 0,defaultValue:a?void 0:b,placeholder:p,maxLength:d,disabled:q,readOnly:I,rows:S,"aria-invalid":v?!0:void 0,"aria-describedby":A,onFocus:z,onBlur:F,onChange:M,...T})]}),x&&d!=null&&s.jsxs("div",{id:A,className:e.default.textArea__counter,"aria-live":"polite",children:[U," / ",d]})]})});exports.default=E;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),G=t.forwardRef(function({className:m="",size:N="medium",label:o,invalid:v=!1,maxLength:d,showCharacterCount:x=!1,id:p,value:n,defaultValue:b,placeholder:q,onFocus:i,onBlur:r,onChange:c,disabled:y,readOnly:I,rows:S=3,"aria-describedby":T,...h},k){const A=t.useId(),f=p??A,l=n!==void 0,[C,R]=t.useState(b??""),u=l?n:C,V=u!=null&&u!=="",[g,_]=t.useState(!1),z=g||V,F=t.useCallback(a=>{_(!0),i==null||i(a)},[i]),M=t.useCallback(a=>{_(!1),r==null||r(a)},[r]),$=t.useCallback(a=>{l||R(a.target.value),c==null||c(a)},[l,c]),w=e.default[`text-area--size-${E.toKebab(N)}`],K=v?e.default["text-area--invalid"]:"",O=o!=null&&z?e.default["text-area--label-floated"]:"",U=[e.default["text-area"],w,K,O,m].filter(Boolean).join(" "),D=typeof u=="string"?u.length:0,j=x&&d!=null?`${f}-counter`:void 0;return s.jsxs("div",{className:U,children:[s.jsxs("div",{className:e.default["text-area__wrapper"],children:[o!=null&&s.jsx("label",{className:e.default["text-area__label"],htmlFor:f,children:o}),s.jsx("textarea",{ref:k,id:f,className:e.default["text-area__input"],value:l?n:void 0,defaultValue:l?void 0:b,placeholder:q,maxLength:d,disabled:y,readOnly:I,rows:S,"aria-invalid":v?!0:void 0,"aria-describedby":[T,j].filter(Boolean).join(" ")||void 0,onFocus:F,onBlur:M,onChange:$,...h})]}),x&&d!=null&&s.jsxs("div",{id:j,className:e.default["text-area__counter"],"aria-live":"polite",children:[D," / ",d]})]})});exports.default=G;
 //# sourceMappingURL=TextArea.cjs.map

package/dist/components/text-area/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextArea.module.scss';\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\n\nexport interface TextAreaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Max length for the textarea; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below textarea. */\n  showCharacterCount?: boolean;\n  /** Size variant. Default: Medium. */\n  size?: TextAreaSize;\n}\n\n/**\n * Text Areas let people write long-form text that spans multiple lines — descriptions,\n * channel purposes, message drafts, admin notes. They share their visual rhythm with Text\n * Input but trade the single-line constraint for room to breathe.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      rows = 3,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`textArea--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textArea--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textArea--label-floated'] : '';\n\n    const rootClass = [\n      styles.textArea,\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.textArea__wrapper}>\n          {label != null && (\n            <label className={styles.textArea__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles.textArea__input}\n            value={isControlled ? valueProp : undefined}\n            defaultValue={isControlled ? undefined : defaultValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            readOnly={readOnly}\n            rows={rows}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={counterId}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles.textArea__counter}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"gPA8BMA,EAAWC,EAAAA,WACf,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,mBAAAC,EAAqB,GACrB,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,EACP,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKd,GAAUY,EAEfG,EAAed,IAAc,OAC7B,CAACe,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDhB,GAAgB,EAAA,EAEZiB,EAAQJ,EAAgBd,EAAuBe,EAC/CI,EAAWD,GAAS,MAAQA,IAAU,GAEtC,CAACE,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAC1CK,EAAeF,GAAaD,EAE5BI,EAAcC,EAAAA,YACjBC,GAA6C,CAC5CJ,EAAa,EAAI,EACjBlB,GAAA,MAAAA,EAAUsB,EACZ,EACA,CAACtB,CAAO,CAAA,EAEJuB,EAAaF,EAAAA,YAChBC,GAA6C,CAC5CJ,EAAa,EAAK,EAClBjB,GAAA,MAAAA,EAASqB,EACX,EACA,CAACrB,CAAM,CAAA,EAEHuB,EAAeH,EAAAA,YAClBC,GAAwC,CAClCX,GAAcE,EAAqBS,EAAE,OAAO,KAAK,EACtDpB,GAAA,MAAAA,EAAWoB,EACb,EACA,CAACX,EAAcT,CAAQ,CAAA,EAGnBuB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQpC,CAAI,CAAC,EAAE,EACpDqC,EAAenC,EAAUiC,UAAO,mBAAmB,EAAI,GACvDG,EACJrC,GAAS,MAAQ2B,EAAeO,EAAAA,QAAO,yBAAyB,EAAI,GAEhEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACAvC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELyC,EAAgB,OAAOhB,GAAU,SAAWA,EAAM,OAAS,EAC3DiB,EACJrC,GAAsBD,GAAa,KAAO,GAAGgB,CAAE,WAAa,OAE9D,OACEuB,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,kBACpB,SAAA,CAAAlC,GAAS,YACP,QAAA,CAAM,UAAWkC,UAAO,gBAAiB,QAAShB,EAChD,SAAAlB,CAAA,CACH,EAEF0C,EAAAA,IAAC,WAAA,CACC,IAAA3B,EACA,GAAAG,EACA,UAAWgB,EAAAA,QAAO,gBAClB,MAAOf,EAAed,EAAY,OAClC,aAAcc,EAAe,OAAYb,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,KAAAC,EACA,eAAcZ,EAAU,GAAO,OAC/B,mBAAkBuC,EAClB,QAASZ,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,EACCX,GAAsBD,GAAa,MAClCuC,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWN,EAAAA,QAAO,kBAClB,YAAU,SAET,SAAA,CAAAK,EAAc,MAAIrC,CAAA,CAAA,CAAA,CACrB,EAEJ,CAEJ,CACF"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextArea.module.scss';\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\n\nexport interface TextAreaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Max length for the textarea; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below textarea. */\n  showCharacterCount?: boolean;\n  /** Size variant. Default: Medium. */\n  size?: TextAreaSize;\n}\n\n/**\n * Text Areas let people write long-form text that spans multiple lines — descriptions,\n * channel purposes, message drafts, admin notes. They share their visual rhythm with Text\n * Input but trade the single-line constraint for room to breathe.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      rows = 3,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`text-area--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-area--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-area--label-floated'] : '';\n\n    const rootClass = [\n      styles['text-area'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-area__wrapper']}>\n          {label != null && (\n            <label className={styles['text-area__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles['text-area__input']}\n            value={isControlled ? valueProp : undefined}\n            defaultValue={isControlled ? undefined : defaultValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            readOnly={readOnly}\n            rows={rows}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={\n              [describedBy, counterId].filter(Boolean).join(' ') || undefined\n            }\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-area__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","describedBy","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"gPA8BMA,EAAWC,EAAAA,WACf,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,mBAAAC,EAAqB,GACrB,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,EACP,mBAAoBC,EACpB,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKf,GAAUa,EAEfG,EAAef,IAAc,OAC7B,CAACgB,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDjB,GAAgB,EAAA,EAEZkB,EAAQJ,EAAgBf,EAAuBgB,EAC/CI,EAAWD,GAAS,MAAQA,IAAU,GAEtC,CAACE,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAC1CK,EAAeF,GAAaD,EAE5BI,EAAcC,EAAAA,YACjBC,GAA6C,CAC5CJ,EAAa,EAAI,EACjBnB,GAAA,MAAAA,EAAUuB,EACZ,EACA,CAACvB,CAAO,CAAA,EAEJwB,EAAaF,EAAAA,YAChBC,GAA6C,CAC5CJ,EAAa,EAAK,EAClBlB,GAAA,MAAAA,EAASsB,EACX,EACA,CAACtB,CAAM,CAAA,EAEHwB,EAAeH,EAAAA,YAClBC,GAAwC,CAClCX,GAAcE,EAAqBS,EAAE,OAAO,KAAK,EACtDrB,GAAA,MAAAA,EAAWqB,EACb,EACA,CAACX,EAAcV,CAAQ,CAAA,EAGnBwB,EAAYC,EAAAA,QAAO,mBAAmBC,EAAAA,QAAQrC,CAAI,CAAC,EAAE,EACrDsC,EAAepC,EAAUkC,UAAO,oBAAoB,EAAI,GACxDG,EACJtC,GAAS,MAAQ4B,EAAeO,EAAAA,QAAO,0BAA0B,EAAI,GAEjEI,EAAY,CAChBJ,EAAAA,QAAO,WAAW,EAClBD,EACAG,EACAC,EACAxC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL0C,EAAgB,OAAOhB,GAAU,SAAWA,EAAM,OAAS,EAC3DiB,EACJtC,GAAsBD,GAAa,KAAO,GAAGiB,CAAE,WAAa,OAE9D,OACEuB,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAnC,GAAS,YACP,QAAA,CAAM,UAAWmC,EAAAA,QAAO,kBAAkB,EAAG,QAAShB,EACpD,SAAAnB,CAAA,CACH,EAEF2C,EAAAA,IAAC,WAAA,CACC,IAAA3B,EACA,GAAAG,EACA,UAAWgB,EAAAA,QAAO,kBAAkB,EACpC,MAAOf,EAAef,EAAY,OAClC,aAAce,EAAe,OAAYd,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,KAAAC,EACA,eAAcZ,EAAU,GAAO,OAC/B,mBACE,CAACa,EAAa2B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,QAASZ,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,EACCZ,GAAsBD,GAAa,MAClCwC,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWN,EAAAA,QAAO,oBAAoB,EACtC,YAAU,SAET,SAAA,CAAAK,EAAc,MAAItC,CAAA,CAAA,CAAA,CACrB,EAEJ,CAEJ,CACF"}

package/dist/components/text-area/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAK5E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,+GAoHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAK5E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,+GAuHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}