asma-ui-core 3.19.0 → 3.20.0

package/dist/components/data-display/ai-disclosure/StyledAIDisclosure.js

@@ -0,0 +1,49 @@
+import { StyledTooltip as a } from "../tooltip/StyledTooltip.js";
+import n from "../../custom/widget/icons/ChevronDownIcon.js";
+import e from "./StyledAIDisclosure.module.js";
+import c from "clsx";
+import { useState as m } from "react";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+var x = ({ label: t, tooltip: s }) => {
+  const [o, l] = m(!1);
+  return /* @__PURE__ */ d("div", {
+    className: e.root,
+    children: [
+      /* @__PURE__ */ r("div", {
+        className: e.watermark,
+        children: /* @__PURE__ */ r("span", {
+          className: e.watermarkText,
+          children: "AI"
+        })
+      }),
+      t && /* @__PURE__ */ r("span", {
+        className: e.label,
+        children: t
+      }),
+      s && /* @__PURE__ */ r(a, {
+        arrow: !0,
+        disableFocusListener: !0,
+        disableHoverListener: !0,
+        disableTouchListener: !0,
+        onClose: () => l(!1),
+        open: o,
+        title: s,
+        children: /* @__PURE__ */ r("button", {
+          "aria-expanded": o,
+          "aria-label": "Toggle AI disclosure tooltip",
+          className: e.trigger,
+          onClick: () => l((i) => !i),
+          type: "button",
+          children: /* @__PURE__ */ r(n, {
+            className: c(e.chevron, o && e.chevronOpen),
+            height: 16,
+            width: 16
+          })
+        })
+      })
+    ]
+  });
+};
+export {
+  x as StyledAIDisclosure
+};

package/dist/components/data-display/ai-disclosure/StyledAIDisclosure.module.js

@@ -0,0 +1,12 @@
+var r = "_root_1b1pp_1", _ = "_watermark_1b1pp_11", e = "_watermarkText_1b1pp_25", a = "_label_1b1pp_36", p = "_trigger_1b1pp_42", t = "_chevron_1b1pp_55", v = "_chevronOpen_1b1pp_61", o = {
+  root: r,
+  watermark: _,
+  watermarkText: e,
+  label: a,
+  trigger: p,
+  chevron: t,
+  chevronOpen: v
+};
+export {
+  o as default
+};

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

@@ -0,0 +1,28 @@
+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 {
+  x as StyledBadge
+};

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

@@ -0,0 +1,62 @@
+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
+  }
+}));
+export {
+  m as StyledChip
+};

package/dist/components/data-display/form-label/components/StyledFormLabel.js

@@ -0,0 +1,12 @@
+import { getStyles as a } from "../helpers/getStyles.js";
+import s from "clsx";
+import { jsx as i } from "react/jsx-runtime";
+var c = ({ title: r, onClick: t, className: e, dataTest: m, size: o = "base" }) => /* @__PURE__ */ i("div", {
+  className: s(a({ size: o }), e),
+  onClick: t,
+  "data-testid": m,
+  children: r
+});
+export {
+  c as StyledFormLabel
+};

package/dist/components/data-display/form-label/helpers/getStyles.js

@@ -0,0 +1,16 @@
+import e from "../styles/StyledFormLabel.module.js";
+var r = ({ size: l }) => {
+  switch (l) {
+    case "md":
+      return e["styled-label-md"];
+    case "lg":
+      return e["styled-label-lg"];
+    case "xl":
+      return e["styled-label-xl"];
+    default:
+      return e["styled-label-base"];
+  }
+};
+export {
+  r as getStyles
+};

package/dist/components/data-display/form-label/styles/StyledFormLabel.module.js

@@ -0,0 +1,9 @@
+var l = {
+  "styled-label-md": "_styled-label-md_jbn3o_1",
+  "styled-label-base": "_styled-label-base_jbn3o_10",
+  "styled-label-lg": "_styled-label-lg_jbn3o_19",
+  "styled-label-xl": "_styled-label-xl_jbn3o_27"
+};
+export {
+  l as default
+};

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

@@ -0,0 +1,47 @@
+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 t } 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, e = {
+    borderColor: "var(--colors-gama-300)",
+    backgroundColor: "var(--colors-gama-25)",
+    boxShadow: "0 0 0 1px inset var(--colors-gama-300)"
+  }, l = o.ariaLabel ?? (typeof o.label == "string" ? o.label : void 0);
+  return /* @__PURE__ */ t(v, {
+    ref: n,
+    "aria-label": l,
+    avatar: /* @__PURE__ */ t(s, {
+      dataTest: o.dataTest,
+      disableRipple: !0,
+      checked: a,
+      size: c,
+      sx: { pointerEvents: "none" },
+      inputProps: { "aria-label": l }
+    }),
+    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": e
+      },
+      ...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": e,
+      ...o.sx
+    }
+  });
+});
+export {
+  S as StyledInteractiveChip
+};

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

