mimir-ui-kit 1.49.2 → 1.50.1

package/dist/components/TabTrail/TabTrail.js

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

package/dist/components/TextAreaV2/TextArea.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from './types';
+
+export declare const TextArea: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLDivElement>>>;