@pismo/marola 1.0.0-beta.6 → 1.0.0-beta.60

package/dist/components/Stepper/Stepper.js

@@ -1,46 +1,46 @@
 import '../../assets/Stepper.css';
-import { jsx as _, jsxs as d } from "react/jsx-runtime";
-import { c as p } from "../../clsx-DB4S2d7J.js";
-const m = "_stepper_a47qe_60", c = "_item_a47qe_60", n = "_name_a47qe_60", l = "_counter_a47qe_64", e = {
-  "u-typography-h1": "_u-typography-h1_a47qe_1",
-  "u-typography-h2": "_u-typography-h2_a47qe_8",
-  "u-typography-h3": "_u-typography-h3_a47qe_15",
-  "u-typography-h4": "_u-typography-h4_a47qe_22",
-  "u-typography-h5": "_u-typography-h5_a47qe_29",
-  "u-typography-h6": "_u-typography-h6_a47qe_36",
-  "u-typography-base": "_u-typography-base_a47qe_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_a47qe_48",
-  "u-typography-base--xl": "_u-typography-base--xl_a47qe_52",
-  "u-typography-base--lg": "_u-typography-base--lg_a47qe_56",
-  "u-typography-base--sm": "_u-typography-base--sm_a47qe_60",
-  stepper: m,
-  item: c,
-  name: n,
-  "u-typography-base--bold": "_u-typography-base--bold_a47qe_64",
-  "item--active": "_item--active_a47qe_64",
-  "item--completed": "_item--completed_a47qe_64",
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { c as r } from "../../clsx-DB4S2d7J.js";
+const d = "_stepper_7fsnr_61", m = "_item_7fsnr_61", c = "_name_7fsnr_61", l = "_counter_7fsnr_65", t = {
+  "u-typography-h1": "_u-typography-h1_7fsnr_1",
+  "u-typography-h2": "_u-typography-h2_7fsnr_8",
+  "u-typography-h3": "_u-typography-h3_7fsnr_15",
+  "u-typography-h4": "_u-typography-h4_7fsnr_22",
+  "u-typography-h5": "_u-typography-h5_7fsnr_29",
+  "u-typography-h6": "_u-typography-h6_7fsnr_36",
+  "u-typography-base": "_u-typography-base_7fsnr_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_7fsnr_49",
+  "u-typography-base--xl": "_u-typography-base--xl_7fsnr_53",
+  "u-typography-base--lg": "_u-typography-base--lg_7fsnr_57",
+  "u-typography-base--sm": "_u-typography-base--sm_7fsnr_61",
+  stepper: d,
+  item: m,
+  name: c,
+  "u-typography-base--bold": "_u-typography-base--bold_7fsnr_65",
+  "item--active": "_item--active_7fsnr_65",
+  "item--completed": "_item--completed_7fsnr_65",
   counter: l,
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_a47qe_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_a47qe_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_a47qe_73"
-}, v = ({ currentStep: y = 0, steps: r, classNameItem: s, classNameCounter: o, classNameName: h, ...a }) => /* @__PURE__ */ _("div", { className: p(e.stepper, a.className), "data-testid": a["data-testid"], children: r.map((u, t) => {
-  const i = t < y, g = t === y;
-  return /* @__PURE__ */ d(
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_7fsnr_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_7fsnr_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_7fsnr_74"
+}, v = ({ currentStep: p = 0, steps: _, classNameItem: y, classNameCounter: o, classNameName: h, ...e }) => /* @__PURE__ */ s("div", { className: r(t.stepper, e.className), "data-testid": e["data-testid"], children: _.map((n, a) => {
+  const u = a < p, i = a === p;
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: p(
-        e.item,
-        i && e["item--completed"],
-        g && e["item--active"],
-        s
+      className: r(
+        t.item,
+        u && t["item--completed"],
+        i && t["item--active"],
+        y
       ),
-      "data-testid": a["data-testid-item"],
+      "data-testid": e["data-testid-item"],
       children: [
-        /* @__PURE__ */ _("div", { className: p(e.counter, o), "data-testid": a["data-testid-counter"], children: t + 1 }),
-        /* @__PURE__ */ _("div", { className: p(e.name, h), "data-testid": a["data-testid-name"], children: u })
+        /* @__PURE__ */ s("div", { className: r(t.counter, o), "data-testid": e["data-testid-counter"], children: a + 1 }),
+        /* @__PURE__ */ s("div", { className: r(t.name, h), "data-testid": e["data-testid-name"], children: n })
       ]
     },
-    t
+    a
   );
 }) });
 export {

package/dist/components/StepperNavigator/StepperNavigator.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+type StepperNavigatorLang = 'en' | 'pt';
+export type StepperNavigatorButtonProps = {
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+export type StepperNavigatorProps = {
+    /** Hides the "previous" button  */
+    hidePrevious?: boolean;
+    /** Hides the "cancel" button  */
+    hideCancel?: boolean;
+    /** Hides the "next" button  */
+    hideNext?: boolean;
+    /** Hides the "finish" button  */
+    hideFinish?: boolean;
+    /** Disables the "previous" button */
+    disablePrevious?: boolean;
+    /** Disables the "cancel" button */
+    disableCancel?: boolean;
+    /** Disables the "next" button */
+    disableNext?: boolean;
+    /** Disables the "finish" button */
+    disableFinish?: boolean;
+    /** Label to be used for the "previous" button */
+    labelPrevious?: string;
+    /** Label to be used for the "cancel" button */
+    labelCancel?: string;
+    /** Label to be used for the "next" button */
+    labelNext?: string;
+    /** Label to be used for the "finish" button */
+    labelFinish?: string;
+    /** Language to be used for the button labels. Default "en" */
+    lang?: StepperNavigatorLang;
+    /** 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;
+    /** Previous button props */
+    previousButtonProps?: StepperNavigatorButtonProps;
+    /** Cancel button props */
+    cancelButtonProps?: StepperNavigatorButtonProps;
+    /** Next button props */
+    nextButtonProps?: StepperNavigatorButtonProps;
+    /** Finish button props */
+    finishButtonProps?: StepperNavigatorButtonProps;
+    /** Callback to be called when the "previous" button is clicked */
+    onPrevious?: () => void;
+    /** Callback to be called when the "cancel" button is clicked */
+    onCancel?: () => void;
+    /** Callback to be called when the "next" button is clicked */
+    onNext?: () => void;
+    /** Callback to be called when the "finish" button is clicked */
+    onFinish?: () => void;
+};
+export declare const StepperNavigator: ({ hideNext, hidePrevious, hideCancel, hideFinish, disableNext, disablePrevious, disableCancel, disableFinish, lang, labelNext, labelPrevious, labelCancel, labelFinish, className, "data-testid": dataTestId, previousButtonProps, cancelButtonProps, nextButtonProps, finishButtonProps, onNext, onPrevious, onCancel, onFinish, }: StepperNavigatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StepperNavigator/StepperNavigator.js

@@ -0,0 +1,115 @@
+import '../../assets/StepperNavigator.css';
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { c as i } from "../../clsx-DB4S2d7J.js";
+import { Button as I } from "../Button/Button.js";
+import { Icon as K } from "../Icon/Icon.js";
+const _ = {
+  "stepper-navigator": "_stepper-navigator_27f6m_1",
+  "cancel-button": "_cancel-button_27f6m_11",
+  "previous-button": "_previous-button_27f6m_20",
+  "next-button": "_next-button_27f6m_39",
+  "finish-button": "_finish-button_27f6m_40"
+}, b = {
+  en: {
+    previous: "Previous",
+    cancel: "Cancel",
+    next: "Next",
+    finish: "Finish"
+  },
+  pt: {
+    previous: "Anterior",
+    cancel: "Cancelar",
+    next: "Próximo",
+    finish: "Finalizar"
+  }
+}, R = ({
+  hideNext: C = !1,
+  hidePrevious: j = !1,
+  hideCancel: z = !1,
+  hideFinish: w = !1,
+  disableNext: y = !1,
+  disablePrevious: A = !1,
+  disableCancel: S = !1,
+  disableFinish: q = !1,
+  lang: h = "en",
+  labelNext: N,
+  labelPrevious: f,
+  labelCancel: g,
+  labelFinish: k,
+  className: D,
+  "data-testid": E = "stepper-navigator",
+  previousButtonProps: d,
+  cancelButtonProps: c,
+  nextButtonProps: e = { rightIcon: /* @__PURE__ */ a(K, { icon: "circle-arrow-right", size: 24 }) },
+  finishButtonProps: m,
+  onNext: F = () => {
+  },
+  onPrevious: G = () => {
+  },
+  onCancel: H = () => {
+  },
+  onFinish: J = () => {
+  }
+}) => (g = g || b[h].cancel, f = f || b[h].previous, N = N || b[h].next, k = k || b[h].finish, /* @__PURE__ */ l("div", { className: i(_["stepper-navigator"], D), "data-testid": E, children: [
+  j ? /* @__PURE__ */ a("span", {}) : /* @__PURE__ */ l(
+    I,
+    {
+      className: i(_["previous-button"], d == null ? void 0 : d.className),
+      "data-testid": d == null ? void 0 : d["data-testid"],
+      disabled: A,
+      onClick: G,
+      children: [
+        /* @__PURE__ */ a("span", { children: d == null ? void 0 : d.leftIcon }),
+        /* @__PURE__ */ a("span", { children: f }),
+        /* @__PURE__ */ a("span", { children: d == null ? void 0 : d.rightIcon })
+      ]
+    }
+  ),
+  /* @__PURE__ */ l("span", { children: [
+    !z && /* @__PURE__ */ l(
+      I,
+      {
+        className: i(_["cancel-button"], c == null ? void 0 : c.className),
+        "data-testid": c == null ? void 0 : c["data-testid"],
+        disabled: S,
+        onClick: H,
+        children: [
+          /* @__PURE__ */ a("span", { children: c == null ? void 0 : c.leftIcon }),
+          /* @__PURE__ */ a("span", { children: g }),
+          /* @__PURE__ */ a("span", { children: c == null ? void 0 : c.rightIcon })
+        ]
+      }
+    ),
+    !C && /* @__PURE__ */ l(
+      I,
+      {
+        className: i(_["next-button"], e == null ? void 0 : e.className),
+        "data-testid": e == null ? void 0 : e["data-testid"],
+        disabled: y,
+        onClick: F,
+        children: [
+          /* @__PURE__ */ a("span", { children: e == null ? void 0 : e.leftIcon }),
+          /* @__PURE__ */ a("span", { children: N }),
+          /* @__PURE__ */ a("span", { children: e == null ? void 0 : e.rightIcon })
+        ]
+      }
+    ),
+    !w && /* @__PURE__ */ l(
+      I,
+      {
+        className: i(_["finish-button"], m == null ? void 0 : m.className),
+        "data-testid": m == null ? void 0 : m["data-testid"],
+        disabled: q,
+        onClick: J,
+        children: [
+          /* @__PURE__ */ a("span", { children: m == null ? void 0 : m.leftIcon }),
+          /* @__PURE__ */ a("span", { children: k }),
+          /* @__PURE__ */ a("span", { children: m == null ? void 0 : m.rightIcon })
+        ]
+      }
+    )
+  ] })
+] }));
+export {
+  R as StepperNavigator
+};

package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ hideNext, hidePrevious, hideCancel, hideFinish, disableNext, disablePrevious, disableCancel, disableFinish, lang, labelNext, labelPrevious, labelCancel, labelFinish, className, "data-testid": dataTestId, previousButtonProps, cancelButtonProps, nextButtonProps, finishButtonProps, onNext, onPrevious, onCancel, onFinish, }: import('./StepperNavigator').StepperNavigatorProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithCustomLanguage: Story;
+export declare const WithCustomLabels: Story;
+export declare const Disabled: Story;
+export declare const WithIcons: Story;
+export declare const DefaultWithNoIcons: Story;

package/dist/components/StepperNavigator/StepperNavigator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Table/Table.d.ts

@@ -28,13 +28,15 @@ export type TableProps = ChildrenProps & {
     paginationProps?: PaginationProps;
     /** Set theme */
     theme?: TableTheme;
+    /** Set css style `table-layout: fixed;` if was `true` */
+    isFixed?: boolean;
     /** Set language */
     language?: string;
     /** Set translations to labels */
     translations?: TableTranslations;
 };
 declare const Table: {
-    ({ children, theme, fullWidth, className, paginationProps, language, translations, ...rest }: TableProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, theme, fullWidth, className, paginationProps, isFixed, language, translations, ...rest }: TableProps): import("react/jsx-runtime").JSX.Element;
     THead: import('react').FunctionComponent<ChildrenProps>;
     TBody: import('react').FunctionComponent<ChildrenProps>;
     Tr: import('react').FunctionComponent<TrProps>;

package/dist/components/Table/Table.js

@@ -1,53 +1,39 @@
 import '../../assets/Table.css';
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
-import * as h from "react";
-import { useState as w } from "react";
-import { c as g } from "../../clsx-DB4S2d7J.js";
-import { paginationDefaultTranslations as y, Pagination as T } from "../Pagination/Pagination.js";
-import { sortTooltipDefaultTranslations as u, SortTooltip as f } from "../SortTooltip/SortTooltip.js";
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import * as c from "react";
+import { useState as f } from "react";
+import { c as m } from "../../clsx-DB4S2d7J.js";
+import { paginationDefaultTranslations as b, Pagination as u } from "../Pagination/Pagination.js";
+import { sortTooltipDefaultTranslations as T, SortTooltip as g } from "../SortTooltip/SortTooltip.js";
 import { TableProvider as N, useTable as x } from "./TableContext.js";
-const C = (p) => /* @__PURE__ */ h.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...p }, /* @__PURE__ */ h.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ h.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ h.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ h.createElement("defs", null, /* @__PURE__ */ h.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ h.createElement("rect", { width: 7, height: 10, fill: "white" })))), L = "_table_1gspp_43", E = "_th__wrapper_1gspp_114", k = "_tr_1gspp_130", v = "_td_1gspp_134", t = {
-  "u-typography-h1": "_u-typography-h1_1gspp_1",
-  "u-typography-h2": "_u-typography-h2_1gspp_8",
-  "u-typography-h3": "_u-typography-h3_1gspp_15",
-  "u-typography-h4": "_u-typography-h4_1gspp_22",
-  "u-typography-h5": "_u-typography-h5_1gspp_29",
-  "u-typography-h6": "_u-typography-h6_1gspp_36",
-  "u-typography-base": "_u-typography-base_1gspp_43",
+const C = (r) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ c.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ c.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ c.createElement("rect", { width: 7, height: 10, fill: "white" })))), L = "_table_yerpo_1", E = "_th__wrapper_yerpo_43", v = "_tr_yerpo_66", B = "_td_yerpo_70", t = {
   table: L,
-  "u-typography-base--xxl": "_u-typography-base--xxl_1gspp_48",
-  "u-typography-base--xl": "_u-typography-base--xl_1gspp_52",
-  "u-typography-base--lg": "_u-typography-base--lg_1gspp_56",
-  "u-typography-base--sm": "_u-typography-base--sm_1gspp_60",
-  "u-typography-base--bold": "_u-typography-base--bold_1gspp_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1gspp_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1gspp_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1gspp_73",
-  "table--full-width": "_table--full-width_1gspp_81",
-  "table--white-theme": "_table--white-theme_1gspp_84",
-  "table--transparent-theme": "_table--transparent-theme_1gspp_87",
-  "cell--left-alignment": "_cell--left-alignment_1gspp_90",
-  "cell--center-alignment": "_cell--center-alignment_1gspp_94",
-  "cell--right-alignment": "_cell--right-alignment_1gspp_98",
+  "table--fixed": "_table--fixed_yerpo_5",
+  "table--full-width": "_table--full-width_yerpo_8",
+  "table--white-theme": "_table--white-theme_yerpo_11",
+  "table--transparent-theme": "_table--transparent-theme_yerpo_14",
+  "cell--left-alignment": "_cell--left-alignment_yerpo_17",
+  "cell--center-alignment": "_cell--center-alignment_yerpo_21",
+  "cell--right-alignment": "_cell--right-alignment_yerpo_25",
   th__wrapper: E,
-  "th__wrapper--pressed": "_th__wrapper--pressed_1gspp_117",
-  "th__wrapper--clickable": "_th__wrapper--clickable_1gspp_121",
-  "th__sort-icon-container": "_th__sort-icon-container_1gspp_124",
-  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_1gspp_130",
-  tr: k,
-  td: v,
-  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_1gspp_139",
-  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_1gspp_140",
-  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_1gspp_144",
-  "td-wrapper": "_td-wrapper_1gspp_148"
-}, B = {
+  "th__wrapper--pressed": "_th__wrapper--pressed_yerpo_48",
+  "th__wrapper--clickable": "_th__wrapper--clickable_yerpo_54",
+  "th__sort-icon-container": "_th__sort-icon-container_yerpo_57",
+  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_yerpo_66",
+  tr: v,
+  td: B,
+  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_yerpo_76",
+  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_yerpo_77",
+  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_yerpo_81",
+  "td-wrapper": "_td-wrapper_yerpo_85"
+}, H = {
   pt: {
-    ...y.pt,
-    ...u.pt
+    ...b.pt,
+    ...T.pt
   },
   en: {
-    ...y.en,
-    ...u.en
+    ...b.en,
+    ...T.en
   },
   // example to add a new language translation
   es: {
@@ -59,79 +45,81 @@ const C = (p) => /* @__PURE__ */ h.createElement("svg", { width: 7, height: 10,
     of: "de",
     results: "resultados"
   }
-}, l = ({
-  children: p,
+}, o = ({
+  children: r,
   theme: e = "white",
-  fullWidth: r = !0,
-  className: o,
-  paginationProps: s,
-  language: _,
-  translations: n,
-  ...d
+  fullWidth: a = !0,
+  className: s,
+  paginationProps: _,
+  isFixed: n,
+  language: p,
+  translations: w,
+  ...i
 }) => {
-  const c = g(
+  const d = m(
     t.table,
-    r ? t["table--full-width"] : "",
+    a && t["table--full-width"],
+    n && t["table--fixed"],
     t[`table--${e}-theme`],
-    o
-  ), i = _ && B[_] || n;
-  return /* @__PURE__ */ b(N, { initialTranslations: i, children: [
-    /* @__PURE__ */ a("table", { ...d, className: c, children: p }),
-    s && /* @__PURE__ */ a(T, { ...s, t: i })
+    s
+  ), h = p && H[p] || w;
+  return /* @__PURE__ */ y(N, { initialTranslations: h, children: [
+    /* @__PURE__ */ l("table", { ...i, className: d, children: r }),
+    _ && /* @__PURE__ */ l(u, { ..._, t: h })
   ] });
-}, H = ({ children: p, ...e }) => /* @__PURE__ */ a("thead", { ...e, children: p }), P = ({ children: p, ...e }) => /* @__PURE__ */ a("tbody", { ...e, children: p }), D = ({ children: p, onClick: e, disabled: r, className: o, ...s }) => {
-  const _ = g(
+}, P = ({ children: r, ...e }) => /* @__PURE__ */ l("thead", { ...e, children: r }), D = ({ children: r, ...e }) => /* @__PURE__ */ l("tbody", { ...e, children: r }), M = ({ children: r, onClick: e, disabled: a, className: s, ..._ }) => {
+  const n = m(
     t.tr,
-    e && !r ? t["tr__row-or-cell--clickable"] : r ? t["tr__row-or-cell--disabled"] : "",
-    o
+    e && !a ? t["tr__row-or-cell--clickable"] : a ? t["tr__row-or-cell--disabled"] : "",
+    s
   );
-  return /* @__PURE__ */ a("tr", { ...s, className: _, onClick: () => !r && (e == null ? void 0 : e()), children: p });
-}, M = ({ children: p, onClick: e, disabled: r, className: o, align: s = "left", ..._ }) => {
-  const n = g(
+  return /* @__PURE__ */ l("tr", { ..._, className: n, onClick: () => !a && (e == null ? void 0 : e()), children: r });
+}, O = ({ children: r, onClick: e, disabled: a, className: s, align: _ = "left", ...n }) => {
+  const p = m(
     t.td,
-    e && !r ? t["td__row-or-cell--clickable"] : r ? t["td__row-or-cell--disabled"] : "",
-    t[`cell--${s}-alignment`],
-    o
+    e && !a ? t["td__row-or-cell--clickable"] : a ? t["td__row-or-cell--disabled"] : "",
+    t[`cell--${_}-alignment`],
+    s
   );
-  return /* @__PURE__ */ a("td", { ..._, className: n, onClick: () => !r && (e == null ? void 0 : e()), children: /* @__PURE__ */ a("span", { className: t["td-wrapper"], children: p }) });
-}, O = ({ children: p, onSort: e, sortType: r, className: o, classNameTooltip: s, align: _ = "left", ...n }) => {
-  const { translations: d } = x(), [c, i] = w(!1), m = g(
+  return /* @__PURE__ */ l("td", { ...n, className: p, onClick: () => !a && (e == null ? void 0 : e()), children: /* @__PURE__ */ l("span", { className: t["td-wrapper"], children: r }) });
+}, $ = ({ children: r, onSort: e, sortType: a, className: s, classNameTooltip: _, align: n = "left", ...p }) => {
+  const { translations: w } = x(), [i, d] = f(!1), h = m(
     t.th__wrapper,
-    c ? t["th__wrapper--pressed"] : "",
+    i ? t["th__wrapper--pressed"] : "",
     e ? t["th__wrapper--clickable"] : "",
-    o
+    s
   );
-  return /* @__PURE__ */ a("th", { ...n, className: t[`cell--${_}-alignment`], children: /* @__PURE__ */ a("span", { className: m, onClick: e && (() => i(!c)), children: e ? /* @__PURE__ */ b(
-    f,
+  return /* @__PURE__ */ l("th", { ...p, className: t[`cell--${n}-alignment`], children: /* @__PURE__ */ l("span", { className: h, onClick: e && (() => d(!i)), children: e ? /* @__PURE__ */ y(
+    g,
     {
-      onClose: () => i(!1),
+      onClose: () => d(!1),
       onSort: e,
-      show: c,
-      sortType: r,
-      className: s,
-      t: d,
+      show: i,
+      sortType: a,
+      className: _,
+      t: w,
       children: [
-        /* @__PURE__ */ a("span", { children: p }),
-        /* @__PURE__ */ a("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ a(C, {}) })
+        /* @__PURE__ */ l("span", { children: r }),
+        /* @__PURE__ */ l("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ l(C, { width: 12, height: 12 }) })
       ]
     }
-  ) : /* @__PURE__ */ a("span", { children: p }) }) });
+  ) : /* @__PURE__ */ l("span", { children: r }) }) });
 };
-l.THead = H;
-l.THead.displayName = "Table.THead";
-l.TBody = P;
-l.TBody.displayName = "Table.TBody";
-l.Tr = D;
-l.Tr.displayName = "Table.Tr";
-l.Td = M;
-l.Td.displayName = "Table.Td";
-l.Th = O;
-l.Th.displayName = "Table.Th";
+o.THead = P;
+o.THead.displayName = "Table.THead";
+o.TBody = D;
+o.TBody.displayName = "Table.TBody";
+o.Tr = M;
+o.Tr.displayName = "Table.Tr";
+o.Td = O;
+o.Td.displayName = "Table.Td";
+o.Th = $;
+o.Th.displayName = "Table.Th";
 export {
-  P as TBody,
-  H as THead,
-  l as Table,
-  M as Td,
-  O as Th,
-  D as Tr
+  D as TBody,
+  P as THead,
+  o as Table,
+  O as Td,
+  $ as Th,
+  M as Tr
 };

package/dist/components/Table/Table.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: {
-        ({ children, theme, fullWidth, className, paginationProps, language, translations, ...rest }: import('./Table').TableProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, theme, fullWidth, className, paginationProps, isFixed, language, translations, ...rest }: import('./Table').TableProps): import("react/jsx-runtime").JSX.Element;
         THead: import('react').FunctionComponent<import('./Table').ChildrenProps>;
         TBody: import('react').FunctionComponent<import('./Table').ChildrenProps>;
         Tr: import('react').FunctionComponent<import('./Table').TrProps>;

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>>;