@@ -0,0 +1,38 @@
+import { Tooltip as e } from "@mui/material";
+import { jsx as i } from "react/jsx-runtime";
+import n from "@mui/material/Fade";
+var x = (r) => {
+  const { componentsProps: t, ...p } = r, o = t?.tooltip;
+  return /* @__PURE__ */ i(e, {
+    TransitionComponent: n,
+    TransitionProps: { timeout: 300 },
+    enterDelay: 500,
+    placement: "top",
+    componentsProps: {
+      ...t,
+      tooltip: {
+        ...o ?? {},
+        style: { ...o?.style ?? {} },
+        sx: {
+          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",
+          ...o?.sx
+        }
+      }
+    },
+    ...p
+  });
+};
+export {
+  x as StyledTooltip
+};

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

@@ -0,0 +1,6 @@
+import { Typography as o } from "@mui/material";
+import { jsx as p } from "react/jsx-runtime";
+var t = (r) => /* @__PURE__ */ p(o, { ...r });
+export {
+  t as StyledTypography
+};

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

@@ -0,0 +1,58 @@
+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,
+      ...l.style
+    },
+    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
+          })]
+        })]
+      }) : null
+    }), n]
+  });
+};
+export {
+  b as StyledDialog
+};

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

@@ -0,0 +1,11 @@
+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 {
+  l as default
+};

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

@@ -0,0 +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,
+  "data-testid": "styled-dialog-actions",
+  classes: {
+    ...t.classes,
+    root: o["styled-dialog-actions-root"]
+  },
+  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 {
+  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
+};

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

@@ -0,0 +1,16 @@
+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
+});
+export {
+  s as StyledDialogContent
+};

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

@@ -0,0 +1,4 @@
+var t = { "styled-dialog-content": "_styled-dialog-content_d2vki_1" };
+export {
+  t as default
+};

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

@@ -0,0 +1,15 @@
+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;
+export {
+  s as StyledDialogTitle
+};

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

@@ -0,0 +1,4 @@
+var t = { "styled-dialog-title-root": "_styled-dialog-title-root_mcspk_1" };
+export {
+  t as default
+};

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

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+function s(e) {
+  return /* @__PURE__ */ t("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    ...e,
+    children: /* @__PURE__ */ t("path", {
+      fill: "currentColor",
+      d: "M7 9H2V7h5zm0 3H2v2h5zm13.59 7l-3.83-3.83c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L22 17.59zM17 11c0-1.65-1.35-3-3-3s-3 1.35-3 3s1.35 3 3 3s3-1.35 3-3M2 19h10v-2H2z"
+    })
+  });
+}
+export {
+  s as default
+};

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

@@ -0,0 +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", {
+  "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}`,
+  children: [/* @__PURE__ */ t(i, {
+    "data-testid": "empty-page-icon",
+    width: 24,
+    height: 24,
+    className: "cursor-default text-gray-600"
+  }), /* @__PURE__ */ t("span", {
+    className: "font-normal",
+    children: e
+  })]
+}) : null;
+export {
+  l as StyledEmptyPage
+};

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

@@ -0,0 +1,60 @@
+import { cn as l } from "../../../helpers/cn.js";
+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 n = {
+  en: {
+    emptyText: "No data",
+    filterTitle: "Your information is currently filtered.",
+    filteredDescription: "Reset filters to see all results",
+    defaultFilteredDescription: "Reset filters to see default results",
+    resetButtonText: "Reset filters"
+  },
+  no: {
+    emptyText: "Ingen data",
+    filterTitle: "Din informasjon er filtrert.",
+    filteredDescription: "Nullstill filtre for å se alle resultater",
+    defaultFilteredDescription: "Nullstill filtre for å se standard resultater",
+    resetButtonText: "Nullstill filtre"
+  }
+}, 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 = n[a] ?? n.en, v = o ?? t.emptyText, N = f ?? t.filterTitle, g = c ? t.defaultFilteredDescription : m ?? t.filteredDescription, D = 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),
+    children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(j, {
+      isEmpty: !0,
+      emptyText: v,
+      className: l("py-6", y)
+    }) }), d && /* @__PURE__ */ s("div", {
+      className: l("flex flex-col items-center gap-2", T),
+      children: [
+        /* @__PURE__ */ e("div", {
+          className: "font-semibold text-delta-800",
+          children: N
+        }),
+        /* @__PURE__ */ e("div", {
+          className: "text-delta-600",
+          children: g
+        }),
+        i && /* @__PURE__ */ e(F, {
+          size: "small",
+          variant: "text",
+          dataTest: `${r}-reset`,
+          onClick: i,
+          startIcon: u,
+          className: l("inline-flex items-center text-gama-700 hover:text-gama-800", h),
+          children: /* @__PURE__ */ e("span", { children: D })
+        })
+      ]
+    })]
+  });
+};
+export {
+  C as StyledFilteredEmptyState
+};

package/dist/components/feedback/loading/StyledLoading.js

@@ -0,0 +1,21 @@
+import { LoadingIcon as m } from "../../icons/loading-icon/LoadingIcon.js";
+import o from "clsx";
+import { jsx as i } from "react/jsx-runtime";
+var l = {
+  small: 16,
+  medium: 24,
+  large: 32
+}, s = ({ isLoading: r, className: t = "", size: a = "medium" }) => {
+  if (!r) return null;
+  const e = l[a];
+  return /* @__PURE__ */ i("div", {
+    className: o("flex h-[50px] w-full animate-opacity-appear-3 items-center justify-center text-gama-500", t),
+    children: /* @__PURE__ */ i(m, {
+      width: e,
+      height: e
+    })
+  });
+};
+export {
+  s as StyledLoading
+};