asma-ui-core 3.44.0 → 3.45.0

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

@@ -1,58 +1,121 @@
-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 m } from "../../../helpers/cn.js";
+import { resolveSx as k } from "../../../helpers/sx.js";
+import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as q } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as A } from "../../../hooks/useMediaQuery.hook.js";
+import B from "./StyledDialog.module.js";
+import { useEffect as F, useLayoutEffect as G, useRef as N } from "react";
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+var Q = {
+  xs: 444,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536
+}, ee = ({ open: t, onClose: n, children: D, dataTest: a, maxWidth: f = "sm", fullWidth: _, fullScreen: C, scroll: u = "paper", disableEscapeKeyDown: x, className: H, style: S, sx: j, classes: p, PaperProps: E, slotProps: h, onCloseText: y, showCloseIcon: w = !0, dialogLabel: i, dialogTitle: d, dialogHeaderNode: M }) => {
+  const W = A(), b = N(null), s = N(!1), r = W ? !0 : C;
+  G(() => {
+    const e = b.current;
+    e && t && !e.open && e.showModal();
+  }, [t]), F(() => {
+    if (!t) return;
+    const e = document.body.style.overflow, K = document.documentElement.style.overflow;
+    return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
+      document.body.style.overflow = e, document.documentElement.style.overflow = K;
+    };
+  }, [t]);
+  const c = {
+    ...E,
+    ...h?.paper
+  }, v = f === !1 ? void 0 : Q[f], { className: I, style: R, onClick: z, ...O } = h?.backdrop ?? {}, g = (e) => {
+    s.current || (s.current = !0, window.setTimeout(() => {
+      s.current = !1;
+    }, 0), n?.(e, "escapeKeyDown"));
+  }, P = (e) => {
+    e.preventDefault(), x || g(e);
+  };
+  return t ? /* @__PURE__ */ o("dialog", {
+    ref: b,
+    tabIndex: -1,
+    "data-testid": a,
+    "aria-label": a,
+    onCancel: P,
+    onKeyDown: (e) => {
+      e.key !== "Escape" || x || (e.preventDefault(), g(e));
+    },
+    className: m(B.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", u === "body" && "overflow-y-auto", H, p?.root),
     style: {
       zIndex: 999,
-      ...l.style
+      ...k(j),
+      ...S
     },
-    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__ */ l("div", {
+      ...O,
+      className: m("absolute inset-0 bg-[#626e7eb2]", I),
+      style: R,
+      onClick: (e) => {
+        z?.(e), e.defaultPrevented || n?.(e, "backdropClick");
+      }
+    }), /* @__PURE__ */ o("div", {
+      className: m("relative z-[1] flex overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", u === "paper" && "flex-col", r && "rounded-none", c.className, p?.paper),
+      style: {
+        minWidth: 0,
+        minHeight: 0,
+        ...!r && v ? { maxWidth: v } : {},
+        ...r ? {
+          width: "100%",
+          maxWidth: "100%",
+          height: "100%",
+          maxHeight: "100%"
+        } : {
+          width: _ ? "calc(100% - 64px)" : "auto",
+          maxHeight: "100%"
+        },
+        ...k(c.sx),
+        ...c.style,
+        ...r ? {
+          width: "100%",
+          maxWidth: "100%",
+          height: "100%",
+          maxHeight: "100%"
+        } : { maxHeight: "calc(100% - 64px)" }
+      },
+      children: [(!!i || !!d || w) && /* @__PURE__ */ o("div", {
+        className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
         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
+          className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
+          children: [i && /* @__PURE__ */ l("div", {
+            className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
+            children: i
+          }), d && /* @__PURE__ */ l("div", {
+            className: "flex text-2xl font-semibold leading-8 text-delta-800",
+            children: d
           })]
-        }), a && /* @__PURE__ */ o("div", {
-          className: e["styled-dialog-close"],
-          children: [c, /* @__PURE__ */ i(f, {
-            dataTest: `close-button-${d}`,
+        }), w && /* @__PURE__ */ o("div", {
+          className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
+          children: [M, /* @__PURE__ */ l(q, {
+            dataTest: `close-button-${a}`,
+            "aria-label": y ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ i(p, {
+            endIcon: /* @__PURE__ */ l(X, {
               width: 20,
               height: 20
             }),
-            onClick: (y) => {
-              l.onClose && l.onClose(y, "escapeKeyDown");
-            },
+            className: "max-w-full shrink-0 whitespace-nowrap",
+            onClick: (e) => n?.(e, "escapeKeyDown"),
             style: {
-              color: "var(--colors-grey-800)",
+              color: "var(--colors-delta-800)",
               paddingRight: "6px",
               paddingLeft: "6px"
             },
-            children: s
+            children: y
           })]
         })]
-      }) : null
-    }), n]
-  });
+      }), D]
+    })]
+  }) : null;
 };
 export {
-  b as StyledDialog
+  ee 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_1gbsy_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: i, style: a, classes: c, disableSpacing: n, ...r }) => /* @__PURE__ */ e("div", {
   "data-testid": "styled-dialog-actions",
-  classes: {
-    ...t.classes,
-    root: o["styled-dialog-actions-root"]
+  className: "m-0 flex shrink-0 justify-center p-0",
+  style: {
+    ...d(i),
+    ...a
   },
-  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
+  ...r,
+  children: /* @__PURE__ */ e("div", {
+    className: m("flex w-full justify-end gap-2 p-4", s),
+    children: o.map(l, (t) => /* @__PURE__ */ e("div", {
+      className: "max-md:flex-1 max-md:[&_button]:w-full",
+      children: t
     }))
   })
 });
 export {
-  f as StyledDialogActions
+  g as StyledDialogActions
 };

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

@@ -1,16 +1,20 @@
-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: n, ...s }) => {
+  const a = {
+    ...d(r),
+    ...t
+  };
+  return /* @__PURE__ */ i("div", {
+    "data-test": "styled-dialog-content",
+    tabIndex: 0,
+    className: m("min-h-0 w-full min-w-0 flex-auto overflow-auto px-6 py-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
 };

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

@@ -1,15 +1,20 @@
-import o from "./StyledDialogTitle.module.js";
-import { DialogTitle as e } from "@mui/material";
-import { jsx as i } from "react/jsx-runtime";
-var s = ({ children: t, ...l }) => t ? /* @__PURE__ */ i(e, {
-  ...l,
-  "data-testid": "styled-dialog-title",
-  classes: {
-    ...l.classes,
-    root: o["styled-dialog-title-root"]
-  },
-  children: t
-}) : null;
+import { resolveSx as a } from "../../../helpers/sx.js";
+import i from "clsx";
+import { jsx as m } from "react/jsx-runtime";
+var n = ({ children: t, className: e, sx: l, style: s, classes: x, ...o }) => {
+  if (!t) return null;
+  const r = {
+    ...a(l),
+    ...s
+  };
+  return /* @__PURE__ */ m("h2", {
+    "data-testid": "styled-dialog-title",
+    className: i("mx-3 p-4 text-[20px] font-semibold leading-[20px]", e),
+    style: r,
+    ...o,
+    children: t
+  });
+};
 export {
-  s as StyledDialogTitle
+  n as StyledDialogTitle
 };

package/dist/components/feedback/empty-page/StyledEmptyPage.js

@@ -1,18 +1,18 @@
 import i from "./EmptyPageIcon.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-var l = ({ emptyText: e, isEmpty: a = !0, className: r = "" }) => a ? /* @__PURE__ */ n("div", {
+var s = ({ emptyText: e, isEmpty: a = !0, className: r = "" }) => a ? /* @__PURE__ */ n("div", {
   "data-testid": "empty-page-container",
-  className: `flex h-full min-h-[106px] w-full animate-opacity-in items-center justify-center gap-2 text-sm text-gray-600 duration-300 ${r}`,
+  className: `flex h-full min-h-[106px] w-full animate-opacity-in items-center justify-center gap-2 text-sm text-delta-500 duration-300 ${r}`,
   children: [/* @__PURE__ */ t(i, {
     "data-testid": "empty-page-icon",
     width: 24,
     height: 24,
-    className: "cursor-default text-gray-600"
+    className: "cursor-default text-delta-500"
   }), /* @__PURE__ */ t("span", {
     className: "font-normal",
     children: e
   })]
 }) : null;
 export {
-  l as StyledEmptyPage
+  s as StyledEmptyPage
 };

package/dist/components/feedback/filtered-empty-state/StyledFilteredEmptyState.js

@@ -3,7 +3,7 @@ import { FilterIconOff as B } from "../../icons/filter-icon-off/FilterIconOff.js
 import { StyledButton as F } from "../../inputs/button/StyledButton.js";
 import { StyledEmptyPage as j } from "../empty-page/StyledEmptyPage.js";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-var o = {
+var n = {
   en: {
     emptyText: "No data",
     filterTitle: "Your information is currently filtered.",
@@ -18,12 +18,12 @@ var o = {
     defaultFilteredDescription: "Nullstill filtre for å se standard resultater",
     resetButtonText: "Nullstill filtre"
   }
-}, C = ({ dataTest: r, emptyText: n, locale: a = "en", isFiltered: d = !1, filteredByDefault: c = !1, filterTitle: f, filteredDescription: m, resetButtonText: p, onResetFilters: i, actionIcon: u = /* @__PURE__ */ e(B, {
+}, C = ({ dataTest: r, emptyText: o, locale: a = "en", isFiltered: d = !1, filteredByDefault: c = !1, filterTitle: f, filteredDescription: m, resetButtonText: p, onResetFilters: i, actionIcon: u = /* @__PURE__ */ e(B, {
   width: 24,
   height: 24,
   color: "currentColor"
 }), className: x, emptyPageClassName: y, filterContentClassName: T, resetButtonClassName: h }) => {
-  const t = o[a] ?? o.en, v = n ?? t.emptyText, N = f ?? t.filterTitle, D = c ? t.defaultFilteredDescription : m ?? t.filteredDescription, g = p ?? t.resetButtonText;
+  const t = n[a] ?? n.en, v = o ?? t.emptyText, N = f ?? t.filterTitle, D = c ? t.defaultFilteredDescription : m ?? t.filteredDescription, g = p ?? t.resetButtonText;
   return /* @__PURE__ */ s("div", {
     "data-test": r,
     className: l("flex size-full flex-col items-center justify-center gap-4 py-4 text-center", x),
@@ -35,20 +35,20 @@ var o = {
       className: l("flex flex-col items-center gap-2", T),
       children: [
         /* @__PURE__ */ e("div", {
-          className: "font-semibold text-delta-800",
+          className: "text-sm font-semibold text-delta-800",
           children: N
         }),
         /* @__PURE__ */ e("div", {
-          className: "text-delta-600",
+          className: "text-sm text-delta-600",
           children: D
         }),
         i && /* @__PURE__ */ e(F, {
-          size: "small",
+          size: "medium",
           variant: "text",
           dataTest: `${r}-reset`,
           onClick: i,
           startIcon: u,
-          className: h,
+          className: l("inline-flex items-center", h),
           children: /* @__PURE__ */ e("span", { children: g })
         })
       ]