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

package/dist/Dialog.module-W7UCXlf3.js

@@ -0,0 +1,29 @@
+import './assets/Dialog.css';
+const _ = "_dialog_1vpwu_78", p = "_dialog__backdrop_1vpwu_88", a = "_dialog__panel_1vpwu_96", o = "_dialog__title_1vpwu_112", u = "_dialog__subtitle_1vpwu_119", t = "_dialog__divider_1vpwu_123", y = "_dialog__actions_1vpwu_137", g = {
+  "u-typography-h1": "_u-typography-h1_1vpwu_1",
+  "u-typography-h2": "_u-typography-h2_1vpwu_8",
+  "u-typography-h3": "_u-typography-h3_1vpwu_15",
+  "u-typography-h4": "_u-typography-h4_1vpwu_22",
+  "u-typography-h5": "_u-typography-h5_1vpwu_29",
+  "u-typography-h6": "_u-typography-h6_1vpwu_36",
+  "u-typography-base": "_u-typography-base_1vpwu_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1vpwu_49",
+  "u-typography-base--xl": "_u-typography-base--xl_1vpwu_53",
+  "u-typography-base--lg": "_u-typography-base--lg_1vpwu_57",
+  "u-typography-base--sm": "_u-typography-base--sm_1vpwu_61",
+  "u-typography-base--bold": "_u-typography-base--bold_1vpwu_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1vpwu_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1vpwu_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1vpwu_74",
+  dialog: _,
+  dialog__backdrop: p,
+  dialog__panel: a,
+  dialog__title: o,
+  dialog__subtitle: u,
+  dialog__divider: t,
+  "dialog__close-icon": "_dialog__close-icon_1vpwu_127",
+  dialog__actions: y
+};
+export {
+  g as s
+};

package/dist/assets/Dialog.css

