@pismo/marola 0.0.1-alpha.2 → 0.0.1-alpha.20

package/dist/components/Button/Button.js

@@ -0,0 +1,65 @@
+import '../../assets/Button.css';
+import { jsx as h, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as d, useMemo as c } from "react";
+import { c as m } from "../../clsx-DB4S2d7J.js";
+import { LoadingSpinner as x } from "../LoadingSpinner/LoadingSpinner.js";
+import { B as f } from "../../Button-2b1peDFT.js";
+const k = "_button_1h876_56", o = {
+  "u-typography-h1": "_u-typography-h1_1h876_1",
+  "u-typography-h2": "_u-typography-h2_1h876_8",
+  "u-typography-h3": "_u-typography-h3_1h876_15",
+  "u-typography-h4": "_u-typography-h4_1h876_22",
+  "u-typography-h5": "_u-typography-h5_1h876_29",
+  "u-typography-h6": "_u-typography-h6_1h876_36",
+  "u-typography-base": "_u-typography-base_1h876_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1h876_48",
+  "u-typography-base--xl": "_u-typography-base--xl_1h876_52",
+  "u-typography-base--lg": "_u-typography-base--lg_1h876_56",
+  button: k,
+  "u-typography-base--sm": "_u-typography-base--sm_1h876_60",
+  "u-typography-base--bold": "_u-typography-base--bold_1h876_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1h876_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1h876_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1h876_73",
+  "button--primary": "_button--primary_1h876_86",
+  "button--secondary": "_button--secondary_1h876_105",
+  "button--quick": "_button--quick_1h876_122",
+  "button__loading-container": "_button__loading-container_1h876_145"
+}, P = d((p, y) => {
+  const {
+    onClick: _,
+    link: u,
+    loading: n,
+    children: a,
+    type: e = "button",
+    disabled: s,
+    className: r,
+    variant: t = "primary",
+    muiButtonBaseProps: g
+  } = p, i = {
+    invert: t === "secondary" || t === "quick"
+  }, b = c(
+    () => m([o.button, o[`button--${t}`], r]),
+    [r, t]
+  );
+  return /* @__PURE__ */ h(
+    f,
+    {
+      type: e,
+      href: u,
+      onClick: _,
+      disabled: s,
+      className: b,
+      ref: y,
+      ...g ?? {},
+      children: n ? /* @__PURE__ */ l("div", { className: o["button__loading-container"], children: [
+        /* @__PURE__ */ h(x, { ...i }),
+        a
+      ] }) : a
+    }
+  );
+});
+export {
+  P as Button,
+  P as default
+};

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

