@altinn/altinn-components 0.13.3 → 0.14.0

package/dist/components/Dialog/Dialog.js

@@ -1,72 +1,90 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Typography as s } from "../Typography/Typography.js";
-import { Heading as w } from "../Typography/Heading.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { Heading as v } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { DialogMetadata as C } from "./DialogMetadata.js";
-import { DialogByline as M } from "./DialogByline.js";
-import { DialogActions as N } from "./DialogActions.js";
-import { DialogContent as k } from "./DialogContent.js";
-import { DialogSection as D } from "./DialogSection.js";
-import { DialogAttachments as q } from "./DialogAttachments.js";
+import { DialogMetadata as w } from "./DialogMetadata.js";
+import { DialogByline as C } from "./DialogByline.js";
+import { DialogActions as F } from "./DialogActions.js";
+import { DialogContent as N } from "./DialogContent.js";
+import { DialogSection as s } from "./DialogSection.js";
+import { DialogAttachments as k } from "./DialogAttachments.js";
 import "../RootProvider/RootProvider.js";
-import { DialogTimeline as E } from "./DialogTimeline.js";
-import { DialogHistory as F } from "./DialogHistory.js";
+import { DialogTimeline as q } from "./DialogTimeline.js";
+import { DialogHistory as E } from "./DialogHistory.js";
 import "../Snackbar/useSnackbar.js";
 import { PageBase as G } from "../Page/PageBase.js";
 import { PageNav as J } from "../Page/PageNav.js";
