asma-ui-core 3.34.0 → 3.35.0

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/minimizable-dialog/MinimizableDialog.js

@@ -1,25 +1,24 @@
 import { cn as c } from "../../../helpers/cn.js";
-import { DotsVerticalIcon as de } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { DotsVerticalIcon as ie } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
 import { LoadingIcon as S } from "../../icons/loading-icon/LoadingIcon.js";
 import { CloseIcon as O } from "../../icons/close-icon/CloseIcon.js";
-import { MinimizeIcon as re } from "../../icons/minimize-icon/MinimizeIcon.js";
-import { KeyboardCapslockIcon as ne } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
+import { MinimizeIcon as le } from "../../icons/minimize-icon/MinimizeIcon.js";
+import { KeyboardCapslockIcon as re } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
 import { StyledTooltip as h } from "../../data-display/tooltip/StyledTooltip.js";
 import { StyledButton as i } from "../../inputs/button/StyledButton.js";
-import { StyledMenu as ae } from "../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as oe } from "../../navigation/menu/StyledMenuItem.js";
+import { StyledMenu as de } from "../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as ne } from "../../navigation/menu/StyledMenuItem.js";
 import T from "./MinimizableDialog.module.js";
-import { useToggleMenuVisibility as se } from "../../../hooks/useToggleMenuVisibility.hook.js";
-import { ArrowExpand as ce } from "../../icons/arrow-expand/ArrowExpand.js";
-import { ArrowShrink as he } from "../../icons/arrow-shrink/ArrowShrink.js";
+import { useToggleMenuVisibility as ae } from "../../../hooks/useToggleMenuVisibility.hook.js";
+import { ArrowExpand as oe } from "../../icons/arrow-expand/ArrowExpand.js";
+import { ArrowShrink as se } from "../../icons/arrow-shrink/ArrowShrink.js";
 import V from "clsx";
 import { useState as $ } from "react";