@@ -0,0 +1,62 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        link: string;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        muiButtonBaseProps?: import('@mui/base').ButtonOwnProps | undefined;
+        type?: undefined;
+        onClick?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    } | {
+        onClick: () => void;
+        type?: "button" | "submit" | "reset" | undefined;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        muiButtonBaseProps?: import('@mui/base').ButtonOwnProps | undefined;
+        link?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        onClick: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        type: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        link: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Link: Story;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+type CheckboxTheme = 'light' | 'accent';
+type CheckboxSizes = 'small' | 'normal';
+type CheckboxProps = {
+    /** Space separated list of CSS classes to apply */
+    className?: string;
+    /** ID that tests can use to get this component from the DOM */
+    'data-testid'?: string;
+    /** Checkbox label */
+    label?: ReactNode;
+    /** Checkbox theme */
+    theme?: CheckboxTheme;
+    /** Checkbox size */
+    size?: CheckboxSizes;
+    /** Checkbox size */
+    checked?: boolean;
+    /** Indeterminate state */
+    isIndeterminate?: boolean;
+    /** Name */
+    name?: string;
+    /** Functionality to perform when the checkbox value change */
+    onChange: (checked: boolean) => void;
+    /** Checkbox label */
+    children?: ReactNode;
+    /** Set the highlight of the label */
+    highlightLabel?: boolean;
+};
+/**
+ *  Checkboxes allow the user to select one or more items from a set.
+ *  Checkboxes can be used to turn an option on or off.
+ */
+declare const Checkbox: ({ className, label, name, theme, size, checked, onChange, isIndeterminate, highlightLabel, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,71 @@
+import '../../assets/Checkbox.css';
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import * as o from "react";
+import { useState as k, useEffect as i } from "react";
+import { c as s } from "../../clsx-DB4S2d7J.js";
+const N = (a) => /* @__PURE__ */ o.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), z = "_label_18hen_64", E = "_checkmark_18hen_93", e = {
+  "u-typography-h1": "_u-typography-h1_18hen_1",
+  "u-typography-h2": "_u-typography-h2_18hen_8",
+  "u-typography-h3": "_u-typography-h3_18hen_15",
+  "u-typography-h4": "_u-typography-h4_18hen_22",
+  "u-typography-h5": "_u-typography-h5_18hen_29",
+  "u-typography-h6": "_u-typography-h6_18hen_36",
+  "u-typography-base": "_u-typography-base_18hen_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_18hen_48",
+  "u-typography-base--xl": "_u-typography-base--xl_18hen_52",
+  "u-typography-base--lg": "_u-typography-base--lg_18hen_56",
+  "u-typography-base--sm": "_u-typography-base--sm_18hen_60",
+  "u-typography-base--bold": "_u-typography-base--bold_18hen_64",
+  "checkbox-wrapper": "_checkbox-wrapper_18hen_64",
+  "label--highlighted": "_label--highlighted_18hen_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_18hen_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_18hen_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_18hen_73",
+  label: z,
+  "label--highlighted-checked": "_label--highlighted-checked_18hen_90",
+  checkmark: E,
+  "checkmark--checked": "_checkmark--checked_18hen_105",
+  "checkmark--light-theme": "_checkmark--light-theme_18hen_108",
+  "checkmark--accent-theme": "_checkmark--accent-theme_18hen_115",
+  "checkmark--small-size": "_checkmark--small-size_18hen_122",
+  "checkmark--normal-size": "_checkmark--normal-size_18hen_129"
+}, F = (a) => /* @__PURE__ */ o.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), M = ({
+  className: a,
+  label: n,
+  name: m,
+  theme: u = "accent",
+  size: b = "normal",
+  checked: r,
+  onChange: d,
+  isIndeterminate: l,
+  highlightLabel: x = !1,
+  ...p
+}) => {
+  const [h, g] = k(r), [t, y] = k(l);
+  i(() => {
+    r !== h && g(r);
+  }, [r]), i(() => {
+    typeof l == "boolean" && y(l);
+  }, [l]);
+  const C = s(e["checkbox-wrapper"], a), f = s(
+    e.checkmark,
+    e[`checkmark--${u}-theme`],
+    e[`checkmark--${b}-size`],
+    (h || t) && e["checkmark--checked"]
+  ), w = x && (p.children || n) ? s(
+    e.label,
+    e["label--highlighted"],
+    (h || t) && e["label--highlighted-checked"]
+  ) : e.label;
+  return /* @__PURE__ */ v("div", { className: C, onClick: () => {
+    let _ = !h;
+    t && (y(!1), _ = !0), d(_), g(_);
+  }, ...p, children: [
+    /* @__PURE__ */ c("input", { name: m, type: "checkbox", checked: !t && h, readOnly: !0 }),
+    /* @__PURE__ */ c("span", { className: f, children: t ? /* @__PURE__ */ c(F, {}) : h && /* @__PURE__ */ c(N, {}) }),
+    /* @__PURE__ */ c("label", { className: w, children: p.children || n })
+  ] });
+};
+export {
+  M as Checkbox
+};

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

@@ -0,0 +1,31 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ className, label, name, theme, size, checked, onChange, isIndeterminate, highlightLabel, ...rest }: {
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        label?: import('react').ReactNode;
+        theme?: ("light" | "accent") | undefined;
+        size?: ("small" | "normal") | undefined;
+        checked?: boolean | undefined;
+        isIndeterminate?: boolean | undefined;
+        name?: string | undefined;
+        onChange: (checked: boolean) => void;
+        children?: import('react').ReactNode;
+        highlightLabel?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultWithLabel: Story;
+export declare const LightTheme: Story;
+export declare const LightThemeIndeterminate: Story;
+export declare const LabelAsChildren: Story;
+export declare const HighlightLabel: Story;
+export declare const SmallSize: Story;

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

@@ -0,0 +1,37 @@
+import { IconFamilies, IconProps } from '../../main';
+import { ReactElement, ReactNode } from 'react';
+
+export type Variant = 'default' | 'contained' | 'outlined';
+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?: ChipAdornmentSlotProps;
+    /** 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 */
+    onClickContent?: () => void;
+    /** If present an 'x' icon will be on the right side of the button when clicked whatever functionality is passed to
+     * this will be executed */
+    onClickRemove?: () => void;
+    /** Whether to show the button in a disabled state, user will be unable to interact with the chip */
+    disabled?: boolean;
+    /** Any additional classes to apply to the Chip wrapper */
+    className?: string;
+    /** Which style of chip to show */
+    variant?: Variant;
+    /** Dataset test id only used for tests, used to hook onto the loading skeleton component for this chip */
+    'data-testid-skeleton'?: string;
+};
+export type ChipAdornmentSlotProps = {
+    /** The Marola Icon to display */
+    icon: ReactElement<IconProps<IconFamilies>>;
+    /** Any additional classes to apply to icon */
+    className?: string;
+    /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the icon */
+    'data-testid'?: string;
+};
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<unknown>>;
+export {};