-import { Article as K } from "../Page/Article.js";
-const ir = ({
-  backButton: o,
-  menu: t,
+import { PageMenu as K } from "../Page/PageMenu.js";
+import { Article as L } from "../Page/Article.js";
+import { Section as O } from "../Page/Section.js";
+import { Flex as Q } from "../Page/Flex.js";
+const hr = ({
+  backButton: D,
+  menu: p,
   updatedAt: x,
-  updatedAtLabel: u,
+  updatedAtLabel: d,
   dueAt: y,
   dueAtLabel: z,
   status: A,
-  title: b,
-  sender: d,
-  recipient: j,
-  recipientLabel: B = "to",
-  recipientGroup: H,
-  summary: P = "Summary.",
-  body: S,
-  actions: i = [],
-  attachments: l,
-  seenBy: T,
-  activityLog: v,
-  history: g,
-  timeline: h,
-  additionalInfo: m,
-  contactInfo: e
-}) => /* @__PURE__ */ p(G, { bg: "default", shadow: "xs", children: [
-  /* @__PURE__ */ r(J, { padding: "sm", backButton: o, menu: t, children: /* @__PURE__ */ r(C, { status: A, dueAt: y, dueAtLabel: z }) }),
-  /* @__PURE__ */ p(K, { padding: "xl", spacing: "xl", children: [
-    /* @__PURE__ */ r(w, { size: "xl", children: b }),
-    g && /* @__PURE__ */ r(F, { ...g, collapsible: !0 }),
-    /* @__PURE__ */ r(
-      M,
-      {
-        size: "lg",
-        sender: d,
-        recipient: j,
-        recipientLabel: B,
-        recipientGroup: H
-      }
-    ),
-    /* @__PURE__ */ p(k, { updatedAt: x, updatedAtLabel: u, seenBy: T, activityLog: v, children: [
-      /* @__PURE__ */ r("p", { children: P }),
-      S,
-      l && /* @__PURE__ */ r(q, { ...l }),
-      (i == null ? void 0 : i.length) > 0 && /* @__PURE__ */ r(N, { items: i })
-    ] }),
-    h && /* @__PURE__ */ r(E, { ...h }),
-    m && /* @__PURE__ */ r(D, { title: m == null ? void 0 : m.title, children: /* @__PURE__ */ r(s, { size: "md", children: m == null ? void 0 : m.children }) }),
-    e && /* @__PURE__ */ r(D, { title: e == null ? void 0 : e.title, children: /* @__PURE__ */ r(s, { size: "md", children: e == null ? void 0 : e.children }) })
-  ] })
+  title: P,
+  sender: S,
+  recipient: b,
+  recipientLabel: j = "to",
+  recipientGroup: u,
+  summary: B = "Summary.",
+  body: H,
+  actions: l = [],
+  attachments: g,
+  seenBy: M,
+  activityLog: T,
+  history: t,
+  timeline: o,
+  additionalInfo: e,
+  contactInfo: i
+}) => /* @__PURE__ */ m(G, { children: [
+  /* @__PURE__ */ m(O, { theme: "default", shadow: "xs", bleed: !0, children: [
+    /* @__PURE__ */ r(J, { color: "neutral", padding: 2, backButton: D, menu: p }),
+    /* @__PURE__ */ m(L, { padding: 6, spacing: 6, children: [
+      /* @__PURE__ */ m(Q, { direction: "col", align: "start", spacing: 3, children: [
+        /* @__PURE__ */ r(v, { size: "xl", children: P }),
+        /* @__PURE__ */ r(w, { status: A, dueAt: y, dueAtLabel: z })
+      ] }),
+      t && /* @__PURE__ */ r(E, { ...t, collapsible: !0 }),
+      /* @__PURE__ */ r(
+        C,
+        {
+          size: "lg",
+          sender: S,
+          recipient: b,
+          recipientLabel: j,
+          recipientGroup: u
+        }
+      ),
+      /* @__PURE__ */ m(
+        N,
+        {
+          updatedAt: x,
+          updatedAtLabel: d,
+          seenBy: M,
+          activityLog: T,
+          children: [
+            /* @__PURE__ */ r("p", { children: B }),
+            H,
+            g && /* @__PURE__ */ r(k, { ...g }),
+            (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ r(F, { items: l })
+          ]
+        }
+      ),
+      o && /* @__PURE__ */ r(q, { ...o }),
+      e && /* @__PURE__ */ r(s, { title: e == null ? void 0 : e.title, children: /* @__PURE__ */ r(h, { size: "md", children: e == null ? void 0 : e.children }) }),
+      i && /* @__PURE__ */ r(s, { title: i == null ? void 0 : i.title, children: /* @__PURE__ */ r(h, { size: "md", children: i == null ? void 0 : i.children }) })
+    ] })
+  ] }),
+  /* @__PURE__ */ r(K, { items: p == null ? void 0 : p.items })
 ] });
 export {
-  ir as Dialog
+  hr as Dialog
 };

package/dist/components/Dialog/DialogActions.js

@@ -1,60 +1,59 @@
 "use client";
 import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as p, useMemo as m } from "react";
+import { useState as a, useMemo as m } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { Button as u } from "../Button/Button.js";
 import { ComboButton as f } from "../Button/ComboButton.js";
-import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Snackbar/useSnackbar.js";
 import { Menu as y } from "../Menu/Menu.js";
-import '../../assets/DialogActions.css';const g = "_action_1lkfe_1", h = "_comboButton_1lkfe_7", _ = "_dropdown_1lkfe_11", i = {
-  action: g,
-  comboButton: h,
-  dropdown: _
-}, z = ({ items: e, maxItems: l = 2 }) => {
-  const [c, a] = p(!1), n = m(() => (e || []).sort((r, o) => {
-    const s = ["primary", "secondary", "tertiary"];
-    return s.indexOf(r == null ? void 0 : r.priority) - s.indexOf(o == null ? void 0 : o.priority);
-  }), [e]);
-  if (!n.length || l <= 0)
+import { DropdownBase as g } from "../Dropdown/DropdownBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/DialogActions.css';const h = "_action_1lkfe_1", _ = "_comboButton_1lkfe_7", k = "_dropdown_1lkfe_11", s = {
+  action: h,
+  comboButton: _,
+  dropdown: k
+}, M = ({ items: i, maxItems: e = 2 }) => {
+  const [c, p] = a(!1), r = m(() => (i || []).sort((n, o) => {
+    const l = ["primary", "secondary", "tertiary"];
+    return l.indexOf(n == null ? void 0 : n.priority) - l.indexOf(o == null ? void 0 : o.priority);
+  }), [i]);
+  if (!r.length || e <= 0)
     return null;
-  if (n.length > l) {
-    const r = n.slice(1).map((o) => ({
+  if (r.length > e) {
+    const n = r.slice(1).map((o) => ({
       id: o.id,
       title: o.label,
       onClick: o.onClick,
       group: o.priority
     }));
-    return /* @__PURE__ */ d("section", { className: i.comboButton, children: [
+    return /* @__PURE__ */ d("section", { className: s.comboButton, children: [
       /* @__PURE__ */ t(
         f,
         {
-          color: "primary",
           variant: "solid",
           icon: c ? "chevron-up" : "chevron-down",
           size: "lg",
-          onIconClick: () => a((o) => !o),
-          children: n[0].label
+          onIconClick: () => p((o) => !o),
+          children: r[0].label
         }
       ),
-      /* @__PURE__ */ t("div", { className: i.dropdown, "aria-expanded": c, children: /* @__PURE__ */ t(y, { items: r, theme: "global" }) })
+      /* @__PURE__ */ t(g, { open: c, children: /* @__PURE__ */ t(y, { items: n }) })
     ] });
   }
-  return /* @__PURE__ */ t("section", { className: i.action, children: n.map((r, o) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("section", { className: s.action, children: r.map((n, o) => /* @__PURE__ */ t(
     u,
     {
-      onClick: r.onClick,
-      color: "primary",
-      variant: r.priority === "primary" ? "solid" : "outline",
+      onClick: n.onClick,
+      variant: n.priority === "primary" ? "solid" : "outline",
       size: "lg",
-      loading: r.loading,
-      children: r.label
+      loading: n.loading,
+      children: n.label
     },
     "button-" + o
   )) });
 };
 export {
-  z as DialogActions
+  M as DialogActions
 };

package/dist/components/Dialog/DialogActivityLog.js

@@ -1,13 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import { MetaItem as c } from "../Meta/MetaItem.js";
+import { MetaItem as m } from "../Meta/MetaItem.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-const s = ({
+const x = ({
   size: o = "xs",
   label: t = "Activity log",
-  onClick: m,
+  onClick: p,
   ...i
-}) => /* @__PURE__ */ r(c, { ...i, size: o, icon: "clock-dashed", children: t });
+}) => /* @__PURE__ */ r(m, { ...i, size: o, icon: "clock-dashed", children: t });
 export {
-  s as DialogActivityLog
+  x as DialogActivityLog
 };

package/dist/components/Dialog/DialogAttachments.js

@@ -1,12 +1,17 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as i } from "../Typography/Heading.js";
-import { AttachmentList as e } from "../Attachment/AttachmentList.js";
-const m = ({ title: n = "Attachments", items: t }) => t != null && t.length ? /* @__PURE__ */ o("section", { children: [
-  /* @__PURE__ */ r(i, { as: "h2", size: "xs", children: n }),
-  /* @__PURE__ */ r(e, { size: "lg", items: t })
+import { Heading as n } from "../Typography/Heading.js";
+import { AttachmentList as m } from "../Attachment/AttachmentList.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { Section as p } from "../Page/Section.js";
+const u = ({ title: o = "Attachments", items: r }) => r != null && r.length ? /* @__PURE__ */ i(p, { spacing: 1, children: [
+  /* @__PURE__ */ t(n, { as: "h2", size: "xs", children: o }),
+  /* @__PURE__ */ t(m, { size: "lg", items: r })
 ] }) : null;
 export {
-  m as DialogAttachments
+  u as DialogAttachments
 };

package/dist/components/Dialog/DialogContent.js

@@ -1,25 +1,25 @@
-import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import { jsx as i, jsxs as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { Typography as n } from "../Typography/Typography.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { DialogActivityLog as l } from "./DialogActivityLog.js";
-import { DialogSeenBy as a } from "./DialogSeenBy.js";
-import { MetaBase as c } from "../Meta/MetaBase.js";
+import { DialogActivityLog as c } from "./DialogActivityLog.js";
+import { DialogSeenBy as l } from "./DialogSeenBy.js";
+import { MetaBase as a } from "../Meta/MetaBase.js";
 import "../RootProvider/RootProvider.js";
 import { Byline as d } from "../Byline/Byline.js";
 import "../Snackbar/useSnackbar.js";
 import { TimelineSection as f } from "../Timeline/TimelineSection.js";
 import { Section as s } from "../Page/Section.js";
-const M = ({ updatedAt: t, updatedAtLabel: e, seenBy: o, activityLog: m, children: p }) => /* @__PURE__ */ i(f, { seen: !1, children: /* @__PURE__ */ r(s, { spacing: "lg", margin: "md", children: [
-  /* @__PURE__ */ r("div", { children: [
+const M = ({ updatedAt: t, updatedAtLabel: e, seenBy: r, activityLog: m, children: p }) => /* @__PURE__ */ i(f, { children: /* @__PURE__ */ o(s, { spacing: 4, margin: "section", children: [
+  /* @__PURE__ */ o("div", { children: [
     /* @__PURE__ */ i(d, { datetime: t, children: e }),
     /* @__PURE__ */ i(n, { size: "md", children: p })
   ] }),
-  /* @__PURE__ */ r(c, { children: [
-    o && /* @__PURE__ */ i(a, { ...o }),
-    m && /* @__PURE__ */ i(l, { ...m })
+  /* @__PURE__ */ o(a, { children: [
+    r && /* @__PURE__ */ i(l, { ...r }),
+    m && /* @__PURE__ */ i(c, { ...m })
   ] })
 ] }) });
 export {

package/dist/components/Dialog/DialogHistoryItem.js

@@ -8,30 +8,31 @@ import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { TimelineSection as a } from "../Timeline/TimelineSection.js";
-import { DialogHistoryDetails as h } from "./DialogHistoryDetails.js";
-const d = ({
+import { DialogHistoryDetails as c } from "./DialogHistoryDetails.js";
+const b = ({
   createdBy: i,
-  createdAt: r,
+  createdAt: t,
   createdAtLabel: m,
-  summary: t,
-  attachments: p,
-  transmissions: e,
-  children: l
+  summary: r,
+  attachments: l,
+  transmissions: p,
+  children: e
 }) => /* @__PURE__ */ o(
   a,
   {
+    color: "neutral",
     size: "xs",
-    datetime: r,
+    datetime: t,
     dateline: m,
     byline: i == null ? void 0 : i.name,
     avatar: i,
-    children: /* @__PURE__ */ n(s, { theme: "article", size: "md", children: [
-      t && /* @__PURE__ */ o("p", { children: t }),
-      /* @__PURE__ */ o(h, { attachments: p, transmissions: e }),
-      l
+    children: /* @__PURE__ */ n(s, { color: "article", size: "md", children: [
+      r && /* @__PURE__ */ o("p", { children: r }),
+      /* @__PURE__ */ o(c, { attachments: l, transmissions: p }),
+      e
     ] })
   }
 );
 export {
-  d as DialogHistoryItem
+  b as DialogHistoryItem
 };

package/dist/components/Dialog/DialogLabel.js

@@ -1,17 +1,21 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import { MetaItem as e } from "../Meta/MetaItem.js";
+import { MetaItem as a } from "../Meta/MetaItem.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-const u = ({ size: r = "xs", type: n, label: t, children: a }) => {
-  switch (n) {
+const v = ({ size: r = "xs", type: e, label: t, children: o }) => {
+  switch (e) {
     case "trashed":
-      return /* @__PURE__ */ o(e, { size: r, icon: "trash", variant: "rounded", children: a || t });
+      return /* @__PURE__ */ i(a, { size: r, icon: "trash", variant: "rounded", children: o || t });
     case "archived":
-      return /* @__PURE__ */ o(e, { size: r, icon: "archive", variant: "rounded", children: a || t });
+      return /* @__PURE__ */ i(a, { size: r, icon: "archive", variant: "rounded", children: o || t });
     default:
-      return /* @__PURE__ */ o(e, { size: r, variant: "rounded", children: a || t });
+      return /* @__PURE__ */ i(a, { size: r, variant: "rounded", children: o || t });
   }
 };
 export {
-  u as DialogLabel
+  v as DialogLabel
 };

package/dist/components/Dialog/DialogList.js

@@ -5,22 +5,22 @@ import "../Icon/SvgIcon.js";
 import { useMenu as f } from "../../hooks/useMenu.js";
 import "../Autocomplete/AutocompleteBase.js";
 import { DialogListGroup as l } from "./DialogListGroup.js";
-import { DialogListItem as d } from "./DialogListItem.js";
+import { DialogListItem as y } from "./DialogListItem.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as y } from "../Page/Section.js";
-const j = ({ items: m, groups: i = {} }) => {
-  const { menu: o } = f({
-    items: m,
-    groups: i,
+import { Section as d } from "../Page/Section.js";
+const j = ({ items: i, groups: m = {} }) => {
+  const { menu: r } = f({
+    items: i,
+    groups: m,
     groupByKey: "groupId",
     keyboardEvents: !1
   });
-  return /* @__PURE__ */ c(y, { spacing: "md", margin: "md", children: o == null ? void 0 : o.map((r, e) => {
-    const p = r.props || {};
-    return /* @__PURE__ */ t(l, { ...p, key: e }, r == null ? void 0 : r.items.map((s, n) => {
+  return /* @__PURE__ */ c(d, { spacing: 3, margin: "section", children: r == null ? void 0 : r.map((o, e) => {
+    const p = o.props || {};
+    return /* @__PURE__ */ t(l, { ...p, key: e }, o == null ? void 0 : o.items.map((s, n) => {
       const a = s.props || {};
-      return /* @__PURE__ */ t(d, { ...a, key: n });
+      return /* @__PURE__ */ t(y, { ...a, key: n });
     }));
   }) });
 };

package/dist/components/Dialog/DialogListGroup.js

@@ -1,21 +1,21 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as m } from "../Typography/Heading.js";
+import { Heading as e } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Button as e } from "../Button/Button.js";
+import { Button as m } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { ListBase as n } from "../List/ListBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as p } from "../Page/Section.js";
-import { Flex as s } from "../Page/Flex.js";
-const z = ({ title: i, children: t }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
-  i && /* @__PURE__ */ o(s, { direction: "row", align: "center", justify: "between", margin: "sm", children: [
-    /* @__PURE__ */ r(m, { size: "lg", children: i }),
-    /* @__PURE__ */ r(e, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
+import { Flex as p } from "../Page/Flex.js";
+import { Section as c } from "../Page/Section.js";
+const z = ({ title: i, children: t }) => /* @__PURE__ */ o(c, { spacing: 3, children: [
+  i && /* @__PURE__ */ o(p, { direction: "row", align: "center", justify: "between", children: [
+    /* @__PURE__ */ r(e, { size: "lg", children: i }),
+    /* @__PURE__ */ r(m, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
   ] }),
-  /* @__PURE__ */ r(n, { spacing: "md", children: t })
+  /* @__PURE__ */ r(n, { spacing: 3, children: t })
 ] });
 export {
   z as DialogListGroup