@pismo/marola 0.0.1-alpha.29 → 0.0.1-alpha.30

package/dist/assets/EllipsisTooltip.css

@@ -0,0 +1 @@
+._ellipsis-tooltip_krf68_1{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:var(--line-clamp, 1);-webkit-box-orient:vertical}

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

@@ -0,0 +1,7 @@
+import { TooltipProps } from '../Tooltip/Tooltip';
+
+export type EllipsisTooltipProps = Omit<TooltipProps, 'onTargetCreated'> & {
+    lineClamp?: number;
+};
+declare const EllipsisTooltip: ({ lineClamp, children, className, disableHoverListener, ...rest }: EllipsisTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { EllipsisTooltip };

package/dist/components/EllipsisTooltip/EllipsisTooltip.js

@@ -0,0 +1,23 @@
+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 = {
+  "ellipsis-tooltip": "_ellipsis-tooltip_krf68_1"
+}, S = ({
+  lineClamp: s = 1,
+  children: e,
+  className: i,
+  disableHoverListener: o,
+  ...r
+}) => {
+  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 }) });
+};
+export {
+  S as EllipsisTooltip
+};

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

@@ -0,0 +1,31 @@
+import { EllipsisTooltipProps } from './EllipsisTooltip.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ lineClamp, children, className, disableHoverListener, ...rest }: EllipsisTooltipProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        style?: import('react').CSSProperties | undefined;
+        title: import('react').ReactNode;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        'data-testid'?: string | undefined;
+        open?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        theme?: "black" | "white" | undefined;
+        position?: import('@floating-ui/utils').Placement | undefined;
+        padding?: "small" | "normal" | undefined;
+        arialRole?: import('react').AriaRole | undefined;
+        disableHoverListener?: boolean | undefined;
+        lineClamp?: number | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const OneLineEllipsis: Story;
+export declare const TwoLinesEllipsis: Story;

package/dist/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 export declare const FamilyAndIcons: {
-    readonly 'fa/duotone': readonly ["arrow-down-arrow-up", "calendar-days", "circle-arrow-right", "circle-exclamation", "circle-xmark", "eye-slash", "folder-magnifying-glass", "lock-keyhole", "magnifying-glass", "xmark", "warehouse-full", "rectangle-history", "account-group", "arrow-left"];
+    readonly 'fa/duotone': readonly ["arrow-down-arrow-up", "calendar-days", "circle-arrow-right", "circle-exclamation", "circle-xmark", "eye-slash", "folder-magnifying-glass", "lock-keyhole", "magnifying-glass", "xmark", "warehouse-full", "rectangle-history", "account-group", "arrow-left", "trash"];
     readonly pi: readonly ["logo"];
 };
 export type IconFamilies = keyof typeof FamilyAndIcons;

package/dist/components/Icon/Icon.js

@@ -66,7 +66,12 @@ const C = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 16",
       .fa-secondary {
         opacity: .4
       }