package/dist/components/Chip/Chip.js

@@ -0,0 +1,113 @@
+import '../../assets/Chip.css';
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as d, cloneElement as m } from "react";
+import { c as l } from "../../clsx-DB4S2d7J.js";
+import { Icon as g } from "../Icon/Icon.js";
+import "../Button/Button.js";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import { Skeleton as b } from "../Skeleton/Skeleton.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import { B as j } from "../../Button-2b1peDFT.js";
+const f = "_chip_1j9h1_60", x = "_chip__adornment_1j9h1_114", k = "_chip__remove_1j9h1_119", r = {
+  "u-typography-h1": "_u-typography-h1_1j9h1_1",
+  "u-typography-h2": "_u-typography-h2_1j9h1_8",
+  "u-typography-h3": "_u-typography-h3_1j9h1_15",
+  "u-typography-h4": "_u-typography-h4_1j9h1_22",
+  "u-typography-h5": "_u-typography-h5_1j9h1_29",
+  "u-typography-h6": "_u-typography-h6_1j9h1_36",
+  "u-typography-base": "_u-typography-base_1j9h1_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1j9h1_48",
+  "u-typography-base--xl": "_u-typography-base--xl_1j9h1_52",
+  "u-typography-base--lg": "_u-typography-base--lg_1j9h1_56",
+  "u-typography-base--sm": "_u-typography-base--sm_1j9h1_60",
+  chip: f,
+  "u-typography-base--bold": "_u-typography-base--bold_1j9h1_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1j9h1_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1j9h1_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1j9h1_73",
+  "chip--button": "_chip--button_1j9h1_89",
+  "chip--outlined": "_chip--outlined_1j9h1_102",
+  "chip--contained": "_chip--contained_1j9h1_108",
+  chip__adornment: x,
+  chip__remove: k,
+  "chip__remove--disabled": "_chip__remove--disabled_1j9h1_130"
+}, C = d((t, o) => {
+  const { children: h, onClickContent: p, disabled: _, className: i, variant: n } = t;
+  let a = l(
+    r.chip,
+    { [r["chip--outlined"]]: n === "outlined" },
+    { [r["chip--contained"]]: n === "contained" },
+    i
+  );
+  return p ? (a += ` ${r["chip--button"]}`, /* @__PURE__ */ e(
+    j,
+    {
+      onClick: p,
+      disabled: _,
+      "data-testid": t["data-testid"],
+      ref: o,
+      className: a,
+      children: h
+    }
+  )) : /* @__PURE__ */ e("span", { "data-testid": t["data-testid"], ref: o, className: a, children: h });
+}), N = (t) => {
+  const { icon: o, disabled: h = !1, className: p } = t;
+  if (o) {
+    const _ = l(r.chip__adornment, p), i = h ? m(o, { color: "rgb(var(--gray-95-rgb), 0.4)" }) : o;
+    return /* @__PURE__ */ e("span", { className: _, children: i });
+  }
+  return null;
+}, $ = d((t, o) => {
+  const {
+    label: h,
+    className: p,
+    onClickContent: _,
+    leftAdornment: i,
+    loading: n = !1,
+    disabled: a = !1,
+    variant: y = "default",
+    onClickRemove: c
+  } = t;
+  return n ? /* @__PURE__ */ e(
+    b,
+    {
+      style: { width: "6rem", height: "2rem", borderRadius: "4rem", display: "inline-flex" },
+      "data-testid": t["data-testid-skeleton"]
+    }
+  ) : /* @__PURE__ */ u(
+    C,
+    {
+      ref: o,
+      "data-testid": t["data-testid"],
+      onClickContent: _,
+      disabled: a,
+      className: p,
+      variant: y,
+      children: [
+        i && /* @__PURE__ */ e(N, { ...i, disabled: a }),
+        h,
+        c && /* @__PURE__ */ e(
+          "span",
+          {
+            className: l(r.chip__remove, { [r["chip__remove--disabled"]]: a }),
+            role: "button",
+            tabIndex: a ? -1 : 0,
+            "aria-label": "remove",
+            onClick: (s) => {
+              s == null || s.stopPropagation(), s == null || s.nativeEvent.stopImmediatePropagation(), c();
+            },
+            "aria-disabled": a,
+            children: /* @__PURE__ */ e(g, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  $ as Chip
+};

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

@@ -0,0 +1,40 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<{
+        label: import('react').ReactNode;
+        loading?: boolean | undefined;
+        leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
+        'data-testid'?: string | undefined;
+        onClickContent?: (() => void) | undefined;
+        onClickRemove?: (() => void) | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        variant?: import('./Chip').Variant | undefined;
+        'data-testid-skeleton'?: string | undefined;
+    } & 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('./Chip').ChipAdornmentSlotProps | undefined;
+        'data-testid'?: string | undefined;
+        onClickContent?: (() => void) | undefined;
+        onClickRemove?: (() => void) | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        variant?: import('./Chip').Variant | undefined;
+        'data-testid-skeleton'?: string | undefined;
+        ref?: import('react').LegacyRef<unknown> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Clickable: Story;
+export declare const ClickableWithRemove: Story;
+export declare const FullDefault: Story;
+export declare const FullOutlined: Story;
+export declare const FullContained: Story;

package/dist/components/Chip/chip.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-BO0mdB7d.js";
+import { s as t } from "../../Dialog.module-DFEmFdYT.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

@@ -2,5 +2,5 @@
 declare const Backdrop: import('react').ForwardRefExoticComponent<{
     open?: boolean | undefined;
     className: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export default Backdrop;

package/dist/components/Dialog/Backdrop.js

@@ -1,16 +1,9 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { s as e } from "../../Dialog.module-BO0mdB7d.js";
+import { s as e } from "../../Dialog.module-DFEmFdYT.js";
 const i = t((o, r) => {
   const { open: m, className: p, ...s } = o;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: e.dialog__backdrop,
-      ref: r,
-      ...s
-    }
-  );
+  return /* @__PURE__ */ a("div", { className: e.dialog__backdrop, ref: r, ...s });
 });
 export {
   i as default

package/dist/components/Dialog/CloseIconButton.js

@@ -1,16 +1,17 @@
-import { jsx as t } from "react/jsx-runtime";
-import { s as c } from "../../Dialog.module-BO0mdB7d.js";
-import { B as i } from "../../Button-REznN-RP.js";
-const s = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3e%3cg%20clip-path='url(%23clip0_2659_187)'%3e%3cpath%20d='M15.9437%2013.8812L18.9374%2010.9375C19.5249%2010.3562%2020.4749%2010.3562%2021.0062%2010.9375C21.6437%2011.525%2021.6437%2012.475%2021.0062%2013.0062L18.1187%2015.9437L21.0062%2018.9375C21.6437%2019.525%2021.6437%2020.475%2021.0062%2021.0062C20.4749%2021.6437%2019.5249%2021.6437%2018.9374%2021.0062L15.9437%2018.1187L13.0062%2021.0062C12.4749%2021.6437%2011.5249%2021.6437%2010.9374%2021.0062C10.3562%2020.475%2010.3562%2019.525%2010.9374%2018.9375L13.8812%2015.9437L10.9374%2013.0062C10.3562%2012.475%2010.3562%2011.525%2010.9374%2010.9375C11.5249%2010.3562%2012.4749%2010.3562%2013.0062%2010.9375L15.9437%2013.8812Z'%20fill='%23DF4561'/%3e%3cpath%20opacity='0.4'%20d='M0%2016C0%207.1625%207.1625%200%2016%200C24.8375%200%2032%207.1625%2032%2016C32%2024.8375%2024.8375%2032%2016%2032C7.1625%2032%200%2024.8375%200%2016ZM10.9375%2013.0063L13.8813%2015.9438L10.9375%2018.9375C10.3562%2019.525%2010.3562%2020.475%2010.9375%2021.0063C11.525%2021.6438%2012.475%2021.6438%2013.0063%2021.0063L15.9438%2018.1187L18.9375%2021.0063C19.525%2021.6438%2020.475%2021.6438%2021.0063%2021.0063C21.6438%2020.475%2021.6438%2019.525%2021.0063%2018.9375L18.1187%2015.9438L21.0063%2013.0063C21.6438%2012.475%2021.6438%2011.525%2021.0063%2010.9375C20.475%2010.3562%2019.525%2010.3562%2018.9375%2010.9375L15.9438%2013.8813L13.0063%2010.9375C12.475%2010.3562%2011.525%2010.3562%2010.9375%2010.9375C10.3562%2011.525%2010.3562%2012.475%2010.9375%2013.0063Z'%20fill='%23DF4561'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2659_187'%3e%3crect%20width='32'%20height='32'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", d = ({ handleOnClose: e, className: l }) => {
-  const o = l != null ? c["dialog__close-icon "] + l : c["dialog__close-icon"];
-  return /* @__PURE__ */ t(
-    i,
+import { jsx as s } from "react/jsx-runtime";
+import { Icon as r } from "../Icon/Icon.js";
+import { s as t } from "../../Dialog.module-DFEmFdYT.js";
+import { B as a } from "../../Button-2b1peDFT.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: o,
+      className: l,
       "aria-description": "Close dialog",
-      onClick: e,
+      onClick: i,
       "data-testid": "dialog-close-button",
-      children: /* @__PURE__ */ t("img", { src: s, alt: "close" })
+      children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
     }
   );
 };

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

@@ -1,20 +1,21 @@
-import { default as DialogTitle } from './Title';
+import { default as DialogTitle } from './DialogTitle';
 import { default as Content } from './Content';
 import { default as Actions } from './Actions';
 import { ModalProps } from '@mui/base';
 import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
 
-export type CloseReason = "backdropClick" | "escapeKeyDown" | "closeButtonClick";
+export type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
 export interface DialogProps extends ModalProps {
-    /** main children content */
-    children: ReactElement<any, string | JSXElementConstructor<any>>;
+    /** main content */
+    children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
     /** display title label */
     dialogTitle: ReactNode;
     /** display subtitle */
     dialogSubtitle?: ReactNode;
     /** if true, show skeleton */
     isLoading?: boolean;
-    onClose: () => void;
+    /** callback for when close is clicked */
+    onClose?: () => void;
 }
 declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogTitle, Content, Actions };