@@ -1 +1 @@
-._u-typography-h1_dnr14_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_dnr14_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_dnr14_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_dnr14_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_dnr14_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_dnr14_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_dnr14_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_dnr14_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_dnr14_53,._dialog__subtitle_dnr14_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_dnr14_57,._dialog__title--small_dnr14_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_dnr14_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_dnr14_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_dnr14_68{text-decoration:line-through}._u-typography-base--underlined_dnr14_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_dnr14_74{text-decoration:underline line-through}._dialog_dnr14_53{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;display:flex;align-items:center;justify-content:center;-webkit-box-align:center;-webkit-box-pack:center}._dialog__backdrop_dnr14_88{position:fixed;z-index:-1;width:100%;height:100%;background-color:rgb(var(--black-100-rgb),.05);-webkit-tap-highlight-color:transparent}._dialog__panel_dnr14_96{position:relative;display:flex;flex-direction:column;gap:8px;width:680px;padding:2rem;overflow:hidden;font-weight:500;color:var(--gray-90);text-align:start;background-color:var(--white-100);border:1px solid rgb(218,226,237);border-radius:8px;box-shadow:0 10px 20px rgb(var(--black-100-rgb),.2)}._dialog__title_dnr14_57{padding-bottom:1rem}._dialog__subtitle_dnr14_53{margin-top:1rem;font-family:Lato,sans-serif;color:var(--secondary-orange-dark);text-align:left;letter-spacing:0}._dialog__divider_dnr14_122{width:100%;border-top:1px solid var(--gray-10)}._dialog__close-icon_dnr14_126{position:absolute;top:27px;right:16px;padding:0;margin:0;cursor:pointer;background:none;border:none}._dialog__actions_dnr14_136{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}
+._u-typography-h1_1vpwu_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1vpwu_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1vpwu_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1vpwu_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1vpwu_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1vpwu_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1vpwu_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1vpwu_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1vpwu_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1vpwu_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1vpwu_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1vpwu_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1vpwu_68{text-decoration:line-through}._u-typography-base--underlined_1vpwu_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1vpwu_74{text-decoration:underline line-through}._dialog_1vpwu_78{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;display:flex;align-items:center;justify-content:center;-webkit-box-align:center;-webkit-box-pack:center}._dialog__backdrop_1vpwu_88{position:fixed;z-index:-1;width:100%;height:100%;background-color:rgb(var(--black-100-rgb),.05);-webkit-tap-highlight-color:transparent}._dialog__panel_1vpwu_96{position:relative;display:flex;flex-direction:column;gap:8px;width:680px;padding:2rem;overflow:hidden;font-weight:500;color:var(--gray-90);text-align:start;background-color:var(--white-100);border:1px solid rgb(218,226,237);border-radius:8px;box-shadow:0 10px 20px rgb(var(--black-100-rgb),.2)}._dialog__title_1vpwu_112{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem;color:#3f3d4be0}._dialog__subtitle_1vpwu_119{margin-top:1rem;color:#3f3d4be0}._dialog__divider_1vpwu_123{width:100%;border-top:1px solid var(--gray-10)}._dialog__close-icon_1vpwu_127{position:absolute;top:34px;right:32px;padding:0;margin:0;cursor:pointer;background:none;border:none}._dialog__actions_1vpwu_137{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}._dialog__actions_1vpwu_137 button{padding:0 1.5rem}._dialog__actions_1vpwu_137 button [class*=_u-typography-base]{font-weight:700}._dialog__actions_1vpwu_137 button[class*=_button--secondary]{color:#3f3d4be0}

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         label: import('react').ReactNode;
         loading?: boolean | undefined;
         leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;

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

@@ -5,7 +5,7 @@ declare const meta: {
     title: string;
     component: ({ open, onClose, title, subtitle, content, cancelAction, confirmAction, confirmLabel, cancelLabel, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         open: boolean;
         onClose: () => void;
         title?: import('react').ReactNode;

package/dist/components/Dialog/Actions.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { s as t } from "../../Dialog.module-BSeaj3tQ.js";
+import { s as t } from "../../Dialog.module-W7UCXlf3.js";
 const i = ({ children: s }) => /* @__PURE__ */ o("div", { className: t.dialog__actions, children: s });
 export {
   i as default

package/dist/components/Dialog/Backdrop.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { c as t } from "../../clsx-DB4S2d7J.js";
-import { s as m } from "../../Dialog.module-BSeaj3tQ.js";
+import { s as m } from "../../Dialog.module-W7UCXlf3.js";
 const l = s(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ({ ownerState: e, ...r }, o) => /* @__PURE__ */ a("div", { ...r, className: t(m.dialog__backdrop, r.className), ref: o })

package/dist/components/Dialog/CloseIconButton.js

@@ -1,15 +1,15 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Icon as t } from "../Icon/Icon.js";
-import { s as i } from "../../Dialog.module-BSeaj3tQ.js";
+import { Icon as i } from "../Icon/Icon.js";
+import { s as r } from "../../Dialog.module-W7UCXlf3.js";
 import { B as s } from "../../Button-BAljjMv3.js";
-const n = ({ handleOnClose: r }) => /* @__PURE__ */ o(
+const n = ({ handleOnClose: t }) => /* @__PURE__ */ o(
   s,
   {
-    className: i["dialog__close-icon"],
+    className: r["dialog__close-icon"],
     "aria-description": "Close dialog",
-    onClick: r,
+    onClick: t,
     "data-testid": "dialog-close-button",
-    children: /* @__PURE__ */ o(t, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
+    children: /* @__PURE__ */ o(i, { icon: "circle-xmark", size: 24, color: "#3F3D4B73" })
   }
 );
 export {

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

@@ -1,22 +1,25 @@
 import { default as DialogTitle, DialogTitleProps } from './DialogTitle';
 import { default as Content, DialogContentProps } from './Content';
 import { default as Actions, DialogActionProps } from './Actions';
+import { Icon } from '../Icon/Icon';
 import { ModalProps } from '@mui/base';
-import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 
 export type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
-export interface DialogProps extends ModalProps {
+export type DialogProps = Omit<ModalProps, 'onClose'> & {
     /** main content */
     children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
     /** display title label */
     dialogTitle: ReactNode;
     /** display subtitle */
     dialogSubtitle?: ReactNode;
+    /** icon to show in the left side of the title */
+    icon?: ComponentProps<typeof Icon>;
     /** callback for when close is clicked */
-    onClose?: () => void;
-}
+    onClose?: (reason?: CloseReason) => void;
+};
 declare const Dialog: {
-    ({ children, dialogTitle, dialogSubtitle, onClose, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, dialogTitle, dialogSubtitle, icon, onClose, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
     Title: import('react').FunctionComponent<DialogTitleProps>;
     Content: import('react').FunctionComponent<DialogContentProps>;
     Actions: import('react').FunctionComponent<DialogActionProps>;

package/dist/components/Dialog/Dialog.js

@@ -4,7 +4,7 @@ import ie from "./Actions.js";
 import ae from "./Backdrop.js";
 import le from "./CloseIconButton.js";
 import ce from "./Content.js";
-import { s as z } from "../../Dialog.module-BSeaj3tQ.js";
+import { s as z } from "../../Dialog.module-W7UCXlf3.js";
 import ee from "./DialogTitle.js";
 import { u as te, P as i, f as de, b as C, g as ue, a as fe, _ as pe, c as G, d as be, e as he } from "../../useSlotProps-C_I1kEHr.js";
 import * as f from "react";
@@ -62,25 +62,25 @@ function j(e) {
     disableRestoreFocus: s = !1,
     getTabbable: r = ke,
     isEnabled: a = Pe,
-    open: d
-  } = e, p = f.useRef(!1), x = f.useRef(null), h = f.useRef(null), m = f.useRef(null), R = f.useRef(null), g = f.useRef(!1), c = f.useRef(null), w = te(t.ref, c), I = f.useRef(null);
+    open: c
+  } = e, p = f.useRef(!1), x = f.useRef(null), h = f.useRef(null), m = f.useRef(null), R = f.useRef(null), g = f.useRef(!1), d = f.useRef(null), w = te(t.ref, d), I = f.useRef(null);
   f.useEffect(() => {
-    !d || !c.current || (g.current = !o);
-  }, [o, d]), f.useEffect(() => {
-    if (!d || !c.current)
+    !c || !d.current || (g.current = !o);
+  }, [o, c]), f.useEffect(() => {
+    if (!c || !d.current)
       return;
-    const l = A(c.current);
-    return c.current.contains(l.activeElement) || (c.current.hasAttribute("tabIndex") || (process.env.NODE_ENV !== "production" && console.error(["MUI: The modal content node does not accept focus.", 'For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".'].join(`
-`)), c.current.setAttribute("tabIndex", "-1")), g.current && c.current.focus()), () => {
+    const l = A(d.current);
+    return d.current.contains(l.activeElement) || (d.current.hasAttribute("tabIndex") || (process.env.NODE_ENV !== "production" && console.error(["MUI: The modal content node does not accept focus.", 'For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".'].join(`
+`)), d.current.setAttribute("tabIndex", "-1")), g.current && d.current.focus()), () => {
       s || (m.current && m.current.focus && (p.current = !0, m.current.focus()), m.current = null);
     };
-  }, [d]), f.useEffect(() => {
-    if (!d || !c.current)
+  }, [c]), f.useEffect(() => {
+    if (!c || !d.current)
       return;
-    const l = A(c.current), v = (E) => {
-      I.current = E, !(n || !a() || E.key !== "Tab") && l.activeElement === c.current && E.shiftKey && (p.current = !0, h.current && h.current.focus());
+    const l = A(d.current), v = (E) => {
+      I.current = E, !(n || !a() || E.key !== "Tab") && l.activeElement === d.current && E.shiftKey && (p.current = !0, h.current && h.current.focus());
     }, k = () => {
-      const E = c.current;
+      const E = d.current;
       if (E === null)
         return;
       if (!l.hasFocus() || !a() || p.current) {
@@ -96,10 +96,10 @@ function j(e) {
       if (!g.current)
         return;
       let T = [];
-      if ((l.activeElement === x.current || l.activeElement === h.current) && (T = r(c.current)), T.length > 0) {
+      if ((l.activeElement === x.current || l.activeElement === h.current) && (T = r(d.current)), T.length > 0) {
         var L, y;
-        const D = !!((L = I.current) != null && L.shiftKey && ((y = I.current) == null ? void 0 : y.key) === "Tab"), F = T[0], H = T[T.length - 1];
-        typeof F != "string" && typeof H != "string" && (D ? H.focus() : F.focus());
+        const D = !!((L = I.current) != null && L.shiftKey && ((y = I.current) == null ? void 0 : y.key) === "Tab"), F = T[0], B = T[T.length - 1];
+        typeof F != "string" && typeof B != "string" && (D ? B.focus() : F.focus());
       } else
         E.focus();
     };
@@ -110,7 +110,7 @@ function j(e) {
     return () => {
       clearInterval(M), l.removeEventListener("focusin", k), l.removeEventListener("keydown", v, !0);
     };
-  }, [o, n, s, a, d, r]);
+  }, [o, n, s, a, c, r]);
   const O = (l) => {
     m.current === null && (m.current = l.relatedTarget), g.current = !0, R.current = l.target;
     const v = t.props.onFocus;
@@ -120,7 +120,7 @@ function j(e) {
   };
   return /* @__PURE__ */ $(f.Fragment, {
     children: [/* @__PURE__ */ S("div", {
-      tabIndex: d ? 0 : -1,
+      tabIndex: c ? 0 : -1,
       onFocus: N,
       ref: x,
       "data-testid": "sentinelStart"
@@ -128,7 +128,7 @@ function j(e) {
       ref: w,
       onFocus: O
     }), /* @__PURE__ */ S("div", {
-      tabIndex: d ? 0 : -1,
+      tabIndex: c ? 0 : -1,
       onFocus: N,
       ref: h,
       "data-testid": "sentinelEnd"
@@ -194,7 +194,7 @@ function Ne(e) {
   const t = A(e);
   return t.body === e ? Y(e).innerWidth > t.documentElement.clientWidth : e.scrollHeight > e.clientHeight;
 }
-function _(e, t) {
+function U(e, t) {
   t ? e.setAttribute("aria-hidden", "true") : e.removeAttribute("aria-hidden");
 }
 function Q(e) {
@@ -207,8 +207,8 @@ function Ce(e) {
 function Z(e, t, o, n, s) {
   const r = [t, o, ...n];
   [].forEach.call(e.children, (a) => {
-    const d = r.indexOf(a) === -1, p = !Ce(a);
-    d && p && _(a, s);
+    const c = r.indexOf(a) === -1, p = !Ce(a);
+    c && p && U(a, s);
   });
 }
 function V(e, t) {
@@ -225,8 +225,8 @@ function Ie(e, t) {
         property: "padding-right",
         el: n
       }), n.style.paddingRight = `${Q(n) + a}px`;
-      const d = A(n).querySelectorAll(".mui-fixed");
-      [].forEach.call(d, (p) => {
+      const c = A(n).querySelectorAll(".mui-fixed");
+      [].forEach.call(c, (p) => {
         o.push({
           value: p.style.paddingRight,
           property: "padding-right",
@@ -238,8 +238,8 @@ function Ie(e, t) {
     if (n.parentNode instanceof DocumentFragment)
       r = A(n).body;
     else {
-      const a = n.parentElement, d = Y(n);
-      r = (a == null ? void 0 : a.nodeName) === "HTML" && d.getComputedStyle(a).overflowY === "scroll" ? a : n;
+      const a = n.parentElement, c = Y(n);
+      r = (a == null ? void 0 : a.nodeName) === "HTML" && c.getComputedStyle(a).overflowY === "scroll" ? a : n;
     }
     o.push({
       value: r.style.overflow,
@@ -259,9 +259,9 @@ function Ie(e, t) {
     o.forEach(({
       value: r,
       el: a,
-      property: d
+      property: c
     }) => {
-      r ? a.style.setProperty(d, r) : a.style.removeProperty(d);
+      r ? a.style.setProperty(c, r) : a.style.removeProperty(c);
     });
   };
 }
@@ -279,7 +279,7 @@ class Se {
     let n = this.modals.indexOf(t);
     if (n !== -1)
       return n;
-    n = this.modals.length, this.modals.push(t), t.modalRef && _(t.modalRef, !1);
+    n = this.modals.length, this.modals.push(t), t.modalRef && U(t.modalRef, !1);
     const s = Fe(o);
     Z(o, t.mount, t.modalRef, s, !0);
     const r = V(this.containers, (a) => a.container === o);
@@ -300,10 +300,10 @@ class Se {
       return n;
     const s = V(this.containers, (a) => a.modals.indexOf(t) !== -1), r = this.containers[s];
     if (r.modals.splice(r.modals.indexOf(t), 1), this.modals.splice(n, 1), r.modals.length === 0)
-      r.restore && r.restore(), t.modalRef && _(t.modalRef, o), Z(r.container, t.mount, t.modalRef, r.hiddenSiblings, !1), this.containers.splice(s, 1);
+      r.restore && r.restore(), t.modalRef && U(t.modalRef, o), Z(r.container, t.mount, t.modalRef, r.hiddenSiblings, !1), this.containers.splice(s, 1);
     else {
       const a = r.modals[r.modals.length - 1];
-      a.modalRef && _(a.modalRef, !1);
+      a.modalRef && U(a.modalRef, !1);
     }
     return n;
   }
@@ -327,23 +327,23 @@ function De(e) {
     manager: s = Oe,
     closeAfterTransition: r = !1,
     onTransitionEnter: a,
-    onTransitionExited: d,
+    onTransitionExited: c,
     children: p,
     onClose: x,
     open: h,
     rootRef: m
-  } = e, R = f.useRef({}), g = f.useRef(null), c = f.useRef(null), w = te(c, m), [I, O] = f.useState(!h), N = we(p);
+  } = e, R = f.useRef({}), g = f.useRef(null), d = f.useRef(null), w = te(d, m), [I, O] = f.useState(!h), N = we(p);
   let l = !0;
   (e["aria-hidden"] === "false" || e["aria-hidden"] === !1) && (l = !1);
-  const v = () => A(g.current), k = () => (R.current.modalRef = c.current, R.current.mount = g.current, R.current), M = () => {
+  const v = () => A(g.current), k = () => (R.current.modalRef = d.current, R.current.mount = g.current, R.current), M = () => {
     s.mount(k(), {
       disableScrollLock: n
-    }), c.current && (c.current.scrollTop = 0);
+    }), d.current && (d.current.scrollTop = 0);
   }, E = X(() => {
     const b = Ae(t) || v().body;
-    s.add(k(), b), c.current && M();
+    s.add(k(), b), d.current && M();
   }), T = f.useCallback(() => s.isTopModal(k()), [s]), L = X((b) => {
-    g.current = b, b && (h && T() ? M() : c.current && _(c.current, l));
+    g.current = b, b && (h && T() ? M() : d.current && U(d.current, l));
   }), y = f.useCallback(() => {
     s.remove(k(), l);
   }, [l, s]);
@@ -385,7 +385,7 @@ function De(e) {
       const b = () => {
         O(!1), a && a();
       }, u = () => {
-        O(!0), d && d(), r && y();
+        O(!0), c && c(), r && y();
       };
       return {
         onEnter: J(b, p == null ? void 0 : p.props.onEnter),
@@ -404,7 +404,7 @@ function Me(e) {
   return ue(oe, e);
 }
 fe(oe, ["root", "hidden", "backdrop"]);
-const Le = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"], He = (e) => {
+const Le = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"], Be = (e) => {
   const {
     open: t,
     exited: o
@@ -419,28 +419,28 @@ const Le = ["children", "closeAfterTransition", "container", "disableAutoFocus",
     children: s,
     closeAfterTransition: r = !1,
     container: a,
-    disableAutoFocus: d = !1,
+    disableAutoFocus: c = !1,
     disableEnforceFocus: p = !1,
     disableEscapeKeyDown: x = !1,
     disablePortal: h = !1,
     disableRestoreFocus: m = !1,
     disableScrollLock: R = !1,
     hideBackdrop: g = !1,
-    keepMounted: c = !1,
+    keepMounted: d = !1,
     onBackdropClick: w,
     open: I,
     slotProps: O = {},
     slots: N = {}
   } = t, l = pe(t, Le), v = C({}, t, {
     closeAfterTransition: r,
-    disableAutoFocus: d,
+    disableAutoFocus: c,
     disableEnforceFocus: p,
     disableEscapeKeyDown: x,
     disablePortal: h,
     disableRestoreFocus: m,
     disableScrollLock: R,
     hideBackdrop: g,
-    keepMounted: c
+    keepMounted: d
   }), {
     getRootProps: k,
     getBackdropProps: M,
@@ -454,44 +454,44 @@ const Le = ["children", "closeAfterTransition", "container", "disableAutoFocus",
   })), F = C({}, v, {
     exited: y,
     hasTransition: D
-  }), H = He(F), U = {};
-  if (s.props.tabIndex === void 0 && (U.tabIndex = "-1"), D) {
+  }), B = Be(F), _ = {};
+  if (s.props.tabIndex === void 0 && (_.tabIndex = "-1"), D) {
     const {
-      onEnter: B,
+      onEnter: H,
       onExited: W
     } = E();
-    U.onEnter = B, U.onExited = W;
+    _.onEnter = H, _.onExited = W;
   }
   const q = (n = N.root) != null ? n : "div", b = G({
     elementType: q,
     externalSlotProps: O.root,
     externalForwardedProps: l,
     getSlotProps: k,
-    className: H.root,
+    className: B.root,
     ownerState: F
   }), u = N.backdrop, P = G({
     elementType: u,
     externalSlotProps: O.backdrop,
-    getSlotProps: (B) => M(C({}, B, {
+    getSlotProps: (H) => M(C({}, H, {
       onClick: (W) => {
-        w && w(W), B != null && B.onClick && B.onClick(W);
+        w && w(W), H != null && H.onClick && H.onClick(W);
       }
     })),
-    className: H.backdrop,
+    className: B.backdrop,
     ownerState: F
   });
-  return !c && !I && (!D || y) ? null : /* @__PURE__ */ S(me, {
+  return !d && !I && (!D || y) ? null : /* @__PURE__ */ S(me, {
     ref: T,
     container: a,
     disablePortal: h,
     children: /* @__PURE__ */ $(q, C({}, b, {
       children: [!g && u ? /* @__PURE__ */ S(u, C({}, P)) : null, /* @__PURE__ */ S(j, {
         disableEnforceFocus: p,
-        disableAutoFocus: d,
+        disableAutoFocus: c,
         disableRestoreFocus: m,
         isEnabled: L,
         open: I,
-        children: /* @__PURE__ */ f.cloneElement(s, U)
+        children: /* @__PURE__ */ f.cloneElement(s, _)
       })]
     }))
   });
@@ -615,18 +615,19 @@ process.env.NODE_ENV !== "production" && (re.propTypes = {
     root: i.elementType
   })
 });
-const K = ({ children: e, dialogTitle: t, dialogSubtitle: o, onClose: n, ...s }) => /* @__PURE__ */ S(
+const K = ({ children: e, dialogTitle: t, dialogSubtitle: o, icon: n, onClose: s = () => {
+}, ...r }) => /* @__PURE__ */ S(
   re,
   {
-    onClose: n,
+    onClose: (a, c) => s(c),
     slots: { backdrop: ae },
-    ...s,
-    className: se(z.dialog, s.className),
+    ...r,
+    className: se(z.dialog, r.className),
     "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description",
     children: /* @__PURE__ */ $("section", { className: z.dialog__panel, children: [
-      !!n && /* @__PURE__ */ S(le, { handleOnClose: n }),
-      /* @__PURE__ */ S(ee, { title: t, subTitle: o }),
+      !!s && /* @__PURE__ */ S(le, { handleOnClose: () => s("closeButtonClick") }),
+      /* @__PURE__ */ S(ee, { title: t, subTitle: o, icon: n }),
       e
     ] })
   }

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

@@ -4,78 +4,16 @@ import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: {
-        ({ children, dialogTitle, dialogSubtitle, onClose, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, dialogTitle, dialogSubtitle, icon, onClose, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
         Title: import('react').FunctionComponent<import('./DialogTitle').DialogTitleProps>;
         Content: import('react').FunctionComponent<import('./Content').DialogContentProps>;
         Actions: import('react').FunctionComponent<import('./Actions').DialogActionProps>;
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
-        children: import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
-        dialogTitle: import('react').ReactNode;
-        dialogSubtitle?: import('react').ReactNode;
-        onClose?: (() => void) | undefined;
-        closeAfterTransition?: boolean | undefined;
-        container?: Element | (() => Element | null) | null | undefined;
-        disableAutoFocus?: boolean | undefined;
-        disableEnforceFocus?: boolean | undefined;
-        disableEscapeKeyDown?: boolean | undefined;
-        disablePortal?: boolean | undefined;
-        disableRestoreFocus?: boolean | undefined;
-        disableScrollLock?: boolean | undefined;
-        hideBackdrop?: boolean | undefined;
-        keepMounted?: boolean | undefined;
-        onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
-        onTransitionEnter?: (() => void) | undefined;
-        onTransitionExited?: (() => void) | undefined;
-        open: boolean;
-        slotProps?: {
-            root?: import('@mui/base').SlotComponentProps<"div", import('@mui/base').ModalRootSlotPropsOverrides, {
-                children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-                closeAfterTransition: boolean;
-                container?: Element | (() => Element | null) | null | undefined;
-                disableAutoFocus: boolean;
-                disableEnforceFocus: boolean;
-                disableEscapeKeyDown: boolean;
-                disablePortal: boolean;
-                disableRestoreFocus: boolean;
-                disableScrollLock: boolean;
-                hideBackdrop: boolean;
-                keepMounted: boolean;
-                onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
-                onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
-                onTransitionEnter?: (() => void) | undefined;
-                onTransitionExited?: (() => void) | undefined;
-                open: boolean;
-                slotProps?: any | undefined;
-                slots?: import('@mui/base').ModalSlots | undefined;
-                exited: boolean;
-            }> | undefined;
-            backdrop?: import('@mui/base').SlotComponentProps<"div", import('@mui/base').ModalBackdropSlotPropsOverrides, {
-                children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-                closeAfterTransition: boolean;
-                container?: Element | (() => Element | null) | null | undefined;
-                disableAutoFocus: boolean;
-                disableEnforceFocus: boolean;
-                disableEscapeKeyDown: boolean;
-                disablePortal: boolean;
-                disableRestoreFocus: boolean;
-                disableScrollLock: boolean;
-                hideBackdrop: boolean;
-                keepMounted: boolean;
-                onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
-                onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
-                onTransitionEnter?: (() => void) | undefined;
-                onTransitionExited?: (() => void) | undefined;
-                open: boolean;
-                slotProps?: any | undefined;
-                slots?: import('@mui/base').ModalSlots | undefined;
-                exited: boolean;
-            }> | undefined;
-        } | undefined;
-        slots?: import('@mui/base').ModalSlots | undefined;
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         color?: string | undefined;
         ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+        children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> & import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
         title?: string | undefined;
         style?: import('react').CSSProperties | undefined;
         className?: string | undefined;
@@ -84,6 +22,7 @@ declare const meta: {
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
+        open: boolean;
         content?: string | undefined;
         dir?: string | undefined;
         hidden?: boolean | undefined;
@@ -339,9 +278,72 @@ declare const meta: {
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        slotProps?: {
+            root?: import('@mui/base').SlotComponentProps<"div", import('@mui/base').ModalRootSlotPropsOverrides, {
+                children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+                closeAfterTransition: boolean;
+                container?: Element | (() => Element | null) | null | undefined;
+                disableAutoFocus: boolean;
+                disableEnforceFocus: boolean;
+                disableEscapeKeyDown: boolean;
+                disablePortal: boolean;
+                disableRestoreFocus: boolean;
+                disableScrollLock: boolean;
+                hideBackdrop: boolean;
+                keepMounted: boolean;
+                onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
+                onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
+                onTransitionEnter?: (() => void) | undefined;
+                onTransitionExited?: (() => void) | undefined;
+                open: boolean;
+                slotProps?: any | undefined;
+                slots?: import('@mui/base').ModalSlots | undefined;
+                exited: boolean;
+            }> | undefined;
+            backdrop?: import('@mui/base').SlotComponentProps<"div", import('@mui/base').ModalBackdropSlotPropsOverrides, {
+                children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+                closeAfterTransition: boolean;
+                container?: Element | (() => Element | null) | null | undefined;
+                disableAutoFocus: boolean;
+                disableEnforceFocus: boolean;
+                disableEscapeKeyDown: boolean;
+                disablePortal: boolean;
+                disableRestoreFocus: boolean;
+                disableScrollLock: boolean;
+                hideBackdrop: boolean;
+                keepMounted: boolean;
+                onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
+                onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
+                onTransitionEnter?: (() => void) | undefined;
+                onTransitionExited?: (() => void) | undefined;
+                open: boolean;
+                slotProps?: any | undefined;
+                slots?: import('@mui/base').ModalSlots | undefined;
+                exited: boolean;
+            }> | undefined;
+        } | undefined;
+        slots?: import('@mui/base').ModalSlots | undefined;
         key?: import('react').Key | null | undefined;
+        disablePortal?: boolean | undefined;
+        closeAfterTransition?: boolean | undefined;
+        container?: Element | (() => Element | null) | null | undefined;
+        disableAutoFocus?: boolean | undefined;
+        disableEnforceFocus?: boolean | undefined;
+        disableEscapeKeyDown?: boolean | undefined;
+        disableRestoreFocus?: boolean | undefined;
+        disableScrollLock?: boolean | undefined;
+        hideBackdrop?: boolean | undefined;
+        keepMounted?: boolean | undefined;
+        onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
+        onTransitionEnter?: (() => void) | undefined;
+        onTransitionExited?: (() => void) | undefined;
+        dialogTitle: import('react').ReactNode;
+        dialogSubtitle?: import('react').ReactNode;
+        icon?: import('../Icon/Icon').IconProps | undefined;
+        onClose?: ((reason?: import('./Dialog').CloseReason | undefined) => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
+export declare const WithIcon: Story;

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

@@ -1,11 +1,14 @@
-import { ReactNode } from 'react';
+import { Icon } from '../Icon/Icon';
+import { ComponentProps, ReactNode } from 'react';
 
 export interface DialogTitleProps {
     /** title to be displayed */
     title?: ReactNode;
     /** subtitle to be displayed */
     subTitle?: ReactNode;
+    /** icon to show in the left side of the title */
+    icon?: ComponentProps<typeof Icon>;
 }
 /** internal component only - used by the dialog */
-declare const DialogTitle: ({ title, subTitle }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: ({ title, subTitle, icon }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;
 export default DialogTitle;

package/dist/components/Dialog/DialogTitle.js

@@ -1,29 +1,35 @@
-import { jsxs as l, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { Typography as r } from "../Typography/Typography.js";
-import { s as a } from "../../Dialog.module-BSeaj3tQ.js";
-const n = ({ title: t, subTitle: i }) => /* @__PURE__ */ l(o, { children: [
-  /* @__PURE__ */ e(
-    r,
+import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { Icon as d } from "../Icon/Icon.js";
+import { Typography as i } from "../Typography/Typography.js";
+import { s as r } from "../../Dialog.module-W7UCXlf3.js";
+const g = ({ title: o, subTitle: t, icon: a }) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ l(
+    i,
     {
       element: "h1",
       elementProps: { id: "alert-dialog-title" },
-      variant: "h4",
-      className: a.dialog__title,
-      children: t
+      variant: "base-xxl",
+      className: r.dialog__title,
+      bold: !0,
+      children: [
+        a && /* @__PURE__ */ e(d, { ...a }),
+        o
+      ]
     }
   ),
-  /* @__PURE__ */ e("hr", { className: a.dialog__divider, "aria-hidden": !0 }),
-  i && /* @__PURE__ */ e(
-    r,
+  /* @__PURE__ */ e("hr", { className: r.dialog__divider, "aria-hidden": !0 }),
+  t && /* @__PURE__ */ e(
+    i,
     {
       element: "h2",
       elementProps: { id: "alert-dialog-description" },
-      variant: "h4",
-      className: a.dialog__subtitle,
-      children: i
+      variant: "base-xl",
+      className: r.dialog__subtitle,
+      bold: !0,
+      children: t
     }
   )
 ] });
 export {
-  n as default
+  g as default
 };

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

@@ -8,7 +8,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         title: import('react').ReactNode;
         style?: import('react').CSSProperties | undefined;

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         invert?: boolean | undefined;
         classNames?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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

@@ -25,7 +25,7 @@ declare const meta: {
         };
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

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

@@ -5,7 +5,7 @@ declare const meta: {
     title: string;
     component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         accept?: string | undefined;
         alt?: string | undefined;
         autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;

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

@@ -6,7 +6,7 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         legend?: import('react').ReactNode;
         error?: import('react').ReactNode;
         children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];

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

@@ -8,7 +8,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         title: import('react').ReactNode;
         open?: boolean | undefined;

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

@@ -12,7 +12,7 @@ declare const meta: {
             };
         };
     };
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         element?: import('react').ElementType | undefined;
         variant?: import('./Typography').VariantType | undefined;

package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts

@@ -12,7 +12,7 @@ declare const meta: {
         };
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/package.json

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

package/dist/Dialog.module-BSeaj3tQ.js

@@ -1,30 +0,0 @@
-import './assets/Dialog.css';
-const _ = "_dialog__subtitle_dnr14_53", a = "_dialog_dnr14_53", o = "_dialog__backdrop_dnr14_88", r = "_dialog__panel_dnr14_96", d = "_dialog__title_dnr14_57", p = "_dialog__divider_dnr14_122", t = "_dialog__actions_dnr14_136", g = {
-  "u-typography-h1": "_u-typography-h1_dnr14_1",
-  "u-typography-h2": "_u-typography-h2_dnr14_8",
-  "u-typography-h3": "_u-typography-h3_dnr14_15",
-  "u-typography-h4": "_u-typography-h4_dnr14_22",
-  "u-typography-h5": "_u-typography-h5_dnr14_29",
-  "u-typography-h6": "_u-typography-h6_dnr14_36",
-  "u-typography-base": "_u-typography-base_dnr14_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_dnr14_49",
-  "u-typography-base--xl": "_u-typography-base--xl_dnr14_53",
-  dialog__subtitle: _,
-  "u-typography-base--lg": "_u-typography-base--lg_dnr14_57",
-  "dialog__title--small": "_dialog__title--small_dnr14_57",
-  "u-typography-base--sm": "_u-typography-base--sm_dnr14_61",
-  "u-typography-base--bold": "_u-typography-base--bold_dnr14_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_dnr14_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_dnr14_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_dnr14_74",
-  dialog: a,
-  dialog__backdrop: o,
-  dialog__panel: r,
-  dialog__title: d,
-  dialog__divider: p,
-  "dialog__close-icon": "_dialog__close-icon_dnr14_126",
-  dialog__actions: t
-};
-export {
-  g as s
-};