@altinn/altinn-components 0.57.3 → 0.58.1

package/dist/components/Settings/SettingsItem.js

@@ -1,125 +1,131 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import { useState as h } from "react";
-import { Input as v } from "../Forms/Input.js";
-import "../../Section-xbt3ft20.js";
+import { useState as g } from "react";
+import { Input as b } from "../Forms/Input.js";
+import "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { SettingsItemBase as i } from "./SettingsItemBase.js";
-import { SettingsModal as f } from "./SettingsModal.js";
-const j = ({
-  loading: r,
-  variant: c = "default",
-  id: u = "settings",
-  name: d,
-  checked: m,
-  onChange: s,
-  modalProps: n,
-  children: o,
-  ...t
+import { SettingsItemBase as n } from "./SettingsItemBase.js";
+import { SettingsModal as x } from "./SettingsModal.js";
+const M = ({
+  loading: c,
+  variant: m = "default",
+  id: d = "settings",
+  name: h,
+  title: e,
+  value: r,
+  description: s,
+  checked: p,
+  onChange: u,
+  modalProps: o,
+  children: f,
+  ...i
 }) => {
-  const [l, a] = h(!1);
-  if (r)
-    return /* @__PURE__ */ e(i, { icon: t?.icon, title: t?.title, loading: !0 });
-  switch (c) {
+  const [l, a] = g(!1);
+  if (c)
+    return /* @__PURE__ */ t(n, { icon: i?.icon, titleProps: { children: e }, loading: !0 });
+  switch (m) {
     case "link":
-      return /* @__PURE__ */ e(
-        i,
+      return /* @__PURE__ */ t(
+        n,
         {
-          ...t,
-          title: {
-            children: t?.title
+          ...i,
+          titleProps: {
+            children: e
           },
-          description: t?.description,
-          value: void 0
+          descriptionProps: {
+            size: "xs",
+            weight: "normal",
+            variant: "subtle",
+            children: s
+          }
         }
       );
     case "switch":
-      return /* @__PURE__ */ e(
-        i,
+      return /* @__PURE__ */ t(
+        n,
         {
-          ...t,
-          title: {
+          ...i,
+          as: "div",
+          titleProps: {
+            children: e
+          },
+          descriptionProps: {
             size: "xs",
-            variant: "subtle",
             weight: "normal",
-            children: t?.title
-          },
-          description: {
-            size: "sm",
-            variant: "default",
-            children: t?.description || t?.value
+            variant: "subtle",
+            children: s
           },
-          interactive: !1,
-          controls: /* @__PURE__ */ e(
-            v,
+          controls: /* @__PURE__ */ t(
+            b,
             {
               type: "checkbox",
               role: "switch",
-              "aria-labelledby": u,
-              name: d,
-              value: t?.value,
-              checked: m,
-              onChange: s,
+              "aria-labelledby": d,
+              name: h,
+              value: r,
+              checked: p,
+              onChange: u,
               style: { marginRight: "0.5em" }
             }
           )
         }
       );
     case "modal":
-      return /* @__PURE__ */ e(
-        i,
+      return /* @__PURE__ */ t(
+        n,
         {
-          ...t,
-          title: {
-            size: t?.value ? "xs" : "sm",
+          ...i,
+          titleProps: {
+            size: r ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
-            children: t?.title
+            children: e
           },
-          description: {
+          descriptionProps: {
             size: "sm",
             variant: "default",
-            children: t?.description || t?.value
+            children: s || r
           },
           as: "button",
           linkIcon: !0,
           onClick: () => a(!0),
           expanded: l,
-          children: l && /* @__PURE__ */ e(
-            f,
+          children: l && /* @__PURE__ */ t(
+            x,
             {
-              ...n,
-              icon: n?.icon || t?.icon,
-              title: n?.title || t?.title,
+              ...o,
+              icon: o?.icon || i?.icon,
+              title: o?.title || e,
               open: l,
               onClose: () => a(!1),
-              children: o
+              children: f
             }
           )
         }
       );
     default:
-      return /* @__PURE__ */ e(
-        i,
+      return /* @__PURE__ */ t(
+        n,
         {
-          ...t,
-          title: {
-            size: t?.value ? "xs" : "sm",
+          ...i,
+          titleProps: {
+            size: r ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
-            children: t?.title
+            children: e
           },
-          description: {
+          descriptionProps: {
             size: "sm",
             variant: "default",
-            children: t?.description || t?.value
+            children: s || r
           }
         }
       );
   }
 };
 export {
-  j as SettingsItem
+  M as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -1,46 +1,74 @@
-import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { Badge as q } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { L as d, m as I } from "../../Section-xbt3ft20.js";
+import { h, H as i, N as b } from "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
+import { ItemControls as B } from "../Item/ItemControls.js";
+import { ItemBase as R } from "../Item/ItemBase.js";
+import { ItemLink as j } from "../Item/ItemLink.js";
 import "../Button/Button.js";
 import "react-dom";
-import { ListItemBase as f } from "../List/ListItemBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItemBase.css';const g = "_item_lk1g7_1", k = "_label_lk1g7_20", N = "_header_lk1g7_24", e = {
-  item: g,
-  label: k,
-  header: N
-}, w = ({
-  ref: r,
-  loading: t,
-  color: l,
-  size: i,
-  expanded: a,
-  icon: o,
-  label: c,
-  title: n,
-  value: j,
-  description: _,
-  children: b,
-  highlightWords: h,
-  ...s
-}) => {
-  const L = s.ariaLabel;
-  return /* @__PURE__ */ p(f, { ref: r, className: e.item, color: l, size: i, expanded: a, children: [
-    /* @__PURE__ */ m(d, { ...s, loading: t, ariaLabel: L, className: e.header, icon: o, children: /* @__PURE__ */ m(
-      I,
-      {
-        loading: t,
-        highlightWords: h,
-        className: e.label,
-        title: n,
-        description: _,
-        children: c
-      }
-    ) }),
-    a && b
-  ] });
-};
+import '../../assets/SettingsItemBase.css';const v = "_item_1xpqe_1", w = "_media_1xpqe_24", C = "_link_1xpqe_38", H = "_linkIcon_1xpqe_48", S = "_label_1xpqe_54", g = "_controls_1xpqe_67", e = {
+  item: v,
+  media: w,
+  link: C,
+  linkIcon: H,
+  label: S,
+  controls: g
+}, P = ({
+  as: n,
+  ref: l,
+  hidden: r,
+  loading: o,
+  color: c,
+  expanded: u,
+  icon: p,
+  label: _,
+  titleProps: d = {},
+  descriptionProps: x = {},
+  children: k,
+  highlightWords: t,
+  badge: m,
+  linkIcon: I,
+  controls: N,
+  ...f
+}) => /* @__PURE__ */ a(R, { as: "li", ref: l, className: e.item, color: c, "aria-hidden": r, "data-loading": o, children: [
+  /* @__PURE__ */ a(j, { ...f, className: e.link, as: n, children: [
+    /* @__PURE__ */ s(h, { icon: p, className: e.media }),
+    _ || /* @__PURE__ */ a("span", { className: e.label, children: [
+      /* @__PURE__ */ s(
+        i,
+        {
+          ...d,
+          as: "span",
+          highlightWords: t,
+          loading: o,
+          maxRows: 2,
+          className: e.title
+        }
+      ),
+      /* @__PURE__ */ s(
+        i,
+        {
+          ...x,
+          as: "span",
+          highlightWords: t,
+          loading: o,
+          maxRows: 2,
+          className: e.description
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ a(B, { className: e.controls, children: [
+    N,
+    m && /* @__PURE__ */ s(q, { ...m }),
+    I && /* @__PURE__ */ s(b, { className: e.linkIcon })
+  ] }),
+  k
+] });
 export {
-  w as SettingsItemBase
+  P as SettingsItemBase
 };

package/dist/components/Settings/SettingsList.js

@@ -1,8 +1,9 @@
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { Fragment as s, createElement as d } from "react";
+import { Fragment as m, createElement as d } from "react";
 import "../../index-p1eeF8LQ.js";
 import { useMenu as f } from "../../hooks/useMenu.js";
-import { H as u, p as h } from "../../Section-xbt3ft20.js";
+import { H as u, p as h } from "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import { Divider as y } from "../Divider/Divider.js";
@@ -10,21 +11,21 @@ import "../Snackbar/useSnackbar.js";
 import { Flex as S } from "../Page/Flex.js";
 import { SettingsItem as v } from "./SettingsItem.js";
 import { SettingsSection as j } from "./SettingsSection.js";
-const K = ({ items: m, groups: p = {}, sortGroupBy: n }) => {
+const M = ({ items: s, groups: p = {}, sortGroupBy: n }) => {
   const { menu: c } = f({
-    items: m,
+    items: s,
     groups: p,
     groupByKey: "groupId",
     keyboardEvents: !1,
     sortGroupBy: n
   });
-  return /* @__PURE__ */ t(S, { as: "div", spacing: "page", direction: "col", children: c?.map((e, l) => {
-    const i = e.props || {};
-    return /* @__PURE__ */ o(s, { children: [
-      i?.title && /* @__PURE__ */ t(u, { size: "lg", children: i.title }),
-      /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(h, { size: "sm", children: e?.items.map((a, r) => {
+  return /* @__PURE__ */ t(S, { as: "div", spacing: "page", direction: "col", children: c?.map((i, l) => {
+    const e = i.props || {};
+    return /* @__PURE__ */ o(m, { children: [
+      e?.title && /* @__PURE__ */ t(u, { size: "lg", children: e.title }),
+      /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(h, { size: "sm", children: i?.items.map((a, r) => {
         const g = a.props || {};
-        return /* @__PURE__ */ o(s, { children: [
+        return /* @__PURE__ */ o(m, { children: [
           r > 0 && /* @__PURE__ */ t(y, { as: "li" }),
           /* @__PURE__ */ d(v, { ...g, key: "settings-list-item" + r })
         ] }, r);
@@ -33,5 +34,5 @@ const K = ({ items: m, groups: p = {}, sortGroupBy: n }) => {
   }) });
 };
 export {
-  K as SettingsList
+  M as SettingsList
 };

package/dist/components/Settings/SettingsModal.js

@@ -1,7 +1,8 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { createElement as u } from "react";
 import "../../index-p1eeF8LQ.js";
-import "../../Section-xbt3ft20.js";
+import "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import { Button as M } from "../Button/Button.js";
 import { ButtonIcon as k } from "../Button/ButtonIcon.js";
 import { ButtonLabel as x } from "../Button/ButtonLabel.js";
@@ -11,9 +12,9 @@ import "../Snackbar/useSnackbar.js";
 import { ModalBase as j } from "../Modal/ModalBase.js";
 import { ModalHeader as y } from "../Modal/ModalHeader.js";
 import { ModalBody as E } from "../Modal/ModalBody.js";
-const D = ({
-  icon: n,
-  title: p,
+const F = ({
+  icon: p,
+  title: n,
   description: c,
   open: l,
   onClose: r,
@@ -21,7 +22,7 @@ const D = ({
   children: a,
   ...d
 }) => /* @__PURE__ */ e(j, { ...d, open: l, onClose: r, children: [
-  /* @__PURE__ */ o(y, { icon: n, title: p, description: c, onClose: r }),
+  /* @__PURE__ */ o(y, { icon: p, title: n, description: c, onClose: r }),
   /* @__PURE__ */ e(E, { children: [
     a,
     m?.length && /* @__PURE__ */ o(g, { children: m?.map((t, f) => {
@@ -42,5 +43,5 @@ const D = ({
   ] })
 ] });
 export {
-  D as SettingsModal
+  F as SettingsModal
 };

package/dist/components/Settings/SettingsSection.js

@@ -1,20 +1,21 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { S as c } from "../../Section-xbt3ft20.js";
+import { S as n } from "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsSection.css';const m = "_section_13ero_1", p = {
-  section: m
-}, u = ({
+import '../../assets/SettingsSection.css';const c = "_section_13ero_1", p = {
+  section: c
+}, d = ({
   size: t = "sm",
   theme: o = "default",
   shadow: s = "xs",
   as: i,
-  color: e,
-  children: r
-}) => /* @__PURE__ */ n(c, { as: i, size: t, color: e, theme: o, shadow: s, className: p.section, spacing: 2, children: r });
+  color: r,
+  children: e
+}) => /* @__PURE__ */ m(n, { as: i, size: t, color: r, theme: o, shadow: s, className: p.section, spacing: 2, children: e });
 export {
-  u as SettingsSection
+  d as SettingsSection
 };

package/dist/components/Settings/UsedByLog.js

@@ -2,7 +2,8 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
 import { useState as y, createElement as B, useMemo as S, Fragment as L } from "react";
 import "../../index-p1eeF8LQ.js";
-import { S as s, p as d } from "../../Section-xbt3ft20.js";
+import { S as s, p as d } from "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import { SeenByLogButton as u } from "../Dialog/SeenByLogButton.js";
@@ -10,7 +11,7 @@ import { Divider as g } from "../Divider/Divider.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as j } from "../Page/Flex.js";
 import { UsedByLogItem as h } from "./UsedByLogItem.js";
-const q = ({
+const w = ({
   collapsible: p = !0,
   expanded: f,
   title: t,
@@ -40,5 +41,5 @@ const q = ({
   ] });
 };
 export {
-  q as UsedByLog
+  w as UsedByLog
 };

package/dist/components/Settings/UsedByLogItem.js

@@ -1,24 +1,25 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { Badge as p } from "../Badge/Badge.js";
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import { Badge as n } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { B as c } from "../../Section-xbt3ft20.js";
+import { B as c } from "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
 import { Flex as g } from "../Page/Flex.js";
-const y = ({
+const N = ({
   type: m,
   name: t,
   description: o,
   isEndUser: e,
   endUserLabel: a,
-  avatar: s,
-  size: l = "sm"
+  avatar: p,
+  size: s = "sm"
 }) => {
   const i = e && { label: a };
   return /* @__PURE__ */ r(g, { align: "center", spacing: 2, as: "li", children: [
-    /* @__PURE__ */ r(c, { size: l, avatar: { name: t, type: m, ...s }, children: [
+    /* @__PURE__ */ r(c, { size: s, avatar: { name: t, type: m, ...p }, children: [
       /* @__PURE__ */ r("strong", { children: [
         t,
         o && NaN
@@ -26,9 +27,9 @@ const y = ({
       " ",
       o
     ] }),
-    i && /* @__PURE__ */ n(p, { variant: "subtle", ...i })
+    i && /* @__PURE__ */ l(n, { variant: "subtle", ...i })
   ] });
 };
 export {
-  y as UsedByLogItem
+  N as UsedByLogItem
 };

package/dist/components/Snackbar/SnackbarItem.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
 import { c as p } from "../../index-p1eeF8LQ.js";
-import { I as u, E as v } from "../../Section-xbt3ft20.js";
+import { I as u, E as v } from "../../Section-DvBigBR1.js";
 import a, { forwardRef as _ } from "react";
+import "../Typography/Link.js";
 import { Button as g } from "../Button/Button.js";
 import "react-dom";
 import "./useSnackbar.js";
@@ -17,11 +18,11 @@ import '../../assets/SnackbarItem.css';var y = function(e, i) {
 };
 const w = _((e, i) => {
   var { title: o, titleId: t } = e, n = y(e, ["title", "titleId"]);
-  let l = h();
-  return l = o ? t || "title-" + l : void 0, a.createElement(
+  let r = h();
+  return r = o ? t || "title-" + r : void 0, a.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: i, "aria-labelledby": l }, n),
-    o ? a.createElement("title", { id: l }, o) : null,
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: i, "aria-labelledby": r }, n),
+    o ? a.createElement("title", { id: r }, o) : null,
     a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.75 2.5a.75.75 0 0 0-1.5 0v1.273c-2.222.14-3.655.92-4.499 2.186-.887 1.33-1.001 3.04-1.001 4.541v3c0 .809-.424 1.92-.92 2.915a18 18 0 0 1-.936 1.641l-.014.022-.004.006A.75.75 0 0 0 4.5 19.25h4.338a3.25 3.25 0 0 0 6.324 0H19.5a.75.75 0 0 0 .624-1.166l-.004-.006-.014-.022-.06-.091c-.05-.081-.125-.2-.215-.35-.18-.301-.42-.722-.66-1.2-.497-.994-.921-2.106-.921-2.915v-3c0-1.501-.114-3.21-1.001-4.541-.844-1.266-2.277-2.046-4.499-2.186zm-1.987 17.237a1.8 1.8 0 0 1-.344-.487h3.162a1.75 1.75 0 0 1-1.581 1 1.75 1.75 0 0 1-1.237-.513", clipRule: "evenodd" })
   );
 }), O = "_item_1a13i_1", b = "_icon_1a13i_23", x = "_content_1a13i_33", I = "_action_1a13i_41", c = {
@@ -31,22 +32,22 @@ const w = _((e, i) => {
   action: I
 };
 var j = /* @__PURE__ */ ((e) => (e.company = "company", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(j || {});
-const F = ({
+const H = ({
   as: e,
   message: i,
   className: o,
   color: t,
   icon: n = w,
-  iconAltText: l = "Bell icon",
+  iconAltText: r = "Bell icon",
   dismissable: s = !0,
-  onDismiss: d,
-  ...m
-}) => /* @__PURE__ */ f(e || "div", { className: p(c.item, o), "data-color": t, role: "alert", ...m, children: [
-  /* @__PURE__ */ r(u, { svgElement: n, className: c.icon, "aria-hidden": "true" }),
-  /* @__PURE__ */ r("div", { className: c.content, children: i }),
-  s && /* @__PURE__ */ r("div", { className: c.action, children: /* @__PURE__ */ r(g, { variant: "solid", onClick: d, "aria-label": "close", children: /* @__PURE__ */ r(v, { style: { fontSize: "1.5em" } }) }) })
+  onDismiss: m,
+  ...d
+}) => /* @__PURE__ */ f(e || "div", { className: p(c.item, o), "data-color": t, role: "alert", ...d, children: [
+  /* @__PURE__ */ l(u, { svgElement: n, className: c.icon, "aria-hidden": "true" }),
+  /* @__PURE__ */ l("div", { className: c.content, children: i }),
+  s && /* @__PURE__ */ l("div", { className: c.action, children: /* @__PURE__ */ l(g, { variant: "solid", onClick: m, "aria-label": "close", children: /* @__PURE__ */ l(v, { style: { fontSize: "1.5em" } }) }) })
 ] });
 export {
   j as SnackbarColorEnum,
-  F as SnackbarItem
+  H as SnackbarItem
 };

package/dist/components/Timeline/Timeline.js

@@ -1,11 +1,12 @@
 import { jsx as i } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { S as m } from "../../Section-xbt3ft20.js";
+import { S as m } from "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-const u = ({ as: t = "ul", spacing: o = 2, children: r }) => /* @__PURE__ */ i(m, { as: t, spacing: o, style: { width: "100%" }, children: r });
+const x = ({ as: t = "ul", spacing: o = 2, children: r }) => /* @__PURE__ */ i(m, { as: t, spacing: o, style: { width: "100%" }, children: r });
 export {
-  u as Timeline
+  x as Timeline
 };

package/dist/components/Timeline/TimelineActivity.js

@@ -1,13 +1,14 @@
 import { jsxs as a, jsx as i } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { S as c, B as n } from "../../Section-xbt3ft20.js";
+import { S as c, B as n } from "../../Section-DvBigBR1.js";
 import { Typography as l } from "../Typography/Typography.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
 import { S as y } from "../../CircleFill-yFbEHBRX.js";
-const h = ({
+const k = ({
   loading: r,
   byline: t,
   icon: S = y,
@@ -24,5 +25,5 @@ const h = ({
   o && typeof o == "string" ? /* @__PURE__ */ i(l, { as: "p", loading: r, size: "md", ...m, children: o }) : o
 ] });
 export {
-  h as TimelineActivity
+  k as TimelineActivity
 };

package/dist/components/Timeline/TimelineBase.js

@@ -1,7 +1,8 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import "../../Section-xbt3ft20.js";
+import "../../Section-DvBigBR1.js";
+import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import { TimelineIcon as v } from "./TimelineIcon.js";
@@ -12,7 +13,7 @@ import '../../assets/TimelineBase.css';const N = "_section_4e55r_1", f = "_sideb
   sidebar: f,
   content: h,
   border: j
-}, q = ({
+}, w = ({
   as: n = "section",
   loading: o,
   border: a = "solid",
@@ -33,5 +34,5 @@ import '../../assets/TimelineBase.css';const N = "_section_4e55r_1", f = "_sideb
   /* @__PURE__ */ t("div", { className: e.content, children: _ })
 ] });
 export {
-  q as TimelineBase
+  w as TimelineBase
 };