-    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M500.3 443.7l-119.7-119.7c-15.03 22.3-34.26 41.54-56.57 56.57l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M207.1 0C93.12 0-.0002 93.13-.0002 208S93.12 416 207.1 416s208-93.13 208-208S322.9 0 207.1 0zM207.1 336c-70.58 0-128-57.42-128-128c0-70.58 57.42-128 128-128s128 57.42 128 128C335.1 278.6 278.6 336 207.1 336z" })), E = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_2882_20246)" }, /* @__PURE__ */ e.createElement("path", { d: "M14 5C15.1031 5 16 5.89688 16 7V14C16 15.1031 15.1031 16 14 16H2C0.895313 16 0 15.1031 0 14V7C0 5.89688 0.895313 5 2 5H14Z", fill: "#838192" }), /* @__PURE__ */ e.createElement("path", { opacity: 0.4, d: "M13.75 4H2.25C1.83594 4 1.5 3.66563 1.5 3.25C1.5 2.83594 1.83594 2.5 2.25 2.5H13.75C14.1656 2.5 14.5 2.83594 14.5 3.25C14.5 3.66563 14.1656 4 13.75 4ZM12.25 1.5H3.75C3.33438 1.5 3 1.16406 3 0.75C3 0.335938 3.33438 0 3.75 0H12.25C12.6656 0 13 0.335938 13 0.75C13 1.16406 12.6656 1.5 12.25 1.5Z", fill: "#838192" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_2882_20246" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white" })))), v = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_2882_20237)" }, /* @__PURE__ */ e.createElement("path", { d: "M1.25719 3.49676L9.62813 0.148412C9.86563 0.0530684 10.1344 0.0530684 10.3719 0.148412L18.7437 3.49676C19.5031 3.79988 20 4.53738 20 5.35301V15.2499C20 15.6655 19.6656 15.9999 19.25 15.9999H17.75C17.3344 15.9999 17 15.6655 17 15.2499V6.97176C17 6.44676 16.5531 5.97176 16 5.97176H4C3.44688 5.97176 3 6.44676 3 6.97176V15.2499C3 15.6655 2.66406 15.9999 2.25 15.9999H0.75C0.335938 15.9999 0 15.6655 0 15.2499V5.35301C0 4.53738 0.497813 3.79988 1.25719 3.49676Z", fill: "#838192" }), /* @__PURE__ */ e.createElement("path", { opacity: 0.4, d: "M4 7.75C4 7.33437 4.33437 7 4.75 7H9.25C9.66563 7 10 7.33437 10 7.75V10.25C10 10.6656 9.66563 11 9.25 11H4.75C4.33437 11 4 10.6656 4 10.25V7.75ZM11 12.75C11 12.3344 11.3344 12 11.75 12H15.25C15.6656 12 16 12.3344 16 12.75V15.25C16 15.6656 15.6656 16 15.25 16H11.75C11.3344 16 11 15.6656 11 15.25V12.75ZM9.25 12C9.66563 12 10 12.3344 10 12.75V15.25C10 15.6656 9.66563 16 9.25 16H4.75C4.33437 16 4 15.6656 4 15.25V12.75C4 12.3344 4.33437 12 4.75 12H9.25Z", fill: "#838192" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_2882_20237" }, /* @__PURE__ */ e.createElement("rect", { width: 20, height: 16, fill: "white" })))), M = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "data-waves-icon": "fa/duotone/xmark", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M500.3 443.7l-119.7-119.7c-15.03 22.3-34.26 41.54-56.57 56.57l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M207.1 0C93.12 0-.0002 93.13-.0002 208S93.12 416 207.1 416s208-93.13 208-208S322.9 0 207.1 0zM207.1 336c-70.58 0-128-57.42-128-128c0-70.58 57.42-128 128-128s128 57.42 128 128C335.1 278.6 278.6 336 207.1 336z" })), E = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_2882_20246)" }, /* @__PURE__ */ e.createElement("path", { d: "M14 5C15.1031 5 16 5.89688 16 7V14C16 15.1031 15.1031 16 14 16H2C0.895313 16 0 15.1031 0 14V7C0 5.89688 0.895313 5 2 5H14Z", fill: "#838192" }), /* @__PURE__ */ e.createElement("path", { opacity: 0.4, d: "M13.75 4H2.25C1.83594 4 1.5 3.66563 1.5 3.25C1.5 2.83594 1.83594 2.5 2.25 2.5H13.75C14.1656 2.5 14.5 2.83594 14.5 3.25C14.5 3.66563 14.1656 4 13.75 4ZM12.25 1.5H3.75C3.33438 1.5 3 1.16406 3 0.75C3 0.335938 3.33438 0 3.75 0H12.25C12.6656 0 13 0.335938 13 0.75C13 1.16406 12.6656 1.5 12.25 1.5Z", fill: "#838192" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_2882_20246" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white" })))), v = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/duotone/trash", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, ".fa-secondary{opacity:.4}")), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M284.2 0C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M32 96H416L394.6 466.8C393.1 492.2 372.1 512 346.7 512H101.3C75.87 512 54.86 492.2 53.39 466.8L32 96z" })), M = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_2882_20237)" }, /* @__PURE__ */ e.createElement("path", { d: "M1.25719 3.49676L9.62813 0.148412C9.86563 0.0530684 10.1344 0.0530684 10.3719 0.148412L18.7437 3.49676C19.5031 3.79988 20 4.53738 20 5.35301V15.2499C20 15.6655 19.6656 15.9999 19.25 15.9999H17.75C17.3344 15.9999 17 15.6655 17 15.2499V6.97176C17 6.44676 16.5531 5.97176 16 5.97176H4C3.44688 5.97176 3 6.44676 3 6.97176V15.2499C3 15.6655 2.66406 15.9999 2.25 15.9999H0.75C0.335938 15.9999 0 15.6655 0 15.2499V5.35301C0 4.53738 0.497813 3.79988 1.25719 3.49676Z", fill: "#838192" }), /* @__PURE__ */ e.createElement("path", { opacity: 0.4, d: "M4 7.75C4 7.33437 4.33437 7 4.75 7H9.25C9.66563 7 10 7.33437 10 7.75V10.25C10 10.6656 9.66563 11 9.25 11H4.75C4.33437 11 4 10.6656 4 10.25V7.75ZM11 12.75C11 12.3344 11.3344 12 11.75 12H15.25C15.6656 12 16 12.3344 16 12.75V15.25C16 15.6656 15.6656 16 15.25 16H11.75C11.3344 16 11 15.6656 11 15.25V12.75ZM9.25 12C9.66563 12 10 12.3344 10 12.75V15.25C10 15.6656 9.66563 16 9.25 16H4.75C4.33437 16 4 15.6656 4 15.25V12.75C4 12.3344 4.33437 12 4.75 12H9.25Z", fill: "#838192" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_2882_20237" }, /* @__PURE__ */ e.createElement("rect", { width: 20, height: 16, fill: "white" })))), H = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "data-waves-icon": "fa/duotone/xmark", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
   fill: "currentcolor",
   color: "currentcolor",
   width: "1em",