-import { Fragment as z, jsx as e, jsxs as t } from "react/jsx-runtime";
-import { isArray as K, isFunction as L } from "lodash-es";
-var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", onFullScreenText: q = "", showCloseIcon: k = !0, showMinimizeIcon: H = !0, showExpandIcon: J = !0, showFullScreenIcon: Q = !0, title: u, label: p, children: v, open: W, onClose: I, className: y = "", primaryButtonText: g, primaryButtonLoading: x = !1, secondaryButtonText: o, onPrimaryButtonClick: m, onSecondaryButtonClick: f, dataTest: M, actionNode: X, extraActions: l, extraActionsText: s, btnContainerClassName: j, footerClassName: Y, footerInfo: C, locale: n = "en", enableFullscreen: Z = !0, fullScreenState: F, handleFullScreenState: _ }) => {
-  const [d, P] = $(!1), [G, A] = $(!1), { open: B, anchorEl: ee, handleOpen: te, handleClose: ie } = se();
-  if (!W) return null;
-  const a = F ?? G, b = a && !d, le = b ? {
+import { Fragment as y, jsx as e, jsxs as t } from "react/jsx-runtime";
+var Ce = ({ onCloseText: z = "", onMinimizeText: K = "", onExpandText: L = "", onFullScreenText: R = "", showCloseIcon: N = !0, showMinimizeIcon: U = !0, showExpandIcon: q = !0, showFullScreenIcon: H = !0, title: u, label: p, children: v, open: J, onClose: k, className: I = "", primaryButtonText: g, primaryButtonLoading: x = !1, secondaryButtonText: o, onPrimaryButtonClick: m, onSecondaryButtonClick: f, dataTest: M, actionNode: Q, extraActions: l, extraActionsText: s, btnContainerClassName: j, footerClassName: W, footerInfo: C, locale: n = "en", enableFullscreen: X = !0, fullScreenState: _, handleFullScreenState: F }) => {
+  const [r, Y] = $(!1), [G, Z] = $(!1), { open: A, anchorEl: P, handleOpen: B, handleClose: ee } = ae();
+  if (!J) return null;
+  const a = _ ?? G, b = a && !r, te = b ? {
     right: "auto",
     bottom: "auto",
     left: "50%",
@@ -28,56 +27,56 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
     width: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
   } : void 0, w = g ?? x, D = w || o, E = () => {
-    P(!d);
+    Y(!r);
   };
-  return /* @__PURE__ */ t(z, { children: [
+  return /* @__PURE__ */ t(y, { children: [
     b && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
     /* @__PURE__ */ e("div", {
       style: { zIndex: 51 },
-      className: c(T.dialog, !d && T.hidden),
+      className: c(T.dialog, !r && T.hidden),
       children: /* @__PURE__ */ t("div", {
-        className: V("flex items-center justify-between", !d && "hidden"),
+        className: V("flex items-center justify-between", !r && "hidden"),
         "data-testid": M,
         children: [/* @__PURE__ */ e("div", {
           className: "truncate text-lg font-semibold text-delta-800",
           children: u
         }), /* @__PURE__ */ t("div", {
           className: "flex items-center gap-x-1",
-          children: [J && /* @__PURE__ */ e(h, {
+          children: [q && /* @__PURE__ */ e(h, {
             title: n === "en" ? "Expand" : "Utvid",
             children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
               dataTest: "minimize-button",
               variant: "text",
               size: "small",
               onClick: E,
-              endIcon: /* @__PURE__ */ e(ne, {
+              endIcon: /* @__PURE__ */ e(re, {
                 height: 20,
                 width: 20,
                 color: "text-gama-500"
               }),
-              children: U
+              children: L
             }) })
-          }), k && /* @__PURE__ */ e(h, {
+          }), N && /* @__PURE__ */ e(h, {
             title: n === "en" ? "Close" : "Lukk",
             children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
               dataTest: "close-button",
               variant: "textGray",
               size: "small",
-              onClick: I,
+              onClick: k,
               endIcon: /* @__PURE__ */ e(O, {
                 height: 20,
                 width: 20,
                 color: "text-delta-700"
               }),
-              children: N
+              children: z
             }) })
           })]
         })]
       })
     }),
     /* @__PURE__ */ t("div", {
-      style: le,
-      className: c("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", y && !d && !a ? y : "", d && "!h-0 !w-0 opacity-0 duration-0", b && "fixed duration-0"),
+      style: te,
+      className: c("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", I && !r && !a ? I : "", r && "!h-0 !w-0 opacity-0 duration-0", b && "fixed duration-0"),
       "data-testid": M,
       children: [/* @__PURE__ */ t("div", {
         className: "flex flex-col gap-y-2 border-b-[1px] border-delta-200 p-4",
@@ -92,56 +91,56 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
           }), /* @__PURE__ */ t("div", {
             className: "flex items-center gap-x-1",
             children: [
-              X,
-              H && /* @__PURE__ */ e(h, {
+              Q,
+              U && /* @__PURE__ */ e(h, {
                 title: n === "en" ? "Minimize" : "Minimer",
                 children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
                   dataTest: "minimize-button",
                   variant: "textGray",
                   size: "small",
                   onClick: E,
-                  endIcon: /* @__PURE__ */ e(re, {
+                  endIcon: /* @__PURE__ */ e(le, {
                     height: 20,
                     width: 20,
                     color: "text-delta-700"
                   }),
-                  children: R
+                  children: K
                 }) })
               }),
-              Z && Q && /* @__PURE__ */ e(h, {
+              X && H && /* @__PURE__ */ e(h, {
                 title: a ? n === "en" ? "Exit full screen" : "Avslutt fullskjerm" : n === "en" ? "Full screen" : "Fullskjerm",
                 children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
                   dataTest: "fullscreen-button",
                   variant: "textGray",
                   size: "small",
-                  onClick: (r) => {
-                    F !== void 0 && _ ? _() : A(!G), r.detail !== 0 && r.currentTarget.blur();
+                  onClick: (d) => {
+                    _ !== void 0 && F ? F() : Z(!G), d.detail !== 0 && d.currentTarget.blur();
                   },
-                  endIcon: a ? /* @__PURE__ */ e(he, {
+                  endIcon: a ? /* @__PURE__ */ e(se, {
                     width: 20,
                     height: 20,
                     color: "text-delta-700"
-                  }) : /* @__PURE__ */ e(ce, {
+                  }) : /* @__PURE__ */ e(oe, {
                     width: 20,
                     height: 20,
                     color: "text-delta-700"
                   }),
-                  children: q
+                  children: R
                 }) })
               }),
-              k && /* @__PURE__ */ e(h, {
+              N && /* @__PURE__ */ e(h, {
                 title: n === "en" ? "Close" : "Lukk",
                 children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
                   dataTest: "close-button",
                   variant: "textGray",
                   size: "small",
-                  onClick: I,
+                  onClick: k,
                   endIcon: /* @__PURE__ */ e(O, {
                     height: 20,
                     width: 20,
                     color: "text-delta-700"
                   }),
-                  children: N
+                  children: z
                 }) })
               })
             ]
@@ -151,32 +150,32 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
           children: u
         })]
       }), /* @__PURE__ */ t("div", {
-        className: V("flex flex-col", a && !d && "h-[87dvh]"),
+        className: V("flex flex-col", a && !r && "h-[87dvh]"),
         children: [/* @__PURE__ */ e("div", {
           className: "flex-grow overflow-y-auto",
           children: typeof v == "function" ? v({ fullScreen: a }) : v
-        }), (K(l) && l.length || L(l)) && s || C ? /* @__PURE__ */ t("div", {
-          className: c("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", Y),
+        }), (Array.isArray(l) && l.length || typeof l == "function") && s || C ? /* @__PURE__ */ t("div", {
+          className: c("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", W),
           children: [
-            K(l) && l.length && s ? /* @__PURE__ */ t(z, { children: [/* @__PURE__ */ e(i, {
+            Array.isArray(l) && l.length && s ? /* @__PURE__ */ t(y, { children: [/* @__PURE__ */ e(i, {
               dataTest: "extra-actions-button",
               variant: "textGray",
-              startIcon: /* @__PURE__ */ e(de, {
+              startIcon: /* @__PURE__ */ e(ie, {
                 width: 24,
                 height: 24
               }),
-              onClick: te,
+              onClick: B,
               children: s
-            }), /* @__PURE__ */ e(ae, {
-              open: B,
-              anchorEl: ee,
-              onClose: ie,
-              children: l.map((r) => /* @__PURE__ */ e(oe, {
-                className: r.className,
-                onClick: r.onClick,
-                children: r.label
-              }, r.label))
-            })] }) : s && L(l) && /* @__PURE__ */ e(i, {
+            }), /* @__PURE__ */ e(de, {
+              open: A,
+              anchorEl: P,
+              onClose: ee,
+              children: l.map((d) => /* @__PURE__ */ e(ne, {
+                className: d.className,
+                onClick: d.onClick,
+                children: d.label
+              }, d.label))
+            })] }) : s && typeof l == "function" && /* @__PURE__ */ e(i, {
               dataTest: "extra-action-button",
               variant: "text",
               onClick: l,
@@ -202,7 +201,7 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
               })]
             }) : null
           ]
-        }) : /* @__PURE__ */ e(z, { children: D ? /* @__PURE__ */ t("div", {
+        }) : /* @__PURE__ */ e(y, { children: D ? /* @__PURE__ */ t("div", {
           className: c("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", j),
           children: [o && f && /* @__PURE__ */ e(i, {
             dataTest: "cancel-button",
@@ -224,5 +223,5 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
   ] });
 };
 export {
-  Ge as MinimizableDialog
+  Ce as MinimizableDialog
 };

package/dist/components/feedback/snack-bar/StyledAlert.js

@@ -1,17 +1,75 @@
-import { CheckOutlineIcon as r } from "./components/CheckOutlineIcon.js";
-import { Alert as e } from "@mui/material";
-import { jsx as t } from "react/jsx-runtime";
-var m = (i) => /* @__PURE__ */ t(e, {
-  iconMapping: {
-    success: /* @__PURE__ */ t(r, {
-      height: 24,
-      width: 24,
-      fontSize: "inherit"
-    }),
-    ...i.iconMapping
+import { cn as f } from "../../../helpers/cn.js";
+import { resolveSx as g } from "../../../helpers/sx.js";
+import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
+import { CheckOutlineIcon as u } from "./components/CheckOutlineIcon.js";
+import { ErrorOutlineIcon as b } from "./components/ErrorOutlineIcon.js";
+import { InfoOutlineIcon as x } from "./components/InfoOutlineIcon.js";
+import { WarningAmberOutlineIcon as w } from "./components/WarningAmberOutlineIcon.js";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+var I = {
+  standard: {
+    success: "bg-success-50 text-success-700",
+    info: "bg-info-50 text-info-700",
+    warning: "bg-warning-50 text-warning-700",
+    error: "bg-error-50 text-error-700"
   },
-  ...i
-});
+  filled: {
+    success: "bg-success-500 text-white",
+    info: "bg-info-500 text-white",
+    warning: "bg-warning-500 text-white",
+    error: "bg-error-500 text-white"
+  },
+  outlined: {
+    success: "border border-success-500 text-success-700",
+    info: "border border-info-500 text-info-700",
+    warning: "border border-warning-500 text-warning-700",
+    error: "border border-error-500 text-error-700"
+  }
+}, A = {
+  success: /* @__PURE__ */ r(u, {
+    width: 24,
+    height: 24
+  }),
+  info: /* @__PURE__ */ r(x, {
+    width: 24,
+    height: 24
+  }),
+  warning: /* @__PURE__ */ r(w, {
+    width: 24,
+    height: 24
+  }),
+  error: /* @__PURE__ */ r(b, {
+    width: 24,
+    height: 24
+  })
+}, E = ({ severity: e = "success", variant: i = "standard", icon: t, iconMapping: s, action: c, onClose: n, children: a, className: l, sx: d, role: h = "alert" }) => {
+  const o = t === !1 ? null : t ?? s?.[e] ?? A[e];
+  return /* @__PURE__ */ p("div", {
+    role: h,
+    className: f("flex items-center gap-2 rounded-lg px-4 py-2 text-sm", I[i][e], l),
+    style: g(d),
+    children: [
+      o && /* @__PURE__ */ r("span", {
+        className: "flex shrink-0 items-center",
+        children: o
+      }),
+      /* @__PURE__ */ r("span", {
+        className: "min-w-0 flex-1",
+        children: a
+      }),
+      c ?? (n && /* @__PURE__ */ r("button", {
+        type: "button",
+        "aria-label": "Close",
+        onClick: n,
+        className: "flex shrink-0 items-center justify-center rounded-full p-1 hover:bg-black/10",
+        children: /* @__PURE__ */ r(m, {
+          width: 18,
+          height: 18
+        })
+      }))
+    ]
+  });
+};
 export {
-  m as StyledAlert
+  E as StyledAlert
 };

package/dist/components/feedback/snack-bar/StyledSnackbar.js

@@ -1,10 +1,36 @@
-import { Snackbar as t } from "@mui/material";
-import { jsx as o } from "react/jsx-runtime";
-var d = ({ children: a, ...r }) => /* @__PURE__ */ o(t, {
-  autoHideDuration: r.autoHideDuration ?? 3e3,
-  ...r,
-  children: a && /* @__PURE__ */ o("div", { children: a })
-});
+import { cn as c } from "../../../helpers/cn.js";
+import { useEffect as p } from "react";
+import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import { FloatingPortal as h } from "@floating-ui/react";
+var b = {
+  "top-left": "top-6 left-6",
+  "top-center": "top-6 left-1/2 -translate-x-1/2",
+  "top-right": "top-6 right-6",
+  "bottom-left": "bottom-6 left-6",
+  "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-6 right-6"
+}, S = ({ open: t = !1, autoHideDuration: e = 3e3, onClose: r, anchorOrigin: o = {
+  vertical: "bottom",
+  horizontal: "left"
+}, message: i, action: m, children: a, className: f }) => {
+  if (p(() => {
+    if (!t || e == null) return;
+    const s = setTimeout(() => r?.(null, "timeout"), e);
+    return () => clearTimeout(s);
+  }, [
+    t,
+    e,
+    r
+  ]), !t) return null;
+  const n = b[`${o.vertical}-${o.horizontal}`];
+  return /* @__PURE__ */ l(h, { children: /* @__PURE__ */ l("div", {
+    className: c("fixed z-[1400] flex items-center gap-2", n, f),
+    children: a ?? /* @__PURE__ */ x("div", {
+      className: "flex items-center gap-2 rounded-lg bg-delta-800 px-4 py-3 text-sm text-white shadow-lg",
+      children: [i, m]
+    })
+  }) });
+};
 export {
-  d as StyledSnackbar
+  S as StyledSnackbar
 };

package/dist/components/feedback/snack-bar/components/StyledDefaultSnackbar.js

@@ -1,73 +1,72 @@
 import { omit as f } from "../../../../helpers/omit.js";
-import { CloseIcon as p } from "../../../icons/close-icon/CloseIcon.js";
-import { CheckOutlineIcon as u } from "./CheckOutlineIcon.js";
+import { CloseIcon as u } from "../../../icons/close-icon/CloseIcon.js";
+import { CheckOutlineIcon as p } from "./CheckOutlineIcon.js";
 import { ErrorOutlineIcon as g } from "./ErrorOutlineIcon.js";
-import { InfoOutlineIcon as I } from "./InfoOutlineIcon.js";
-import { WarningAmberOutlineIcon as S } from "./WarningAmberOutlineIcon.js";
-import i from "./StyledDefaultSnackbar.module.js";
-import t from "clsx";
-import { forwardRef as v } from "react";
-import { IconButton as b } from "@mui/material";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { SnackbarContent as k, useSnackbar as w } from "notistack";
-var x = {
-  info: /* @__PURE__ */ r(I, {
+import { InfoOutlineIcon as b } from "./InfoOutlineIcon.js";
+import { WarningAmberOutlineIcon as v } from "./WarningAmberOutlineIcon.js";
+import r from "./StyledDefaultSnackbar.module.js";
+import o from "clsx";
+import { forwardRef as I } from "react";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { SnackbarContent as S, useSnackbar as k } from "notistack";
+var w = {
+  info: /* @__PURE__ */ e(b, {
     height: 24,
     width: 24
   }),
-  error: /* @__PURE__ */ r(g, {
+  error: /* @__PURE__ */ e(g, {
     height: 24,
     width: 24
   }),
-  success: /* @__PURE__ */ r(u, {
+  success: /* @__PURE__ */ e(p, {
     height: 24,
     width: 24
   }),
-  warning: /* @__PURE__ */ r(S, {
+  warning: /* @__PURE__ */ e(v, {
     height: 24,
     width: 24
   })
-}, B = v((c, l) => {
-  const { id: a, message: m, severity: e, action: o, title: s, ...h } = f(c, [
+}, R = I((c, l) => {
+  const { id: a, message: s, severity: t, action: i, title: m, ...d } = f(c, [
     "anchorOrigin",
     "autoHideDuration",
     "hideIconVariant",
     "iconVariant",
     "persist"
-  ]), { closeSnackbar: d } = w();
-  return /* @__PURE__ */ r(k, {
+  ]), { closeSnackbar: h } = k();
+  return /* @__PURE__ */ e(S, {
     ref: l,
     role: "alert",
-    ...h,
+    ...d,
     children: /* @__PURE__ */ n("div", {
-      className: t(i.container, i[e]),
+      className: o(r.container, r[t]),
       children: [
         /* @__PURE__ */ n("div", {
-          className: i.header,
+          className: r.header,
           children: [/* @__PURE__ */ n("div", {
-            className: t(i.title, i[`title_${e}`]),
-            children: [x[e], /* @__PURE__ */ r("span", { children: s ?? e })]
-          }), /* @__PURE__ */ r(b, {
+            className: o(r.title, r[`title_${t}`]),
+            children: [w[t], /* @__PURE__ */ e("span", { children: m ?? t })]
+          }), /* @__PURE__ */ e("button", {
+            type: "button",
             "aria-label": "close",
-            color: "inherit",
-            sx: { p: "2px" },
-            onClick: () => d(a),
-            children: /* @__PURE__ */ r(p, {
+            className: "flex items-center justify-center rounded-full p-[2px] hover:bg-black/10",
+            onClick: () => h(a),
+            children: /* @__PURE__ */ e(u, {
               width: 20,
               height: 20,
               color: "#49525F"
             })
           })]
         }),
-        /* @__PURE__ */ r("div", {
-          className: t(i.message, i[`message_${e}`]),
-          children: m
+        /* @__PURE__ */ e("div", {
+          className: o(r.message, r[`message_${t}`]),
+          children: s
         }),
-        o ? /* @__PURE__ */ r("div", { children: typeof o == "function" ? o(a) : o }) : null
+        i ? /* @__PURE__ */ e("div", { children: typeof i == "function" ? i(a) : i }) : null
       ]
     })
   });
 });
 export {
-  B as StyledDefaultSnackbar
+  R as StyledDefaultSnackbar
 };