@altinn/altinn-components 0.38.0 → 0.38.2

package/dist/assets/Byline.css

@@ -1 +1 @@
-._byline_zacbk_1{display:inline-flex;align-items:center;column-gap:.5em}._avatar_zacbk_7,._avatarGroup_zacbk_11{font-size:1.25rem}._avatar_zacbk_7[data-size=lg]{font-size:2.25rem}._label_zacbk_19{display:inline-flex;flex-wrap:wrap;column-gap:.25em;color:var(--ds-color-text-subtle)}._label_zacbk_19[data-size=xs],._label_zacbk_19[data-size=sm]{font-size:14px;line-height:1.125rem;padding:.1875rem 0}._label_zacbk_19[data-size=md],._label_zacbk_19[data-size=lg]{font-size:16px;line-height:1.25rem}._label_zacbk_19>strong{font-weight:500;color:var(--ds-color-text-default)}
+._byline_1o0os_1{display:inline-flex;align-items:center;column-gap:.5em}._avatar_1o0os_7,._avatarGroup_1o0os_12{font-size:1.25rem;flex-shrink:0}._avatar_1o0os_7[data-size=lg]{font-size:2.25rem}._label_1o0os_21{display:inline-flex;flex-wrap:wrap;column-gap:.25em;color:var(--ds-color-text-subtle)}._label_1o0os_21[data-size=xs],._label_1o0os_21[data-size=sm]{font-size:14px;line-height:1.125rem;padding:.1875rem 0}._label_1o0os_21[data-size=md],._label_1o0os_21[data-size=lg]{font-size:16px;line-height:1.25rem}._label_1o0os_21>strong{font-weight:500;color:var(--ds-color-text-default)}

package/dist/assets/FloatingActionButton.css

@@ -0,0 +1 @@
+._button_v6n2g_1{--dsc-button-size: var(--ds-size-14);width:var(--ds-button-size);height:var(--ds-button-size);border-radius:50%;flex-shrink:0;position:fixed;bottom:0;right:0;margin:1rem}

package/dist/assets/ListItemLabel.css

@@ -1 +1 @@
-._label_1b76c_1{pointer-events:none;position:relative;display:flex;flex-direction:column;align-items:start;justify-content:center;margin-top:var(--dsc-item-my);margin-bottom:var(--dsc-item-my)}
+._label_1cju7_1{pointer-events:none;position:relative;display:flex;flex-direction:column;align-items:start;justify-content:center;margin-top:var(--dsc-item-my);margin-bottom:var(--dsc-item-my)}._label_1cju7_1 mark{background-color:var(--ds-color-surface-tinted)}

package/dist/assets/MenuItemLabel.css

@@ -1 +1 @@
-._label_mk4ho_1{flex-grow:1;display:flex;flex-direction:column;padding:0 .125rem}._label_mk4ho_1[data-size=lg]{font-size:1.125rem}._label_mk4ho_1[data-size=md],._label_mk4ho_1[data-size=sm]{font-size:1rem}._title_mk4ho_20{display:inline-flex;align-items:center;column-gap:.5em}
+._label_k9qsn_1{flex-grow:1;display:flex;flex-direction:column;padding:0 .125rem}._label_k9qsn_1[data-size=lg]{font-size:1.125rem}._label_k9qsn_1[data-size=md],._label_k9qsn_1[data-size=sm]{font-size:1rem}._title_k9qsn_20{display:inline-flex;align-items:center;column-gap:.5em}._label_k9qsn_1 mark{background-color:var(--ds-color-surface-tinted)}

package/dist/assets/ModalBase.css

