@pismo/marola 1.0.0-beta.23 → 1.0.0-beta.24

package/dist/{Tabs.module-jkH1Qjn7.js → Tabs.module-BGGTkDc5.js}

@@ -2,21 +2,21 @@ import './assets/Tabs.css';
 import * as a from "react";
 const s = /* @__PURE__ */ a.createContext(null);
 process.env.NODE_ENV !== "production" && (s.displayName = "TabsContext");
-function b() {
+function e() {
   const t = a.useContext(s);
   if (t == null)
     throw new Error("No TabsContext provided");
   return t;
 }
-const _ = "_tabs_18ymz_1", e = "_tabs__tab_18ymz_5", o = {
+const _ = "_tabs_1xfbu_1", b = "_tabs__tab_1xfbu_5", o = {
   tabs: _,
-  tabs__tab: e,
-  "tabs__tab--disabled": "_tabs__tab--disabled_18ymz_22",
-  "tabs__tab--selected": "_tabs__tab--selected_18ymz_31",
-  "tabs__tab-panel": "_tabs__tab-panel_18ymz_35"
+  tabs__tab: b,
+  "tabs__tab--disabled": "_tabs__tab--disabled_1xfbu_23",
+  "tabs__tab--selected": "_tabs__tab--selected_1xfbu_32",
+  "tabs__tab-panel": "_tabs__tab-panel_1xfbu_36"
 };
 export {
   s as T,
   o as s,
-  b as u
+  e as u
 };

package/dist/assets/Tabs.css

@@ -1 +1 @@
-._tabs_18ymz_1{gap:8px;width:100%}._tabs__tab_18ymz_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:var(--white-100);border:none}._tabs__tab_18ymz_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_18ymz_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_18ymz_22{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_18ymz_22:focus,._tabs__tab--disabled_18ymz_22:active,._tabs__tab--disabled_18ymz_22:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_18ymz_31{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_18ymz_35{width:100%;margin-top:16px}
+._tabs_1xfbu_1{gap:8px;width:100%}._tabs__tab_1xfbu_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent}._tabs__tab_1xfbu_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_1xfbu_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_1xfbu_23{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_1xfbu_23:focus,._tabs__tab--disabled_1xfbu_23:active,._tabs__tab--disabled_1xfbu_23:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_1xfbu_32{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_1xfbu_36{width:100%;margin-top:16px}

package/dist/components/Pagination/Pagination.js

@@ -1,6 +1,6 @@
 import '../../assets/Pagination.css';
 import { jsxs as s, Fragment as p, jsx as t } from "react/jsx-runtime";
-import { c as o } from "../../clsx-DB4S2d7J.js";
+import { c as _ } from "../../clsx-DB4S2d7J.js";
 import { Select as d } from "../Select/Select.js";
 import I from "./usePagination.js";
 const C = "_pagination_2n0nk_43", a = {
@@ -44,7 +44,7 @@ const C = "_pagination_2n0nk_43", a = {
     next: "Next",
     perPage: "Items per page"
   }
-}, j = ({ perPageOptions: g = [5, 10, 25, 50, 100], language: y = "en", ...e }) => {
+}, j = ({ perPageOptions: o = [5, 10, 25, 50, 100], language: y = "en", ...e }) => {
   const l = Math.ceil(e.totalItems / e.perPage), b = e.currentPage <= 1, m = e.currentPage >= l, k = { ...w[y], ...e.t || {} }, i = (n) => k[n], { items: v } = I({
     count: l,
     hideNextButton: !0,
@@ -53,14 +53,14 @@ const C = "_pagination_2n0nk_43", a = {
     siblingCount: 1,
     boundaryCount: 2
   }), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, x = u > e.totalItems ? u - e.totalItems : 0, P = u - x;
-  return /* @__PURE__ */ s("div", { className: o(a.pagination, e.className), "data-testid": e["data-testid"], children: [
+  return /* @__PURE__ */ s("div", { className: _(a.pagination, e.className), "data-testid": e["data-testid"], children: [
     /* @__PURE__ */ s(
       "div",
       {
-        className: o(a["per-page-container"], e.classNamePerPage),
+        className: _(a["per-page-container"], e.classNamePerPage),
         "data-testid": e["data-testid-per-page"],
         children: [
-          g && /* @__PURE__ */ s(p, { children: [
+          o && /* @__PURE__ */ s(p, { children: [
             /* @__PURE__ */ t("span", { children: i`perPage` }),
             /* @__PURE__ */ t(
               d,
@@ -68,7 +68,7 @@ const C = "_pagination_2n0nk_43", a = {
                 className: a["per-page-container__select"],
                 value: String(e.perPage),
                 onChange: (n) => e.onRowsPerPageChange(Number(n)),
-                children: g == null ? void 0 : g.map((n) => {
+                children: o == null ? void 0 : o.map((n) => {
                   const r = typeof n == "number";
                   return /* @__PURE__ */ t(
                     d.Option,
@@ -82,35 +82,28 @@ const C = "_pagination_2n0nk_43", a = {
               }
             )
           ] }),
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: o(a["page-infos"], e.classNamePagesInfo),
-              "data-testid": e["data-testid-pages-info"],
-              children: [
-                /* @__PURE__ */ s("span", { children: [
-                  c,
-                  " - ",
-                  P
-                ] }),
-                " ",
-                /* @__PURE__ */ s("span", { children: [
-                  i`of`,
-                  " ",
-                  /* @__PURE__ */ t("strong", { children: e.totalItems }),
-                  " ",
-                  i`results`
-                ] })
-              ]
-            }
-          )
+          /* @__PURE__ */ s("div", { className: e.classNamePagesInfo, "data-testid": e["data-testid-pages-info"], children: [
+            /* @__PURE__ */ s("span", { children: [
+              c,
+              " - ",
+              P
+            ] }),
+            " ",
+            /* @__PURE__ */ s("span", { children: [
+              i`of`,
+              " ",
+              /* @__PURE__ */ t("strong", { children: e.totalItems }),
+              " ",
+              i`results`
+            ] })
+          ] })
         ]
       }
     ),
     /* @__PURE__ */ s(
       "div",
       {
-        className: o(a["pages-navigator-container"], e.classNamePagesNav),
+        className: _(a["pages-navigator-container"], e.classNamePagesNav),
         "data-testid": e["data-testid-pages-nav"],
         children: [
           /* @__PURE__ */ t(
@@ -125,17 +118,17 @@ const C = "_pagination_2n0nk_43", a = {
             "page__previous"
           ),
           /* @__PURE__ */ t("ul", { children: v.map(({ page: n, type: r, selected: N, ...f }, h) => {
-            let _ = /* @__PURE__ */ t(p, {});
-            return r === "start-ellipsis" || r === "end-ellipsis" ? _ = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? _ = /* @__PURE__ */ t(
+            let g = /* @__PURE__ */ t(p, {});
+            return r === "start-ellipsis" || r === "end-ellipsis" ? g = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? g = /* @__PURE__ */ t(
               "button",
               {
-                className: o(a["page-number__btn"], N && a["page-number__btn--selected"]),
+                className: _(a["page-number__btn"], N && a["page-number__btn--selected"]),
                 onClick: () => e.onPageChange(n || 0),
                 type: "button",
                 children: n
               },
               `page__${h}`
-            ) : _ = /* @__PURE__ */ t("button", { type: "button", ...f, children: r }), /* @__PURE__ */ t("li", { children: _ }, h);
+            ) : g = /* @__PURE__ */ t("button", { type: "button", ...f, children: r }), /* @__PURE__ */ t("li", { children: g }, h);
           }) }),
           /* @__PURE__ */ t(
             "button",

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

@@ -4,11 +4,13 @@ export interface TabProps {
     /** The value to be showing in the tab */
     children: ReactNode;
     /** The value that corresponds to the panel to show.
-     * e.g. value="1" when this tab is clicked it will show the panel which also has value="1! */
+     * e.g. value="1" when this tab is clicked it will show the panel which also has value="1" */
     value: string | number;
     /** Disable clicking the tab */
     disabled?: boolean;
-    /** data test id */
-    dataTestId?: string;
+    /** CSS classes to be applied on the container element */
+    className?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
 }
 export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/Tab.js

@@ -1,9 +1,9 @@
 import { jsx as N } from "react/jsx-runtime";
-import * as f from "react";
+import * as b from "react";
 import { forwardRef as H, useContext as U, useMemo as j } from "react";
 import { c as k } from "../../clsx-DB4S2d7J.js";
-import { u as B, T as D, s as y } from "../../Tabs.module-jkH1Qjn7.js";
-import { g as L, a as W, u as O, f as $, b as d, _ as q, c as z, P as e, d as A, e as G } from "../../useSlotProps-C_I1kEHr.js";
+import { u as B, T as D, s as y } from "../../Tabs.module-BGGTkDc5.js";
+import { g as L, a as W, u as O, f as $, b as f, _ as q, c as z, P as e, d as A, e as G } from "../../useSlotProps-C_I1kEHr.js";
 import { u as J, c as K } from "../../combineHooksSlotProps-C-zYvfnF.js";
 import { u as Q } from "../../useId-BW-oWmul.js";
 import { u as X } from "../../useButton-DcihopJG.js";
@@ -22,27 +22,27 @@ function te(o) {
     rootRef: s,
     disabled: n = !1,
     id: c
-  } = o, a = f.useRef(null), r = Q(c), {
-    value: b,
+  } = o, r = b.useRef(null), a = Q(c), {
+    value: i,
     selectionFollowsFocus: p,
     getTabPanelId: m
-  } = B(), P = f.useMemo(() => ({
+  } = B(), P = b.useMemo(() => ({
     disabled: n,
-    ref: a,
-    id: r
-  }), [n, a, r]), {
+    ref: r,
+    id: a
+  }), [n, r, a]), {
     id: l,
     index: R,
     totalItemCount: g
   } = Y(t ?? ee, P), {
     getRootProps: h,
     highlighted: T,
-    selected: i
+    selected: u
   } = J({
     item: l
   }), {
     getRootProps: C,
-    rootRef: u,
+    rootRef: d,
     active: v,
     focusVisible: I,
     setFocusVisible: V
@@ -50,15 +50,15 @@ function te(o) {
     disabled: n,
     focusableWhenDisabled: !p,
     type: "button"
-  }), _ = O(a, s, u), M = l !== void 0 ? m(l) : void 0;
+  }), _ = O(r, s, d), M = l !== void 0 ? m(l) : void 0;
   return {
     getRootProps: (x = {}) => {
       const S = $(x), w = K(h, C);
-      return d({}, x, w(S), {
+      return f({}, x, w(S), {
         role: "tab",
         "aria-controls": M,
-        "aria-selected": i,
-        id: r,
+        "aria-selected": u,
+        id: a,
         ref: _
       });
     },
@@ -69,7 +69,7 @@ function te(o) {
     rootRef: _,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
     // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
-    selected: i || l === b,
+    selected: u || l === i,
     setFocusVisible: V,
     totalTabsCount: g
   };
@@ -82,39 +82,39 @@ const oe = ["action", "children", "disabled", "onChange", "onClick", "onFocus",
   return A({
     root: ["root", t && "selected", s && "disabled"]
   }, G(Z));
-}, F = /* @__PURE__ */ f.forwardRef(function(t, s) {
+}, F = /* @__PURE__ */ b.forwardRef(function(t, s) {
   var n;
   const {
     children: c,
-    disabled: a = !1,
-    slotProps: r = {},
-    slots: b = {},
+    disabled: r = !1,
+    slotProps: a = {},
+    slots: i = {},
     value: p
-  } = t, m = q(t, oe), P = f.useRef(), l = O(P, s), {
+  } = t, m = q(t, oe), P = b.useRef(), l = O(P, s), {
     active: R,
     highlighted: g,
     selected: h,
     getRootProps: T
-  } = te(d({}, t, {
+  } = te(f({}, t, {
     rootRef: l,
     value: p
-  })), i = d({}, t, {
+  })), u = f({}, t, {
     active: R,
-    disabled: a,
+    disabled: r,
     highlighted: g,
     selected: h
-  }), C = se(i), u = (n = b.root) != null ? n : "button", v = z({
-    elementType: u,
+  }), C = se(u), d = (n = i.root) != null ? n : "button", v = z({
+    elementType: d,
     getSlotProps: T,
-    externalSlotProps: r.root,
+    externalSlotProps: a.root,
     externalForwardedProps: m,
     additionalProps: {
       ref: s
     },
-    ownerState: i,
+    ownerState: u,
     className: C.root
   });
-  return /* @__PURE__ */ N(u, d({}, v, {
+  return /* @__PURE__ */ N(d, f({}, v, {
     children: c
   }));
 });
@@ -165,16 +165,17 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
   value: e.oneOfType([e.number, e.string])
 });
 const pe = H(
-  ({ children: o, value: t, disabled: s, dataTestId: n }, c) => {
-    const a = U(D), r = j(
+  ({ children: o, value: t, disabled: s, className: n, "data-testid": c }, r) => {
+    const a = U(D), i = j(
       () => k(
         y.tabs__tab,
         t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
-        s && y["tabs__tab--disabled"]
+        s && y["tabs__tab--disabled"],
+        n
       ),
       [t, a, s]
     );
-    return /* @__PURE__ */ N(F, { className: r, disabled: s, value: t, "data-testid": n, ref: c, children: o });
+    return /* @__PURE__ */ N(F, { className: i, disabled: s, value: t, "data-testid": c, ref: r, children: o });
   }
 );
 export {

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

@@ -6,7 +6,9 @@ export interface TabPanelProps {
     /** The value that identifies which tab is selected.
      * e.g. value="1" when the tab button with the value="1" is selected this content will show */
     value: string | number;
-    /** Test id */
-    dataTestId?: string;
+    /** CSS classes to be applied on the container element */
+    className?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
 }
 export declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/TabPanel.js

@@ -1,79 +1,80 @@
 import { jsx as T } from "react/jsx-runtime";
 import * as P from "react";
 import { forwardRef as v } from "react";
-import { u as y, s as x } from "../../Tabs.module-jkH1Qjn7.js";
-import { g as C, a as N, u as _, b, _ as w, c as O, P as o, d as E, e as I } from "../../useSlotProps-C_I1kEHr.js";
-import { u as S } from "../../useId-BW-oWmul.js";
-import { u as U } from "../../useCompoundItem-B7Eo_qZk.js";
+import { c as y } from "../../clsx-DB4S2d7J.js";
+import { u as x, s as C } from "../../Tabs.module-BGGTkDc5.js";
+import { g as N, a as _, u as w, b, _ as O, c as E, P as o, d as I, e as S } from "../../useSlotProps-C_I1kEHr.js";
+import { u as U } from "../../useId-BW-oWmul.js";
+import { u as j } from "../../useCompoundItem-B7Eo_qZk.js";
 const h = "TabPanel";
-function j(t) {
-  return C(h, t);
-}
-N(h, ["root", "hidden"]);
 function M(t) {
-  return t.size;
+  return N(h, t);
 }
+_(h, ["root", "hidden"]);
 function V(t) {
+  return t.size;
+}
+function F(t) {
   const {
     value: e,
     id: s,
     rootRef: n
-  } = t, i = y();
-  if (i === null)
+  } = t, a = x();
+  if (a === null)
     throw new Error("No TabContext provided");
   const {
     value: f,
     getTabId: m
-  } = i, r = S(s), a = P.useRef(null), u = _(a, n), c = P.useMemo(() => ({
+  } = a, r = U(s), l = P.useRef(null), c = w(l, n), u = P.useMemo(() => ({
     id: r,
-    ref: a
+    ref: l
   }), [r]), {
-    id: l
-  } = U(e ?? M, c), d = l !== f, p = l !== void 0 ? m(l) : void 0;
+    id: d
+  } = j(e ?? V, u), i = d !== f, p = d !== void 0 ? m(d) : void 0;
   return {
-    hidden: d,
+    hidden: i,
     getRootProps: (g = {}) => b({
       "aria-labelledby": p ?? void 0,
-      hidden: d,
+      hidden: i,
       id: r ?? void 0
     }, g, {
-      ref: u
+      ref: c
     }),
-    rootRef: u
+    rootRef: c
   };
 }
-const F = ["children", "value", "slotProps", "slots"], $ = (t) => {
+const $ = ["children", "value", "slotProps", "slots"], k = (t) => {
   const {
     hidden: e
   } = t;
-  return E({
+  return I({
     root: ["root", e && "hidden"]
-  }, I(j));
+  }, S(M));
 }, R = /* @__PURE__ */ P.forwardRef(function(e, s) {
   var n;
   const {
-    children: i,
+    children: a,
     slotProps: f = {},
     slots: m = {}
-  } = e, r = w(e, F), {
-    hidden: a,
-    getRootProps: u
-  } = V(e), c = b({}, e, {
-    hidden: a
-  }), l = $(c), d = (n = m.root) != null ? n : "div", p = O({
-    elementType: d,
-    getSlotProps: u,
+  } = e, r = O(e, $), {
+    hidden: l,
+    getRootProps: c
+  } = F(e), u = b({}, e, {
+    hidden: l
+  }), d = k(u), i = (n = m.root) != null ? n : "div", p = E({
+    elementType: i,
+    getSlotProps: c,
     externalSlotProps: f.root,
     externalForwardedProps: r,
     additionalProps: {
       role: "tabpanel",
       ref: s
     },
-    ownerState: c,
-    className: l.root
+    ownerState: u,
+    className: d.root
   });
-  return /* @__PURE__ */ T(d, b({}, p, {
-    children: !a && i
+  return /* @__PURE__ */ T(i, b({}, p, {
+    children: !l && a
   }));
 });
 process.env.NODE_ENV !== "production" && (R.propTypes = {
@@ -111,9 +112,18 @@ process.env.NODE_ENV !== "production" && (R.propTypes = {
    */
   value: o.oneOfType([o.number, o.string])
 });
-const q = v(
-  ({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className: x["tabs__tab-panel"], value: e, "data-testid": s, ref: n, children: t })
+const H = v(
+  ({ children: t, value: e, className: s, "data-testid": n }, a) => /* @__PURE__ */ T(
+    R,
+    {
+      className: y(C["tabs__tab-panel"], s),
+      value: e,
+      "data-testid": n,
+      ref: a,
+      children: t
+    }
+  )
 );
 export {
-  q as TabPanel
+  H as TabPanel
 };

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

@@ -4,11 +4,13 @@ export interface TabsProps {
     /** Should contain `Tab` and `TabPanel` components to be rendered  */
     children?: ReactNode;
     /** Selected tab */
-    value?: number | string;
+    value?: string | number | null;
+    /** CSS classes to be applied on the container element */
+    className?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
     /** Callback triggered when the user has selected a tab */
-    onChange?: (tabValue: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
-    /** Test id */
-    dataTestId?: string;
+    onChange?: (tabValue: string | number | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
 }
 export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
 export * from './Tab';

package/dist/components/Tabs/Tabs.js

@@ -1,11 +1,12 @@
 import { jsx as T } from "react/jsx-runtime";
 import * as r from "react";
-import { forwardRef as q, useState as B } from "react";
-import { T as G, u as J, s as Q } from "../../Tabs.module-jkH1Qjn7.js";
-import { Tab as Le } from "./Tab.js";
-import { TabPanel as _e } from "./TabPanel.js";
-import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as M } from "../../useSlotProps-C_I1kEHr.js";
-import { a as O, C as S } from "../../useCompoundItem-B7Eo_qZk.js";
+import { forwardRef as q } from "react";
+import { c as B } from "../../clsx-DB4S2d7J.js";
+import { T as G, u as J, s as Q } from "../../Tabs.module-BGGTkDc5.js";
+import { Tab as Ie } from "./Tab.js";
+import { TabPanel as Fe } from "./TabPanel.js";
+import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as w } from "../../useSlotProps-C_I1kEHr.js";
+import { a as M, C as O } from "../../useCompoundItem-B7Eo_qZk.js";
 import { u as X } from "../../useControlled-CCMYYdCM.js";
 import { L as Y, a as Z } from "../../combineHooksSlotProps-C-zYvfnF.js";
 import { l as ee, m as te, u as oe } from "../../useList-B9C55YB7.js";
@@ -18,21 +19,21 @@ function ne(s) {
   const {
     value: e,
     defaultValue: o,
-    onChange: n,
-    orientation: i = "horizontal",
+    onChange: l,
+    orientation: a = "horizontal",
     direction: c = "ltr",
-    selectionFollowsFocus: l = !1
-  } = s, [d, u] = X({
+    selectionFollowsFocus: n = !1
+  } = s, [d, i] = X({
     controlled: e,
     default: o,
     name: "Tabs",
     state: "value"
-  }), a = r.useCallback((x, y) => {
-    u(y), n == null || n(x, y);
-  }, [n, u]), {
+  }), u = r.useCallback((x, y) => {
+    i(y), l == null || l(x, y);
+  }, [l, i]), {
     subitems: m,
-    contextValue: g
-  } = O(), p = r.useRef(() => {
+    contextValue: h
+  } = M(), p = r.useRef(() => {
   }), f = r.useCallback((x) => {
     var y;
     return (y = m.get(x)) == null ? void 0 : y.id;
@@ -44,12 +45,12 @@ function ne(s) {
       direction: c,
       getTabId: b,
       getTabPanelId: f,
-      onSelected: a,
-      orientation: i,
+      onSelected: u,
+      orientation: a,
       registerTabIdLookup: P,
-      selectionFollowsFocus: l,
+      selectionFollowsFocus: n,
       value: d
-    }, g)
+    }, h)
   };
 }
 function le(s) {
@@ -57,32 +58,32 @@ function le(s) {
     value: e,
     children: o
   } = s, {
-    direction: n,
-    getItemIndex: i,
+    direction: l,
+    getItemIndex: a,
     onSelected: c,
-    orientation: l,
+    orientation: n,
     registerItem: d,
-    registerTabIdLookup: u,
-    selectionFollowsFocus: a,
+    registerTabIdLookup: i,
+    selectionFollowsFocus: u,
     totalSubitemCount: m,
-    value: g,
+    value: h,
     getTabId: p,
     getTabPanelId: f
   } = e, b = r.useMemo(() => ({
-    getItemIndex: i,
+    getItemIndex: a,
     registerItem: d,
     totalSubitemCount: m
-  }), [d, i, m]), P = r.useMemo(() => ({
-    direction: n,
+  }), [d, a, m]), P = r.useMemo(() => ({
+    direction: l,
     getTabId: p,
     getTabPanelId: f,
     onSelected: c,
-    orientation: l,
-    registerTabIdLookup: u,
-    selectionFollowsFocus: a,
-    value: g
-  }), [n, p, f, c, l, u, a, g]);
-  return /* @__PURE__ */ T(S.Provider, {
+    orientation: n,
+    registerTabIdLookup: i,
+    selectionFollowsFocus: u,
+    value: h
+  }), [l, p, f, c, n, i, u, h]);
+  return /* @__PURE__ */ T(O.Provider, {
     value: b,
     children: /* @__PURE__ */ T(G.Provider, {
       value: P,
@@ -96,24 +97,24 @@ const re = ["children", "value", "defaultValue", "orientation", "direction", "on
   } = s;
   return N({
     root: ["root", e]
-  }, M(se));
-}, w = /* @__PURE__ */ r.forwardRef(function(e, o) {
-  var n;
+  }, w(se));
+}, S = /* @__PURE__ */ r.forwardRef(function(e, o) {
+  var l;
   const {
-    children: i,
+    children: a,
     orientation: c = "horizontal",
-    direction: l = "ltr",
+    direction: n = "ltr",
     slotProps: d = {},
-    slots: u = {}
-  } = e, a = F(e, re), m = C({}, e, {
+    slots: i = {}
+  } = e, u = F(e, re), m = C({}, e, {
     orientation: c,
-    direction: l
+    direction: n
   }), {
-    contextValue: g
-  } = ne(m), p = ae(m), f = (n = u.root) != null ? n : "div", b = $({
+    contextValue: h
+  } = ne(m), p = ae(m), f = (l = i.root) != null ? l : "div", b = $({
     elementType: f,
     externalSlotProps: d.root,
-    externalForwardedProps: a,
+    externalForwardedProps: u,
     additionalProps: {
       ref: o
     },
@@ -122,12 +123,12 @@ const re = ["children", "value", "defaultValue", "orientation", "direction", "on
   });
   return /* @__PURE__ */ T(f, C({}, b, {
     children: /* @__PURE__ */ T(le, {
-      value: g,
-      children: i
+      value: h,
+      children: a
     })
   }));
 });
-process.env.NODE_ENV !== "production" && (w.propTypes = {
+process.env.NODE_ENV !== "production" && (S.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -199,7 +200,7 @@ function ue(s, e) {
     });
   const o = ee(s, e), {
     context: {
-      selectionFollowsFocus: n
+      selectionFollowsFocus: l
     }
   } = e;
   if (e.type === Y.itemsChange) {
@@ -209,7 +210,7 @@ function ue(s, e) {
       });
     te(null, "reset", e.context);
   }
-  return n && o.highlightedValue != null ? C({}, o, {
+  return l && o.highlightedValue != null ? C({}, o, {
     selectedValues: [o.highlightedValue]
   }) : o;
 }
@@ -218,37 +219,37 @@ function ce(s) {
   const {
     rootRef: o
   } = s, {
-    direction: n = "ltr",
-    onSelected: i,
+    direction: l = "ltr",
+    onSelected: a,
     orientation: c = "horizontal",
-    value: l,
+    value: n,
     registerTabIdLookup: d,
-    selectionFollowsFocus: u
+    selectionFollowsFocus: i
   } = J(), {
-    subitems: a,
+    subitems: u,
     contextValue: m
-  } = O(), g = r.useCallback((h) => {
+  } = M(), h = r.useCallback((g) => {
     var v;
-    return (v = a.get(h)) == null ? void 0 : v.id;
-  }, [a]);
-  d(g);
-  const p = r.useMemo(() => Array.from(a.keys()), [a]), f = r.useCallback((h) => {
+    return (v = u.get(g)) == null ? void 0 : v.id;
+  }, [u]);
+  d(h);
+  const p = r.useMemo(() => Array.from(u.keys()), [u]), f = r.useCallback((g) => {
     var v, V;
-    return h == null ? null : (v = (V = a.get(h)) == null ? void 0 : V.ref.current) != null ? v : null;
-  }, [a]), b = n === "rtl";
+    return g == null ? null : (v = (V = u.get(g)) == null ? void 0 : V.ref.current) != null ? v : null;
+  }, [u]), b = l === "rtl";
   let P;
   c === "vertical" ? P = "vertical" : P = b ? "horizontal-rtl" : "horizontal-ltr";
-  const x = r.useCallback((h, v) => {
+  const x = r.useCallback((g, v) => {
     var V;
-    i(h, (V = v[0]) != null ? V : null);
-  }, [i]), y = r.useMemo(() => l === void 0 ? {} : l != null ? {
-    selectedValues: [l]
+    a(g, (V = v[0]) != null ? V : null);
+  }, [a]), y = r.useMemo(() => n === void 0 ? {} : n != null ? {
+    selectedValues: [n]
   } : {
     selectedValues: []
-  }, [l]), U = r.useCallback((h) => {
+  }, [n]), U = r.useCallback((g) => {
     var v, V;
-    return (v = (V = a.get(h)) == null ? void 0 : V.disabled) != null ? v : !1;
-  }, [a]), {
+    return (v = (V = u.get(g)) == null ? void 0 : V.disabled) != null ? v : !1;
+  }, [u]), {
     contextValue: L,
     dispatch: R,
     getRootProps: D,
@@ -259,7 +260,7 @@ function ce(s) {
     rootRef: K
   } = oe({
     controlledProps: y,
-    disabledItemsFocusable: !u,
+    disabledItemsFocusable: !i,
     focusManagement: "DOM",
     getItemDomElement: f,
     isItemDisabled: U,
@@ -268,18 +269,18 @@ function ce(s) {
     onChange: x,
     orientation: P,
     reducerActionContext: r.useMemo(() => ({
-      selectionFollowsFocus: u || !1
-    }), [u]),
+      selectionFollowsFocus: i || !1
+    }), [i]),
     selectionMode: "single",
     stateReducer: ue
   });
   r.useEffect(() => {
-    l !== void 0 && l != null && R({
+    n !== void 0 && n != null && R({
       type: z.valueChange,
-      value: l
+      value: n
     });
-  }, [R, l]);
-  const W = (h = {}) => C({}, h, D(h), {
+  }, [R, n]);
+  const W = (g = {}) => C({}, g, D(g), {
     "aria-orientation": c === "vertical" ? "vertical" : void 0,
     role: "tablist"
   });
@@ -299,24 +300,24 @@ function de(s) {
     value: e,
     children: o
   } = s, {
-    dispatch: n,
-    getItemIndex: i,
+    dispatch: l,
+    getItemIndex: a,
     getItemState: c,
-    registerItem: l,
+    registerItem: n,
     totalSubitemCount: d
-  } = e, u = r.useMemo(() => ({
-    dispatch: n,
+  } = e, i = r.useMemo(() => ({
+    dispatch: l,
     getItemState: c,
-    getItemIndex: i
-  }), [n, i, c]), a = r.useMemo(() => ({
-    getItemIndex: i,
-    registerItem: l,
+    getItemIndex: a
+  }), [l, a, c]), u = r.useMemo(() => ({
+    getItemIndex: a,
+    registerItem: n,
     totalSubitemCount: d
-  }), [l, i, d]);
-  return /* @__PURE__ */ T(S.Provider, {
-    value: a,
+  }), [n, a, d]);
+  return /* @__PURE__ */ T(O.Provider, {
+    value: u,
     children: /* @__PURE__ */ T(Z.Provider, {
-      value: u,
+      value: i,
       children: o
     })
   });
@@ -327,24 +328,24 @@ const me = ["children", "slotProps", "slots"], pe = (s) => {
   } = s;
   return N({
     root: ["root", e]
-  }, M(ie));
+  }, w(ie));
 }, A = /* @__PURE__ */ r.forwardRef(function(e, o) {
-  var n;
+  var l;
   const {
-    children: i,
+    children: a,
     slotProps: c = {},
-    slots: l = {}
+    slots: n = {}
   } = e, d = F(e, me), {
-    isRtl: u,
-    orientation: a,
+    isRtl: i,
+    orientation: u,
     getRootProps: m,
-    contextValue: g
+    contextValue: h
   } = ce({
     rootRef: o
   }), p = C({}, e, {
-    isRtl: u,
-    orientation: a
-  }), f = pe(p), b = (n = l.root) != null ? n : "div", P = $({
+    isRtl: i,
+    orientation: u
+  }), f = pe(p), b = (l = n.root) != null ? l : "div", P = $({
     elementType: b,
     getSlotProps: m,
     externalSlotProps: c.root,
@@ -353,9 +354,9 @@ const me = ["children", "slotProps", "slots"], pe = (s) => {
     className: f.root
   });
   return /* @__PURE__ */ T(de, {
-    value: g,
+    value: h,
     children: /* @__PURE__ */ T(b, C({}, P, {
-      children: i
+      children: a
     }))
   });
 });
@@ -388,14 +389,16 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
     root: t.elementType
   })
 });
-const Ve = q(({ children: s, onChange: e, dataTestId: o }, n) => {
-  const [i, c] = B("1");
-  return /* @__PURE__ */ T(w, { "data-testid": o, value: i, onChange: (d, u) => {
-    c(u), e && e(u, d);
-  }, ref: n, children: /* @__PURE__ */ T(A, { className: Q.tabs, children: s }) });
-});
+const ye = q(
+  ({ value: s, className: e, "data-testid": o, children: l, onChange: a }, c) => {
+    const n = (d, i) => {
+      a && a(i, d);
+    };
+    return /* @__PURE__ */ T(S, { "data-testid": o, value: s, onChange: (d, i) => n(d, i), ref: c, children: /* @__PURE__ */ T(A, { className: B(Q.tabs, e), children: l }) });
+  }
+);
 export {
-  Le as Tab,
-  _e as TabPanel,
-  Ve as Tabs
+  Ie as Tab,
+  Fe as TabPanel,
+  ye as Tabs
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",