asma-ui-core 3.42.0 → 3.43.0

package/dist/components/data-display/badge/StyledBadge.js

@@ -1,33 +1,28 @@
-import { resolveSx as a } from "../../../helpers/sx.js";
-import A from "clsx";
-import { jsx as O, jsxs as D } from "react/jsx-runtime";
-var i = {
-  primary: "bg-[#D9F256] text-[#0A3D3D] border border-solid border-[#C1E600]",
-  default: "bg-[#e0e0e0] text-[rgba(0,0,0,0.87)]",
-  secondary: "bg-[#9c27b0] text-white",
-  error: "bg-[#d32f2f] text-white",
-  info: "bg-[#0288d1] text-white",
-  success: "bg-[#2e7d32] text-white",
-  warning: "bg-[#ed6c02] text-white"
-}, L = {
-  "top-right": "top-0 right-0 translate-x-1/2 -translate-y-1/2 origin-[100%_0%]",
-  "top-left": "top-0 left-0 -translate-x-1/2 -translate-y-1/2 origin-[0%_0%]",
-  "bottom-right": "bottom-0 right-0 translate-x-1/2 translate-y-1/2 origin-[100%_100%]",
-  "bottom-left": "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 origin-[0%_100%]"
-}, n = "& .MuiBadge-badge", C = ({ color: p = "primary", dataTest: x, size: d = "medium", badgeContent: t, max: o = 99, showZero: c = !1, variant: m = "standard", invisible: f, anchorOrigin: s, children: b, className: h, sx: e, overlap: $, classes: z, slots: B, slotProps: E, component: N, ...g }) => {
-  const l = e && typeof e == "object" && !Array.isArray(e) ? e : {}, y = a(l[n]), u = a(Object.fromEntries(Object.entries(l).filter(([j]) => j !== n))), r = m === "dot", w = !!f || !r && (t === 0 || t === void 0 || t === null) && !c, _ = r ? null : typeof t == "number" && t > o ? `${o}+` : t, v = s?.vertical ?? "top", S = s?.horizontal ?? "right";
-  return /* @__PURE__ */ D("span", {
-    className: "relative inline-flex shrink-0 align-middle",
-    "data-testid": x,
-    style: u,
-    ...g,
-    children: [b, !w && /* @__PURE__ */ O("span", {
-      className: A("absolute z-[1] box-border flex flex-row flex-wrap content-center items-center justify-center whitespace-nowrap font-roboto font-medium leading-none", L[`${v}-${S}`], r ? "h-[6px] w-[6px] min-w-[6px] rounded-[3px] p-0" : d === "small" ? "h-[16px] w-max min-w-[16px] rounded-[10px] px-[4px] text-[0.75rem]" : "h-[20px] min-w-[20px] rounded-[10px] px-[6px] text-[0.75rem]", i[p] ?? i.default, h),
-      style: y,
-      children: _
-    })]
+import { Badge as t } from "@mui/material";
+import { jsx as g } from "react/jsx-runtime";
+var x = ({ color: r = "primary", dataTest: a, size: e = "medium", sx: d, ...o }) => {
+  const i = d?.["& .MuiBadge-badge"];
+  return /* @__PURE__ */ g(t, {
+    color: r,
+    "data-testid": a,
+    ...o,
+    sx: {
+      "& .MuiBadge-colorPrimary": {
+        backgroundColor: "#D9F256",
+        color: "#0A3D3D",
+        border: "1px solid #C1E600"
+      },
+      ...d,
+      ...e === "small" ? { "& .MuiBadge-badge": {
+        minWidth: "16px",
+        height: "16px",
+        width: "max-content",
+        padding: "0 4px",
+        ...i
+      } } : {}
+    }
   });
 };
 export {
-  C as StyledBadge
+  x as StyledBadge
 };

package/dist/components/data-display/chip/StyledChip.js

@@ -1,47 +1,62 @@
-import { cn as e } from "../../../helpers/cn.js";
-import { resolveSx as C } from "../../../helpers/sx.js";
-import { CloseIcon as S } from "../../icons/close-icon/CloseIcon.js";
-import { forwardRef as y } from "react";
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
-var D = y(({ dataTest: n, label: h, size: p = "medium", disabled: t, readOnly: o, clickable: f, icon: u, avatar: d, deleteIcon: v, onDelete: m, onClick: l, className: b, classes: a, sx: x, tabIndex: c, "aria-label": _, "data-hovered": w, "data-focus": N, variant: P, color: R }, j) => {
-  const i = !o && !t && (!!f || !!l), s = d ?? u, k = (g) => {
-    g.stopPropagation(), m?.(g);
-  };
-  return /* @__PURE__ */ I("div", {
-    ref: j,
-    "data-testid": n,
-    "aria-label": _,
-    "data-hovered": w,
-    "data-focus": N,
-    role: i ? "button" : void 0,
-    tabIndex: i ? c ?? 0 : c,
-    onClick: t || o ? void 0 : l,
-    className: e("inline-flex max-w-full items-center gap-1 rounded-2xl border border-delta-300 bg-white text-sm text-delta-800", p === "small" ? "h-6 px-2" : "h-8 px-3", o && "pointer-events-none", t && "pointer-events-none opacity-[0.38]", i && e("cursor-pointer outline-none", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-50 hover:border-gama-200 hover:bg-gama-50", "focus:border-gama-400 focus:bg-gama-50 focus:shadow-[0_0_0_1px_inset_var(--colors-gama-400)]", "data-[focus]:border-gama-400 data-[focus]:bg-gama-50 data-[focus]:shadow-[0_0_0_1px_inset_var(--colors-gama-400)]", "active:border-gama-400 active:bg-gama-50 active:shadow-[0_0_0_2px_inset_var(--colors-gama-400)]"), a?.root, b),
-    style: C(x),
-    children: [
-      s && /* @__PURE__ */ r("span", {
-        className: e("flex shrink-0 items-center", d ? a?.avatar : a?.icon),
-        children: s
-      }),
-      /* @__PURE__ */ r("span", {
-        className: e("min-w-0 truncate", a?.label),
-        children: h
-      }),
-      m && !o && /* @__PURE__ */ r("button", {
-        type: "button",
-        "data-testid": `${n}-delete`,
-        onClick: k,
-        disabled: t,
-        className: e("ml-1 flex shrink-0 items-center justify-center rounded-full border border-delta-100 bg-delta-50 text-delta-700", a?.deleteIcon),
-        children: v ?? /* @__PURE__ */ r(S, {
-          height: 18,
-          width: 18,
-          className: "min-w-[18px]"
-        })
-      })
-    ]
-  });
-});
+import { CloseIcon as t } from "../../icons/close-icon/CloseIcon.js";
+import { forwardRef as c } from "react";
+import { Chip as s } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+var m = c(({ dataTest: r, readOnly: o, onDelete: l, ...a }, d) => /* @__PURE__ */ e(s, {
+  ...a,
+  ref: d,
+  "data-testid": r,
+  deleteIcon: o ? void 0 : /* @__PURE__ */ e(t, {
+    "data-testid": `${r}-delete`,
+    height: 18,
+    width: 18,
+    className: "min-w-[18px]"
+  }),
+  onDelete: o ? void 0 : l,
+  sx: {
+    border: "1px solid",
+    backgroundColor: "white",
+    borderColor: "var(--colors-delta-300)",
+    color: "var(--colors-delta-800)",
+    fontSize: "var(--font-size-body-base)",
+    ...o ? {
+      pointerEvents: "none",
+      "&:hover": {
+        borderColor: "var(--colors-delta-300)",
+        backgroundColor: "white"
+      }
+    } : {
+      "&:hover, &[data-hovered]": {
+        borderColor: "var(--colors-gama-200)",
+        backgroundColor: "var(--colors-gama-50)"
+      },
+      "&:focus, &[data-focus]": {
+        outline: "none",
+        borderColor: "var(--colors-gama-400)",
+        backgroundColor: "var(--colors-gama-50)",
+        boxShadow: "0 0 0 1px inset var(--colors-gama-400)"
+      },
+      "&:active": {
+        borderColor: "var(--colors-gama-400)",
+        backgroundColor: "var(--colors-gama-50)",
+        boxShadow: "0 0 0 2px inset var(--colors-gama-400)"
+      },
+      "& .MuiChip-deleteIcon": {
+        border: "1px solid",
+        borderColor: "var(--colors-delta-100)",
+        color: "var(--colors-delta-700)",
+        backgroundColor: "var(--colors-delta-50)",
+        borderRadius: "50%",
+        "&:hover": {
+          borderColor: "var(--colors-delta-100)",
+          backgroundColor: "var(--colors-delta-50)",
+          color: "var(--colors-delta-700)"
+        }
+      }
+    },
+    ...a.sx
+  }
+}));
 export {
-  D as StyledChip
+  m as StyledChip
 };

package/dist/components/data-display/interactive-chip/StyledInteractiveChip.js

@@ -1,41 +1,47 @@
-import { StyledChip as c } from "../chip/StyledChip.js";
-import { StyledCheckbox as m } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
-import { StyledRadio as b } from "../../inputs/radio-button/base-ui/StyledRadio.js";
-import { forwardRef as x } from "react";
-import { jsx as o } from "react/jsx-runtime";
-var v = {
-  borderColor: "var(--colors-gama-400)",
-  backgroundColor: "var(--colors-gama-50)",
-  boxShadow: "0 0 0 1px inset var(--colors-gama-400)"
-}, g = x(({ type: i = "checkbox", checked: e, size: l = "small", ariaLabel: n, ...a }, d) => {
-  const r = i === "checkbox", t = n ?? (typeof a.label == "string" ? a.label : void 0), s = !a.readOnly && !r && !!e;
-  return /* @__PURE__ */ o(c, {
-    ref: d,
+import { StyledChip as v } from "../chip/StyledChip.js";
+import { StyledCheckbox as b } from "../../inputs/checkbox/StyledCheckbox.js";
+import { StyledRadio as m } from "../../inputs/radio-button/StyledRadio.js";
+import { forwardRef as u } from "react";
+import { jsx as e } from "react/jsx-runtime";
+var S = u(({ type: i = "checkbox", checked: a, size: c = "small", ...o }, n) => {
+  const r = i === "checkbox", s = r ? b : m, d = !o.readOnly && !r && a, l = {
+    borderColor: "var(--colors-gama-300)",
+    backgroundColor: "var(--colors-gama-25)",
+    boxShadow: "0 0 0 1px inset var(--colors-gama-300)"
+  }, t = o.ariaLabel ?? (typeof o.label == "string" ? o.label : void 0);
+  return /* @__PURE__ */ e(v, {
+    ref: n,
     "aria-label": t,
-    avatar: r ? /* @__PURE__ */ o(m, {
-      dataTest: a.dataTest,
+    avatar: /* @__PURE__ */ e(s, {
+      dataTest: o.dataTest,
       disableRipple: !0,
-      checked: e,
-      size: l,
-      readOnly: a.readOnly,
-      "aria-label": t,
-      className: "pointer-events-none"
-    }) : /* @__PURE__ */ o(b, {
-      dataTest: a.dataTest,
-      checked: e,
-      size: l,
-      "aria-label": t,
-      className: "pointer-events-none"
+      checked: a,
+      size: c,
+      sx: { pointerEvents: "none" },
+      slotProps: { input: { "aria-label": t } }
     }),
     clickable: !0,
     tabIndex: 0,
-    ...a,
-    sx: s ? {
-      ...v,
-      ...a.sx
-    } : a.sx
+    ...o,
+    sx: {
+      ...d && {
+        outline: "none",
+        borderColor: "var(--colors-gama-400)",
+        boxShadow: "0 0 0 1px inset var(--colors-gama-400)",
+        backgroundColor: "var(--colors-gama-50)",
+        "&:hover": l
+      },
+      ...a && { "& .MuiChip-avatar": { "& .MuiSvgIcon-root": { color: "var(--colors-gama-500)" } } },
+      ...o.readOnly && { "& .MuiChip-avatar": {
+        "& .MuiSvgIcon-root": { color: "var(--colors-delta-500)" },
+        "& .MuiCheckbox-root, & .MuiRadio-root": { color: "var(--colors-delta-500)" },
+        "& .Mui-checked": { color: "var(--colors-delta-500)" }
+      } },
+      "&:focus:hover": l,
+      ...o.sx
+    }
   });
 });
 export {
-  g as StyledInteractiveChip
+  S as StyledInteractiveChip
 };

package/dist/components/data-display/tooltip/StyledTooltip.js

@@ -1,54 +1,37 @@
-import { cn as A } from "../../../helpers/cn.js";
-import { resolveSx as T } from "../../../helpers/sx.js";
-import { cloneElement as j, useRef as k, useState as C } from "react";
-import { Fragment as I, jsx as d, jsxs as m } from "react/jsx-runtime";
-import { FloatingArrow as M, FloatingPortal as N, arrow as P, autoUpdate as U, flip as z, offset as B, shift as D, useDismiss as G, useFloating as H, useFocus as L, useHover as q, useInteractions as J, useMergeRefs as K, useRole as Q } from "@floating-ui/react";
-var V = "#363E4A", ee = ({ title: o, children: t, placement: g = "top", arrow: s = !1, enterDelay: u = 500, leaveDelay: x = 0, open: l, onOpen: F, onClose: v, disableHoverListener: w, disableFocusListener: h, className: y, slotProps: n }) => {
-  const [R, b] = C(!1), r = l !== void 0, a = l ?? R, i = k(null), O = (c) => {
-    r || b(c), c ? F?.() : v?.();
-  }, { refs: p, floatingStyles: _, context: e } = H({
-    open: a,
-    onOpenChange: O,
-    placement: g,
-    whileElementsMounted: U,
-    middleware: [
-      B(s ? 8 : 6),
-      z({ padding: 8 }),
-      D({ padding: 8 }),
-      ...s ? [P({ element: i })] : []
-    ]
-  }), { getReferenceProps: E, getFloatingProps: S } = J([
-    q(e, {
-      enabled: !r && !w,
-      delay: {
-        open: u,
-        close: x
-      },
-      move: !1
-    }),
-    L(e, { enabled: !r && !h }),
-    G(e),
-    Q(e, { role: "tooltip" })
-  ]), f = j(t, E({
-    ref: K([p.setReference, t.ref]),
-    ...t.props
-  }));
-  return o == null || o === "" ? f : /* @__PURE__ */ m(I, { children: [f, a && /* @__PURE__ */ d(N, { children: /* @__PURE__ */ m("div", {
-    ref: p.setFloating,
-    style: {
-      ..._,
-      ...n?.tooltip?.style,
-      ...T(n?.tooltip?.sx)
+import { Tooltip as i } from "@mui/material";
+import { jsx as p } from "react/jsx-runtime";
+import { mergeSlotProps as r } from "@mui/material/utils";
+import l from "@mui/material/Fade";
+var s = {
+  borderRadius: "3px",
+  "& .MuiTooltip-arrow": { color: "#363E4A" },
+  color: "white",
+  boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)",
+  display: "flex",
+  padding: "4px 8px",
+  alignItems: "center",
+  fontSize: "var(--font-size-body-sm)",
+  lineHeight: "var(--line-height-body-sm)",
+  letterSpacing: "0.24px",
+  bgcolor: "#363E4A",
+  wordBreak: "break-word"
+}, d = (e) => {
+  const { slotProps: o, ...t } = e;
+  return /* @__PURE__ */ p(i, {
+    enterDelay: 500,
+    placement: "top",
+    ...t,
+    slots: {
+      transition: l,
+      ...t.slots
     },
-    ...S(),
-    className: A("z-[1500] flex items-center break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-xs leading-4 tracking-[0.24px] text-white shadow-[0px_1px_4px_0px_rgba(0,0,0,0.25)]", y, n?.tooltip?.className),
-    children: [o, s && /* @__PURE__ */ d(M, {
-      ref: i,
-      context: e,
-      fill: V
-    })]
-  }) })] });
+    slotProps: {
+      ...o,
+      transition: r(o?.transition, { timeout: 300 }),
+      tooltip: r(o?.tooltip, { sx: s })
+    }
+  });
 };
 export {
-  ee as StyledTooltip
+  d as StyledTooltip
 };

package/dist/components/data-display/typography/StyledTypography.js

@@ -1,64 +1,6 @@
-import { resolveSx as x } from "../../../helpers/sx.js";
-import b from "clsx";
-import { createElement as y } from "react";
-var k = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
-  body1: "p",
-  body2: "p",
-  inherit: "p"
-}, u = {
-  h1: "text-[6rem] font-light leading-[1.167] tracking-[-0.01562em]",
-  h2: "text-[3.75rem] font-light leading-[1.2] tracking-[-0.00833em]",
-  h3: "text-[3rem] font-normal leading-[1.167] tracking-normal",
-  h4: "text-[2.125rem] font-normal leading-[1.235] tracking-[0.00735em]",
-  h5: "text-[1.5rem] font-normal leading-[1.334] tracking-normal",
-  h6: "text-[1.25rem] font-medium leading-[1.6] tracking-[0.0075em]",
-  subtitle1: "text-[1rem] font-normal leading-[1.75] tracking-[0.00938em]",
-  subtitle2: "text-[0.875rem] font-medium leading-[1.57] tracking-[0.00714em]",
-  body1: "text-[1rem] font-normal leading-[1.5] tracking-[0.00938em]",
-  body2: "text-[0.875rem] font-normal leading-[1.43] tracking-[0.01071em]",
-  button: "text-[0.875rem] font-medium leading-[1.75] tracking-[0.02857em] uppercase",
-  caption: "text-[0.75rem] font-normal leading-[1.66] tracking-[0.03333em]",
-  overline: "text-[0.75rem] font-normal leading-[2.66] tracking-[0.08333em] uppercase",
-  inherit: "text-inherit font-[inherit] leading-[inherit] tracking-[inherit]"
-}, v = {
-  inherit: "inherit",
-  initial: "initial",
-  "text.primary": "rgba(0, 0, 0, 0.87)",
-  "text.secondary": "rgba(0, 0, 0, 0.6)",
-  "text.disabled": "rgba(0, 0, 0, 0.38)",
-  primary: "#1976d2",
-  "primary.main": "#1976d2",
-  secondary: "#9c27b0",
-  "secondary.main": "#9c27b0",
-  error: "#d32f2f",
-  "error.main": "#d32f2f",
-  warning: "#ed6c02",
-  "warning.main": "#ed6c02",
-  info: "#0288d1",
-  "info.main": "#0288d1",
-  success: "#2e7d32",
-  "success.main": "#2e7d32"
-}, C = (i) => {
-  const { variant: e = "body1", variantMapping: a, align: n, noWrap: o, gutterBottom: m, color: t, component: l, className: d, sx: c, style: g, classes: A, children: s, ...h } = i, f = l ?? a?.[e] ?? k[e] ?? "span", r = t ? v[t] ?? t : void 0, p = {
-    ...n ? { textAlign: n } : {},
-    ...r ? { color: r } : {},
-    ...x(c),
-    ...g
-  };
-  return y(f, {
-    className: b("m-0 font-roboto", u[e], o && "overflow-hidden text-ellipsis whitespace-nowrap", m && "mb-[0.35em]", d),
-    style: p,
-    ...h
-  }, s);
-};
+import { Typography as o } from "@mui/material";
+import { jsx as p } from "react/jsx-runtime";
+var t = (r) => /* @__PURE__ */ p(o, { ...r });
 export {
-  C as StyledTypography
+  t as StyledTypography
 };

package/dist/components/feedback/dialog/StyledDialog.js

@@ -1,78 +1,58 @@
-import { cn as p } from "../../../helpers/cn.js";
-import { resolveSx as u } from "../../../helpers/sx.js";
-import { CloseIcon as I } from "../../icons/close-icon/CloseIcon.js";
-import { StyledButton as R } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as z } from "../../../hooks/useMediaQuery.hook.js";
-import K from "./StyledDialog.module.js";
-import { useEffect as P, useRef as W } from "react";
-import { jsx as l, jsxs as t } from "react/jsx-runtime";
-var X = {
-  xs: 444,
-  sm: 600,
-  md: 900,
-  lg: 1200,
-  xl: 1536
-}, O = ({ open: o, onClose: r, children: h, dataTest: a, maxWidth: i = "sm", fullWidth: y, fullScreen: g, scroll: w = "paper", disableEscapeKeyDown: v, className: b, style: D, sx: N, classes: k, PaperProps: C, slotProps: S, onCloseText: j, showCloseIcon: d = !0, dialogLabel: n, dialogTitle: s, dialogHeaderNode: M }) => {
-  const _ = z(), c = W(null), f = _ ? !0 : g;
-  P(() => {
-    const e = c.current;
-    e && (o && !e.open ? e.showModal() : !o && e.open && e.close());
-  }, [o]);
-  const m = {
-    ...C,
-    ...S?.paper
-  }, x = i === !1 ? void 0 : X[i];
-  return /* @__PURE__ */ t("dialog", {
-    ref: c,
-    "data-testid": a,
-    "aria-label": a,
-    onCancel: (e) => {
-      e.preventDefault(), v || r?.(e, "escapeKeyDown");
-    },
-    onClick: (e) => {
-      e.target === c.current && r?.(e, "backdropClick");
-    },
-    className: p(K.StyledDialog, "m-auto max-h-[calc(100%-64px)] overflow-hidden rounded-2xl border-0 bg-white p-0 text-delta-800 shadow-xl", f ? "h-full max-h-full w-full max-w-full rounded-none" : p("w-[calc(100%-64px)]", y ? "w-[calc(100%-64px)]" : "w-auto"), w === "body" ? "overflow-y-auto" : "open:flex open:flex-col", b, m.className, k?.paper),
+import { CloseIcon as p } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as f } from "../../inputs/button/StyledButton.js";
+import e from "./StyledDialog.module.js";
+import { useMobileMediaQuery as h } from "../../../hooks/useMediaQuery.hook.js";
+import { Dialog as u } from "@mui/material";
+import { jsx as i, jsxs as o } from "react/jsx-runtime";
+var b = ({ onCloseText: s, children: n, dataTest: d, showCloseIcon: a = !0, dialogLabel: r, dialogTitle: t, dialogHeaderNode: c, ...l }) => {
+  const m = h();
+  return /* @__PURE__ */ o(u, {
+    "data-testid": d,
+    "aria-label": d,
     style: {
       zIndex: 999,
-      ...x && !f ? { maxWidth: x } : {},
-      ...u(N),
-      ...u(m.sx),
-      ...D
+      ...l.style
     },
-    children: [(!!n || !!s || d) && /* @__PURE__ */ t("div", {
-      className: "flex w-full justify-between px-4 pt-4",
-      children: [/* @__PURE__ */ t("div", {
-        className: "flex flex-col justify-start gap-0.5",
-        children: [n && /* @__PURE__ */ l("div", {
-          className: "flex h-8 items-center text-sm font-normal leading-5 text-[var(--colors-grey-700)]",
-          children: n
-        }), s && /* @__PURE__ */ l("div", {
-          className: "flex text-2xl font-semibold leading-8 text-[var(--colors-grey-800)]",
-          children: s
-        })]
-      }), d && /* @__PURE__ */ t("div", {
-        className: "flex flex-grow justify-end gap-2",
-        children: [M, /* @__PURE__ */ l(R, {
-          dataTest: `close-button-${a}`,
-          variant: "textGray",
-          size: "small",
-          endIcon: /* @__PURE__ */ l(I, {
-            width: 20,
-            height: 20
-          }),
-          onClick: (e) => r?.(e, "escapeKeyDown"),
-          style: {
-            color: "var(--colors-grey-800)",
-            paddingRight: "6px",
-            paddingLeft: "6px"
-          },
-          children: j
+    fullScreen: m ? !0 : l.fullScreen,
+    ...l,
+    children: [/* @__PURE__ */ i("div", {
+      className: e["styled-dialog-root"],
+      children: r || t || a ? /* @__PURE__ */ o("div", {
+        className: e["styled-top-header"],
+        children: [/* @__PURE__ */ o("div", {
+          className: e["styled-dialog-info"],
+          children: [r && /* @__PURE__ */ i("div", {
+            className: e["styled-dialog-label"],
+            children: r
+          }), t && /* @__PURE__ */ i("div", {
+            className: e["styled-dialog-title"],
+            children: t
+          })]
+        }), a && /* @__PURE__ */ o("div", {
+          className: e["styled-dialog-close"],
+          children: [c, /* @__PURE__ */ i(f, {
+            dataTest: `close-button-${d}`,
+            variant: "textGray",
+            size: "small",
+            endIcon: /* @__PURE__ */ i(p, {
+              width: 20,
+              height: 20
+            }),
+            onClick: (y) => {
+              l.onClose && l.onClose(y, "escapeKeyDown");
+            },
+            style: {
+              color: "var(--colors-grey-800)",
+              paddingRight: "6px",
+              paddingLeft: "6px"
+            },
+            children: s
+          })]
         })]
-      })]
-    }), h]
+      }) : null
+    }), n]
   });
 };
 export {
-  O as StyledDialog
+  b as StyledDialog
 };

package/dist/components/feedback/dialog/StyledDialog.module.js

@@ -1,4 +1,11 @@
-var l = "_StyledDialog_1q1f9_1", a = { StyledDialog: l };
+var l = {
+  "styled-dialog-root": "_styled-dialog-root_1st3i_1",
+  "styled-top-header": "_styled-top-header_1st3i_6",
+  "styled-dialog-close": "_styled-dialog-close_1st3i_13",
+  "styled-dialog-info": "_styled-dialog-info_1st3i_20",
+  "styled-dialog-label": "_styled-dialog-label_1st3i_27",
+  "styled-dialog-title": "_styled-dialog-title_1st3i_37"
+};
 export {
-  a as default
+  l as default
 };

package/dist/components/feedback/dialog/StyledDialogActions.js

@@ -1,23 +1,23 @@
-import { resolveSx as d } from "../../../helpers/sx.js";
-import m from "clsx";
-import { Children as o } from "react";
-import { jsx as e } from "react/jsx-runtime";
-var g = ({ children: l, className: s, sx: a, style: i, classes: c, disableSpacing: n, ...t }) => /* @__PURE__ */ e("div", {
+import { cn as l } from "../../../helpers/cn.js";
+import o from "./StyledDialogActions.module.js";
+import e from "react";
+import { DialogActions as r } from "@mui/material";
+import { jsx as i } from "react/jsx-runtime";
+var f = (t) => /* @__PURE__ */ i(r, {
+  ...t,
   "data-testid": "styled-dialog-actions",
-  className: "m-0 flex justify-center p-0",
-  style: {
-    ...d(a),
-    ...i
+  classes: {
+    ...t.classes,
+    root: o["styled-dialog-actions-root"]
   },
-  ...t,
-  children: /* @__PURE__ */ e("div", {
-    className: m("flex w-full justify-end gap-2 p-4", s),
-    children: o.map(l, (r) => /* @__PURE__ */ e("div", {
-      className: "max-md:flex-1 max-md:[&_button]:w-full",
-      children: r
+  children: /* @__PURE__ */ i("div", {
+    className: l(o["styled-dialog-actions"], t.className),
+    children: e.Children.map(t.children, (a) => /* @__PURE__ */ i("div", {
+      className: o["action-button-wrapper"],
+      children: a
     }))
   })
 });
 export {
-  g as StyledDialogActions
+  f as StyledDialogActions
 };

package/dist/components/feedback/dialog/StyledDialogActions.module.js

@@ -0,0 +1,8 @@
+var t = {
+  "styled-dialog-actions-root": "_styled-dialog-actions-root_3l3r7_1",
+  "styled-dialog-actions": "_styled-dialog-actions_3l3r7_1",
+  "action-button-wrapper": "_action-button-wrapper_3l3r7_17"
+};
+export {
+  t as default
+};