@pismo/marola 1.0.0-beta.9 → 1.0.0

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

@@ -2,31 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 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?: string | undefined;
-        options?: T[] | undefined;
-        onChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: T) => void) | undefined;
-        infoMessage?: string | undefined;
-        errorMessage?: string | undefined;
-        leftIcon?: import('react').ReactNode;
-        rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
-        hideCharsCounter?: boolean | undefined;
-        classNameWrapper?: string | undefined;
-        classNameLabel?: string | undefined;
-        classNameInput?: string | undefined;
-        classNameInfoMessage?: string | undefined;
-        classNameErrorMessage?: string | undefined;
-        classNameCharsCounter?: string | undefined;
-        'data-testid-wrapper'?: string | undefined;
-        'data-testid-label'?: string | undefined;
-        'data-testid-input'?: string | undefined;
-        'data-testid-infoMessage'?: string | undefined;
-        'data-testid-errorMessage'?: string | undefined;
-        'data-testid-charsCounter'?: string | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends string | object>({ labelKey, valueKey, options, type, value, onChange, onInputChange, "data-testid-wrapper": dataTestId, ...props }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -35,6 +11,8 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
+export declare const WithObjectsOptions: Story;
+export declare const WithAHugeList: Story;
 export declare const WithLabel: Story;
 export declare const WithSearch: Story;
 export declare const WithPlaceholder: Story;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+type AvatarType = 'icon' | 'image' | 'text';
+type AvatarSize = 'default' | 'large' | 'small' | number;
+type AvatarShape = 'circle' | 'square';
+type AvatarCoreProps = {
+    type: AvatarType;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarCoreProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,51 @@
+import '../../assets/Avatar.css';
+import { jsxs as v, jsx as _ } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as y } from "react";
+import { c as d } from "../../clsx-DB4S2d7J.js";
+const m = "_avatar_4n12g_57", b = "_avatar__icon_4n12g_108", x = "_avatar__image_4n12g_108", f = "_avatar__text_4n12g_108", t = {
+  "u-typography-h1": "_u-typography-h1_4n12g_1",
+  "u-typography-h2": "_u-typography-h2_4n12g_8",
+  "u-typography-h3": "_u-typography-h3_4n12g_15",
+  "u-typography-h4": "_u-typography-h4_4n12g_22",
+  "u-typography-h5": "_u-typography-h5_4n12g_29",
+  "u-typography-h6": "_u-typography-h6_4n12g_36",
+  "u-typography-base": "_u-typography-base_4n12g_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_4n12g_49",
+  "u-typography-base--xl": "_u-typography-base--xl_4n12g_53",
+  "u-typography-base--lg": "_u-typography-base--lg_4n12g_57",
+  avatar: m,
+  "u-typography-base--sm": "_u-typography-base--sm_4n12g_61",
+  "u-typography-base--bold": "_u-typography-base--bold_4n12g_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_4n12g_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_4n12g_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_4n12g_74",
+  "avatar--large": "_avatar--large_4n12g_86",
+  "avatar--default": "_avatar--default_4n12g_90",
+  "avatar--small": "_avatar--small_4n12g_94",
+  "avatar--custom": "_avatar--custom_4n12g_98",
+  "avatar--circle": "_avatar--circle_4n12g_102",
+  "avatar--square": "_avatar--square_4n12g_105",
+  avatar__icon: b,
+  avatar__image: x,
+  avatar__text: f
+}, $ = c((h, n) => {
+  const { type: e, size: a = "default", shape: g = "circle", children: s, className: o, "data-testid": u } = h, r = typeof a == "number", i = y(
+    () => ({
+      width: r ? a : void 0,
+      height: r ? a : void 0,
+      "--avatar-custom-size": r ? `${a}px` : void 0
+    }),
+    [a, r]
+  ), p = r ? "custom" : a, l = y(
+    () => d(t.avatar, t[`avatar--${p}`], t[`avatar--${g}`], o),
+    [p, g, o]
+  );
+  return /* @__PURE__ */ v("div", { ref: n, style: i, className: l, "data-testid": u, children: [
+    e === "icon" && /* @__PURE__ */ _("span", { className: t.avatar__icon, children: s }),
+    e === "image" && /* @__PURE__ */ _("div", { className: t.avatar__image, children: /* @__PURE__ */ _("img", { src: s, alt: "avatar" }) }),
+    e === "text" && /* @__PURE__ */ _("span", { className: t.avatar__text, children: s })
+  ] });
+});
+export {
+  $ as Avatar
+};

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

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<{
+        type: "icon" | "image" | "text";
+        size?: (number | "default" | "small" | "large") | undefined;
+        shape?: ("circle" | "square") | undefined;
+        children: import('react').ReactNode;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Icon: Story;
+export declare const Image: Story;
+export declare const Text: Story;
+export declare const CustomSize: Story;
+export declare const LargeSquare: Story;
+export declare const SmallCircle: Story;

package/dist/components/Button/Button.d.ts

@@ -16,6 +16,8 @@ type ButtonCoreProps = {
     variant?: Variant;
     /** mui base button props */
     muiButtonBaseProps?: MUIButtonBaseProps;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
 };
 interface ButtonPropsWithLink extends ButtonCoreProps {
     /** link for component to navigate to, if provide component will be an anchor */

package/dist/components/Button/Button.js

@@ -1,10 +1,10 @@
 import '../../assets/Button.css';
-import { jsx as p, jsxs as b } from "react/jsx-runtime";
-import { forwardRef as l, useMemo as x } from "react";
-import { c } from "../../clsx-DB4S2d7J.js";
-import { LoadingSpinner as v } from "../LoadingSpinner/LoadingSpinner.js";
-import { B as m } from "../../Button-DiLqcAJG.js";
-const f = "_button_dxo5v_57", t = {
+import { jsx as p, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as x, useMemo as c } from "react";
+import { c as v } from "../../clsx-DB4S2d7J.js";
+import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
+import { B as f } from "../../Button-BAljjMv3.js";
+const k = "_button_dxo5v_57", t = {
   "u-typography-h1": "_u-typography-h1_dxo5v_1",
   "u-typography-h2": "_u-typography-h2_dxo5v_8",
   "u-typography-h3": "_u-typography-h3_dxo5v_15",
@@ -15,7 +15,7 @@ const f = "_button_dxo5v_57", t = {
   "u-typography-base--xxl": "_u-typography-base--xxl_dxo5v_49",
   "u-typography-base--xl": "_u-typography-base--xl_dxo5v_53",
   "u-typography-base--lg": "_u-typography-base--lg_dxo5v_57",
-  button: f,
+  button: k,
   "u-typography-base--sm": "_u-typography-base--sm_dxo5v_61",
   "u-typography-base--bold": "_u-typography-base--bold_dxo5v_65",
   "u-typography-base--strikethrough": "_u-typography-base--strikethrough_dxo5v_68",
@@ -25,41 +25,43 @@ const f = "_button_dxo5v_57", t = {
   "button--secondary": "_button--secondary_dxo5v_101",
   "button--quick": "_button--quick_dxo5v_118",
   "button__loading-container": "_button__loading-container_dxo5v_138"
-}, P = l((y, _) => {
+}, S = x((y, _) => {
   const {
     onClick: u,
-    link: n,
-    loading: e,
+    link: e,
+    loading: n,
     children: a,
     type: s = "button",
     disabled: h,
     className: r,
     variant: o = "primary",
-    muiButtonBaseProps: d
-  } = y, g = {
+    muiButtonBaseProps: d,
+    "data-testid": g
+  } = y, i = {
     invert: o === "secondary" || o === "quick"
-  }, i = x(
-    () => c([t.button, t[`button--${o}`], r]),
+  }, b = c(
+    () => v([t.button, t[`button--${o}`], r]),
     [r, o]
   );
   return /* @__PURE__ */ p(
-    m,
+    f,
     {
       type: s,
-      href: n,
+      href: e,
       onClick: u,
       disabled: h,
-      className: i,
+      className: b,
       ref: _,
+      "data-testid": g,
       ...d ?? {},
-      children: e ? /* @__PURE__ */ b("div", { className: t["button__loading-container"], children: [
-        /* @__PURE__ */ p(v, { ...g }),
+      children: n ? /* @__PURE__ */ l("div", { className: t["button__loading-container"], children: [
+        /* @__PURE__ */ p(m, { ...i }),
         a
       ] }) : a
     }
   );
 });
 export {
-  P as Button,
-  P as default
+  S as Button,
+  S as default
 };

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

@@ -1,14 +1,14 @@
-import { AdornmentSlotProps } from '../../main';
+import { AdornmentProps } from '../../main';
 import { ReactNode } from 'react';
 
 export type Variant = 'default' | 'contained' | 'outlined';
-type ChipProps = {
+export type ChipProps = {
     /** Main content to display, typically just some text */
     label: ReactNode;
     /** Whether to show loading state (skeleton) */
     loading?: boolean;
     /** Left icon to display */
-    leftAdornment?: AdornmentSlotProps;
+    leftAdornment?: AdornmentProps;
     /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the chip wrapper */
     'data-testid'?: string;
     /** Functionality to perform when the main body of the chip is clicked */
@@ -27,5 +27,7 @@ type ChipProps = {
     /** Dataset test id only used for tests, used to hook onto the loading skeleton component for this chip */
     'data-testid-skeleton'?: string;
 };
+export type ChipWrapperProps = Pick<ChipProps, 'data-testid' | 'onClickContent' | 'disabled' | 'className' | 'variant'> & {
+    children?: ReactNode;
+};
 export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<unknown>>;
-export {};

package/dist/components/Chip/Chip.js

@@ -4,17 +4,21 @@ import "../../clsx-DB4S2d7J.js";
 import "../Adornment/Adornment.js";
 import "../Icon/Icon.js";
 import "../Typography/Typography.js";
+import "../Input/Input.js";
+import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { C as k } from "../../Toggle-f5brSwAI.js";
-import "../Dialog/Backdrop.js";
+import { C as u } from "../../Toggle-MfR7l8Wn.js";
+import "../Dialog/Dialog.js";
+import "../Skeleton/Skeleton.js";
 import "../IconButton/IconButton.js";
+import "../InputSearch/InputSearch.js";
 import "../Select/Select.js";
-import "../Skeleton/Skeleton.js";
+import "../Popover/Popover.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-B3p31ftp.js";
+import "../../Group-DspH8hyO.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
-import "../../Button-DiLqcAJG.js";
+import "../../Button-BAljjMv3.js";
 export {
-  k as Chip
+  u as Chip
 };

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

@@ -2,24 +2,12 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<{
-        label: import('react').ReactNode;
-        loading?: boolean | undefined;
-        leftAdornment?: import('../Adornment/Adornment').AdornmentSlotProps | undefined;
-        'data-testid'?: string | undefined;
-        onClickContent?: (() => void) | undefined;
-        onClickRemove?: (() => void) | undefined;
-        disabled?: boolean | undefined;
-        className?: string | undefined;
-        'className-skeleton'?: string | undefined;
-        variant?: import('./Chip').Variant | undefined;
-        'data-testid-skeleton'?: string | undefined;
-    } & import('react').RefAttributes<unknown>>;
+    component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
     tags: string[];
     decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         label: import('react').ReactNode;
         loading?: boolean | undefined;
-        leftAdornment?: import('../Adornment/Adornment').AdornmentSlotProps | undefined;
+        leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;
         'data-testid'?: string | undefined;
         onClickContent?: (() => void) | undefined;
         onClickRemove?: (() => void) | undefined;
@@ -36,7 +24,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const Clickable: Story;
+export declare const Disabled: Story;
 export declare const ClickableWithRemove: Story;
+export declare const ClickableOnlyRemove: Story;
 export declare const FullDefault: Story;
 export declare const FullOutlined: Story;
 export declare const FullContained: Story;
+export declare const FullContainedCustomIcon: Story;

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+export interface ConfirmationDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    content?: ReactNode;
+    confirmAction: () => void;
+    cancelAction: () => void;
+}
+export declare const ConfirmationDialog: ({ open, onClose, title, subtitle, content, cancelAction, confirmAction, confirmLabel, cancelLabel, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfirmationDialog/ConfirmationDialog.js

@@ -0,0 +1,37 @@
+import { jsx as o, jsxs as i, Fragment as f } from "react/jsx-runtime";
+import { Button as n } from "../Button/Button.js";
+import { Dialog as s } from "../Dialog/Dialog.js";
+import { Typography as t } from "../Typography/Typography.js";
+import g from "../Dialog/Content.js";
+import C from "../Dialog/Actions.js";
+const T = ({
+  open: l,
+  onClose: e,
+  title: m,
+  subtitle: c,
+  content: r,
+  cancelAction: d,
+  confirmAction: a,
+  confirmLabel: h,
+  cancelLabel: p
+}) => /* @__PURE__ */ o(
+  s,
+  {
+    open: l,
+    dialogTitle: m,
+    dialogSubtitle: c,
+    onClose: () => {
+      e();
+    },
+    children: /* @__PURE__ */ i(f, { children: [
+      r && /* @__PURE__ */ o(g, { children: r }),
+      /* @__PURE__ */ i(C, { children: [
+        /* @__PURE__ */ o(n, { variant: "secondary", onClick: () => d(), children: /* @__PURE__ */ o(t, { children: p }) }),
+        /* @__PURE__ */ o(n, { onClick: () => a(), children: /* @__PURE__ */ o(t, { children: h }) })
+      ] })
+    ] })
+  }
+);
+export {
+  T as ConfirmationDialog
+};

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

@@ -0,0 +1,23 @@
+import { ConfirmationDialogProps } from '../../main';
+import { StoryObj } from '@storybook/react';
+
+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, {
+        open: boolean;
+        onClose: () => void;
+        title?: import('react').ReactNode;
+        subtitle?: import('react').ReactNode;
+        confirmLabel: string;
+        cancelLabel: string;
+        content?: import('react').ReactNode;
+        confirmAction: () => void;
+        cancelAction: () => void;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithContent: Story;

package/dist/components/ConfirmationDialog/ConfirmationModal.test.d.ts

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

package/dist/components/Description/Description.d.ts

@@ -0,0 +1,21 @@
+import { VariantType } from '../Typography/Typography.tsx';
+
+export interface DescriptionProps {
+    /** Description label */
+    label: React.ReactNode;
+    /** Description value */
+    value: React.ReactNode;
+    /** Renders skeleton when true */
+    isLoading?: boolean;
+    /** Description label and value color */
+    color?: string;
+    /** Sets the data-testid prefix for label, value and skeletons */
+    'data-testid'?: string;
+    /** Sets the label and value onto the same line */
+    inline?: boolean;
+    /** Sets the label size variant */
+    labelVariant?: VariantType;
+    /** Sets the value size variant */
+    valueVariant?: VariantType;
+}
+export declare const Description: ({ label, value, isLoading, color, "data-testid": dataTestId, inline, labelVariant, valueVariant, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Description/Description.js

@@ -0,0 +1,66 @@
+import '../../assets/Description.css';
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { c as g } from "../../clsx-DB4S2d7J.js";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
+import { Typography as _ } from "../Typography/Typography.js";
+const l = "_container_he0z3_78", a = {
+  "u-typography-h1": "_u-typography-h1_he0z3_1",
+  "u-typography-h2": "_u-typography-h2_he0z3_8",
+  "u-typography-h3": "_u-typography-h3_he0z3_15",
+  "u-typography-h4": "_u-typography-h4_he0z3_22",
+  "u-typography-h5": "_u-typography-h5_he0z3_29",
+  "u-typography-h6": "_u-typography-h6_he0z3_36",
+  "u-typography-base": "_u-typography-base_he0z3_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_he0z3_49",
+  "u-typography-base--xl": "_u-typography-base--xl_he0z3_53",
+  "u-typography-base--lg": "_u-typography-base--lg_he0z3_57",
+  "u-typography-base--sm": "_u-typography-base--sm_he0z3_61",
+  "u-typography-base--bold": "_u-typography-base--bold_he0z3_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_he0z3_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_he0z3_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_he0z3_74",
+  container: l,
+  "container--text": "_container--text_he0z3_82",
+  "container--inline": "_container--inline_he0z3_85"
+}, m = ({
+  label: s,
+  value: n,
+  isLoading: r,
+  color: h = "var(--gray-95)",
+  "data-testid": e = "Description",
+  inline: p,
+  labelVariant: i = "base",
+  valueVariant: o
+}) => /* @__PURE__ */ u(
+  "div",
+  {
+    className: g([a.container, { [a["container--inline"]]: p }]),
+    "data-testid": `${e}-container`,
+    children: [
+      /* @__PURE__ */ t(
+        _,
+        {
+          color: h,
+          className: a["container--text"],
+          variant: i,
+          "data-testid": `${e}-label`,
+          children: r ? /* @__PURE__ */ t(y, { style: { width: 70, marginBottom: 2 }, "data-testid": `${e}-skeletonLabel` }) : s
+        }
+      ),
+      /* @__PURE__ */ t(
+        _,
+        {
+          className: a["container--text"],
+          bold: !0,
+          color: h,
+          variant: o || (p ? "base" : "base-lg"),
+          "data-testid": `${e}-value`,
+          children: r ? /* @__PURE__ */ t(y, { style: { width: 100 }, "data-testid": `${e}-skeletonValue` }) : n || "-"
+        }
+      )
+    ]
+  }
+);
+export {
+  m as Description
+};

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

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, value, isLoading, color, "data-testid": dataTestId, inline, labelVariant, valueVariant, }: import('./Description').DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithColor: Story;
+export declare const InLine: Story;
+export declare const InLineWithColor: Story;
+export declare const Loading: Story;
+export declare const LoadingInline: Story;
+export declare const InLineWithButton: Story;
+export declare const WithButton: Story;
+export declare const WithSmallSize: Story;
+export declare const WithLargeSize: Story;

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

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

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-DFcZsVAd.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.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-declare const Backdrop: import('react').ForwardRefExoticComponent<{
-    open?: boolean | undefined;
+import { ModalBackdropSlotProps } from '@mui/base';
+
+declare const Backdrop: import('react').ForwardRefExoticComponent<ModalBackdropSlotProps & {
     className: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default Backdrop;

package/dist/components/Dialog/Backdrop.js

@@ -1,10 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { s as e } from "../../Dialog.module-DFcZsVAd.js";
-const i = t((o, r) => {
-  const { open: m, className: p, ...s } = o;
-  return /* @__PURE__ */ a("div", { className: e.dialog__backdrop, ref: r, ...s });
-});
+import { forwardRef as s } from "react";
+import { c as t } from "../../clsx-DB4S2d7J.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 })
+);
 export {
-  i as default
+  l as default
 };

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

@@ -1,6 +1,5 @@
 export interface CloseIconButtonProps {
     handleOnClose: () => void;
-    className: string;
 }
-declare const CloseIconButton: ({ handleOnClose, className }: CloseIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const CloseIconButton: ({ handleOnClose }: CloseIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CloseIconButton;

package/dist/components/Dialog/CloseIconButton.js

@@ -1,20 +1,17 @@
-import { jsx as s } from "react/jsx-runtime";
-import { Icon as r } from "../Icon/Icon.js";
-import { s as t } from "../../Dialog.module-DFcZsVAd.js";
-import { B as a } from "../../Button-DiLqcAJG.js";
-const d = ({ handleOnClose: i, className: o }) => {
-  const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
-  return /* @__PURE__ */ s(
-    a,
-    {
-      className: l,
-      "aria-description": "Close dialog",
-      onClick: i,
-      "data-testid": "dialog-close-button",
-      children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
-    }
-  );
-};
+import { jsx as o } from "react/jsx-runtime";
+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: t }) => /* @__PURE__ */ o(
+  s,
+  {
+    className: r["dialog__close-icon"],
+    "aria-description": "Close dialog",
+    onClick: t,
+    "data-testid": "dialog-close-button",
+    children: /* @__PURE__ */ o(i, { icon: "circle-xmark", size: 24, color: "#3F3D4B73" })
+  }
+);
 export {
-  d as default
+  n as default
 };

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

@@ -1,22 +1,28 @@
-import { default as DialogTitle } from './DialogTitle';
-import { default as Content } from './Content';
-import { default as Actions } from './Actions';
+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;
-    /** if true, show skeleton */
-    isLoading?: boolean;
+    /** icon to show in the left side of the title */
+    icon?: ComponentProps<typeof Icon>;
     /** callback for when close is clicked */
-    onClose?: () => void;
-}
-declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+    onClose?: (reason?: CloseReason) => void;
+};
+declare const Dialog: {
+    ({ 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>;
+};
 export { Dialog, DialogTitle, Content, Actions };
 export default Dialog;