@mattermost/compass-ui 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/components/popover-menu/PopoverMenu.js

@@ -1,40 +1,51 @@
-import { jsx as p } from "react/jsx-runtime";
-import i from "../scrollbar/Scrollbar.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useRef as c, useEffect as _ } from "react";
+import { usePopoverTransition as j } from "../../hooks/use-popover-transition.js";
+import M from "../scrollbar/Scrollbar.js";
 import n from "./PopoverMenu.module.scss.js";
-function m({
+function T({
   variant: o = "parent",
-  children: e,
-  className: r = "",
-  ...t
+  open: e,
+  onExited: r,
+  children: l,
+  className: m = "",
+  ...v
 }) {
-  const l = [
+  const { mounted: u, visible: f } = j(e ?? !0), i = e !== void 0, s = c(u), p = c(r);
+  if (p.current = r, _(() => {
+    var a;
+    s.current && !u && i && ((a = p.current) == null || a.call(p)), s.current = u;
+  }, [u, i]), i && !u) return null;
+  const d = [
     n["popover-menu"],
     o === "child" ? n["popover-menu--child"] : n["popover-menu--parent"],
-    r
+    i && n["popover-menu--transition"],
+    i && f && n["popover-menu--visible"],
+    m
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p("div", { className: l, ...t, children: e });
+  return /* @__PURE__ */ t("div", { className: d, ...v, children: l });
 }
-function c({
+function g({
   maxHeight: o,
   children: e,
   className: r = ""
 }) {
-  const t = typeof o == "number" ? `${o}px` : o;
-  return /* @__PURE__ */ p(
-    i,
+  const l = typeof o == "number" ? `${o}px` : o;
+  return /* @__PURE__ */ t(
+    M,
     {
       className: [n["popover-menu__scroll"], r].filter(Boolean).join(" "),
-      style: { maxHeight: t },
+      style: { maxHeight: l },
       children: e
     }
   );
 }
-function v({
+function G({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
       className: [n["popover-menu__title"], e].filter(Boolean).join(" "),
@@ -43,12 +54,12 @@ function v({
     }
   );
 }
-function f({
+function S({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       role: "group",
@@ -58,12 +69,12 @@ function f({
     }
   );
 }
-function _({
+function h({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
       className: [n["popover-menu__group-title"], e].filter(Boolean).join(" "),
@@ -72,11 +83,11 @@ function _({
     }
   );
 }
-function d({
+function w({
   className: o = "",
   ...e
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       className: [n["popover-menu__divider"], o].filter(Boolean).join(" "),
@@ -86,11 +97,11 @@ function d({
   );
 }
 export {
-  d as PopoverMenuDivider,
-  f as PopoverMenuGroup,
-  _ as PopoverMenuGroupTitle,
-  c as PopoverMenuScroll,
-  v as PopoverMenuTitle,
-  m as default
+  w as PopoverMenuDivider,
+  S as PopoverMenuGroup,
+  h as PopoverMenuGroupTitle,
+  g as PopoverMenuScroll,
+  G as PopoverMenuTitle,
+  T as default
 };
 //# sourceMappingURL=PopoverMenu.js.map

package/dist/components/popover-menu/PopoverMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.js","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","children","className","rest","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":";;;AAgBA,SAAwBA,EAAY;AAAA,EAClC,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAY;AAAA,IAChBC,EAAO,cAAc;AAAA,IACrBL,MAAY,UACRK,EAAO,qBAAqB,IAC5BA,EAAO,sBAAsB;AAAA,IACjCH;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWE,GAAY,GAAGD,GAC5B,UAAAF,GACH;AAEJ;AAUO,SAASK,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,UAAAN;AAAA,EACA,WAAAC,IAAY;AACd,GAA2B;AACzB,QAAMM,IAAO,OAAOD,KAAc,WAAW,GAAGA,CAAS,OAAOA;AAChE,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACL,EAAO,sBAAsB,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,WAAWM,EAAA;AAAA,MAEnB,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASU,EAAiB;AAAA,EAC/B,UAAAV;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,qBAAqB,GAAGH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AASO,SAASW,EAAiB;AAAA,EAC/B,UAAAX;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,CAACJ,EAAO,qBAAqB,GAAGH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASY,EAAsB;AAAA,EACpC,UAAAZ;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA+B;AAC7B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,2BAA2B,GAAGH,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAASa,EAAmB;AAAA,EACjC,WAAAZ,IAAY;AAAA,EACZ,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,uBAAuB,GAAGH,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"PopoverMenu.js","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  /**\n   * Controlled visibility with the Compass popover transition (scale + fade in,\n   * reverse on close); the menu unmounts after the exit. Omit to always render\n   * without transition. The host owns the state and positioning.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  open,\n  onExited,\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const transitioned = open !== undefined;\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && transitioned) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, transitioned]);\n\n  if (transitioned && !mounted) return null;\n\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    transitioned && styles['popover-menu--transition'],\n    transitioned && visible && styles['popover-menu--visible'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","open","onExited","children","className","rest","mounted","visible","usePopoverTransition","transitioned","wasMounted","useRef","onExitedRef","useEffect","_a","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":"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"}

package/dist/components/popover-menu/PopoverMenu.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverMenu.css');const e={"popover-menu":"_popover-menu_1m31t_2","popover-menu--parent":"_popover-menu--parent_1m31t_16","popover-menu--child":"_popover-menu--child_1m31t_19","popover-menu__scroll":"_popover-menu__scroll_1m31t_22","popover-menu__title":"_popover-menu__title_1m31t_25","popover-menu__group":"_popover-menu__group_1m31t_36","popover-menu__group-title":"_popover-menu__group-title_1m31t_41","popover-menu__divider":"_popover-menu__divider_1m31t_53"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverMenu.css');const e={"popover-menu":"_popover-menu_1tx2s_2","popover-menu--parent":"_popover-menu--parent_1tx2s_16","popover-menu--child":"_popover-menu--child_1tx2s_19","popover-menu--transition":"_popover-menu--transition_1tx2s_22","popover-menu--visible":"_popover-menu--visible_1tx2s_35","popover-menu__scroll":"_popover-menu__scroll_1tx2s_47","popover-menu__title":"_popover-menu__title_1tx2s_50","popover-menu__group":"_popover-menu__group_1tx2s_61","popover-menu__group-title":"_popover-menu__group-title_1tx2s_66","popover-menu__divider":"_popover-menu__divider_1tx2s_78"};exports.default=e;
 //# sourceMappingURL=PopoverMenu.module.scss.cjs.map

package/dist/components/popover-menu/PopoverMenu.module.scss.js

@@ -1,14 +1,16 @@
-import './PopoverMenu.css';const _ = {
-  "popover-menu": "_popover-menu_1m31t_2",
-  "popover-menu--parent": "_popover-menu--parent_1m31t_16",
-  "popover-menu--child": "_popover-menu--child_1m31t_19",
-  "popover-menu__scroll": "_popover-menu__scroll_1m31t_22",
-  "popover-menu__title": "_popover-menu__title_1m31t_25",
-  "popover-menu__group": "_popover-menu__group_1m31t_36",
-  "popover-menu__group-title": "_popover-menu__group-title_1m31t_41",
-  "popover-menu__divider": "_popover-menu__divider_1m31t_53"
+import './PopoverMenu.css';const e = {
+  "popover-menu": "_popover-menu_1tx2s_2",
+  "popover-menu--parent": "_popover-menu--parent_1tx2s_16",
+  "popover-menu--child": "_popover-menu--child_1tx2s_19",
+  "popover-menu--transition": "_popover-menu--transition_1tx2s_22",
+  "popover-menu--visible": "_popover-menu--visible_1tx2s_35",
+  "popover-menu__scroll": "_popover-menu__scroll_1tx2s_47",
+  "popover-menu__title": "_popover-menu__title_1tx2s_50",
+  "popover-menu__group": "_popover-menu__group_1tx2s_61",
+  "popover-menu__group-title": "_popover-menu__group-title_1tx2s_66",
+  "popover-menu__divider": "_popover-menu__divider_1tx2s_78"
 };
 export {
-  _ as default
+  e as default
 };
 //# sourceMappingURL=PopoverMenu.module.scss.js.map

package/dist/components/popover-menu/PopoverMenu.module.scss.js.map

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

package/dist/components/radio/Radio.css

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_11lrl_2",i="_radio__input_11lrl_13",r="_radio__circle_11lrl_33",l="_radio__dot_11lrl_59",o="_radio__label_11lrl_116",a={radio:_,radio__input:i,radio__circle:r,radio__dot:l,"radio--invalid":"_radio--invalid_11lrl_80",radio__label:o,"radio--size-small":"_radio--size-small_11lrl_119","radio--size-medium":"_radio--size-medium_11lrl_138","radio--size-large":"_radio--size-large_11lrl_157"};exports.default=a;exports.radio=_;exports.radio__circle=r;exports.radio__dot=l;exports.radio__input=i;exports.radio__label=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_1hdqa_2",i="_radio__input_1hdqa_14",a="_radio__circle_1hdqa_33",d="_radio__dot_1hdqa_59",o="_radio__label_1hdqa_116",r={radio:_,radio__input:i,radio__circle:a,radio__dot:d,"radio--invalid":"_radio--invalid_1hdqa_80",radio__label:o,"radio--size-small":"_radio--size-small_1hdqa_119","radio--size-medium":"_radio--size-medium_1hdqa_140","radio--size-large":"_radio--size-large_1hdqa_161"};exports.default=r;exports.radio=_;exports.radio__circle=a;exports.radio__dot=d;exports.radio__input=i;exports.radio__label=o;
 //# sourceMappingURL=Radio.module.scss.cjs.map

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

@@ -1,20 +1,20 @@
-import './Radio.css';const _ = "_radio_11lrl_2", i = "_radio__input_11lrl_13", r = "_radio__circle_11lrl_33", l = "_radio__dot_11lrl_59", a = "_radio__label_11lrl_116", o = {
+import './Radio.css';const _ = "_radio_1hdqa_2", a = "_radio__input_1hdqa_14", i = "_radio__circle_1hdqa_33", d = "_radio__dot_1hdqa_59", o = "_radio__label_1hdqa_116", r = {
   radio: _,
-  radio__input: i,
-  radio__circle: r,
-  radio__dot: l,
-  "radio--invalid": "_radio--invalid_11lrl_80",
-  radio__label: a,
-  "radio--size-small": "_radio--size-small_11lrl_119",
-  "radio--size-medium": "_radio--size-medium_11lrl_138",
-  "radio--size-large": "_radio--size-large_11lrl_157"
+  radio__input: a,
+  radio__circle: i,
+  radio__dot: d,
+  "radio--invalid": "_radio--invalid_1hdqa_80",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_1hdqa_119",
+  "radio--size-medium": "_radio--size-medium_1hdqa_140",
+  "radio--size-large": "_radio--size-large_1hdqa_161"
 };
 export {
-  o as default,
+  r as default,
   _ as radio,
-  r as radio__circle,
-  l as radio__dot,
-  i as radio__input,
-  a as radio__label
+  i as radio__circle,
+  d as radio__dot,
+  a as radio__input,
+  o as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/switch/Switch.css

@@ -1 +1 @@
-._switch_1hx2q_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_1hx2q_2:has(._switch__input_1hx2q_12:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_1hx2q_2:has(._switch__input_1hx2q_12:disabled) ._switch__secondary-label_1hx2q_16{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_1hx2q_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_1hx2q_12:focus-visible{outline:none}._switch__labels_1hx2q_33{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_1hx2q_33{line-height:1}._switch__secondary-label_1hx2q_16{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_1hx2q_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-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_1hx2q_2:has(._switch__input_1hx2q_12:not(:disabled)):hover ._switch__track_1hx2q_47{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked){background-color:var(--button-bg)}._switch_1hx2q_2:has(._switch__input_1hx2q_12:not(:disabled)):hover ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked){background-color:var(--button-bg)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:disabled){opacity:.32}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_1hx2q_77{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_1hx2q_88 ._switch__track_1hx2q_47{width:26px;height:16px}._switch--size-small_1hx2q_88 ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked) ._switch__knob_1hx2q_77{transform:translateY(-50%) translate(10px)}._switch--size-small_1hx2q_88 ._switch__knob_1hx2q_77{width:12px;height:12px}._switch--size-small_1hx2q_88 ._switch__label_1hx2q_33,._switch--size-small_1hx2q_88 ._switch__secondary-label_1hx2q_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_1hx2q_107 ._switch__track_1hx2q_47{width:32px;height:20px}._switch--size-medium_1hx2q_107 ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked) ._switch__knob_1hx2q_77{transform:translateY(-50%) translate(12px)}._switch--size-medium_1hx2q_107 ._switch__knob_1hx2q_77{width:16px;height:16px}._switch--size-medium_1hx2q_107 ._switch__label_1hx2q_33{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_1hx2q_107 ._switch__secondary-label_1hx2q_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_1hx2q_126 ._switch__track_1hx2q_47{width:40px;height:24px}._switch--size-large_1hx2q_126 ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked) ._switch__knob_1hx2q_77{transform:translateY(-50%) translate(16px)}._switch--size-large_1hx2q_126 ._switch__knob_1hx2q_77{width:20px;height:20px}._switch--size-large_1hx2q_126 ._switch__label_1hx2q_33{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_1hx2q_126 ._switch__secondary-label_1hx2q_16{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_1hx2q_145 ._switch__label_1hx2q_33{font-weight:var(--font-weight-semibold)}._switch--with-secondary_1hx2q_148{align-items:center}._switch--with-secondary_1hx2q_148 ._switch__labels_1hx2q_33{padding-top:0;padding-bottom:0}
+._switch_3fpma_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);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}._switch_3fpma_2:has(._switch__input_3fpma_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_3fpma_2:has(._switch__input_3fpma_13:disabled) ._switch__secondary-label_3fpma_17{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_3fpma_13{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_3fpma_13:focus-visible{outline:none}._switch__labels_3fpma_34{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_3fpma_34{line-height:1}._switch__secondary-label_3fpma_17{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_3fpma_48{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_3fpma_2:has(._switch__input_3fpma_13:not(:disabled)):hover ._switch__track_3fpma_48{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked){background-color:var(--button-bg)}._switch_3fpma_2:has(._switch__input_3fpma_13:not(:disabled)):hover ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked){background-color:var(--button-bg)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:disabled){opacity:.32}._switch__track_3fpma_48:has(._switch__input_3fpma_13:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_3fpma_78{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_3fpma_89 ._switch__track_3fpma_48{width:26px;height:16px}._switch--size-small_3fpma_89 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(10px)}._switch--size-small_3fpma_89 ._switch__knob_3fpma_78{width:12px;height:12px}._switch--size-small_3fpma_89 ._switch__label_3fpma_34,._switch--size-small_3fpma_89 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_3fpma_108 ._switch__track_3fpma_48{width:32px;height:20px}._switch--size-medium_3fpma_108 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(12px)}._switch--size-medium_3fpma_108 ._switch__knob_3fpma_78{width:16px;height:16px}._switch--size-medium_3fpma_108 ._switch__label_3fpma_34{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_3fpma_108 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_3fpma_127 ._switch__track_3fpma_48{width:40px;height:24px}._switch--size-large_3fpma_127 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(16px)}._switch--size-large_3fpma_127 ._switch__knob_3fpma_78{width:20px;height:20px}._switch--size-large_3fpma_127 ._switch__label_3fpma_34{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_3fpma_127 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_3fpma_146 ._switch__label_3fpma_34{font-weight:var(--font-weight-semibold)}._switch--with-secondary_3fpma_149{align-items:center}._switch--with-secondary_3fpma_149 ._switch__labels_3fpma_34{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.css');const _="_switch__input_1hx2q_12",s="_switch__labels_1hx2q_33",t="_switch__label_1hx2q_33",i="_switch__track_1hx2q_47",c="_switch__knob_1hx2q_77",h={switch:"_switch_1hx2q_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_1hx2q_16",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_1hx2q_88","switch--size-medium":"_switch--size-medium_1hx2q_107","switch--size-large":"_switch--size-large_1hx2q_126","switch--semi-bold":"_switch--semi-bold_1hx2q_145","switch--with-secondary":"_switch--with-secondary_1hx2q_148"};exports.default=h;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_3fpma_13",s="_switch__labels_3fpma_34",t="_switch__label_3fpma_34",i="_switch__track_3fpma_48",c="_switch__knob_3fpma_78",e={switch:"_switch_3fpma_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_3fpma_17",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_3fpma_89","switch--size-medium":"_switch--size-medium_3fpma_108","switch--size-large":"_switch--size-large_3fpma_127","switch--semi-bold":"_switch--semi-bold_3fpma_146","switch--with-secondary":"_switch--with-secondary_3fpma_149"};exports.default=e;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
 //# sourceMappingURL=Switch.module.scss.cjs.map

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

@@ -1,21 +1,21 @@
-import './Switch.css';const _ = "_switch__input_1hx2q_12", s = "_switch__labels_1hx2q_33", t = "_switch__label_1hx2q_33", i = "_switch__track_1hx2q_47", h = "_switch__knob_1hx2q_77", c = {
-  switch: "_switch_1hx2q_2",
+import './Switch.css';const _ = "_switch__input_3fpma_13", s = "_switch__labels_3fpma_34", t = "_switch__label_3fpma_34", i = "_switch__track_3fpma_48", c = "_switch__knob_3fpma_78", a = {
+  switch: "_switch_3fpma_2",
   switch__input: _,
-  "switch__secondary-label": "_switch__secondary-label_1hx2q_16",
+  "switch__secondary-label": "_switch__secondary-label_3fpma_17",
   switch__labels: s,
   switch__label: t,
   switch__track: i,
-  switch__knob: h,
-  "switch--size-small": "_switch--size-small_1hx2q_88",
-  "switch--size-medium": "_switch--size-medium_1hx2q_107",
-  "switch--size-large": "_switch--size-large_1hx2q_126",
-  "switch--semi-bold": "_switch--semi-bold_1hx2q_145",
-  "switch--with-secondary": "_switch--with-secondary_1hx2q_148"
+  switch__knob: c,
+  "switch--size-small": "_switch--size-small_3fpma_89",
+  "switch--size-medium": "_switch--size-medium_3fpma_108",
+  "switch--size-large": "_switch--size-large_3fpma_127",
+  "switch--semi-bold": "_switch--semi-bold_3fpma_146",
+  "switch--with-secondary": "_switch--with-secondary_3fpma_149"
 };
 export {
-  c as default,
+  a as default,
   _ as switch__input,
-  h as switch__knob,
+  c as switch__knob,
   t as switch__label,
   s as switch__labels,
   i as switch__track

package/dist/components/tabs/Tabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),t=require("./Tabs.module.scss.cjs");function R({tabs:c,activeKey:o,onChange:b,className:j="",controls:_,unreadLabel:D="Unread",...g}){const h=[t.default.tabs,j].filter(Boolean).join(" "),p=i.useRef([]),[m,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const N=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),B=l.includes(m)?m:l.includes(o)?o:l[0],r=e=>{var s;f(e);const d=N.indexOf(e);(s=p.current[d])==null||s.focus()},w=(e,d)=>{const s=l.length;if(s===0)return;const a=l.indexOf(d);e.key==="ArrowRight"?(e.preventDefault(),r(l[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),r(l[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),r(l[0])):e.key==="End"?(e.preventDefault(),r(l[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(d))};return n.jsxs("div",{...g,className:h,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,d)=>{var y,k,x;const s=e.key===o,a=e.disabled===!0,P=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(y=e.buttonProps)==null?void 0:y.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:u=>{p.current[d]=u},id:e.id??((k=e.buttonProps)==null?void 0:k.id),role:"tab",type:"button",tabIndex:B===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((x=e.buttonProps)==null?void 0:x.title),className:P,onMouseDown:a?u=>u.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:u=>w(u,e.key)},n.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[t.default["tabs__count-badge"],s?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:t.default["tabs__unread-badge"],children:n.jsx("span",{className:t.default["tabs__unread-label"],children:D})}))})}),_!=null&&n.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),q=require("../../utils/string.cjs"),t=require("./Tabs.module.scss.cjs");function E({tabs:c,activeKey:o,onChange:b,className:g="",controls:_,unreadLabel:D="Unread",appearance:p="default",...h}){const N=[t.default.tabs,p!=="default"?t.default[`tabs--appearance-${q.toKebab(p)}`]:"",g].filter(Boolean).join(" "),m=i.useRef([]),[y,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const B=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),w=l.includes(y)?y:l.includes(o)?o:l[0],r=e=>{var s;f(e);const u=B.indexOf(e);(s=m.current[u])==null||s.focus()},P=(e,u)=>{const s=l.length;if(s===0)return;const a=l.indexOf(u);e.key==="ArrowRight"?(e.preventDefault(),r(l[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),r(l[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),r(l[0])):e.key==="End"?(e.preventDefault(),r(l[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(u))};return n.jsxs("div",{...h,className:N,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,u)=>{var k,x,j;const s=e.key===o,a=e.disabled===!0,R=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(k=e.buttonProps)==null?void 0:k.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:d=>{m.current[u]=d},id:e.id??((x=e.buttonProps)==null?void 0:x.id),role:"tab",type:"button",tabIndex:w===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((j=e.buttonProps)==null?void 0:j.title),className:R,onMouseDown:a?d=>d.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:d=>P(d,e.key)},n.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[t.default["tabs__count-badge"],s?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:t.default["tabs__unread-badge"],children:n.jsx("span",{className:t.default["tabs__unread-label"],children:D})}))})}),_!=null&&n.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=E;
 //# 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 {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\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  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\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  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: 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  unreadLabel = 'Unread',\n  ...rest\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 enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\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 = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\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']}>\n                    {unreadLabel}\n                  </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","unreadLabel","rest","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\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  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\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  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: 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  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .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 enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\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 = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\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']}>\n                    {unreadLabel}\n                  </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","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}

package/dist/components/tabs/Tabs.css

@@ -1 +1 @@
-._tabs_j8wfj_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_j8wfj_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_j8wfj_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_j8wfj_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_j8wfj_7:hover:not(._tabs__tab--active_j8wfj_31):not(._tabs__tab--disabled_j8wfj_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_j8wfj_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_j8wfj_31 ._tabs__tab-label_j8wfj_37{color:var(--link-color)}._tabs__tab--active_j8wfj_31 ._tabs__count-badge_j8wfj_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_j8wfj_31{cursor:not-allowed}._tabs__tab--disabled_j8wfj_31 ._tabs__tab-label_j8wfj_37,._tabs__tab--disabled_j8wfj_31 ._tabs__count-badge_j8wfj_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_j8wfj_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_j8wfj_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_j8wfj_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_j8wfj_79{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--mention-bg)}._tabs__unread-label_j8wfj_88{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_j8wfj_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}
+._tabs_69hbz_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_69hbz_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_69hbz_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_69hbz_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_69hbz_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_69hbz_31 ._tabs__tab-label_69hbz_37{color:var(--link-color)}._tabs__tab--active_69hbz_31 ._tabs__count-badge_69hbz_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_69hbz_31{cursor:not-allowed}._tabs__tab--disabled_69hbz_31 ._tabs__tab-label_69hbz_37,._tabs__tab--disabled_69hbz_31 ._tabs__count-badge_69hbz_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_69hbz_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_69hbz_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_69hbz_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_69hbz_79{flex-shrink:0;width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--button-bg)}._tabs__unread-label_69hbz_86{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_69hbz_97{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}._tabs--appearance-underlined_69hbz_103{align-items:stretch;box-shadow:inset 0 -1px rgba(var(--center-channel-color-rgb),.12)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab-list_69hbz_7{gap:var(--spacing-xs)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7{border-radius:0;padding:var(--spacing-s) var(--spacing-xs)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:transparent;transition:background-color var(--duration-quick) var(--ease-transition)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31){background-color:transparent}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31) ._tabs__tab-label_69hbz_37{color:var(--center-channel-color)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab--active_69hbz_31{background-color:transparent}._tabs--appearance-underlined_69hbz_103 ._tabs__tab--active_69hbz_31:after{background-color:var(--link-color)}

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { BuiltInButtonProps } from '../../utils/props';
+export type TabsAppearance = 'default' | 'underlined';
 export interface TabItem {
     /** Unique key for this tab. */
     key: string;
@@ -34,6 +35,8 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
     className?: string;
     /** Optional trailing controls rendered to the right of the tabs. */
     controls?: ReactNode;
+    /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */
+    appearance?: TabsAppearance;
     /** Visually hidden text announced with a tab's unread dot. Default: "Unread". */
     unreadLabel?: ReactNode;
 }
@@ -42,5 +45,5 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
  * right sidebar, sections of a settings panel, or filters on a list. The content area
  * changes; the surrounding chrome doesn't.
  */
-export default function Tabs({ tabs, activeKey, onChange, className, controls, unreadLabel, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function Tabs({ tabs, activeKey, onChange, className, controls, unreadLabel, appearance, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

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,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,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;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,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;IACrB,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,EACR,WAAsB,EACtB,GAAG,IAAI,EACR,EAAE,SAAS,2CA4HX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,YAAY,CAAC;AAEtD,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,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;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,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;IACrB,iHAAiH;IACjH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,EACR,WAAsB,EACtB,UAAsB,EACtB,GAAG,IAAI,EACR,EAAE,SAAS,2CAoIX"}

package/dist/components/tabs/Tabs.js

@@ -1,63 +1,69 @@
-import { jsxs as E, jsx as r } from "react/jsx-runtime";
-import { useRef as P, useState as A, useEffect as R, createElement as C } from "react";
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import { useRef as A, useState as R, useEffect as C, createElement as F } from "react";
+import { toKebab as I } from "../../utils/string.js";
 import t from "./Tabs.module.scss.js";
-function H({
+function M({
   tabs: c,
-  activeKey: o,
+  activeKey: n,
   onChange: f,
-  className: D = "",
-  controls: p,
-  unreadLabel: h = "Unread",
-  ...N
+  className: h = "",
+  controls: b,
+  unreadLabel: N = "Unread",
+  appearance: p = "default",
+  ...x
 }) {
-  const x = [t.tabs, D].filter(Boolean).join(" "), b = P([]), [m, u] = A(o);
-  R(() => {
-    u(o);
-  }, [o]);
-  const g = c.map((e) => e.key), n = c.filter((e) => !e.disabled).map((e) => e.key), B = n.includes(m) ? m : n.includes(o) ? o : n[0], d = (e) => {
+  const g = [
+    t.tabs,
+    p !== "default" ? t[`tabs--appearance-${I(p)}`] : "",
+    h
+  ].filter(Boolean).join(" "), m = A([]), [_, u] = R(n);
+  C(() => {
+    u(n);
+  }, [n]);
+  const B = c.map((e) => e.key), o = c.filter((e) => !e.disabled).map((e) => e.key), j = o.includes(_) ? _ : o.includes(n) ? n : o[0], d = (e) => {
     var s;
     u(e);
-    const a = g.indexOf(e);
-    (s = b.current[a]) == null || s.focus();
-  }, j = (e, a) => {
-    const s = n.length;
+    const a = B.indexOf(e);
+    (s = m.current[a]) == null || s.focus();
+  }, w = (e, a) => {
+    const s = o.length;
     if (s === 0) return;
-    const l = n.indexOf(a);
-    e.key === "ArrowRight" ? (e.preventDefault(), d(n[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
-      n[l < 0 ? s - 1 : (l - 1 + s) % s]
-    )) : e.key === "Home" ? (e.preventDefault(), d(n[0])) : e.key === "End" ? (e.preventDefault(), d(n[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
+    const l = o.indexOf(a);
+    e.key === "ArrowRight" ? (e.preventDefault(), d(o[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
+      o[l < 0 ? s - 1 : (l - 1 + s) % s]
+    )) : e.key === "Home" ? (e.preventDefault(), d(o[0])) : e.key === "End" ? (e.preventDefault(), d(o[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
   };
-  return /* @__PURE__ */ E("div", { ...N, className: x, children: [
+  return /* @__PURE__ */ P("div", { ...x, className: g, children: [
     /* @__PURE__ */ r("div", { className: t["tabs__tab-list"], role: "tablist", children: c.map((e, a) => {
-      var _, y, k;
-      const s = e.key === o, l = e.disabled === !0, w = [
+      var y, k, D;
+      const s = e.key === n, l = e.disabled === !0, E = [
         t.tabs__tab,
         s ? t["tabs__tab--active"] : "",
         l ? t["tabs__tab--disabled"] : "",
-        (_ = e.buttonProps) == null ? void 0 : _.className
+        (y = e.buttonProps) == null ? void 0 : y.className
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ C(
+      return /* @__PURE__ */ F(
         "button",
         {
           ...e.buttonProps,
           key: e.key,
           ref: (i) => {
-            b.current[a] = i;
+            m.current[a] = i;
           },
-          id: e.id ?? ((y = e.buttonProps) == null ? void 0 : y.id),
+          id: e.id ?? ((k = e.buttonProps) == null ? void 0 : k.id),
           role: "tab",
           type: "button",
-          tabIndex: B === e.key ? 0 : -1,
+          tabIndex: j === e.key ? 0 : -1,
           "aria-selected": s,
           "aria-controls": e.panelId,
           "aria-disabled": l || void 0,
-          title: e.title ?? ((k = e.buttonProps) == null ? void 0 : k.title),
-          className: w,
+          title: e.title ?? ((D = e.buttonProps) == null ? void 0 : D.title),
+          className: E,
           onMouseDown: l ? (i) => i.preventDefault() : void 0,
           onClick: () => {
             l || (u(e.key), f(e.key));
           },
-          onKeyDown: (i) => j(i, e.key)
+          onKeyDown: (i) => w(i, e.key)
         },
         /* @__PURE__ */ r("span", { className: t["tabs__tab-label"], children: e.label }),
         e.countBadge != null && /* @__PURE__ */ r(
@@ -70,13 +76,13 @@ function H({
             children: e.countBadge
           }
         ),
-        e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: t["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: t["tabs__unread-label"], children: h }) })
+        e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: t["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: t["tabs__unread-label"], children: N }) })
       );
     }) }),
-    p != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: p })
+    b != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: b })
   ] });
 }
 export {
-  H as default
+  M as default
 };
 //# sourceMappingURL=Tabs.js.map