@pismo/marola 1.0.0-beta.12 → 1.0.0-beta.14

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

@@ -4,10 +4,11 @@ declare const meta: {
     title: string;
     component: <T extends string | (object & {
         label: string;
-    })>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+    })>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
         label?: string | undefined;
         options?: T[] | undefined;
         onChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: T) => void) | undefined;
+        onInputChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: string) => void) | undefined;
         infoMessage?: string | undefined;
         errorMessage?: string | undefined;
         leftIcon?: import('react').ReactNode;

package/dist/components/Chip/Chip.js

@@ -5,7 +5,7 @@ import "../Adornment/Adornment.js";
 import "../Icon/Icon.js";
 import "../Typography/Typography.js";
 import "../Button/Button.js";
-import { C as k } from "../../Toggle-C7W0gYOI.js";
+import { C as k } from "../../Toggle-uBAGft1J.js";
 import "../Dialog/Backdrop.js";
 import "../IconButton/IconButton.js";
 import "../Select/Select.js";

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

@@ -83,13 +83,13 @@ declare const meta: {
         content?: string | undefined;
         dir?: string | undefined;
         hidden?: boolean | undefined;
-        id?: string | undefined;
         onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;

package/dist/components/EllipsisTooltip/EllipsisTooltip.js

@@ -1,23 +1,36 @@
 import '../../assets/EllipsisTooltip.css';
-import { jsx as l } from "react/jsx-runtime";
-import { useState as h } from "react";
-import { c as d } from "../../clsx-DB4S2d7J.js";
-import { Tooltip as g } from "../Tooltip/Tooltip.js";
-const H = {
+import { jsx as o, jsxs as d, Fragment as f } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { c as x } from "../../clsx-DB4S2d7J.js";
+import { Tooltip as H } from "../Tooltip/Tooltip.js";
+const T = {
   "ellipsis-tooltip": "_ellipsis-tooltip_krf68_1"
-}, S = ({
-  lineClamp: s = 1,
-  children: e,
-  className: i,
-  disableHoverListener: o,
-  ...r
+}, W = ({
+  lineClamp: e = 1,
+  children: i,
+  className: r,
+  disableHoverListener: t,
+  ...a
 }) => {
-  const [c, a] = h(!1), p = (t) => {
-    const m = t.scrollWidth > t.clientWidth, f = t.scrollHeight > t.clientHeight;
-    a(m || f);
-  }, n = typeof o == "boolean" ? o : !c;
-  return /* @__PURE__ */ l(g, { className: d(i), ...r, onTargetCreated: p, disableHoverListener: n, children: /* @__PURE__ */ l("span", { style: { "--line-clamp": s }, className: H["ellipsis-tooltip"], children: e }) });
+  const [s, c] = g(!1), n = (l) => {
+    const m = l.scrollWidth > l.clientWidth, h = l.scrollHeight > l.clientHeight;
+    c(m || h);
+  }, p = typeof t == "boolean" ? t : !s;
+  return /* @__PURE__ */ o(
+    H,
+    {
+      className: x(r),
+      ...a,
+      onTargetCreated: n,
+      disableHoverListener: p,
+      disablePortal: !1,
+      children: /* @__PURE__ */ d("span", { style: { "--line-clamp": e }, className: T["ellipsis-tooltip"], children: [
+        i,
+        s && /* @__PURE__ */ o(f, { children: " ‌" })
+      ] })
+    }
+  );
 };
 export {
-  S as EllipsisTooltip
+  W as EllipsisTooltip
 };

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

@@ -19,6 +19,7 @@ declare const meta: {
         position?: import('@floating-ui/utils').Placement | undefined;
         padding?: "small" | "normal" | undefined;
         theme?: "black" | "white" | undefined;
+        disablePortal?: boolean | undefined;
         arialRole?: import('react').AriaRole | undefined;
         disableHoverListener?: boolean | undefined;
         lineClamp?: number | undefined;

package/dist/components/RowItem/RowItem.js

@@ -5,7 +5,7 @@ import "../Adornment/Adornment.js";
 import "../Icon/Icon.js";
 import "../Typography/Typography.js";
 import "../Button/Button.js";
-import { R as I, R as b } from "../../Toggle-C7W0gYOI.js";
+import { R as I, R as b } from "../../Toggle-uBAGft1J.js";
 import "../Dialog/Backdrop.js";
 import "../IconButton/IconButton.js";
 import "../Select/Select.js";

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./RowItem').RowItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Clickable: Story;
+export declare const WithAdornement: Story;
+export declare const WithButtons: Story;
+export declare const WithButtonsAndAdornementDisabled: Story;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -20,6 +20,8 @@ export type SkeletonTableProps = SkeletonProps & {
     rows?: number;
     /** Controls if the with of the cells should be automatically defined */
     autoWidth?: boolean;
+    /** Controls if show or not the skeleton of the table header */
+    showHeader?: boolean;
 };
-declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const SkeletonTable: ({ columns, rows, autoWidth, showHeader, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
 export { Skeleton, SkeletonCircle, SkeletonTable };

package/dist/components/Skeleton/Skeleton.js

@@ -1,23 +1,29 @@
 import '../../assets/Skeleton.css';
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
 import { c as r } from "../../clsx-DB4S2d7J.js";
-const N = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
-  skeleton: N,
+const u = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
+  skeleton: u,
   skeletonLoading: b,
   "skeleton--circle-type": "_skeleton--circle-type_dtmoz_13",
   "skeleton--table-type": "_skeleton--table-type_dtmoz_17"
-}, i = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), $ = ({ size: e = "4rem", ...l }) => {
+}, d = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), C = ({ size: e = "4rem", ...l }) => {
   const s = r(o.skeleton, o["skeleton--circle-type"], l.className);
   return /* @__PURE__ */ t("div", { ...l, style: { width: e, height: e }, className: s });
-}, d = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, C = ({ columns: e = 5, rows: l = 5, autoWidth: s = !0, ...c }) => {
-  const m = r(o["skeleton--table-type"], c.className), a = `${100 / e}%`, h = /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((y, n) => /* @__PURE__ */ t("th", { style: { width: a }, children: /* @__PURE__ */ t(i, { style: { width: s ? d(50) : "100%" } }) }, `row-columns-${n}`)) }), k = new Array(l).fill(null).map((y, n) => /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((f, _) => /* @__PURE__ */ t("td", { style: { width: a }, children: /* @__PURE__ */ t(i, { style: { width: s ? d() : "100%" } }) }, `row-${n}-cell-${_}`)) }, `row-${n}`));
-  return /* @__PURE__ */ w("table", { ...c, className: m, children: [
-    /* @__PURE__ */ t("thead", { children: h }),
-    /* @__PURE__ */ t("tbody", { children: k })
+}, m = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, L = ({
+  columns: e = 5,
+  rows: l = 5,
+  autoWidth: s = !0,
+  showHeader: c = !0,
+  ...a
+}) => {
+  const k = r(o["skeleton--table-type"], a.className), i = `${100 / e}%`, h = c && /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((_, n) => /* @__PURE__ */ t("th", { style: { width: i }, children: /* @__PURE__ */ t(d, { style: { width: s ? m(50) : "100%" } }) }, `row-columns-${n}`)) }), y = new Array(l).fill(null).map((_, n) => /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((f, w) => /* @__PURE__ */ t("td", { style: { width: i }, children: /* @__PURE__ */ t(d, { style: { width: s ? m() : "100%" } }) }, `row-${n}-cell-${w}`)) }, `row-${n}`));
+  return /* @__PURE__ */ N("table", { ...a, className: k, children: [
+    c && /* @__PURE__ */ t("thead", { children: h }),
+    /* @__PURE__ */ t("tbody", { children: y })
   ] });
 };
 export {
-  i as Skeleton,
-  $ as SkeletonCircle,
-  C as SkeletonTable
+  d as Skeleton,
+  C as SkeletonCircle,
+  L as SkeletonTable
 };