@@ -75,12 +80,12 @@ const C = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 16",
       .fa-secondary {
         opacity: .4
       }
-    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z" })), H = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 664 652", xmlns: "http://www.w3.org/2000/svg", "data-waves-icon": "pi/logo", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z" })), L = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 664 652", xmlns: "http://www.w3.org/2000/svg", "data-waves-icon": "pi/logo", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
   fill: "currentcolor",
   color: "currentcolor",
   width: "1em",
   height: "1em"
-}, ...t }, /* @__PURE__ */ e.createElement("path", { d: "M391.42 125.965C448.039 184.645 504.938 243.615 565.81 185.331C583.085 168.806 588.671 138.702 583.932 117.95C552.33 -20.4551 366.687 -26.094 284.964 44.5249L285.069 45.0613C321.006 52.9875 356.159 89.4202 391.42 125.965Z" }), /* @__PURE__ */ e.createElement("path", { d: "M522.431 495.702C448.189 455.82 486.69 383.483 525.002 311.503C548.862 266.674 572.648 221.983 569.081 185.356L569.559 185.09C661.976 240.991 713.98 419.291 592.114 492.115C573.842 503.035 543.486 507.025 522.431 495.702V495.702Z" }), /* @__PURE__ */ e.createElement("path", { d: "M213.844 550.355C228.833 467.423 309.526 481.686 389.823 495.879C439.831 504.719 489.685 513.531 523.417 498.82L523.818 499.192C499.211 604.36 345.708 708.916 238.789 615.519C222.757 601.516 209.582 573.878 213.844 550.355Z" }), /* @__PURE__ */ e.createElement("path", { d: "M284.035 48.1638C320.656 124.068 246.989 159.959 173.686 195.673C128.033 217.916 82.5196 240.09 63.8762 271.819L63.3335 271.753C21.4251 172.207 84.1548 -2.6076 225.552 10.1071C246.753 12.0131 273.657 26.6279 284.035 48.1638Z" }), /* @__PURE__ */ e.createElement("path", { d: "M172.699 424.293C161.384 343.54 150.014 262.389 66.5079 273.761C42.819 276.977 20.6057 298.048 12.2415 317.622C-43.5448 448.169 103.33 561.849 210.954 552.754L211.185 552.258C186.77 524.722 179.745 474.585 172.699 424.293Z" })), V = {
+}, ...t }, /* @__PURE__ */ e.createElement("path", { d: "M391.42 125.965C448.039 184.645 504.938 243.615 565.81 185.331C583.085 168.806 588.671 138.702 583.932 117.95C552.33 -20.4551 366.687 -26.094 284.964 44.5249L285.069 45.0613C321.006 52.9875 356.159 89.4202 391.42 125.965Z" }), /* @__PURE__ */ e.createElement("path", { d: "M522.431 495.702C448.189 455.82 486.69 383.483 525.002 311.503C548.862 266.674 572.648 221.983 569.081 185.356L569.559 185.09C661.976 240.991 713.98 419.291 592.114 492.115C573.842 503.035 543.486 507.025 522.431 495.702V495.702Z" }), /* @__PURE__ */ e.createElement("path", { d: "M213.844 550.355C228.833 467.423 309.526 481.686 389.823 495.879C439.831 504.719 489.685 513.531 523.417 498.82L523.818 499.192C499.211 604.36 345.708 708.916 238.789 615.519C222.757 601.516 209.582 573.878 213.844 550.355Z" }), /* @__PURE__ */ e.createElement("path", { d: "M284.035 48.1638C320.656 124.068 246.989 159.959 173.686 195.673C128.033 217.916 82.5196 240.09 63.8762 271.819L63.3335 271.753C21.4251 172.207 84.1548 -2.6076 225.552 10.1071C246.753 12.0131 273.657 26.6279 284.035 48.1638Z" }), /* @__PURE__ */ e.createElement("path", { d: "M172.699 424.293C161.384 343.54 150.014 262.389 66.5079 273.761C42.819 276.977 20.6057 298.048 12.2415 317.622C-43.5448 448.169 103.33 561.849 210.954 552.754L211.185 552.258C186.77 524.722 179.745 474.585 172.699 424.293Z" })), x = {
   // icon family / icon name
   // fa/duotone  / eye-slash
   "fa/duotone/arrow-down-arrow-up": i,
@@ -92,13 +97,14 @@ const C = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 16",
   "fa/duotone/folder-magnifying-glass": u,
   "fa/duotone/lock-keyhole": p,
   "fa/duotone/magnifying-glass": y,
-  "fa/duotone/xmark": M,
-  "fa/duotone/warehouse-full": v,
+  "fa/duotone/xmark": H,
+  "fa/duotone/warehouse-full": M,
   "fa/duotone/rectangle-history": E,
   "fa/duotone/account-group": C,
   "fa/duotone/arrow-left": m,
-  "pi/logo": H
-}, z = {
+  "fa/duotone/trash": v,
+  "pi/logo": L
+}, S = {
   "fa/duotone": [
     "arrow-down-arrow-up",
     "calendar-days",
@@ -113,17 +119,18 @@ const C = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 16",
     "warehouse-full",
     "rectangle-history",
     "account-group",
-    "arrow-left"
+    "arrow-left",
+    "trash"
   ],
   pi: ["logo"]
-}, x = ({ iconFamily: t, icon: a, size: l, color: n }) => {
-  const r = `${t ?? "fa/duotone"}/${a}`, c = V[r] ?? /* @__PURE__ */ s("span", { title: r, children: [
+}, V = ({ iconFamily: t, icon: c, size: l, color: n }) => {
+  const r = `${t ?? "fa/duotone"}/${c}`, a = x[r] ?? /* @__PURE__ */ s("span", { title: r, children: [
     "ERROR ICON ",
-    /* @__PURE__ */ o(x, { icon: "circle-exclamation" })
+    /* @__PURE__ */ o(V, { icon: "circle-exclamation" })
   ] });
-  return c && /* @__PURE__ */ o(c, { style: { color: n, height: l, width: l } });
+  return a && /* @__PURE__ */ o(a, { style: { color: n, height: l, width: l } });
 };
 export {
-  z as FamilyAndIcons,
-  x as Icon
+  S as FamilyAndIcons,
+  V as Icon
 };

package/dist/components/PageHeader/PageHeader.js

@@ -1,7 +1,7 @@
 import '../../assets/PageHeader.css';
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
 import { useMemo as k } from "react";
-import { c as o } from "../../clsx-DB4S2d7J.js";
+import { c as s } from "../../clsx-DB4S2d7J.js";
 import { Icon as N } from "../Icon/Icon.js";
 import { IconButton as f } from "../IconButton/IconButton.js";
 const x = "_title_z7ezb_22", L = "_subtitle_z7ezb_43", a = {
@@ -31,9 +31,9 @@ const x = "_title_z7ezb_22", L = "_subtitle_z7ezb_43", a = {
   "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_z7ezb_108",
   "page-header__main-right-content": "_page-header__main-right-content_z7ezb_131"
 }, w = ({
-  title: c,
-  subtitle: b,
-  rightChildren: s,
+  title: b,
+  subtitle: c,
+  rightChildren: h,
   bottomChildren: n,
   classNameWrapper: i,
   classNameTitle: l,
@@ -41,25 +41,26 @@ const x = "_title_z7ezb_22", L = "_subtitle_z7ezb_43", a = {
   "data-testid-wrapper": y,
   "data-testid-title": u,
   "data-testid-subtitle": z,
-  ...h
+  ...d
 }) => {
-  const e = h, m = k(() => {
-    const r = [];
-    return e.backLinkText && e.onBackLinkClick && r.push({
+  const e = d, m = k(() => {
+    const _ = [];
+    return e.backLinkText && e.onBackLinkClick && _.push({
       label: e.backLinkText,
       className: e.classNameBackLink,
       "data-testid": e["data-testid-backLink"],
       onClick: e.onBackLinkClick
-    }), e.breadcrumb && r.push(...e.breadcrumb), /* @__PURE__ */ t("div", { className: a["page-header__top-content"], children: /* @__PURE__ */ t("div", { className: a["page-header__breadcrumb"], children: r.map((_, d) => /* @__PURE__ */ t(
+    }), e.breadcrumb && _.push(...e.breadcrumb), /* @__PURE__ */ t("div", { className: a["page-header__top-content"], children: /* @__PURE__ */ t("div", { className: a["page-header__breadcrumb"], children: _.map((r, p) => /* @__PURE__ */ t(
       f,
       {
-        icon: d === 0 ? /* @__PURE__ */ t(N, { icon: "arrow-left" }) : /* @__PURE__ */ t("span", { className: a["page-header__breadcrumb__separator"], children: "/" }),
-        onClick: () => _.onClick && _.onClick(),
-        className: _.className,
-        "data-testid": _["data-testid"],
-        disabled: r.length === 1 ? !1 : d === r.length - 1,
-        children: _.label
-      }
+        icon: p === 0 ? /* @__PURE__ */ t(N, { icon: "arrow-left" }) : /* @__PURE__ */ t("span", { className: a["page-header__breadcrumb__separator"], children: "/" }),
+        onClick: () => r.onClick && r.onClick(),
+        className: r.className,
+        "data-testid": r["data-testid"],
+        disabled: _.length === 1 ? !1 : p === _.length - 1,
+        children: r.label
+      },
+      `${r.label}_${p}`
     )) }) });
   }, [
     e.breadcrumb,
@@ -68,14 +69,14 @@ const x = "_title_z7ezb_22", L = "_subtitle_z7ezb_43", a = {
     e["data-testid-backLink"],
     e.onBackLinkClick
   ]);
-  return /* @__PURE__ */ p("div", { className: o([a["page-header"], i]), "data-testid": y, ...h, children: [
+  return /* @__PURE__ */ o("div", { className: s([a["page-header"], i]), "data-testid": y, ...d, children: [
     m,
-    /* @__PURE__ */ p("div", { className: a["page-header__main-content"], children: [
-      /* @__PURE__ */ p("div", { className: a["page-header__main-left-content"], children: [
-        /* @__PURE__ */ t("h1", { className: o(a.title, l), "data-testid": u, children: c }),
-        /* @__PURE__ */ t("h2", { className: o(a.subtitle, g), "data-testid": z, children: b })
+    /* @__PURE__ */ o("div", { className: a["page-header__main-content"], children: [
+      /* @__PURE__ */ o("div", { className: a["page-header__main-left-content"], children: [
+        /* @__PURE__ */ t("h1", { className: s(a.title, l), "data-testid": u, children: b }),
+        /* @__PURE__ */ t("h2", { className: s(a.subtitle, g), "data-testid": z, children: c })
       ] }),
-      s && /* @__PURE__ */ t("div", { className: a["page-header__main-right-content"], children: s })
+      h && /* @__PURE__ */ t("div", { className: a["page-header__main-right-content"], children: h })
     ] }),
     n && /* @__PURE__ */ t("div", { className: a["page-header__bottom-content"], children: n })
   ] });

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

@@ -1,5 +1,5 @@
 import { PopupPlacement } from '@mui/base';
-import { AriaRole, ReactNode } from 'react';
+import { AriaRole, CSSProperties, ReactNode } from 'react';
 
 export type TooltipProps = {
     /** Tooltip reference element. */
@@ -22,8 +22,12 @@ export type TooltipProps = {
     arialRole?: AriaRole;
     /** Additional classnames to be applied to the tooltip */
     className?: string;
+    /** Additional styles to be applied to the tooltip */
+    style?: CSSProperties;
     /** Test id */
     '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;
 };
-declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,52 +1,52 @@
 import '../../assets/Tooltip.css';
-import { jsx as i, jsxs as w, Fragment as S } from "react/jsx-runtime";
+import { jsx as a, jsxs as v, Fragment as P } from "react/jsx-runtime";
 import * as u from "react";
-import { useRef as v, useState as P, useEffect as E, isValidElement as R, cloneElement as q } from "react";
-import { T as M, P as O } from "../../Popup-B6ZSGIEI.js";
-import { _ as V, b as $, P as l } from "../../index-CH45lKw7.js";
-import { c as z } from "../../clsx-DB4S2d7J.js";
-import { C as D } from "../../ClickAwayListener-BSW-Nd-y.js";
-function F() {
-  const n = u.useContext(M);
-  if (!n)
+import { useRef as R, useState as T, useEffect as E, isValidElement as q, cloneElement as M } from "react";
+import { T as O, P as V } from "../../Popup-B6ZSGIEI.js";
+import { _ as $, b as z, P as l } from "../../index-CH45lKw7.js";
+import { c as D } from "../../clsx-DB4S2d7J.js";
+import { C as F } from "../../ClickAwayListener-BSW-Nd-y.js";
+function I() {
+  const e = u.useContext(O);
+  if (!e)
     throw new Error("Missing transition context");
   const {
-    registerTransition: e,
+    registerTransition: o,
     requestedEnter: r,
-    onExited: o
-  } = n;
-  return u.useEffect(() => e(), [e]), {
-    onExited: o,
+    onExited: n
+  } = e;
+  return u.useEffect(() => o(), [o]), {
+    onExited: n,
     requestedEnter: r
   };
 }
-const I = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
-function g(n) {
+const W = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
+function b(e) {
   const {
-    children: e,
+    children: o,
     className: r,
-    enterAnimationName: o,
+    enterAnimationName: n,
     enterClassName: c,
     exitAnimationName: _,
     exitClassName: f
-  } = n, p = V(n, I), {
+  } = e, p = $(e, W), {
     requestedEnter: d,
-    onExited: a
-  } = F(), s = u.useRef(!0);
+    onExited: s
+  } = I(), i = u.useRef(!0);
   u.useEffect(() => {
-    d && s.current && (s.current = !1);
+    d && i.current && (i.current = !1);
   }, [d]);
-  const t = u.useCallback((h) => {
-    h.animationName === _ ? (a(), s.current = !0) : h.animationName === o && (s.current = !1);
-  }, [a, _, o]);
-  return /* @__PURE__ */ i("div", $({
-    onAnimationEnd: t,
-    className: z(r, d ? c : f)
+  const N = u.useCallback((t) => {
+    t.animationName === _ ? (s(), i.current = !0) : t.animationName === n && (i.current = !1);
+  }, [s, _, n]);
+  return /* @__PURE__ */ a("div", z({
+    onAnimationEnd: N,
+    className: D(r, d ? c : f)
   }, p, {
-    children: e
+    children: o
   }));
 }
-process.env.NODE_ENV !== "production" && (g.propTypes = {
+process.env.NODE_ENV !== "production" && (b.propTypes = {
   children: l.node,
   className: l.string,
   enterAnimationName: l.string,
@@ -54,8 +54,8 @@ process.env.NODE_ENV !== "production" && (g.propTypes = {
   exitAnimationName: l.string,
   exitClassName: l.string
 });
-const W = "_tooltip_1dujm_1", m = {
-  tooltip: W,
+const B = "_tooltip_1dujm_1", m = {
+  tooltip: B,
   "tooltip--small-padding": "_tooltip--small-padding_1dujm_5",
   "tooltip--normal-padding": "_tooltip--normal-padding_1dujm_8",
   "tooltip--white-theme": "_tooltip--white-theme_1dujm_11",
@@ -65,69 +65,71 @@ const W = "_tooltip_1dujm_1", m = {
   "tooltip--open-animation": "_tooltip--open-animation_1dujm_1",
   "tooltip--anim-close": "_tooltip--anim-close_1dujm_23",
   "tooltip--close-animation": "_tooltip--close-animation_1dujm_1"
-}, U = ({
-  arialRole: n,
-  children: e,
+}, X = ({
+  arialRole: e,
+  children: o,
   className: r,
-  disableHoverListener: o,
+  disableHoverListener: n,
   onClose: c,
   padding: _ = "small",
   position: f = "bottom",
   open: p,
   theme: d = "black",
-  title: a,
-  ...s
+  title: s,
+  onTargetCreated: i,
+  ...N
 }) => {
-  const t = v(null), [h, N] = P(p || !1);
-  let j = h;
+  const t = R(null), [y, h] = T(p || !1);
+  let j = y;
   E(() => {
-    N(p || !1);
+    h(p || !1);
   }, [p]);
-  const C = R(e) ? e : /* @__PURE__ */ i("span", { children: e });
-  !a && a !== 0 && (j = !1);
-  const b = () => {
-    c == null || c(), !o && N(!1);
+  const A = q(o) ? o : /* @__PURE__ */ a("span", { children: o });
+  !s && s !== 0 && (j = !1);
+  const k = () => {
+    c == null || c(), !n && h(!1);
   };
   E(() => {
-    var A;
+    var C;
     if (t != null && t.current) {
-      const x = (A = t == null ? void 0 : t.current) == null ? void 0 : A.parentElement;
-      x && (o || (x.onpointerenter = () => N(!0), x.onpointerleave = () => N(!1)));
+      i == null || i(t == null ? void 0 : t.current);
+      const x = (C = t == null ? void 0 : t.current) == null ? void 0 : C.parentElement;
+      x && (n || (x.onpointerenter = () => h(!0), x.onpointerleave = () => h(!1)));
     }
-  }, [t, o]);
-  const y = {
+  }, [t, n]);
+  const w = {
     padding: f.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
     zIndex: 1
-  }, T = [
+  }, S = [
     m.tooltip,
     m[`tooltip--${d}-theme`],
     m[`tooltip--${_}-padding`],
     r || ""
-  ].join(" ").trim(), k = {
-    ...C.props,
+  ].join(" ").trim(), g = {
+    ...A.props,
     ref: t
   };
-  return /* @__PURE__ */ w(S, { children: [
-    q(C, k),
-    /* @__PURE__ */ i(
-      O,
+  return /* @__PURE__ */ v(P, { children: [
+    M(A, g),
+    /* @__PURE__ */ a(
+      V,
       {
-        ...s,
+        ...N,
         open: j,
         anchor: t == null ? void 0 : t.current,
         disablePortal: !0,
-        style: y,
-        role: n,
+        style: w,
+        role: e,
         placement: f,
-        children: /* @__PURE__ */ i(
-          g,
+        children: /* @__PURE__ */ a(
+          b,
           {
             className: m["tooltip--animation"],
             enterClassName: m["tooltip--anim-open"],
             exitClassName: m["tooltip--anim-close"],
             enterAnimationName: "tooltip--open-animation",
             exitAnimationName: "tooltip--close-animation",
-            children: /* @__PURE__ */ i("div", { className: T, children: /* @__PURE__ */ i(D, { onClickAway: b, children: /* @__PURE__ */ i("div", { children: a }) }) })
+            children: /* @__PURE__ */ a("div", { className: S, children: /* @__PURE__ */ a(F, { onClickAway: k, children: /* @__PURE__ */ a("div", { children: s }) }) })
           }
         )
       }
@@ -135,5 +137,5 @@ const W = "_tooltip_1dujm_1", m = {
   ] });
 };
 export {
-  U as Tooltip
+  X as Tooltip
 };

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -19,7 +19,9 @@ declare const meta: {
         position?: import('@floating-ui/utils').Placement | undefined;
         arialRole?: import('react').AriaRole | undefined;
         className?: string | undefined;
+        style?: import('react').CSSProperties | undefined;
         'data-testid'?: string | undefined;
+        onTargetCreated?: ((e: HTMLElement) => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/main.d.ts

@@ -7,6 +7,7 @@ export * from './components/Button/Button';
 export * from './components/Checkbox/Checkbox';
 export * from './components/Chip/Chip';
 export * from './components/Dialog/Dialog';
+export * from './components/EllipsisTooltip/EllipsisTooltip';
 export * from './components/Icon/Icon';
 export * from './components/IconButton/IconButton';
 export * from './components/Input/Input';

package/dist/main.js

@@ -3,74 +3,76 @@ import { Button as p } from "./components/Button/Button.js";
 import { Checkbox as f } from "./components/Checkbox/Checkbox.js";
 import { C as m, T as n } from "./Toggle-BXcLAMNy.js";
 import { Dialog as i } from "./components/Dialog/Dialog.js";
-import { FamilyAndIcons as s, Icon as c } from "./components/Icon/Icon.js";
-import { IconButton as S } from "./components/IconButton/IconButton.js";
-import { Input as d } from "./components/Input/Input.js";
-import { InputSearch as k } from "./components/InputSearch/InputSearch.js";
-import { LoadingSpinner as I } from "./components/LoadingSpinner/LoadingSpinner.js";
-import { PageHeader as y } from "./components/PageHeader/PageHeader.js";
-import { Pagination as P, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
-import { Select as G, SelectOption as v } from "./components/Select/Select.js";
-import { Skeleton as F, SkeletonCircle as L, SkeletonTable as O } from "./components/Skeleton/Skeleton.js";
-import { Snackbar as q } from "./components/Snackbar/Snackbar.js";
-import { SortTooltip as z, sortTooltipDefaultTranslations as E } from "./components/SortTooltip/SortTooltip.js";
-import { Stepper as K } from "./components/Stepper/Stepper.js";
-import { TBody as N, THead as Q, Table as R, Td as U, Th as V, Tr as W } from "./components/Table/Table.js";
-import { Tabs as Y } from "./components/Tabs/Tabs.js";
-import { TextDisplay as _ } from "./components/TextDisplay/TextDisplay.js";
-import { Toggle as oo } from "./components/Toggle/Toggle.js";
-import { G as eo } from "./Group-B3p31ftp.js";
-import { Tooltip as po } from "./components/Tooltip/Tooltip.js";
-import { Typography as fo } from "./components/Typography/Typography.js";
-import { SnackbarContext as mo, SnackbarProvider as no, useSnackbar as lo } from "./contexts/SnackbarProvider/SnackbarProvider.js";
-import { default as To } from "./components/Dialog/DialogTitle.js";
-import { default as co } from "./components/Dialog/Content.js";
-import { default as So } from "./components/Dialog/Actions.js";
-import { Tab as bo } from "./components/Tabs/Tab.js";
-import { TabPanel as Co } from "./components/Tabs/TabPanel.js";
+import { EllipsisTooltip as s } from "./components/EllipsisTooltip/EllipsisTooltip.js";
+import { FamilyAndIcons as g, Icon as S } from "./components/Icon/Icon.js";
+import { IconButton as d } from "./components/IconButton/IconButton.js";
+import { Input as k } from "./components/Input/Input.js";
+import { InputSearch as I } from "./components/InputSearch/InputSearch.js";
+import { LoadingSpinner as y } from "./components/LoadingSpinner/LoadingSpinner.js";
+import { PageHeader as P } from "./components/PageHeader/PageHeader.js";
+import { Pagination as B, paginationDefaultTranslations as G } from "./components/Pagination/Pagination.js";
+import { Select as H, SelectOption as E } from "./components/Select/Select.js";
+import { Skeleton as L, SkeletonCircle as O, SkeletonTable as j } from "./components/Skeleton/Skeleton.js";
+import { Snackbar as w } from "./components/Snackbar/Snackbar.js";
+import { SortTooltip as J, sortTooltipDefaultTranslations as K } from "./components/SortTooltip/SortTooltip.js";
+import { Stepper as N } from "./components/Stepper/Stepper.js";
+import { TBody as R, THead as U, Table as V, Td as W, Th as X, Tr as Y } from "./components/Table/Table.js";
+import { Tabs as _ } from "./components/Tabs/Tabs.js";
+import { TextDisplay as oo } from "./components/TextDisplay/TextDisplay.js";
+import { Toggle as eo } from "./components/Toggle/Toggle.js";
+import { G as po } from "./Group-B3p31ftp.js";
+import { Tooltip as fo } from "./components/Tooltip/Tooltip.js";
+import { Typography as mo } from "./components/Typography/Typography.js";
+import { SnackbarContext as lo, SnackbarProvider as io, useSnackbar as To } from "./contexts/SnackbarProvider/SnackbarProvider.js";
+import { default as co } from "./components/Dialog/DialogTitle.js";
+import { default as So } from "./components/Dialog/Content.js";
+import { default as bo } from "./components/Dialog/Actions.js";
+import { Tab as Co } from "./components/Tabs/Tab.js";
+import { TabPanel as ho } from "./components/Tabs/TabPanel.js";
 export {
-  So as Actions,
+  bo as Actions,
   e as Advice,
   p as Button,
   f as Checkbox,
   m as Chip,
-  co as Content,
+  So as Content,
   i as Dialog,
-  To as DialogTitle,
-  s as FamilyAndIcons,
-  c as Icon,
-  S as IconButton,
-  d as Input,
-  k as InputSearch,
-  I as LoadingSpinner,
-  y as PageHeader,
-  P as Pagination,
-  G as Select,
-  v as SelectOption,
-  F as Skeleton,
-  L as SkeletonCircle,
-  O as SkeletonTable,
-  q as Snackbar,
-  mo as SnackbarContext,
-  no as SnackbarProvider,
-  z as SortTooltip,
-  K as Stepper,
-  N as TBody,
-  Q as THead,
-  bo as Tab,
-  Co as TabPanel,
-  R as Table,
-  Y as Tabs,
-  U as Td,
-  _ as TextDisplay,
-  V as Th,
-  oo as Toggle,
-  eo as ToggleGroup,
+  co as DialogTitle,
+  s as EllipsisTooltip,
+  g as FamilyAndIcons,
+  S as Icon,
+  d as IconButton,
+  k as Input,
+  I as InputSearch,
+  y as LoadingSpinner,
+  P as PageHeader,
+  B as Pagination,
+  H as Select,
+  E as SelectOption,
+  L as Skeleton,
+  O as SkeletonCircle,
+  j as SkeletonTable,
+  w as Snackbar,
+  lo as SnackbarContext,
+  io as SnackbarProvider,
+  J as SortTooltip,
+  N as Stepper,
+  R as TBody,
+  U as THead,
+  Co as Tab,
+  ho as TabPanel,
+  V as Table,
+  _ as Tabs,
+  W as Td,
+  oo as TextDisplay,
+  X as Th,
+  eo as Toggle,
+  po as ToggleGroup,
   n as ToggleGroupItem,
-  po as Tooltip,
-  W as Tr,
-  fo as Typography,
-  A as paginationDefaultTranslations,
-  E as sortTooltipDefaultTranslations,
-  lo as useSnackbar
+  fo as Tooltip,
+  Y as Tr,
+  mo as Typography,
+  G as paginationDefaultTranslations,
+  K as sortTooltipDefaultTranslations,
+  To as useSnackbar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.29",
+  "version": "0.0.1-alpha.30",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",