asma-ui-core 3.34.0 → 3.36.0

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

@@ -1,28 +1,33 @@
-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
-      } } : {}
-    }
+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: _
+    })]
   });
 };
 export {
-  x as StyledBadge
+  C as StyledBadge
 };

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

@@ -1,62 +1,47 @@
-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: "14px",
-    ...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
-  }
-}));
+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]"
+        })
+      })
+    ]
+  });
+});
 export {
-  m as StyledChip
+  D as StyledChip
 };

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

@@ -1,47 +1,41 @@
-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,
+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,
     "aria-label": t,
-    avatar: /* @__PURE__ */ e(s, {
-      dataTest: o.dataTest,
+    avatar: r ? /* @__PURE__ */ o(m, {
+      dataTest: a.dataTest,
       disableRipple: !0,
-      checked: a,
-      size: c,
-      sx: { pointerEvents: "none" },
-      slotProps: { input: { "aria-label": t } }
+      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"
     }),
     clickable: !0,
     tabIndex: 0,
-    ...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
-    }
+    ...a,
+    sx: s ? {
+      ...v,
+      ...a.sx
+    } : a.sx
   });
 });
 export {
-  S as StyledInteractiveChip
+  g as StyledInteractiveChip
 };

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

@@ -1,37 +1,54 @@
-import { Tooltip as e } from "@mui/material";
-import { jsx as i } from "react/jsx-runtime";
-import { mergeSlotProps as r } from "@mui/material/utils";
-import l from "@mui/material/Fade";
-var a = {
-  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: "12px",
-  lineHeight: "16px",
-  letterSpacing: "0.24px",
-  bgcolor: "#363E4A",
-  wordBreak: "break-word"
-}, d = (p) => {
-  const { slotProps: o, ...t } = p;
-  return /* @__PURE__ */ i(e, {
-    enterDelay: 500,
-    placement: "top",
-    ...t,
-    slots: {
-      transition: l,
-      ...t.slots
+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)
     },
-    slotProps: {
-      ...o,
-      transition: r(o?.transition, { timeout: 300 }),
-      tooltip: r(o?.tooltip, { sx: a })
-    }
-  });
+    ...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
+    })]
+  }) })] });
 };
 export {
-  d as StyledTooltip
+  ee as StyledTooltip
 };

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

@@ -1,6 +1,64 @@
-import { Typography as o } from "@mui/material";
-import { jsx as p } from "react/jsx-runtime";
-var t = (r) => /* @__PURE__ */ p(o, { ...r });
+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);
+};
 export {
-  t as StyledTypography
+  C as StyledTypography
 };

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

@@ -1,58 +1,78 @@
-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,
+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: r, onClose: o, children: h, dataTest: a, maxWidth: n = "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: s, dialogTitle: c, dialogHeaderNode: M }) => {
+  const _ = z(), i = W(null), f = _ ? !0 : g;
+  P(() => {
+    const e = i.current;
+    e && (r && !e.open ? e.showModal() : !r && e.open && e.close());
+  }, [r]);
+  const m = {
+    ...C,
+    ...S?.paper
+  }, x = n === !1 ? void 0 : X[n];
+  return /* @__PURE__ */ t("dialog", {
+    ref: i,
+    "data-testid": a,
+    "aria-label": a,
+    onCancel: (e) => {
+      e.preventDefault(), v || o?.(e, "escapeKeyDown");
+    },
+    onClick: (e) => {
+      e.target === i.current && o?.(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" : "flex flex-col", b, m.className, k?.paper),
     style: {
       zIndex: 999,
-      ...l.style
+      ...x && !f ? { maxWidth: x } : {},
+      ...u(N),
+      ...u(m.sx),
+      ...D
     },
-    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
-          })]
+    children: [(!!s || !!c || 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: [s && /* @__PURE__ */ l("div", {
+          className: "flex h-8 items-center text-sm font-normal leading-5 text-[var(--colors-grey-700)]",
+          children: s
+        }), c && /* @__PURE__ */ l("div", {
+          className: "flex text-2xl font-semibold leading-8 text-[var(--colors-grey-800)]",
+          children: c
+        })]
+      }), 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) => o?.(e, "escapeKeyDown"),
+          style: {
+            color: "var(--colors-grey-800)",
+            paddingRight: "6px",
+            paddingLeft: "6px"
+          },
+          children: j
         })]
-      }) : null
-    }), n]
+      })]
+    }), h]
   });
 };
 export {
-  b as StyledDialog
+  O as StyledDialog
 };

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

@@ -1,11 +1,4 @@
-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"
-};
+var l = "_StyledDialog_1q1f9_1", a = { StyledDialog: l };
 export {
-  l as default
+  a as default
 };

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

@@ -1,23 +1,23 @@
-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,
+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", {
   "data-testid": "styled-dialog-actions",
-  classes: {
-    ...t.classes,
-    root: o["styled-dialog-actions-root"]
+  className: "m-0 flex justify-center p-0",
+  style: {
+    ...d(a),
+    ...i
   },
-  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
+  ...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
     }))
   })
 });
 export {
-  f as StyledDialogActions
+  g as StyledDialogActions
 };

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

@@ -1,16 +1,19 @@
-import n from "./StyledDialogContent.module.js";
-import { DialogContent as r } from "@mui/material";
-import { jsx as a } from "react/jsx-runtime";
-var s = ({ children: t, classes: o, className: e, ...l }) => /* @__PURE__ */ a(r, {
-  ...l,
-  "data-test": "styled-dialog-content",
-  classes: {
-    ...o,
-    root: n["styled-dialog-content"]
-  },
-  className: e,
-  children: t
-});
+import { resolveSx as d } from "../../../helpers/sx.js";
+import m from "clsx";
+import { jsx as i } from "react/jsx-runtime";
+var p = ({ children: e, className: o, sx: r, style: t, dividers: l, classes: c, ...s }) => {
+  const a = {
+    ...d(r),
+    ...t
+  };
+  return /* @__PURE__ */ i("div", {
+    "data-test": "styled-dialog-content",
+    className: m("w-full flex-auto overflow-y-auto p-4", l && "border-y border-solid border-[rgba(0,0,0,0.12)]", o),
+    style: a,
+    ...s,
+    children: e
+  });
+};
 export {
-  s as StyledDialogContent
+  p as StyledDialogContent
 };