package/dist/components/Skeleton/SkeletonTable.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ columns, rows, autoWidth, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ columns, rows, autoWidth, showHeader, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/Table/Table.js

@@ -1,53 +1,53 @@
 import '../../assets/Table.css';
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import * as c from "react";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import * as o from "react";
 import { useState as w } from "react";
 import { c as i } from "../../clsx-DB4S2d7J.js";
-import { paginationDefaultTranslations as u, Pagination as T } from "../Pagination/Pagination.js";
-import { sortTooltipDefaultTranslations as b, SortTooltip as j } from "../SortTooltip/SortTooltip.js";
-import { TableProvider as f, useTable as N } from "./TableContext.js";
-const x = (a) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__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" })))), C = "_table_9cjay_43", L = "_th__wrapper_9cjay_115", E = "_tr_9cjay_131", k = "_td_9cjay_135", t = {
-  "u-typography-h1": "_u-typography-h1_9cjay_1",
-  "u-typography-h2": "_u-typography-h2_9cjay_8",
-  "u-typography-h3": "_u-typography-h3_9cjay_15",
-  "u-typography-h4": "_u-typography-h4_9cjay_22",
-  "u-typography-h5": "_u-typography-h5_9cjay_29",
-  "u-typography-h6": "_u-typography-h6_9cjay_36",
-  "u-typography-base": "_u-typography-base_9cjay_43",
-  table: C,
-  "u-typography-base--xxl": "_u-typography-base--xxl_9cjay_49",
-  "u-typography-base--xl": "_u-typography-base--xl_9cjay_53",
-  "u-typography-base--lg": "_u-typography-base--lg_9cjay_57",
-  "u-typography-base--sm": "_u-typography-base--sm_9cjay_61",
-  "u-typography-base--bold": "_u-typography-base--bold_9cjay_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_9cjay_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_9cjay_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_9cjay_74",
-  "table--full-width": "_table--full-width_9cjay_82",
-  "table--white-theme": "_table--white-theme_9cjay_85",
-  "table--transparent-theme": "_table--transparent-theme_9cjay_88",
-  "cell--left-alignment": "_cell--left-alignment_9cjay_91",
-  "cell--center-alignment": "_cell--center-alignment_9cjay_95",
-  "cell--right-alignment": "_cell--right-alignment_9cjay_99",
-  th__wrapper: L,
-  "th__wrapper--pressed": "_th__wrapper--pressed_9cjay_118",
-  "th__wrapper--clickable": "_th__wrapper--clickable_9cjay_122",
-  "th__sort-icon-container": "_th__sort-icon-container_9cjay_125",
-  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_9cjay_131",
-  tr: E,
-  td: k,
-  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_9cjay_140",
-  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_9cjay_141",
-  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_9cjay_145",
-  "td-wrapper": "_td-wrapper_9cjay_149"
+import { paginationDefaultTranslations as y, Pagination as k } from "../Pagination/Pagination.js";
+import { sortTooltipDefaultTranslations as u, SortTooltip as T } from "../SortTooltip/SortTooltip.js";
+import { TableProvider as q, useTable as f } from "./TableContext.js";
+const N = (a) => /* @__PURE__ */ o.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ o.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__ */ o.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__ */ o.createElement("defs", null, /* @__PURE__ */ o.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ o.createElement("rect", { width: 7, height: 10, fill: "white" })))), x = "_table_pknqm_43", C = "_th__wrapper_pknqm_116", L = "_tr_pknqm_132", E = "_td_pknqm_136", t = {
+  "u-typography-h1": "_u-typography-h1_pknqm_1",
+  "u-typography-h2": "_u-typography-h2_pknqm_8",
+  "u-typography-h3": "_u-typography-h3_pknqm_15",
+  "u-typography-h4": "_u-typography-h4_pknqm_22",
+  "u-typography-h5": "_u-typography-h5_pknqm_29",
+  "u-typography-h6": "_u-typography-h6_pknqm_36",
+  "u-typography-base": "_u-typography-base_pknqm_43",
+  table: x,
+  "u-typography-base--xxl": "_u-typography-base--xxl_pknqm_49",
+  "u-typography-base--xl": "_u-typography-base--xl_pknqm_53",
+  "u-typography-base--lg": "_u-typography-base--lg_pknqm_57",
+  "u-typography-base--sm": "_u-typography-base--sm_pknqm_61",
+  "u-typography-base--bold": "_u-typography-base--bold_pknqm_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_pknqm_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_pknqm_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_pknqm_74",
+  "table--full-width": "_table--full-width_pknqm_83",
+  "table--white-theme": "_table--white-theme_pknqm_86",
+  "table--transparent-theme": "_table--transparent-theme_pknqm_89",
+  "cell--left-alignment": "_cell--left-alignment_pknqm_92",
+  "cell--center-alignment": "_cell--center-alignment_pknqm_96",
+  "cell--right-alignment": "_cell--right-alignment_pknqm_100",
+  th__wrapper: C,
+  "th__wrapper--pressed": "_th__wrapper--pressed_pknqm_119",
+  "th__wrapper--clickable": "_th__wrapper--clickable_pknqm_123",
+  "th__sort-icon-container": "_th__sort-icon-container_pknqm_126",
+  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_pknqm_132",
+  tr: L,
+  td: E,
+  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_pknqm_141",
+  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_pknqm_142",
+  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_pknqm_146",
+  "td-wrapper": "_td-wrapper_pknqm_150"
 }, v = {
   pt: {
-    ...u.pt,
-    ...b.pt
+    ...y.pt,
+    ...u.pt
   },
   en: {
-    ...u.en,
-    ...b.en
+    ...y.en,
+    ...u.en
   },
   // example to add a new language translation
   es: {
@@ -59,78 +59,78 @@ const x = (a) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
     of: "de",
     results: "resultados"
   }
-}, _ = ({
+}, p = ({
   children: a,
   theme: e = "white",
   fullWidth: l = !0,
-  className: p,
-  paginationProps: s,
-  language: o,
-  translations: y,
+  className: s,
+  paginationProps: _,
+  language: n,
+  translations: h,
   ...d
 }) => {
-  const h = i(
+  const c = i(
     t.table,
     l ? t["table--full-width"] : "",
     t[`table--${e}-theme`],
-    p
-  ), n = o && v[o] || y;
-  return /* @__PURE__ */ m(f, { initialTranslations: n, children: [
-    /* @__PURE__ */ r("table", { ...d, className: h, children: a }),
-    s && /* @__PURE__ */ r(T, { ...s, t: n })
+    s
+  ), m = n && v[n] || h;
+  return /* @__PURE__ */ b(q, { initialTranslations: m, children: [
+    /* @__PURE__ */ r("table", { ...d, className: c, children: a }),
+    _ && /* @__PURE__ */ r(k, { ..._, t: m })
   ] });
-}, B = ({ children: a, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: a }), H = ({ children: a, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: a }), P = ({ children: a, onClick: e, disabled: l, className: p, ...s }) => {
-  const o = i(
+}, B = ({ children: a, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: a }), H = ({ children: a, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: a }), P = ({ children: a, onClick: e, disabled: l, className: s, ..._ }) => {
+  const n = i(
     t.tr,
     e && !l ? t["tr__row-or-cell--clickable"] : l ? t["tr__row-or-cell--disabled"] : "",
-    p
+    s
   );
-  return /* @__PURE__ */ r("tr", { ...s, className: o, onClick: () => !l && (e == null ? void 0 : e()), children: a });
-}, D = ({ children: a, onClick: e, disabled: l, className: p, align: s = "left", ...o }) => {
-  const y = i(
+  return /* @__PURE__ */ r("tr", { ..._, className: n, onClick: () => !l && (e == null ? void 0 : e()), children: a });
+}, D = ({ children: a, onClick: e, disabled: l, className: s, align: _ = "left", ...n }) => {
+  const h = i(
     t.td,
     e && !l ? t["td__row-or-cell--clickable"] : l ? t["td__row-or-cell--disabled"] : "",
-    t[`cell--${s}-alignment`],
-    p
+    t[`cell--${_}-alignment`],
+    s
   );
-  return /* @__PURE__ */ r("td", { ...o, className: y, onClick: () => !l && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: a }) });
-}, M = ({ children: a, onSort: e, sortType: l, className: p, classNameTooltip: s, align: o = "left", ...y }) => {
-  const { translations: d } = N(), [h, n] = w(!1), g = i(
+  return /* @__PURE__ */ r("td", { ...n, className: h, onClick: () => !l && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: a }) });
+}, M = ({ children: a, onSort: e, sortType: l, className: s, classNameTooltip: _, align: n = "left", ...h }) => {
+  const { translations: d } = f(), [c, m] = w(!1), g = i(
     t.th__wrapper,
-    h ? t["th__wrapper--pressed"] : "",
+    c ? t["th__wrapper--pressed"] : "",
     e ? t["th__wrapper--clickable"] : "",
-    p
+    s
   );
-  return /* @__PURE__ */ r("th", { ...y, className: t[`cell--${o}-alignment`], children: /* @__PURE__ */ r("span", { className: g, onClick: e && (() => n(!h)), children: e ? /* @__PURE__ */ m(
-    j,
+  return /* @__PURE__ */ r("th", { ...h, className: t[`cell--${n}-alignment`], children: /* @__PURE__ */ r("span", { className: g, onClick: e && (() => m(!c)), children: e ? /* @__PURE__ */ b(
+    T,
     {
-      onClose: () => n(!1),
+      onClose: () => m(!1),
       onSort: e,
-      show: h,
+      show: c,
       sortType: l,
-      className: s,
+      className: _,
       t: d,
       children: [
         /* @__PURE__ */ r("span", { children: a }),
-        /* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(x, {}) })
+        /* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(N, {}) })
       ]
     }
   ) : /* @__PURE__ */ r("span", { children: a }) }) });
 };
-_.THead = B;
-_.THead.displayName = "Table.THead";
-_.TBody = H;
-_.TBody.displayName = "Table.TBody";
-_.Tr = P;
-_.Tr.displayName = "Table.Tr";
-_.Td = D;
-_.Td.displayName = "Table.Td";
-_.Th = M;
-_.Th.displayName = "Table.Th";
+p.THead = B;
+p.THead.displayName = "Table.THead";
+p.TBody = H;
+p.TBody.displayName = "Table.TBody";
+p.Tr = P;
+p.Tr.displayName = "Table.Tr";
+p.Td = D;
+p.Td.displayName = "Table.Td";
+p.Th = M;
+p.Th.displayName = "Table.Th";
 export {
   H as TBody,
   B as THead,
-  _ as Table,
+  p as Table,
   D as Td,
   M as Th,
   P as Tr

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

@@ -11,3 +11,4 @@ export declare const Simple: Story;
 export declare const WithLoading: Story;
 export declare const Size: Story;
 export declare const Color: Story;
+export declare const Horizontal: Story;

package/dist/components/ToggleGroup/Toggle.js

@@ -4,7 +4,7 @@ import "../../clsx-DB4S2d7J.js";
 import "../Icon/Icon.js";
 import "../Typography/Typography.js";
 import "../Button/Button.js";
-import { T as b } from "../../Toggle-C7W0gYOI.js";
+import { T as b } from "../../Toggle-uBAGft1J.js";
 import "../Dialog/Backdrop.js";
 import "../IconButton/IconButton.js";
 import "../Select/Select.js";

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,4 +1,4 @@
-import { T as e } from "../../Toggle-C7W0gYOI.js";
+import { T as e } from "../../Toggle-uBAGft1J.js";
 import { G as p } from "../../Group-B3p31ftp.js";
 export {
   p as ToggleGroup,

package/dist/components/Tooltip/Tooltip.d.ts

@@ -14,7 +14,7 @@ export type TooltipProps = {
     onClose?: () => void;
     /** The color of the tooltip */
     theme?: 'white' | 'black';
-    /** Dhe padding applied to the tooltip */
+    /** The padding applied to the tooltip */
     padding?: 'small' | 'normal';
     /** The Position where the tooltip will be display relative to the anchor element */
     position?: PopupPlacement;
@@ -28,6 +28,8 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Function thats return the HTML Element of target. Important to EllipsisTooltip knows if the node needs or not the ellipsis */
     onTargetCreated?: (e: HTMLElement) => void;
+    /** Disable uses portal (true by default) */
+    disablePortal?: boolean;
 };
 declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -114,10 +114,10 @@ const B = "_tooltip_1dujm_1", m = {
     /* @__PURE__ */ a(
       V,
       {
+        disablePortal: !0,
         ...N,
         open: j,
         anchor: t == null ? void 0 : t.current,
-        disablePortal: !0,
         style: w,
         role: e,
         placement: f,

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

@@ -22,6 +22,7 @@ declare const meta: {
         style?: import('react').CSSProperties | undefined;
         'data-testid'?: string | undefined;
         onTargetCreated?: ((e: HTMLElement) => void) | undefined;
+        disablePortal?: boolean | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/main.js

@@ -3,7 +3,7 @@ import { Advice as p } from "./components/Advice/Advice.js";
 import { Autocomplete as f } from "./components/Autocomplete/Autocomplete.js";
 import { Button as x } from "./components/Button/Button.js";
 import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
-import { C as T, R as s, T as c } from "./Toggle-C7W0gYOI.js";
+import { C as T, R as s, T as c } from "./Toggle-uBAGft1J.js";
 import { Dialog as S } from "./components/Dialog/Dialog.js";
 import { EllipsisTooltip as d } from "./components/EllipsisTooltip/EllipsisTooltip.js";
 import { Icon as k } from "./components/Icon/Icon.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.14",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -96,4 +96,4 @@
     "@mui/base": "^5.0.0-beta.40",
     "@mui/material": "^5.15.15"
   }
-}
+}