mimir-ui-kit 1.43.28 → 1.44.0

package/dist/components/TabTrail/TabTrail.js

@@ -1,25 +1,25 @@
-import { jsxs as Z, jsx as k } from "react/jsx-runtime";
-import { c as j } from "../../index-DIxK0V-G.js";
-import * as M from "react";
-import O, { useState as Y, createContext as ie, useReducer as ye, useMemo as R, useId as ue, useRef as Q, useContext as ce, forwardRef as Se, useEffect as ee } from "react";
-import { ETabTrailSize as Ae } from "./constants.js";
+import { jsxs as V, jsx as _, Fragment as Ne } from "react/jsx-runtime";
+import { c as X } from "../../index-DIxK0V-G.js";
+import * as B from "react";
+import M, { useState as te, createContext as fe, useReducer as Se, useMemo as R, useId as pe, useRef as re, useContext as be, forwardRef as Ae, useEffect as se } from "react";
+import { ETabTrailSize as Fe } from "./constants.js";
 import { TabButtons as ke } from "./TabButtons/TabButtons.js";
-import { ETabTrailButtonVariant as Fe } from "./TabButtons/constants.js";
-import { Icon as Ne } from "../../icons/Icon.js";
-import { NotificationBadge as De } from "../NotificationBadge/NotificationBadge.js";
-import { M as oe, W as U, s as J, y as V, o as D, n as X, H as q, $ as de, b as Re, D as fe, a as z, u as Le, c as $, e as Oe } from "../../keyboard-wis2TUql.js";
-import { w as Me } from "../../use-active-press-CnDeVvQq.js";
-import { e as Ce } from "../../use-resolve-button-type-DhFdPxnv.js";
-import { f as Be } from "../../use-is-mounted-MBU4fiLr.js";
-import { T as pe, s as We } from "../../hidden-CkTYbiNM.js";
-import { _ as G, T as K, P as L, F as _ } from "../../focus-management-BAl0GmRk.js";
-import '../../assets/TabTrail.css';function Ge({ onFocus: e }) {
-  let [t, n] = Y(!0), r = Be();
-  return t ? O.createElement(pe, { as: "button", type: "button", features: We.Focusable, onFocus: (s) => {
-    s.preventDefault();
-    let l, o = 50;
-    function d() {
-      if (o-- <= 0) {
+import { ETabTrailButtonVariant as De } from "./TabButtons/constants.js";
+import { Icon as ue } from "../../icons/Icon.js";
+import { NotificationBadge as Re } from "../NotificationBadge/NotificationBadge.js";
+import { M as de, W as j, s as Z, y as J, o as D, n as ne, H as K, $ as me, b as Le, D as ve, a as H, u as Oe, c as y, e as Me } from "../../keyboard-wis2TUql.js";
+import { w as Be } from "../../use-active-press-CnDeVvQq.js";
+import { e as We } from "../../use-resolve-button-type-DhFdPxnv.js";
+import { f as Ce } from "../../use-is-mounted-MBU4fiLr.js";
+import { T as he, s as Ge } from "../../hidden-CkTYbiNM.js";
+import { _ as q, T as ee, P as O, F as E } from "../../focus-management-BAl0GmRk.js";
+import '../../assets/TabTrail.css';function Ue({ onFocus: e }) {
+  let [t, n] = te(!0), r = Ce();
+  return t ? M.createElement(he, { as: "button", type: "button", features: Ge.Focusable, onFocus: (a) => {
+    a.preventDefault();
+    let l, i = 50;
+    function f() {
+      if (i-- <= 0) {
         l && cancelAnimationFrame(l);
         return;
       }
@@ -28,283 +28,320 @@ import '../../assets/TabTrail.css';function Ge({ onFocus: e }) {
         n(!1);
         return;
       }
-      l = requestAnimationFrame(d);
+      l = requestAnimationFrame(f);
     }
-    l = requestAnimationFrame(d);
+    l = requestAnimationFrame(f);
   } }) : null;
 }
-const be = M.createContext(null);
+const xe = B.createContext(null);
 function ze() {
   return { groups: /* @__PURE__ */ new Map(), get(e, t) {
     var n;
     let r = this.groups.get(e);
     r || (r = /* @__PURE__ */ new Map(), this.groups.set(e, r));
-    let s = (n = r.get(t)) != null ? n : 0;
-    r.set(t, s + 1);
+    let a = (n = r.get(t)) != null ? n : 0;
+    r.set(t, a + 1);
     let l = Array.from(r.keys()).indexOf(t);
-    function o() {
-      let d = r.get(t);
-      d > 1 ? r.set(t, d - 1) : r.delete(t);
+    function i() {
+      let f = r.get(t);
+      f > 1 ? r.set(t, f - 1) : r.delete(t);
     }
-    return [l, o];
+    return [l, i];
   } };
 }
-function Ue({ children: e }) {
-  let t = M.useRef(ze());
-  return M.createElement(be.Provider, { value: t }, e);
+function Ve({ children: e }) {
+  let t = B.useRef(ze());
+  return B.createElement(xe.Provider, { value: t }, e);
 }
-function me(e) {
-  let t = M.useContext(be);
+function ge(e) {
+  let t = B.useContext(xe);
   if (!t) throw new Error("You must wrap your component in a <StableCollection>");
-  let n = M.useId(), [r, s] = t.current.get(e, n);
-  return M.useEffect(() => s, []), r;
+  let n = B.useId(), [r, a] = t.current.get(e, n);
+  return B.useEffect(() => a, []), r;
 }
-var Ve = ((e) => (e[e.Forwards = 0] = "Forwards", e[e.Backwards = 1] = "Backwards", e))(Ve || {}), qe = ((e) => (e[e.Less = -1] = "Less", e[e.Equal = 0] = "Equal", e[e.Greater = 1] = "Greater", e))(qe || {}), He = ((e) => (e[e.SetSelectedIndex = 0] = "SetSelectedIndex", e[e.RegisterTab = 1] = "RegisterTab", e[e.UnregisterTab = 2] = "UnregisterTab", e[e.RegisterPanel = 3] = "RegisterPanel", e[e.UnregisterPanel = 4] = "UnregisterPanel", e))(He || {});
-let je = { 0(e, t) {
+var qe = ((e) => (e[e.Forwards = 0] = "Forwards", e[e.Backwards = 1] = "Backwards", e))(qe || {}), He = ((e) => (e[e.Less = -1] = "Less", e[e.Equal = 0] = "Equal", e[e.Greater = 1] = "Greater", e))(He || {}), je = ((e) => (e[e.SetSelectedIndex = 0] = "SetSelectedIndex", e[e.RegisterTab = 1] = "RegisterTab", e[e.UnregisterTab = 2] = "UnregisterTab", e[e.RegisterPanel = 3] = "RegisterPanel", e[e.UnregisterPanel = 4] = "UnregisterPanel", e))(je || {});
+let Je = { 0(e, t) {
   var n;
-  let r = G(e.tabs, (u) => u.current), s = G(e.panels, (u) => u.current), l = r.filter((u) => {
-    var h;
-    return !((h = u.current) != null && h.hasAttribute("disabled"));
-  }), o = { ...e, tabs: r, panels: s };
+  let r = q(e.tabs, (d) => d.current), a = q(e.panels, (d) => d.current), l = r.filter((d) => {
+    var T;
+    return !((T = d.current) != null && T.hasAttribute("disabled"));
+  }), i = { ...e, tabs: r, panels: a };
   if (t.index < 0 || t.index > r.length - 1) {
-    let u = z(Math.sign(t.index - e.selectedIndex), { [-1]: () => 1, 0: () => z(Math.sign(t.index), { [-1]: () => 0, 0: () => 0, 1: () => 1 }), 1: () => 0 });
-    if (l.length === 0) return o;
-    let h = z(u, { 0: () => r.indexOf(l[0]), 1: () => r.indexOf(l[l.length - 1]) });
-    return { ...o, selectedIndex: h === -1 ? e.selectedIndex : h };
+    let d = H(Math.sign(t.index - e.selectedIndex), { [-1]: () => 1, 0: () => H(Math.sign(t.index), { [-1]: () => 0, 0: () => 0, 1: () => 1 }), 1: () => 0 });
+    if (l.length === 0) return i;
+    let T = H(d, { 0: () => r.indexOf(l[0]), 1: () => r.indexOf(l[l.length - 1]) });
+    return { ...i, selectedIndex: T === -1 ? e.selectedIndex : T };
   }
-  let d = r.slice(0, t.index), I = [...r.slice(t.index), ...d].find((u) => l.includes(u));
-  if (!I) return o;
-  let v = (n = r.indexOf(I)) != null ? n : e.selectedIndex;
-  return v === -1 && (v = e.selectedIndex), { ...o, selectedIndex: v };
+  let f = r.slice(0, t.index), P = [...r.slice(t.index), ...f].find((d) => l.includes(d));
+  if (!P) return i;
+  let x = (n = r.indexOf(P)) != null ? n : e.selectedIndex;
+  return x === -1 && (x = e.selectedIndex), { ...i, selectedIndex: x };
 }, 1(e, t) {
   if (e.tabs.includes(t.tab)) return e;
-  let n = e.tabs[e.selectedIndex], r = G([...e.tabs, t.tab], (l) => l.current), s = e.selectedIndex;
-  return e.info.current.isControlled || (s = r.indexOf(n), s === -1 && (s = e.selectedIndex)), { ...e, tabs: r, selectedIndex: s };
+  let n = e.tabs[e.selectedIndex], r = q([...e.tabs, t.tab], (l) => l.current), a = e.selectedIndex;
+  return e.info.current.isControlled || (a = r.indexOf(n), a === -1 && (a = e.selectedIndex)), { ...e, tabs: r, selectedIndex: a };
 }, 2(e, t) {
   return { ...e, tabs: e.tabs.filter((n) => n !== t.tab) };
 }, 3(e, t) {
-  return e.panels.includes(t.panel) ? e : { ...e, panels: G([...e.panels, t.panel], (n) => n.current) };
+  return e.panels.includes(t.panel) ? e : { ...e, panels: q([...e.panels, t.panel], (n) => n.current) };
 }, 4(e, t) {
   return { ...e, panels: e.panels.filter((n) => n !== t.panel) };
-} }, te = ie(null);
-te.displayName = "TabsDataContext";
-function C(e) {
-  let t = ce(te);
+} }, le = fe(null);
+le.displayName = "TabsDataContext";
+function W(e) {
+  let t = be(le);
   if (t === null) {
     let n = new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(n, C), n;
+    throw Error.captureStackTrace && Error.captureStackTrace(n, W), n;
   }
   return t;
 }
-let re = ie(null);
-re.displayName = "TabsActionsContext";
-function ne(e) {
-  let t = ce(re);
+let ie = fe(null);
+ie.displayName = "TabsActionsContext";
+function oe(e) {
+  let t = be(ie);
   if (t === null) {
     let n = new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(n, ne), n;
+    throw Error.captureStackTrace && Error.captureStackTrace(n, oe), n;
   }
   return t;
 }
-function Je(e, t) {
-  return z(t.type, je, e, t);
+function Ke(e, t) {
+  return H(t.type, Je, e, t);
 }
-let Ke = "div";
-function Ye(e, t) {
-  let { defaultIndex: n = 0, vertical: r = !1, manual: s = !1, onChange: l, selectedIndex: o = null, ...d } = e;
-  const I = r ? "vertical" : "horizontal", v = s ? "manual" : "auto";
-  let u = o !== null, h = J({ isControlled: u }), y = V(t), [p, c] = ye(Je, { info: h, selectedIndex: o ?? n, tabs: [], panels: [] }), x = R(() => ({ selectedIndex: p.selectedIndex }), [p.selectedIndex]), A = J(l || (() => {
-  })), w = J(p.tabs), b = R(() => ({ orientation: I, activation: v, ...p }), [I, v, p]), P = D((a) => (c({ type: 1, tab: a }), () => c({ type: 2, tab: a }))), F = D((a) => (c({ type: 3, panel: a }), () => c({ type: 4, panel: a }))), m = D((a) => {
-    g.current !== a && A.current(a), u || c({ type: 0, index: a });
-  }), g = J(u ? e.selectedIndex : p.selectedIndex), N = R(() => ({ registerTab: P, registerPanel: F, change: m }), []);
-  X(() => {
-    c({ type: 0, index: o ?? n });
-  }, [o]), X(() => {
-    if (g.current === void 0 || p.tabs.length <= 0) return;
-    let a = G(p.tabs, (f) => f.current);
-    a.some((f, T) => p.tabs[T] !== f) && m(a.indexOf(p.tabs[g.current]));
+let Ye = "div";
+function Qe(e, t) {
+  let { defaultIndex: n = 0, vertical: r = !1, manual: a = !1, onChange: l, selectedIndex: i = null, ...f } = e;
+  const P = r ? "vertical" : "horizontal", x = a ? "manual" : "auto";
+  let d = i !== null, T = Z({ isControlled: d }), N = J(t), [p, o] = Se(Ke, { info: T, selectedIndex: i ?? n, tabs: [], panels: [] }), F = R(() => ({ selectedIndex: p.selectedIndex }), [p.selectedIndex]), g = Z(l || (() => {
+  })), w = Z(p.tabs), b = R(() => ({ orientation: P, activation: x, ...p }), [P, x, p]), A = D((c) => (o({ type: 1, tab: c }), () => o({ type: 2, tab: c }))), $ = D((c) => (o({ type: 3, panel: c }), () => o({ type: 4, panel: c }))), I = D((c) => {
+    h.current !== c && g.current(c), d || o({ type: 0, index: c });
+  }), h = Z(d ? e.selectedIndex : p.selectedIndex), k = R(() => ({ registerTab: A, registerPanel: $, change: I }), []);
+  ne(() => {
+    o({ type: 0, index: i ?? n });
+  }, [i]), ne(() => {
+    if (h.current === void 0 || p.tabs.length <= 0) return;
+    let c = q(p.tabs, (s) => s.current);
+    c.some((s, v) => p.tabs[v] !== s) && I(c.indexOf(p.tabs[h.current]));
   });
-  let B = { ref: y };
-  return O.createElement(Ue, null, O.createElement(re.Provider, { value: N }, O.createElement(te.Provider, { value: b }, b.tabs.length <= 0 && O.createElement(Ge, { onFocus: () => {
-    var a, f;
-    for (let T of w.current) if (((a = T.current) == null ? void 0 : a.tabIndex) === 0) return (f = T.current) == null || f.focus(), !0;
+  let C = { ref: N };
+  return M.createElement(Ve, null, M.createElement(ie.Provider, { value: k }, M.createElement(le.Provider, { value: b }, b.tabs.length <= 0 && M.createElement(Ue, { onFocus: () => {
+    var c, s;
+    for (let v of w.current) if (((c = v.current) == null ? void 0 : c.tabIndex) === 0) return (s = v.current) == null || s.focus(), !0;
     return !1;
-  } }), q({ ourProps: B, theirProps: d, slot: x, defaultTag: Ke, name: "Tabs" }))));
+  } }), K({ ourProps: C, theirProps: f, slot: F, defaultTag: Ye, name: "Tabs" }))));
 }
-let Qe = "div";
-function Xe(e, t) {
-  let { orientation: n, selectedIndex: r } = C("Tab.List"), s = V(t), l = R(() => ({ selectedIndex: r }), [r]);
-  return q({ ourProps: { ref: s, role: "tablist", "aria-orientation": n }, theirProps: e, slot: l, defaultTag: Qe, name: "Tabs.List" });
+let Xe = "div";
+function Ze(e, t) {
+  let { orientation: n, selectedIndex: r } = W("Tab.List"), a = J(t), l = R(() => ({ selectedIndex: r }), [r]);
+  return K({ ourProps: { ref: a, role: "tablist", "aria-orientation": n }, theirProps: e, slot: l, defaultTag: Xe, name: "Tabs.List" });
 }
-let Ze = "button";
-function et(e, t) {
+let et = "button";
+function tt(e, t) {
   var n, r;
-  let s = ue(), { id: l = `headlessui-tabs-tab-${s}`, disabled: o = !1, autoFocus: d = !1, ...I } = e, { orientation: v, activation: u, selectedIndex: h, tabs: y, panels: p } = C("Tab"), c = ne("Tab"), x = C("Tab"), [A, w] = Y(null), b = Q(null), P = V(b, t, w);
-  X(() => c.registerTab(b), [c, b]);
-  let F = me("tabs"), m = y.indexOf(b);
-  m === -1 && (m = F);
-  let g = m === h, N = D((i) => {
+  let a = pe(), { id: l = `headlessui-tabs-tab-${a}`, disabled: i = !1, autoFocus: f = !1, ...P } = e, { orientation: x, activation: d, selectedIndex: T, tabs: N, panels: p } = W("Tab"), o = oe("Tab"), F = W("Tab"), [g, w] = te(null), b = re(null), A = J(b, t, w);
+  ne(() => o.registerTab(b), [o, b]);
+  let $ = ge("tabs"), I = N.indexOf(b);
+  I === -1 && (I = $);
+  let h = I === T, k = D((u) => {
     var S;
-    let H = i();
-    if (H === K.Success && u === "auto") {
-      let _e = (S = Le(b)) == null ? void 0 : S.activeElement, le = x.tabs.findIndex((Ee) => Ee.current === _e);
-      le !== -1 && c.change(le);
+    let Q = u();
+    if (Q === ee.Success && d === "auto") {
+      let ye = (S = Oe(b)) == null ? void 0 : S.activeElement, ce = F.tabs.findIndex((Ee) => Ee.current === ye);
+      ce !== -1 && o.change(ce);
     }
-    return H;
-  }), B = D((i) => {
-    let S = y.map((H) => H.current).filter(Boolean);
-    if (i.key === $.Space || i.key === $.Enter) {
-      i.preventDefault(), i.stopPropagation(), c.change(m);
+    return Q;
+  }), C = D((u) => {
+    let S = N.map((Q) => Q.current).filter(Boolean);
+    if (u.key === y.Space || u.key === y.Enter) {
+      u.preventDefault(), u.stopPropagation(), o.change(I);
       return;
     }
-    switch (i.key) {
-      case $.Home:
-      case $.PageUp:
-        return i.preventDefault(), i.stopPropagation(), N(() => L(S, _.First));
-      case $.End:
-      case $.PageDown:
-        return i.preventDefault(), i.stopPropagation(), N(() => L(S, _.Last));
+    switch (u.key) {
+      case y.Home:
+      case y.PageUp:
+        return u.preventDefault(), u.stopPropagation(), k(() => O(S, E.First));
+      case y.End:
+      case y.PageDown:
+        return u.preventDefault(), u.stopPropagation(), k(() => O(S, E.Last));
     }
-    if (N(() => z(v, { vertical() {
-      return i.key === $.ArrowUp ? L(S, _.Previous | _.WrapAround) : i.key === $.ArrowDown ? L(S, _.Next | _.WrapAround) : K.Error;
+    if (k(() => H(x, { vertical() {
+      return u.key === y.ArrowUp ? O(S, E.Previous | E.WrapAround) : u.key === y.ArrowDown ? O(S, E.Next | E.WrapAround) : ee.Error;
     }, horizontal() {
-      return i.key === $.ArrowLeft ? L(S, _.Previous | _.WrapAround) : i.key === $.ArrowRight ? L(S, _.Next | _.WrapAround) : K.Error;
-    } })) === K.Success) return i.preventDefault();
-  }), a = Q(!1), f = D(() => {
-    var i;
-    a.current || (a.current = !0, (i = b.current) == null || i.focus({ preventScroll: !0 }), c.change(m), Oe(() => {
-      a.current = !1;
+      return u.key === y.ArrowLeft ? O(S, E.Previous | E.WrapAround) : u.key === y.ArrowRight ? O(S, E.Next | E.WrapAround) : ee.Error;
+    } })) === ee.Success) return u.preventDefault();
+  }), c = re(!1), s = D(() => {
+    var u;
+    c.current || (c.current = !0, (u = b.current) == null || u.focus({ preventScroll: !0 }), o.change(I), Me(() => {
+      c.current = !1;
     }));
-  }), T = D((i) => {
-    i.preventDefault();
-  }), { isFocusVisible: W, focusProps: Te } = de({ autoFocus: d }), { isHovered: ae, hoverProps: Ie } = Re({ isDisabled: o }), { pressed: se, pressProps: Pe } = Me({ disabled: o }), we = R(() => ({ selected: g, hover: ae, active: se, focus: W, autofocus: d, disabled: o }), [g, ae, W, se, d, o]), $e = fe({ ref: P, onKeyDown: B, onMouseDown: T, onClick: f, id: l, role: "tab", type: Ce(e, A), "aria-controls": (r = (n = p[m]) == null ? void 0 : n.current) == null ? void 0 : r.id, "aria-selected": g, tabIndex: g ? 0 : -1, disabled: o || void 0, autoFocus: d }, Te, Ie, Pe);
-  return q({ ourProps: $e, theirProps: I, slot: we, defaultTag: Ze, name: "Tabs.Tab" });
+  }), v = D((u) => {
+    u.preventDefault();
+  }), { isFocusVisible: L, focusProps: Y } = me({ autoFocus: f }), { isHovered: G, hoverProps: U } = Le({ isDisabled: i }), { pressed: z, pressProps: ae } = Be({ disabled: i }), we = R(() => ({ selected: h, hover: G, active: z, focus: L, autofocus: f, disabled: i }), [h, G, L, z, f, i]), $e = ve({ ref: A, onKeyDown: C, onMouseDown: v, onClick: s, id: l, role: "tab", type: We(e, g), "aria-controls": (r = (n = p[I]) == null ? void 0 : n.current) == null ? void 0 : r.id, "aria-selected": h, tabIndex: h ? 0 : -1, disabled: i || void 0, autoFocus: f }, Y, U, ae);
+  return K({ ourProps: $e, theirProps: P, slot: we, defaultTag: et, name: "Tabs.Tab" });
 }
-let tt = "div";
-function rt(e, t) {
-  let { selectedIndex: n } = C("Tab.Panels"), r = V(t), s = R(() => ({ selectedIndex: n }), [n]);
-  return q({ ourProps: { ref: r }, theirProps: e, slot: s, defaultTag: tt, name: "Tabs.Panels" });
+let rt = "div";
+function nt(e, t) {
+  let { selectedIndex: n } = W("Tab.Panels"), r = J(t), a = R(() => ({ selectedIndex: n }), [n]);
+  return K({ ourProps: { ref: r }, theirProps: e, slot: a, defaultTag: rt, name: "Tabs.Panels" });
 }
-let nt = "div", at = oe.RenderStrategy | oe.Static;
-function st(e, t) {
-  var n, r, s, l;
-  let o = ue(), { id: d = `headlessui-tabs-panel-${o}`, tabIndex: I = 0, ...v } = e, { selectedIndex: u, tabs: h, panels: y } = C("Tab.Panel"), p = ne("Tab.Panel"), c = Q(null), x = V(c, t);
-  X(() => p.registerPanel(c), [p, c]);
-  let A = me("panels"), w = y.indexOf(c);
-  w === -1 && (w = A);
-  let b = w === u, { isFocusVisible: P, focusProps: F } = de(), m = R(() => ({ selected: b, focus: P }), [b, P]), g = fe({ ref: x, id: d, role: "tabpanel", "aria-labelledby": (r = (n = h[w]) == null ? void 0 : n.current) == null ? void 0 : r.id, tabIndex: b ? I : -1 }, F);
-  return !b && ((s = v.unmount) == null || s) && !((l = v.static) != null && l) ? O.createElement(pe, { "aria-hidden": "true", ...g }) : q({ ourProps: g, theirProps: v, slot: m, defaultTag: nt, features: at, visible: b, name: "Tabs.Panel" });
+let at = "div", st = de.RenderStrategy | de.Static;
+function lt(e, t) {
+  var n, r, a, l;
+  let i = pe(), { id: f = `headlessui-tabs-panel-${i}`, tabIndex: P = 0, ...x } = e, { selectedIndex: d, tabs: T, panels: N } = W("Tab.Panel"), p = oe("Tab.Panel"), o = re(null), F = J(o, t);
+  ne(() => p.registerPanel(o), [p, o]);
+  let g = ge("panels"), w = N.indexOf(o);
+  w === -1 && (w = g);
+  let b = w === d, { isFocusVisible: A, focusProps: $ } = me(), I = R(() => ({ selected: b, focus: A }), [b, A]), h = ve({ ref: F, id: f, role: "tabpanel", "aria-labelledby": (r = (n = T[w]) == null ? void 0 : n.current) == null ? void 0 : r.id, tabIndex: b ? P : -1 }, $);
+  return !b && ((a = x.unmount) == null || a) && !((l = x.static) != null && l) ? M.createElement(he, { "aria-hidden": "true", ...h }) : K({ ourProps: h, theirProps: x, slot: I, defaultTag: at, features: st, visible: b, name: "Tabs.Panel" });
 }
-let lt = U(et), ve = U(Ye), xe = U(Xe), he = U(rt), ge = U(st), ot = Object.assign(lt, { Group: ve, List: xe, Panels: he, Panel: ge });
-const it = "_container_109vo_2", ut = "_group_109vo_6", ct = "_tab_109vo_17", dt = "_list_109vo_55", ft = "_tabs_109vo_66", pt = "_buttons_109vo_72", bt = "_m_109vo_79", mt = "_s_109vo_87", E = {
-  container: it,
+let it = j(tt), _e = j(Qe), Te = j(Ze), Ie = j(nt), Pe = j(lt), ot = Object.assign(it, { Group: _e, List: Te, Panels: Ie, Panel: Pe });
+const ct = "_container_14t2i_2", ut = "_group_14t2i_6", dt = "_tab_14t2i_17", ft = "_list_14t2i_55", pt = "_tabs_14t2i_66", bt = "_buttons_14t2i_72", mt = "_m_14t2i_79", vt = "_s_14t2i_87", ht = "_detailed_14t2i_95", m = {
+  container: ct,
   group: ut,
-  "group-inner": "_group-inner_109vo_10",
-  tab: ct,
-  list: dt,
-  tabs: ft,
-  buttons: pt,
-  m: bt,
-  s: mt
-}, kt = Se(
+  "group-inner": "_group-inner_14t2i_10",
+  tab: dt,
+  list: ft,
+  tabs: pt,
+  buttons: bt,
+  m: mt,
+  s: vt,
+  detailed: ht,
+  "tab-content": "_tab-content_14t2i_123",
+  "tab-value": "_tab-value_14t2i_131",
+  "tab-name": "_tab-name_14t2i_140",
+  "tab-header": "_tab-header_14t2i_149",
+  "tab-text": "_tab-text_14t2i_155",
+  "tab-icon": "_tab-icon_14t2i_162"
+}, kt = Ae(
   ({
     categories: e,
-    size: t = Ae.M,
+    size: t = Fe.M,
     showButtons: n = !0,
     className: r,
-    selectedTabIndex: s,
+    selectedTabIndex: a,
     onTabChange: l,
-    buttonsVariant: o = Fe.WHITE,
-    autoShowButtons: d = !1,
-    tabClassName: I,
-    listClassName: v,
-    panelClassName: u,
-    buttonsClassName: h,
-    indicatorColor: y,
-    tabIcons: p = {}
-  }, c) => {
-    const [x, A] = Y(s || 0), [w, b] = Y(!1), P = Q(null), F = y ? { "--tab-indicator-color": y } : void 0;
-    ee(() => {
-      s !== void 0 && s !== x && A(s);
-    }, [x, s]);
-    const m = (a) => {
-      A(a), l == null || l(a);
-    }, g = () => {
-      const a = (x + 1) % e.length;
-      m(a);
-    }, N = () => {
-      const a = (x - 1 + e.length) % e.length;
-      m(a);
+    buttonsVariant: i = De.WHITE,
+    autoShowButtons: f = !1,
+    tabClassName: P,
+    listClassName: x,
+    panelClassName: d,
+    buttonsClassName: T,
+    indicatorColor: N,
+    tabIcons: p = {},
+    variant: o = "default"
+  }, F) => {
+    const [g, w] = te(a || 0), [b, A] = te(!1), $ = re(null), I = {
+      ...N && { "--tab-indicator-color": N }
     };
-    ee(() => {
-      var f;
-      const a = (f = P.current) == null ? void 0 : f.querySelector(
-        `.${E.tab}[data-active="true"]`
+    se(() => {
+      a !== void 0 && a !== g && w(a);
+    }, [g, a]);
+    const h = (s) => {
+      w(s), l == null || l(s);
+    }, k = () => {
+      const s = (g + 1) % e.length;
+      h(s);
+    }, C = () => {
+      const s = (g - 1 + e.length) % e.length;
+      h(s);
+    };
+    se(() => {
+      var v;
+      const s = (v = $.current) == null ? void 0 : v.querySelector(
+        `.${m.tab}[data-active="true"]`
       );
-      a && typeof a.scrollIntoView == "function" && a.scrollIntoView({
+      s && typeof s.scrollIntoView == "function" && s.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "center"
       });
-    }, [x]), ee(() => {
-      const a = () => {
-        if (P.current) {
-          const { scrollWidth: f, clientWidth: T } = P.current;
-          b(f > T);
+    }, [g]), se(() => {
+      const s = () => {
+        if ($.current) {
+          const { scrollWidth: v, clientWidth: L } = $.current;
+          A(v > L);
         }
       };
-      return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
+      return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
     }, [e]);
-    const B = d ? w : n;
-    return /* @__PURE__ */ Z(
-      ve,
+    const c = f ? b : n;
+    return /* @__PURE__ */ V(
+      _e,
       {
-        ref: c,
-        className: j(E.group, E[t], r),
-        selectedIndex: x,
-        onChange: m,
-        style: F,
+        ref: F,
+        className: X(
+          m.group,
+          m[t],
+          o === "detailed" && m.detailed,
+          r
+        ),
+        selectedIndex: g,
+        onChange: h,
+        style: I,
         children: [
-          /* @__PURE__ */ Z("div", { className: E["group-inner"], children: [
-            /* @__PURE__ */ k(
-              xe,
+          /* @__PURE__ */ V("div", { className: m["group-inner"], children: [
+            /* @__PURE__ */ _(
+              Te,
               {
-                ref: P,
-                className: j(E.list, v),
-                children: /* @__PURE__ */ k("div", { className: E.tabs, children: e.map(({ name: a, notificationCount: f }, T) => {
-                  const W = p[T];
-                  return /* @__PURE__ */ Z(
-                    ot,
-                    {
-                      className: `${E.tab} ${x === T ? 'data-active="true"' : ""} ${I || ""}`,
-                      "data-active": x === T,
-                      children: [
-                        W && /* @__PURE__ */ k(Ne, { iconName: W }),
-                        a,
-                        f && /* @__PURE__ */ k(De, { count: f, size: "m" })
-                      ]
-                    },
-                    a
-                  );
-                }) })
+                ref: $,
+                className: X(m.list, x),
+                children: /* @__PURE__ */ _("div", { className: m.tabs, children: e.map(
+                  ({ name: s, notificationCount: v, value: L, valueColor: Y, borderColor: G }, U) => {
+                    const z = p[U], ae = o === "detailed" ? {
+                      ...Y && {
+                        "--detailed-value-color": Y
+                      },
+                      ...G && {
+                        "--detailed-border-color": G
+                      }
+                    } : void 0;
+                    return /* @__PURE__ */ _(
+                      ot,
+                      {
+                        className: `${m.tab} ${g === U ? 'data-active="true"' : ""} ${P || ""}`,
+                        "data-active": g === U,
+                        style: ae,
+                        children: o === "detailed" ? /* @__PURE__ */ _("div", { className: m["tab-content"], children: /* @__PURE__ */ V("div", { className: m["tab-header"], children: [
+                          /* @__PURE__ */ V("div", { className: m["tab-text"], children: [
+                            /* @__PURE__ */ _("div", { className: m["tab-value"], children: L }),
+                            /* @__PURE__ */ _("div", { className: m["tab-name"], children: s })
+                          ] }),
+                          /* @__PURE__ */ _("div", { className: m["tab-icon"], children: /* @__PURE__ */ _(ue, { iconName: "ArrowUpRight24px" }) })
+                        ] }) }) : /* @__PURE__ */ V(Ne, { children: [
+                          z && /* @__PURE__ */ _(ue, { iconName: z }),
+                          s,
+                          v && /* @__PURE__ */ _(
+                            Re,
+                            {
+                              count: v,
+                              size: "m"
+                            }
+                          )
+                        ] })
+                      },
+                      s
+                    );
+                  }
+                ) })
               }
             ),
-            B && /* @__PURE__ */ k("div", { className: j(E.buttons, h), children: /* @__PURE__ */ k(
+            c && /* @__PURE__ */ _("div", { className: X(m.buttons, T), children: /* @__PURE__ */ _(
               ke,
               {
-                handlePrevTab: N,
-                handleNextTab: g,
-                buttonsVariant: o
+                handlePrevTab: C,
+                handleNextTab: k,
+                buttonsVariant: i
               }
             ) })
           ] }),
-          /* @__PURE__ */ k(he, { className: E.panels, children: e.map(({ name: a, content: f }) => /* @__PURE__ */ k(
-            ge,
+          /* @__PURE__ */ _(Ie, { className: m.panels, children: e.map(({ name: s, content: v }) => /* @__PURE__ */ _(
+            Pe,
             {
-              className: j(E.panel, u),
-              children: f
+              className: X(m.panel, d),
+              children: v
             },
-            a
+            s
           )) })
         ]
       }

package/dist/components/TextArea/TextArea.js

@@ -5,7 +5,7 @@ import { useAutoResizeTextArea as Z } from "./hooks.js";
 import { useMergeRefs as $ } from "../../hooks/useMergeRefs/useMergeRefs.js";
 import { Icon as ee } from "../../icons/Icon.js";
 import { Button as te } from "../Button/Button.js";
-import { c as e } from "../../Input-BU_6U1CW.js";
+import { c as e } from "../../Input-IzZ6B9kw.js";
 import { EInputVariant as ae } from "../Input/constants.js";
 import '../../assets/TextArea.css';const re = "_textarea_rk5xe_2", se = "_clear_rk5xe_11", le = "_label_rk5xe_26", ne = "_s_rk5xe_71", oe = "_m_rk5xe_84", ce = "_l_rk5xe_26", t = {
   "textarea-wrapper": "_textarea-wrapper_rk5xe_2",