@@ -1 +1 @@
-._modal_1tnpv_1{padding:0;width:100%;max-width:450px;border:none;background-color:#fff;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._modal_1tnpv_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_1tnpv_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_1tnpv_1[data-variant=full]{width:100%;max-width:none;height:100%;min-height:unset}._modal_1tnpv_1[data-variant=content]{max-width:988px;margin:auto}._content_1tnpv_30{position:relative}
+._modal_4vfmr_1{padding:0;width:100%;max-width:450px;border:none;background-color:#fff;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._modal_4vfmr_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_4vfmr_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_4vfmr_1[data-variant=default]{max-width:640px;margin:auto}._modal_4vfmr_1[data-variant=content]{max-width:988px;margin:auto}._modal_4vfmr_1[data-variant=full]{width:100%;max-width:none;height:100%;min-height:unset}._content_4vfmr_35{position:relative}

package/dist/components/Account/AccountMenu.js

@@ -1,55 +1,59 @@
 "use client";
-import { jsx as h } from "react/jsx-runtime";
-import { useState as L } from "react";
+import { jsx as w } from "react/jsx-runtime";
+import { useState as I } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
 import { Menu as M } from "../Menu/Menu.js";
 import "../Snackbar/useSnackbar.js";
-const m = (n) => `${n} hits`, R = ({
+const b = (n) => `${n} hits`, k = ({
   items: n = [],
-  groups: i = {},
-  search: e,
+  groups: h = {},
+  search: t,
   onSelectAccount: r,
-  currentAccount: d,
-  menuItemsVirtual: g
+  currentAccount: s,
+  menuItemsVirtual: C
 }) => {
-  var u;
-  const a = n.map((t) => ({
-    ...t,
-    title: (t == null ? void 0 : t.title) || t.name,
-    groupId: t.groupId || "search",
-    selected: t.selected ?? (d == null ? void 0 : d.id) === t.id,
-    onClick: () => r == null ? void 0 : r(t.id)
-  })), [o, s] = L(""), l = o ? a.filter((t) => {
-    var p;
-    return (p = t == null ? void 0 : t.name) == null ? void 0 : p.toLowerCase().includes(o.toLowerCase());
-  }).map((t) => ({
-    ...t,
-    groupId: "search"
-  })) : a, f = o ? {
+  var p;
+  const d = n.map((o) => ({
+    ...o,
+    title: (o == null ? void 0 : o.title) || o.name,
+    groupId: o.groupId || "search",
+    selected: o.selected ?? (s == null ? void 0 : s.id) === o.id,
+    onClick: () => r == null ? void 0 : r(o.id)
+  })), [l, a] = I(""), e = l ? d.filter(
+    (o) => {
+      var g, i, f;
+      return ((g = o == null ? void 0 : o.name) == null ? void 0 : g.toLowerCase().includes(l.toLowerCase())) || ((f = (i = o == null ? void 0 : o.description) == null ? void 0 : i.toString()) == null ? void 0 : f.toLowerCase().includes(l.toLowerCase()));
+    }
+  ).map((o) => ({
+    ...o,
+    groupId: "search",
+    title: (o == null ? void 0 : o.title) || o.name,
+    highlightWords: [l]
+  })) : d, L = l ? {
     search: {
-      title: ((u = e == null ? void 0 : e.getResultsLabel) == null ? void 0 : u.call(e, l.length)) ?? m(l.length)
+      title: ((p = t == null ? void 0 : t.getResultsLabel) == null ? void 0 : p.call(t, e.length)) ?? b(e.length)
     }
-  } : i, C = {
+  } : h, c = {
     name: "account-search",
-    value: o,
-    placeholder: (e == null ? void 0 : e.placeholder) ?? "Find account",
-    onChange: (t) => s(t.target.value),
-    onClear: () => s("")
-  }, I = [
-    ...l.length > 0 ? l : [{ id: "search", groupId: "search", hidden: !0 }]
+    value: l,
+    placeholder: (t == null ? void 0 : t.placeholder) ?? "Find account",
+    onChange: (o) => a(o.target.value),
+    onClear: () => a("")
+  }, u = [
+    ...e.length > 0 ? e : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
-  return /* @__PURE__ */ h(
+  return console.log("items", u), /* @__PURE__ */ w(
     M,
     {
       theme: "default",
-      search: e && C,
-      groups: f,
-      items: I,
-      menuItemsVirtual: g
+      search: t && c,
+      groups: L,
+      items: u,
+      menuItemsVirtual: C
     }
   );
 };
 export {
-  R as AccountMenu
+  k as AccountMenu
 };

package/dist/components/Button/FloatingActionButton.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { ButtonBase as u } from "./ButtonBase.js";
+import { ButtonIcon as l } from "./ButtonIcon.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/FloatingActionButton.css';const c = "_button_v6n2g_1", b = {
+  button: c
+}, j = ({
+  variant: n = "solid",
+  size: r,
+  icon: t,
+  iconSize: i,
+  iconAltText: s,
+  color: m,
+  onClick: a,
+  dataTestId: e,
+  onBlurCapture: p
+}) => /* @__PURE__ */ o(
+  u,
+  {
+    className: b.button,
+    variant: n,
+    color: m,
+    size: r,
+    onClick: a,
+    "data-testid": e,
+    "aria-label": s,
+    onBlurCapture: p,
+    children: t && /* @__PURE__ */ o(l, { icon: t, size: i })
+  }
+);
+export {
+  j as FloatingActionButton
+};

package/dist/components/Button/index.js

@@ -1,16 +1,18 @@
 import { ButtonBase as r } from "./ButtonBase.js";
-import { ButtonLabel as n } from "./ButtonLabel.js";
+import { ButtonLabel as e } from "./ButtonLabel.js";
 import { ButtonIcon as p } from "./ButtonIcon.js";
 import { Button as B } from "./Button.js";
 import { ComboButton as x } from "./ComboButton.js";
-import { IconButton as b } from "./IconButton.js";
+import { IconButton as c } from "./IconButton.js";
+import { FloatingActionButton as i } from "./FloatingActionButton.js";
 import { ButtonGroup as I } from "./ButtonGroup.js";
 export {
   B as Button,
   r as ButtonBase,
   I as ButtonGroup,
   p as ButtonIcon,
-  n as ButtonLabel,
+  e as ButtonLabel,
   x as ComboButton,
-  b as IconButton
+  i as FloatingActionButton,
+  c as IconButton
 };

package/dist/components/Byline/Byline.js

@@ -1,30 +1,30 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Avatar as _ } from "../Avatar/Avatar.js";
-import { AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import { Avatar as v } from "../Avatar/Avatar.js";
+import { AvatarGroup as b } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
-import { Skeleton as c } from "../Skeleton/Skeleton.js";
+import { Skeleton as l } from "../Skeleton/Skeleton.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Byline.css';const d = "_byline_zacbk_1", y = "_avatar_zacbk_7", k = "_avatarGroup_zacbk_11", u = "_label_zacbk_19", t = {
+import '../../assets/Byline.css';const d = "_byline_1o0os_1", y = "_avatar_1o0os_7", u = "_avatarGroup_1o0os_12", N = "_label_1o0os_21", o = {
   byline: d,
   avatar: y,
-  avatarGroup: k,
-  label: u
-}, B = ({
-  loading: l,
+  avatarGroup: u,
+  label: N
+}, S = ({
+  loading: s,
   color: n = "neutral",
-  size: r = "xs",
-  avatar: o,
+  size: t = "xs",
+  avatar: r,
   avatarGroup: e,
-  datetime: s,
-  children: m,
-  as: i,
+  datetime: m,
+  children: i,
+  as: c,
   ...p
-}) => /* @__PURE__ */ b(i || "div", { ...p, className: t.byline, "data-color": n, "data-size": r, children: [
-  (e || o) && /* @__PURE__ */ a(c, { variant: "circle", className: t.avatar, loading: l, children: e ? /* @__PURE__ */ a(v, { ...e, size: r, className: t.avatarGroup }) : o && /* @__PURE__ */ a(_, { ...o, size: r, className: t.avatar }) }),
-  /* @__PURE__ */ a("time", { "data-size": r, dateTime: s, className: t.label, children: /* @__PURE__ */ a(c, { loading: l, children: m }) })
+}) => /* @__PURE__ */ _(c || "div", { ...p, className: o.byline, "data-color": n, "data-size": t, children: [
+  (e || r) && /* @__PURE__ */ a(l, { variant: "circle", className: o.avatar, loading: s, children: e ? /* @__PURE__ */ a(b, { ...e, size: t, className: o.avatarGroup }) : r && /* @__PURE__ */ a(v, { ...r, size: t, className: o.avatar }) }),
+  /* @__PURE__ */ a("time", { "data-size": t, dateTime: m, className: o.label, children: /* @__PURE__ */ a(l, { loading: s, children: i }) })
 ] });
 export {
-  B as Byline
+  S as Byline
 };

package/dist/components/Dashboard/DashboardHeader.js

@@ -7,17 +7,17 @@ import { Typography as c } from "../Typography/Typography.js";
 import { Heading as d } from "../Typography/Heading.js";
 import { Skeleton as l } from "../Skeleton/Skeleton.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as p } from "../Page/Flex.js";
+import { Flex as s } from "../Page/Flex.js";
 import { Section as h } from "../Page/Section.js";
-const H = ({ type: o, name: t, title: m, description: s, loading: e, children: n }) => /* @__PURE__ */ i(h, { as: "header", theme: "default", padding: "page", spacing: 6, shadow: "xs", bleed: !0, children: [
-  /* @__PURE__ */ i(p, { direction: "row", align: "center", spacing: 3, children: [
+const H = ({ type: o, name: t, title: m, description: n, loading: e, children: p }) => /* @__PURE__ */ i(h, { as: "header", theme: "default", padding: "page", spacing: 6, shadow: "xs", bleed: !0, children: [
+  /* @__PURE__ */ i(s, { direction: "row", align: "center", spacing: 3, children: [
     /* @__PURE__ */ r("div", { style: { position: "relative" }, children: /* @__PURE__ */ r(a, { style: { fontSize: "2.75rem" }, type: o, name: t, loading: e }) }),
-    /* @__PURE__ */ i(p, { direction: "col", spacing: 0, children: [
+    /* @__PURE__ */ i(s, { direction: "col", spacing: 0, children: [
       /* @__PURE__ */ r(d, { size: "lg", loading: e, children: m || t }),
-      /* @__PURE__ */ r(c, { as: "p", variant: "subtle", size: "xs", loading: e, children: s || o })
+      /* @__PURE__ */ r(c, { as: "section", variant: "subtle", size: "xs", loading: e, children: n || o })
     ] })
   ] }),
-  /* @__PURE__ */ r(l, { loading: e, children: n })
+  /* @__PURE__ */ r(l, { loading: e, children: p })
 ] });
 export {
   H as DashboardHeader

package/dist/components/Dialog/DialogListItem.js

@@ -1,173 +1,160 @@
 import { jsx as a, jsxs as c } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Badge as O } from "../Badge/Badge.js";
+import { Badge as J } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as N } from "../Typography/Heading.js";
-import { DialogMetadata as y } from "./DialogMetadata.js";
-import { DialogByline as P } from "./DialogByline.js";
-import { MetaItem as Q } from "../Metadata/MetaItem.js";
-import { ListItemLabel as S } from "../List/ListItemLabel.js";
+import { Heading as j } from "../Typography/Heading.js";
+import { DialogMetadata as K } from "./DialogMetadata.js";
+import { DialogByline as O } from "./DialogByline.js";
+import { MetaItem as P } from "../Metadata/MetaItem.js";
 import { ListItem as u } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/DialogListItem.css';const T = "_border_jg0tu_1", U = "_title_jg0tu_27", X = "_controls_jg0tu_58", Y = "_header_jg0tu_65", Z = "_summary_jg0tu_82", $ = "_footer_jg0tu_96", W = "_seenBy_jg0tu_101", z = "_heading_jg0tu_108", r = {
-  border: T,
-  title: U,
-  controls: X,
-  header: Y,
-  summary: Z,
-  footer: $,
-  seenBy: W,
-  heading: z
-}, ha = ({
+import '../../assets/DialogListItem.css';const Q = "_border_jg0tu_1", S = "_title_jg0tu_27", T = "_controls_jg0tu_58", U = "_header_jg0tu_65", X = "_summary_jg0tu_82", Y = "_footer_jg0tu_96", Z = "_seenBy_jg0tu_101", $ = "_heading_jg0tu_108", t = {
+  border: Q,
+  title: S,
+  controls: T,
+  header: U,
+  summary: X,
+  footer: Y,
+  seenBy: Z,
+  heading: $
+}, da = ({
   size: e = "xl",
-  state: A = "normal",
-  loading: t,
-  controls: B,
-  select: aa,
-  selected: m,
-  status: o,
-  sender: d,
-  recipient: w,
-  recipientLabel: I = "to",
-  grouped: D = !1,
-  updatedAt: l,
-  updatedAtLabel: _,
-  archived: h,
-  archivedAt: L,
-  archivedAtLabel: M,
-  trashed: f,
-  trashedAt: R,
-  trashedAtLabel: H,
-  badge: p,
-  dueAt: V,
-  dueAtLabel: k,
-  unread: n,
-  seenByLog: g,
-  draftsLabel: q,
-  sentCount: C,
-  receivedCount: E,
-  attachmentsCount: F,
-  attachmentsLabel: G,
-  title: i,
-  description: J,
-  summary: s,
-  highlightWords: b,
-  variant: K = "default",
-  id: j,
-  ...v
+  state: z = "normal",
+  loading: r,
+  controls: x,
+  select: W,
+  selected: o,
+  status: s,
+  sender: l,
+  recipient: N,
+  recipientLabel: b = "to",
+  grouped: v = !1,
+  updatedAt: y,
+  updatedAtLabel: B,
+  archived: w,
+  archivedAt: D,
+  archivedAtLabel: I,
+  trashed: L,
+  trashedAt: M,
+  trashedAtLabel: R,
+  badge: d,
+  dueAt: H,
+  dueAtLabel: V,
+  unread: _,
+  seenByLog: p,
+  draftsLabel: k,
+  sentCount: q,
+  receivedCount: A,
+  attachmentsCount: C,
+  attachmentsLabel: E,
+  title: n,
+  description: F,
+  summary: m,
+  highlightWords: i,
+  variant: G = "default",
+  id: h,
+  ...f
 }) => {
-  const x = m ? "tinted" : K;
+  const g = o ? "tinted" : G;
   return e === "xs" || e === "sm" ? /* @__PURE__ */ a(
     u,
     {
-      ...v,
-      id: j,
+      ...f,
+      id: h,
       size: e,
-      selected: m,
-      variant: x,
-      ariaLabel: i,
-      label: /* @__PURE__ */ a(
-        "div",
-        {
-          className: r.border,
-          "data-status": o == null ? void 0 : o.value,
-          "data-selected": m,
-          "data-size": e,
-          "data-unread": n,
-          "data-archived": h,
-          "data-trashed": f,
-          "data-loading": t,
-          children: /* @__PURE__ */ a(S, { loading: t, size: e, title: i, description: s || J })
-        }
-      ),
-      badge: /* @__PURE__ */ a(y, { loading: t, sender: d, updatedAt: l, updatedAtLabel: _ }),
-      title: i
+      selected: o,
+      variant: g,
+      ariaLabel: n,
+      icon: l,
+      title: n,
+      description: m || F,
+      highlightWords: i
     }
   ) : /* @__PURE__ */ a(
     u,
     {
-      ...v,
-      id: j,
+      ...f,
+      id: h,
       size: e,
-      selected: m,
-      variant: x,
-      controls: /* @__PURE__ */ a("div", { className: r.controls, children: B }),
-      title: i,
+      selected: o,
+      variant: g,
+      controls: /* @__PURE__ */ a("div", { className: t.controls, children: x }),
+      title: n,
       label: /* @__PURE__ */ c(
         "div",
         {
-          className: r.border,
-          "data-selected": m,
-          "data-status": o == null ? void 0 : o.value,
+          className: t.border,
+          "data-selected": o,
+          "data-status": s == null ? void 0 : s.value,
           "data-size": e,
-          "data-unread": n,
-          "data-archived": h,
-          "data-trashed": f,
-          "data-loading": t,
+          "data-unread": _,
+          "data-archived": w,
+          "data-trashed": L,
+          "data-loading": r,
           children: [
-            /* @__PURE__ */ c("header", { className: r.header, "data-size": e, children: [
-              /* @__PURE__ */ c("span", { className: r.heading, children: [
+            /* @__PURE__ */ c("header", { className: t.header, "data-size": e, children: [
+              /* @__PURE__ */ c("span", { className: t.heading, children: [
                 /* @__PURE__ */ a(
-                  N,
+                  j,
                   {
                     as: "h2",
-                    highlightWords: b,
-                    weight: n ? "bold" : "normal",
-                    loading: t,
+                    highlightWords: i,
+                    weight: _ ? "bold" : "normal",
+                    loading: r,
                     maxRows: 2,
-                    className: r.title,
-                    children: i
+                    className: t.title,
+                    children: n
                   }
                 ),
-                p && /* @__PURE__ */ a(O, { variant: "tinted", size: "xs", ...p })
+                d && /* @__PURE__ */ a(J, { variant: "tinted", size: "xs", ...d })
               ] }),
               /* @__PURE__ */ a(
-                P,
+                O,
                 {
                   size: "xs",
-                  loading: t,
-                  sender: d,
-                  recipient: w,
-                  recipientLabel: I,
-                  grouped: D
+                  loading: r,
+                  sender: l,
+                  recipient: N,
+                  recipientLabel: b,
+                  grouped: v
                 }
               ),
-              s && /* @__PURE__ */ a(
-                N,
+              m && /* @__PURE__ */ a(
+                j,
                 {
                   as: "h3",
-                  highlightWords: b,
+                  highlightWords: i,
                   weight: "normal",
-                  className: r.summary,
-                  loading: t,
+                  className: t.summary,
+                  loading: r,
                   maxRows: 2,
-                  children: s
+                  children: m
                 }
               )
             ] }),
             /* @__PURE__ */ a(
-              y,
+              K,
               {
-                className: r.footer,
-                loading: t,
-                status: o,
-                draftsLabel: q,
-                sentCount: C,
-                receivedCount: E,
-                updatedAt: l,
-                updatedAtLabel: _,
-                archivedAt: L,
-                archivedAtLabel: M,
-                trashedAt: R,
-                trashedAtLabel: H,
-                dueAt: V,
-                dueAtLabel: k,
-                attachmentsCount: F,
-                attachmentsLabel: G
+                className: t.footer,
+                loading: r,
+                status: s,
+                draftsLabel: k,
+                sentCount: q,
+                receivedCount: A,
+                updatedAt: y,
+                updatedAtLabel: B,
+                archivedAt: D,
+                archivedAtLabel: I,
+                trashedAt: M,
+                trashedAtLabel: R,
+                dueAt: H,
+                dueAtLabel: V,
+                attachmentsCount: C,
+                attachmentsLabel: E
               }
             ),
-            g && /* @__PURE__ */ a(Q, { className: r.seenBy, icon: { items: g.items } })
+            p && /* @__PURE__ */ a(P, { className: t.seenBy, icon: { items: p.items } })
           ]
         }
       )
@@ -175,5 +162,5 @@ import '../../assets/DialogListItem.css';const T = "_border_jg0tu_1", U = "_titl
   );
 };
 export {
-  ha as DialogListItem
+  da as DialogListItem
 };