@mattermost/compass-ui 0.1.0-alpha.10 → 0.1.0-alpha.11

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 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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"}
+{"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. 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\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 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 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          ]\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              aria-disabled={isDisabled || undefined}\n              title={tab.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                    {'Unread'}\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","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}

package/dist/components/tabs/Tabs.css

@@ -1 +1 @@
-._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}
+._tabs_1xaix_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_1xaix_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_1xaix_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_1xaix_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_1xaix_7:hover:not(._tabs__tab--active_1xaix_31):not(._tabs__tab--disabled_1xaix_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_1xaix_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_1xaix_31 ._tabs__tab-label_1xaix_37{color:var(--link-color)}._tabs__tab--active_1xaix_31 ._tabs__count-badge_1xaix_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_1xaix_31{cursor:not-allowed}._tabs__tab--disabled_1xaix_31 ._tabs__tab-label_1xaix_37,._tabs__tab--disabled_1xaix_31 ._tabs__count-badge_1xaix_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_1xaix_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_1xaix_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_1xaix_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_1xaix_79{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_1xaix_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_1xaix_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}

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

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 export interface TabItem {
     /** Unique key for this tab. */
     key: string;
-    /** Tab label text. */
-    label: string;
+    /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     /** Optional count badge number. */
     countBadge?: number;
     /** When true, shows an unread dot badge. */
@@ -12,6 +12,10 @@ export interface TabItem {
     id?: string;
     /** Optional id of the host tabpanel this tab controls. */
     panelId?: string;
+    /** When true, the tab can't be selected and arrow-key navigation skips it. */
+    disabled?: boolean;
+    /** Native tooltip text, e.g. to explain why the tab is disabled. */
+    title?: 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,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"}
+{"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,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;CAChB;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,2CA0HX"}

package/dist/components/tabs/Tabs.js

@@ -1,71 +1,79 @@
-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
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { useRef as g, useState as B, useEffect as j } from "react";
+import a from "./Tabs.module.scss.js";
+function R({
+  tabs: c,
+  activeKey: t,
+  onChange: f,
+  className: y = "",
+  controls: b
 }) {
-  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)));
+  const k = [a.tabs, y].filter(Boolean).join(" "), _ = g([]), [m, u] = B(t);
+  j(() => {
+    u(t);
+  }, [t]);
+  const h = c.map((e) => e.key), l = c.filter((e) => !e.disabled).map((e) => e.key), D = l.includes(m) ? m : l.includes(t) ? t : l[0], d = (e) => {
+    var s;
+    u(e);
+    const o = h.indexOf(e);
+    (s = _.current[o]) == null || s.focus();
+  }, x = (e, o) => {
+    const s = l.length;
+    if (s === 0) return;
+    const n = l.indexOf(o);
+    e.key === "ArrowRight" ? (e.preventDefault(), d(l[(n + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
+      l[n < 0 ? s - 1 : (n - 1 + s) % s]
+    )) : e.key === "Home" ? (e.preventDefault(), d(l[0])) : e.key === "End" ? (e.preventDefault(), d(l[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n >= 0 && f(o));
   };
-  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"] : ""
+  return /* @__PURE__ */ p("div", { className: k, children: [
+    /* @__PURE__ */ r("div", { className: a["tabs__tab-list"], role: "tablist", children: c.map((e, o) => {
+      const s = e.key === t, n = e.disabled === !0, N = [
+        a.tabs__tab,
+        s ? a["tabs__tab--active"] : "",
+        n ? a["tabs__tab--disabled"] : ""
       ].filter(Boolean).join(" ");
       return /* @__PURE__ */ p(
         "button",
         {
           ref: (i) => {
-            m.current[a] = i;
+            _.current[o] = i;
           },
           id: e.id,
           role: "tab",
           type: "button",
-          tabIndex: h === e.key ? 0 : -1,
-          "aria-selected": n,
+          tabIndex: D === e.key ? 0 : -1,
+          "aria-selected": s,
           "aria-controls": e.panelId,
-          className: g,
+          "aria-disabled": n || void 0,
+          title: e.title,
+          className: N,
+          onMouseDown: n ? (i) => i.preventDefault() : void 0,
           onClick: () => {
-            c(e.key), u(e.key);
+            n || (u(e.key), f(e.key));
           },
-          onKeyDown: (i) => k(i, e.key),
+          onKeyDown: (i) => x(i, e.key),
           children: [
-            /* @__PURE__ */ t("span", { className: l["tabs__tab-label"], children: e.label }),
-            e.countBadge != null && /* @__PURE__ */ t(
+            /* @__PURE__ */ r("span", { className: a["tabs__tab-label"], children: e.label }),
+            e.countBadge != null && /* @__PURE__ */ r(
               "span",
               {
                 className: [
-                  l["tabs__count-badge"],
-                  n ? l["tabs__count-badge--active"] : ""
+                  a["tabs__count-badge"],
+                  s ? a["tabs__count-badge--active"] : ""
                 ].filter(Boolean).join(" "),
                 children: e.countBadge
               }
             ),
-            e.unreadBadge && !n && /* @__PURE__ */ t("span", { className: l["tabs__unread-badge"], children: /* @__PURE__ */ t("span", { className: l["tabs__unread-label"], children: "Unread" }) })
+            e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: a["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: a["tabs__unread-label"], children: "Unread" }) })
           ]
         },
         e.key
       );
     }) }),
-    f != null && /* @__PURE__ */ t("div", { className: l.tabs__controls, children: f })
+    b != null && /* @__PURE__ */ r("div", { className: a.tabs__controls, children: b })
   ] });
 }
 export {
-  A as default
+  R 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 {\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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"}
+{"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. 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\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 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 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          ]\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              aria-disabled={isDisabled || undefined}\n              title={tab.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                    {'Unread'}\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","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}

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.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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_1xaix_2",a="_tabs__tab_1xaix_7",t="_tabs__controls_1xaix_99",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_1xaix_7",tabs__tab:a,"tabs__tab--active":"_tabs__tab--active_1xaix_31","tabs__tab--disabled":"_tabs__tab--disabled_1xaix_31","tabs__tab-label":"_tabs__tab-label_1xaix_37","tabs__count-badge":"_tabs__count-badge_1xaix_40","tabs__count-badge--active":"_tabs__count-badge--active_1xaix_75","tabs__unread-badge":"_tabs__unread-badge_1xaix_79","tabs__unread-label":"_tabs__unread-label_1xaix_88",tabs__controls:t};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
 //# sourceMappingURL=Tabs.module.scss.cjs.map

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

@@ -1,19 +1,20 @@
-import './Tabs.css';const _ = "_tabs_8ct09_2", t = "_tabs__tab_8ct09_7", a = "_tabs__controls_8ct09_92", b = {
+import './Tabs.css';const _ = "_tabs_1xaix_2", a = "_tabs__tab_1xaix_7", t = "_tabs__controls_1xaix_99", 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
+  "tabs__tab-list": "_tabs__tab-list_1xaix_7",
+  tabs__tab: a,
+  "tabs__tab--active": "_tabs__tab--active_1xaix_31",
+  "tabs__tab--disabled": "_tabs__tab--disabled_1xaix_31",
+  "tabs__tab-label": "_tabs__tab-label_1xaix_37",
+  "tabs__count-badge": "_tabs__count-badge_1xaix_40",
+  "tabs__count-badge--active": "_tabs__count-badge--active_1xaix_75",
+  "tabs__unread-badge": "_tabs__unread-badge_1xaix_79",
+  "tabs__unread-label": "_tabs__unread-label_1xaix_88",
+  tabs__controls: t
 };
 export {
   b as default,
   _ as tabs,
-  a as tabs__controls,
-  t as tabs__tab
+  t as tabs__controls,
+  a as tabs__tab
 };
 //# sourceMappingURL=Tabs.module.scss.js.map

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.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":"kNA+BMA,EAA2C,CAC/C,UAAW,KACX,MAAO,IACT,EAEMC,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QACLJ,EAAAA,QAAO,iBAAiB,EACxBA,EAAAA,QAAO,mBAAmB,EAC9BK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAU,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMb,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":"kNA+BMA,EAA2C,CAC/C,UAAW,KACX,MAAO,IACT,EAEMC,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QAAUJ,EAAAA,QAAO,iBAAiB,EAAIA,EAAAA,QAAO,mBAAmB,EACzEK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAU,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMb,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}

package/dist/components/tag/Tag.css

@@ -1 +1 @@
-._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}
+._tag_ap0kl_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_ap0kl_14{display:inline-flex;align-items:center;flex-shrink:0}._tag__label_ap0kl_19{line-height:var(--line-height-25)}._tag--size-x-small_ap0kl_22{gap:var(--spacing-xxxs);padding:0 var(--spacing-xxxs);font-size:var(--font-size-25);letter-spacing:.1px}._tag--size-small_ap0kl_28{gap:var(--spacing-xxs);padding:var(--spacing-xxxxs) var(--spacing-xxs);font-size:var(--font-size-75)}._tag--type-default_ap0kl_33{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._tag--type-info_ap0kl_37{background-color:var(--sidebar-text-active-border);color:var(--button-color)}._tag--type-info-dim_ap0kl_41{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tag--type-danger_ap0kl_45{background-color:var(--color-danger);color:var(--button-color)}._tag--type-success_ap0kl_49{background-color:var(--color-success);color:var(--button-color)}._tag--type-warning_ap0kl_53{background-color:var(--color-warning);color:var(--neutral-0)}._tag--casing-all-caps_ap0kl_57{text-transform:uppercase}

package/dist/components/tag/Tag.d.ts

@@ -3,8 +3,8 @@ export type TagType = 'default' | 'info' | 'info-dim' | 'danger' | 'success' | '
 export type TagSize = 'small' | 'x-small';
 export type TagCasing = 'title-case' | 'all-caps';
 export type TagProps = {
-    /** Tag label text. */
-    label: string;
+    /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     /** Semantic colour type. Default: Default. */
     type?: TagType;
     /** Size variant. Default: X-Small. */

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAyBV"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAuBV"}

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UACLJ,EAAO,iBAAiB,IACxBA,EAAO,mBAAmB;AAAA,IAC9BK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAU,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMb,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UAAUJ,EAAO,iBAAiB,IAAIA,EAAO,mBAAmB;AAAA,IACzEK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAU,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMb,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}

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.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=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tag.css');const a="_tag_ap0kl_2",t="_tag__icon_ap0kl_14",_="_tag__label_ap0kl_19",l={tag:a,tag__icon:t,tag__label:_,"tag--size-x-small":"_tag--size-x-small_ap0kl_22","tag--size-small":"_tag--size-small_ap0kl_28","tag--type-default":"_tag--type-default_ap0kl_33","tag--type-info":"_tag--type-info_ap0kl_37","tag--type-info-dim":"_tag--type-info-dim_ap0kl_41","tag--type-danger":"_tag--type-danger_ap0kl_45","tag--type-success":"_tag--type-success_ap0kl_49","tag--type-warning":"_tag--type-warning_ap0kl_53","tag--casing-all-caps":"_tag--casing-all-caps_ap0kl_57"};exports.default=l;exports.tag=a;exports.tag__icon=t;exports.tag__label=_;
 //# sourceMappingURL=Tag.module.scss.cjs.map

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

@@ -1,19 +1,19 @@
-import './Tag.css';const a = "_tag_ne839_2", t = "_tag__icon_ne839_14", _ = "_tag__label_ne839_19", e = {
+import './Tag.css';const a = "_tag_ap0kl_2", t = "_tag__icon_ap0kl_14", _ = "_tag__label_ap0kl_19", l = {
   tag: a,
   tag__icon: t,
   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"
+  "tag--size-x-small": "_tag--size-x-small_ap0kl_22",
+  "tag--size-small": "_tag--size-small_ap0kl_28",
+  "tag--type-default": "_tag--type-default_ap0kl_33",
+  "tag--type-info": "_tag--type-info_ap0kl_37",
+  "tag--type-info-dim": "_tag--type-info-dim_ap0kl_41",
+  "tag--type-danger": "_tag--type-danger_ap0kl_45",
+  "tag--type-success": "_tag--type-success_ap0kl_49",
+  "tag--type-warning": "_tag--type-warning_ap0kl_53",
+  "tag--casing-all-caps": "_tag--casing-all-caps_ap0kl_57"
 };
 export {
-  e as default,
+  l as default,
   a as tag,
   t as tag__icon,
   _ as tag__label

package/dist/components/thread-footer/ThreadFooter.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:r=3,avatars:d=[],badge:s="none",mentionCount:l=1,following:t=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:i=!1,className:h="",..._}){const m=[a.default["thread-footer"],t?a.default["thread-footer--following"]:"",i?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),n=s==="mention"?`${l} mention${l===1?"":"s"}`:s==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[n&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:n}),s==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"],"aria-hidden":!0}),s==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],"aria-hidden":!0,children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})}),d.length>0&&e.jsx(v.default,{avatars:d,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],i?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${r} repl${r===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[r," ",r===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],t?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":t,"aria-label":t?"Unfollow thread":"Follow thread",children:t?"Following":"Follow"}),t&&o&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:o})]})]})]})})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:s=3,avatars:d=[],badge:t="none",mentionCount:l=1,following:r=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:n=!1,className:h="",..._}){const m=[a.default["thread-footer"],r?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),i=t==="mention"?`${l} mention${l===1?"":"s"}`:t==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(t==="unread"||t==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[t==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),t==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})})]}),d.length>0&&e.jsx(v.default,{avatars:d,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${s} repl${s===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[s," ",s===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],r?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":r,"aria-label":r?"Unfollow thread":"Follow thread",children:r?"Following":"Follow"}),r&&o&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:o})]})]})]})})}exports.default=N;
 //# sourceMappingURL=ThreadFooter.cjs.map

package/dist/components/thread-footer/ThreadFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {badge === 'unread' && (\n            <span\n              className={styles['thread-footer__unread-dot']}\n              aria-hidden\n            />\n          )}\n          {badge === 'mention' && (\n            <span\n              className={styles['thread-footer__mention-badge']}\n              aria-hidden\n            >\n              <MentionBadge\n                count={mentionCount}\n                location=\"channel\"\n                size=\"medium\"\n              />\n            </span>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"+ZAwCA,SAAwBA,EAAa,CACnC,WAAAC,EAAa,EACb,QAAAC,EAAU,CAAA,EACV,MAAAC,EAAQ,OACR,aAAAC,EAAe,EACf,UAAAC,EAAY,GACZ,cAAAC,EACA,QAAAC,EACA,eAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBR,EAAYQ,EAAAA,QAAO,0BAA0B,EAAI,GACjDJ,EAAUI,EAAAA,QAAO,wBAAwB,EAAI,GAC7CH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELI,EACJX,IAAU,UACN,GAAGC,CAAY,WAAWA,IAAiB,EAAI,GAAK,GAAG,GACvDD,IAAU,SACR,iBACA,OAER,OACEY,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAY,GAAGD,EAC7B,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,8BAA8B,EAClD,SAAA,CAAAC,SACE,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAAC,EACH,EAEDX,IAAU,UACTY,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,2BAA2B,EAC7C,cAAW,EAAA,CAAA,EAGdV,IAAU,WACTY,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,cAAW,GAEX,SAAAE,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAOb,EACP,SAAS,UACT,KAAK,QAAA,CAAA,CACP,CAAA,EAIHF,EAAQ,OAAS,GAChBa,EAAAA,IAACG,EAAAA,SAAgB,QAAAhB,EAAkB,IAAK,EAAG,KAAK,IAAA,CAAK,CAAA,EAEzD,EAGAc,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,wBAAwB,EAE7C,SAAA,CAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,0BAA0B,EACjCJ,EAAUI,EAAAA,QAAO,mCAAmC,EAAI,EAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASN,EACT,aAAY,GAAGN,CAAU,QAAQA,IAAe,EAAI,IAAM,KAAK,GAC/D,kBAAcmB,UAAA,CAAK,KAAK,KAAK,MAAOL,MAACM,IAAiB,EAAI,EAE1D,SAAAL,EAAAA,KAAC,OAAA,CAAK,UAAWH,UAAO,0BAA0B,EAC/C,SAAA,CAAAZ,EAAW,IAAEA,IAAe,EAAI,QAAU,SAAA,CAAA,CAC7C,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWY,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,EAG9DE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,2BAA2B,EAClCR,EAAYQ,EAAAA,QAAO,sCAAsC,EAAI,EAAA,EAE5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASL,EACT,eAAcH,EACd,aAAYA,EAAY,kBAAoB,gBAE3C,WAAY,YAAc,QAAA,CAAA,EAI5BA,GAAaC,GACZU,EAAAA,KAAC,OAAI,UAAWH,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,QAC7D,OAAA,CAAK,UAAWA,EAAAA,QAAO,2BAA2B,EAChD,SAAAP,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CACF,CAEJ"}
+{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.css

@@ -1 +1 @@
-._thread-footer_k8u9j_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start;padding:0 var(--spacing-l)}._thread-footer__inner_k8u9j_9{display:inline-flex;align-items:center;padding:0 var(--spacing-s);border-radius:var(--radius-s)}._thread-footer__avatars-group_k8u9j_15{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_k8u9j_21{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__unread-dot_k8u9j_32{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color);flex-shrink:0}._thread-footer__mention-badge_k8u9j_40{display:inline-flex;flex-shrink:0}._thread-footer__buttons_k8u9j_44{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_k8u9j_49,._thread-footer__follow-btn_k8u9j_49{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_k8u9j_2 ._thread-footer__reply-btn_k8u9j_49[class*=button--emphasis-quaternary],._thread-footer_k8u9j_2 ._thread-footer__follow-btn_k8u9j_49:not(._thread-footer__follow-btn--following_k8u9j_52)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_k8u9j_2 ._thread-footer__reply-btn_k8u9j_49[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_k8u9j_2 ._thread-footer__follow-btn_k8u9j_49:not(._thread-footer__follow-btn--following_k8u9j_52)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_k8u9j_2 ._thread-footer__reply-btn--hovered_k8u9j_58[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_k8u9j_2 ._thread-footer__follow-btn--following_k8u9j_52[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_k8u9j_2 ._thread-footer__follow-btn--following_k8u9j_52[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_k8u9j_68{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_k8u9j_75{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_k8u9j_44:has(._thread-footer__follow-btn--following_k8u9j_52)>._thread-footer__divider_k8u9j_75:first-of-type,._thread-footer__buttons_k8u9j_44:has(._thread-footer__follow-btn--following_k8u9j_52)>._thread-footer__last-reply-group_k8u9j_88>._thread-footer__divider_k8u9j_75{opacity:0}._thread-footer__buttons_k8u9j_44:not(:has(._thread-footer__follow-btn--following_k8u9j_52)):has(._thread-footer__reply-btn_k8u9j_49:hover,._thread-footer__reply-btn--hovered_k8u9j_58,._thread-footer__reply-btn_k8u9j_49:focus-visible,._thread-footer__follow-btn_k8u9j_49:hover,._thread-footer__follow-btn_k8u9j_49:focus-visible)>._thread-footer__divider_k8u9j_75:first-of-type{opacity:0}._thread-footer__last-reply-group_k8u9j_88{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_k8u9j_107:hover ._thread-footer__last-reply-group_k8u9j_88,._thread-footer--following_k8u9j_107:focus-within ._thread-footer__last-reply-group_k8u9j_88,._thread-footer--following_k8u9j_107._thread-footer--hovered_k8u9j_107 ._thread-footer__last-reply-group_k8u9j_88{max-width:10rem;opacity:1}._thread-footer__last-reply_k8u9j_88{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}
+._thread-footer_b5kji_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_b5kji_8{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_b5kji_14{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_b5kji_19{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_b5kji_30{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_b5kji_39{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color)}._thread-footer__mention-badge_b5kji_46{display:inline-flex}._thread-footer__buttons_b5kji_49{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_b5kji_54,._thread-footer__follow-btn_b5kji_54{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary],._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__reply-btn--hovered_b5kji_63[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_b5kji_73{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_b5kji_80{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__divider_b5kji_80:first-of-type,._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__last-reply-group_b5kji_93>._thread-footer__divider_b5kji_80{opacity:0}._thread-footer__buttons_b5kji_49:not(:has(._thread-footer__follow-btn--following_b5kji_57)):has(._thread-footer__reply-btn_b5kji_54:hover,._thread-footer__reply-btn--hovered_b5kji_63,._thread-footer__reply-btn_b5kji_54:focus-visible,._thread-footer__follow-btn_b5kji_54:hover,._thread-footer__follow-btn_b5kji_54:focus-visible)>._thread-footer__divider_b5kji_80:first-of-type{opacity:0}._thread-footer__last-reply-group_b5kji_93{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_b5kji_112:hover ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112:focus-within ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112._thread-footer--hovered_b5kji_112 ._thread-footer__last-reply-group_b5kji_93{max-width:10rem;opacity:1}._thread-footer__last-reply_b5kji_93{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}

package/dist/components/thread-footer/ThreadFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAuGnB"}
+{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAwGnB"}