@altinn/altinn-components 0.36.7 → 0.37.0

package/dist/assets/DialogListItem.css

@@ -1 +1 @@
-._border_1cz0s_1{pointer-events:none;border-left:.25rem solid;border-color:var(--dsc-border-color);display:flex;flex-direction:column;margin-top:.25em;margin-bottom:.25em;--dsc-item-my: 0;--dsc-border-color: var(--ds-color-neutral-surface-tinted);--dsc-title-weight: 400;--dsc-title-font-size: 1rem;--dsc-title-line-height: 1.25;--dsc-summary-font-size: .875rem}._border_1cz0s_1[data-selected=true]{--dsc-border-color: var(--ds-color-surface-tinted)}._border_1cz0s_1[data-unread=true]{--dsc-border-color: var(--ds-color-surface-active);--dsc-title-weight: 600}._border_1cz0s_1[data-trashed=true] ._title_1cz0s_27{text-decoration:line-through}._border_1cz0s_1[data-size=xs],._border_1cz0s_1[data-size=sm]{width:100%;flex-direction:row;align-items:center;padding-left:.75rem}._border_1cz0s_1[data-size=md]{padding-left:.75rem;row-gap:.5rem}._border_1cz0s_1[data-size=lg]{--dsc-title-font-size: 1.25rem;--dsc-summary-font-size: 1rem;padding-left:.875rem;row-gap:.875rem}._border_1cz0s_1[data-size=xl]{--dsc-title-font-size: 1.25rem;--dsc-summary-font-size: 1rem;padding-left:1rem;row-gap:1rem}._controls_1cz0s_58{position:absolute;top:0;right:0;margin:.25em}._header_1cz0s_65{position:relative;display:flex;flex-direction:column;row-gap:.25rem}._header_1cz0s_65[data-size=xs],._header_1cz0s_65[data-size=sm]{display:flex;flex-direction:row}._summary_1cz0s_78{font-size:var(--dsc-summary-font-size);font-weight:400;line-height:1.375;color:var(--ds-color-neutral-text-subtle);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin:0}._footer_1cz0s_92{width:100%;padding-right:2rem}._seenBy_1cz0s_97{position:absolute;right:0;bottom:0;margin:.25rem -1rem}._heading_1cz0s_104{padding-right:1.25rem;display:inline-flex;align-items:center;column-gap:.5em}._title_1cz0s_27{font-size:var(--dsc-title-font-size);font-weight:var(--dsc-title-font-weight);line-height:var(--dsc-title-line-height);margin:0}._title_1cz0s_27[data-size=md],._title_1cz0s_27[data-size=lg],._title_1cz0s_27[data-size=xl]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
+._border_jg0tu_1{pointer-events:none;border-left:.25rem solid;border-color:var(--dsc-border-color);display:flex;flex-direction:column;margin-top:.25em;margin-bottom:.25em;--dsc-item-my: 0;--dsc-border-color: var(--ds-color-neutral-surface-tinted);--dsc-title-weight: 400;--dsc-title-font-size: 1rem;--dsc-title-line-height: 1.25;--dsc-summary-font-size: .875rem}._border_jg0tu_1[data-selected=true]{--dsc-border-color: var(--ds-color-surface-tinted)}._border_jg0tu_1[data-unread=true]{--dsc-border-color: var(--ds-color-surface-active);--dsc-title-weight: 600}._border_jg0tu_1[data-trashed=true] ._title_jg0tu_27{text-decoration:line-through}._border_jg0tu_1[data-size=xs],._border_jg0tu_1[data-size=sm]{width:100%;flex-direction:row;align-items:center;padding-left:.75rem}._border_jg0tu_1[data-size=md]{padding-left:.75rem;row-gap:.5rem}._border_jg0tu_1[data-size=lg]{--dsc-title-font-size: 1.25rem;--dsc-summary-font-size: 1rem;padding-left:.875rem;row-gap:.875rem}._border_jg0tu_1[data-size=xl]{--dsc-title-font-size: 1.25rem;--dsc-summary-font-size: 1rem;padding-left:1rem;row-gap:1rem}._controls_jg0tu_58{position:absolute;top:0;right:0;margin:.25em}._header_jg0tu_65{position:relative;display:flex;flex-direction:column;row-gap:.25rem}._header_jg0tu_65[data-size=xs],._header_jg0tu_65[data-size=sm]{display:flex;flex-direction:row}._header_jg0tu_65 mark{background-color:var(--ds-color-surface-tinted)}._summary_jg0tu_82{font-size:var(--dsc-summary-font-size);font-weight:400;line-height:1.375;color:var(--ds-color-neutral-text-subtle);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin:0}._footer_jg0tu_96{width:100%;padding-right:2rem}._seenBy_jg0tu_101{position:absolute;right:0;bottom:0;margin:.25rem -1rem}._heading_jg0tu_108{padding-right:1.25rem;display:inline-flex;align-items:center;column-gap:.5em}._title_jg0tu_27{font-size:var(--dsc-title-font-size);font-weight:var(--dsc-title-font-weight);line-height:var(--dsc-title-line-height);margin:0}._title_jg0tu_27[data-size=md],._title_jg0tu_27[data-size=lg],._title_jg0tu_27[data-size=xl]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}

package/dist/assets/DrawerBody.css

@@ -1 +1 @@
-._body_1rwbe_1{width:100%;padding:0 .5em;overflow-y:scroll}
+._body_oqhlu_1{width:100%;padding:0 .5em;overflow-y:visible}

package/dist/assets/Heading.css

@@ -1 +1 @@
-._heading_16r67_1{font-size:1em;line-height:1.25;margin:0}._heading_16r67_1[data-max-rows="2"]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}._heading_16r67_1[data-variant=default]{background-color:transparent;color:var(--ds-color-text-default)}._heading_16r67_1[data-variant=subtle]{background-color:transparent;color:var(--ds-color-text-subtle)}._heading_16r67_1[data-weight=normal]{font-weight:400}._heading_16r67_1[data-weight=medium]{font-weight:500}._heading_16r67_1[data-weight=bold]{font-weight:600}._heading_16r67_1[data-size=inherit]{font-size:1em}._heading_16r67_1[data-size=xxs]{font-size:.75rem}._heading_16r67_1[data-size=xs]{font-size:.875rem}._heading_16r67_1[data-size=sm]{font-size:1rem}._heading_16r67_1[data-size=md]{font-size:1.125rem}._heading_16r67_1[data-size=lg]{font-size:1.25rem}._heading_16r67_1[data-size=xl]{font-size:1.5rem}._heading_16r67_1[data-leading=none]{line-height:1}._heading_16r67_1[data-leading=normal]{line-height:1.5}._heading_16r67_1[data-leading=tight]{line-height:1.25}
+._heading_1dyne_1{font-size:1em;line-height:1.25;margin:0}._heading_1dyne_1[data-max-rows="1"]{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}._heading_1dyne_1[data-max-rows="2"]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}._heading_1dyne_1[data-variant=default]{background-color:transparent;color:var(--ds-color-text-default)}._heading_1dyne_1[data-variant=subtle]{background-color:transparent;color:var(--ds-color-text-subtle)}._heading_1dyne_1[data-weight=normal]{font-weight:400}._heading_1dyne_1[data-weight=medium]{font-weight:500}._heading_1dyne_1[data-weight=bold]{font-weight:600}._heading_1dyne_1[data-size=inherit]{font-size:1em}._heading_1dyne_1[data-size=xxs]{font-size:.75rem}._heading_1dyne_1[data-size=xs]{font-size:.875rem}._heading_1dyne_1[data-size=sm]{font-size:1rem}._heading_1dyne_1[data-size=md]{font-size:1.125rem}._heading_1dyne_1[data-size=lg]{font-size:1.25rem}._heading_1dyne_1[data-size=xl]{font-size:1.5rem}._heading_1dyne_1[data-leading=none]{line-height:1}._heading_1dyne_1[data-leading=normal]{line-height:1.5}._heading_1dyne_1[data-leading=tight]{line-height:1.25}

package/dist/assets/MenuItemsVirtual.css

@@ -1 +1 @@
-._virtualScrollRef_15wg7_1{max-height:400px;overflow-y:auto}._virtualMenuListItem_15wg7_6{position:absolute;top:0;left:0;width:100%}._virtualMenuListItem_15wg7_6>*{margin:0}
+._virtualScrollRef_u54k3_1{max-height:400px;overflow-y:auto;padding:0 .5em;margin:0 -.5em}._virtualMenuListItem_u54k3_8{position:absolute;top:0;left:0;width:100%}._virtualMenuListItem_u54k3_8>*{margin:0}

package/dist/assets/ScopeListItem.css

@@ -1 +1 @@
-._item_1a3bc_1{box-shadow:none}._item_1a3bc_1 mark{background-color:transparent;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}._item_1a3bc_1 mark:before{content:"«"}._item_1a3bc_1 mark:after{content:"»"}
+._item_4v2ol_1 mark{background-color:transparent;font-weight:400;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}._item_4v2ol_1 mark:before{content:"«"}._item_4v2ol_1 mark:after{content:"»"}

package/dist/components/Dialog/DialogList.js

@@ -1,28 +1,28 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as y } from "react/jsx-runtime";
 import { createElement as r } from "react";
 import "../../index-L8X2o7IH.js";
-import { useMenu as y } from "../../hooks/useMenu.js";
+import { useMenu as d } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListGroup as d } from "./DialogListGroup.js";
-import { DialogListItem as g } from "./DialogListItem.js";
+import { DialogListGroup as g } from "./DialogListGroup.js";
+import { DialogListItem as u } from "./DialogListItem.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as u } from "../Page/Section.js";
-const j = ({ items: i, groups: e = {}, sortGroupBy: m, isLoading: s }) => {
-  const { menu: o } = y({
+import { Section as k } from "../Page/Section.js";
+const v = ({ items: i, groups: e = {}, sortGroupBy: m, highlightWords: s, isLoading: p }) => {
+  const { menu: o } = d({
     items: i,
     groups: e,
     groupByKey: "groupId",
     keyboardEvents: !1,
     sortGroupBy: m
   });
-  return /* @__PURE__ */ f(u, { spacing: 3, margin: "section", "aria-busy": s, children: o == null ? void 0 : o.map((t, p) => {
-    const a = t.props || {};
-    return /* @__PURE__ */ r(d, { ...a, key: "dialog-list-item" + p }, t == null ? void 0 : t.items.map((n, l) => {
-      const c = n.props || {};
-      return /* @__PURE__ */ r(g, { ...c, key: "dialog-list-item" + l });
+  return /* @__PURE__ */ y(k, { spacing: 3, margin: "section", "aria-busy": p, children: o == null ? void 0 : o.map((t, a) => {
+    const n = t.props || {};
+    return /* @__PURE__ */ r(g, { ...n, key: "dialog-list-item" + a }, t == null ? void 0 : t.items.map((l, c) => {
+      const f = l.props || {};
+      return /* @__PURE__ */ r(u, { ...f, highlightWords: s, key: "dialog-list-item" + c });
     }));
   }) });
 };
 export {
-  j as DialogList
+  v as DialogList
 };

package/dist/components/Dialog/DialogListItem.js

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

package/dist/components/Dropdown/DrawerBody.js

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
 import { c as t } from "../../index-L8X2o7IH.js";
-import '../../assets/DrawerBody.css';const c = "_body_1rwbe_1", d = {
+import '../../assets/DrawerBody.css';const c = "_body_oqhlu_1", d = {
   body: c
-}, b = ({ className: o, children: r }) => /* @__PURE__ */ s("div", { className: t(d.body, o), children: r });
+}, m = ({ className: o, children: r }) => /* @__PURE__ */ s("div", { className: t(d.body, o), children: r });
 export {
-  b as DrawerBody
+  m as DrawerBody
 };

package/dist/components/List/ListItem.js

@@ -1,66 +1,67 @@
-import { jsxs as w, jsx as B } from "react/jsx-runtime";
-import { ListItemBase as H } from "./ListItemBase.js";
-import { ListItemHeader as b } from "./ListItemHeader.js";
-import '../../assets/ListItem.css';const k = "_item_1nwey_3", q = {
-  item: k
-}, F = ({
-  className: A,
-  color: e,
-  variant: r = "default",
+import { jsxs as H, jsx as N } from "react/jsx-runtime";
+import { c as b } from "../../index-L8X2o7IH.js";
+import { ListItemBase as k } from "./ListItemBase.js";
+import { ListItemHeader as q } from "./ListItemHeader.js";
+import '../../assets/ListItem.css';const A = "_item_1nwey_3", C = {
+  item: A
+}, J = ({
+  className: i,
+  color: m,
+  variant: c = "default",
   shadow: n = "xs",
-  border: c = "none",
-  loading: m,
-  collapsible: f,
+  border: f = "none",
+  loading: e,
+  collapsible: p,
   expanded: t,
   size: o,
   icon: l,
   label: s,
   title: a,
-  description: p,
-  badge: u,
-  linkIcon: L = !1,
+  description: u,
+  badge: L,
+  linkIcon: x = !1,
   select: y,
   selected: I,
   controls: _,
   children: h,
-  interactive: i,
+  interactive: r,
   id: j,
-  ...x
+  ...w
 }) => {
-  const N = typeof s == "function" ? s() : s;
-  return /* @__PURE__ */ w(
-    H,
+  const B = typeof s == "function" ? s() : s;
+  return /* @__PURE__ */ H(
+    k,
     {
-      className: q.item,
+      className: b(C.item, i),
       size: o,
-      color: e,
-      variant: r,
+      color: m,
+      variant: c,
       shadow: n,
-      border: c,
+      border: f,
       selected: I,
       expanded: t,
-      loading: m,
-      interactive: i,
+      loading: e,
+      interactive: r,
       id: j,
       children: [
-        /* @__PURE__ */ B(
-          b,
+        /* @__PURE__ */ N(
+          q,
           {
-            color: e,
-            loading: m,
-            linkIcon: L,
-            collapsible: f,
+            color: m,
+            loading: e,
+            linkIcon: x,
+            collapsible: p,
             expanded: t,
             select: y,
             title: a,
             size: o,
-            description: p,
+            description: u,
             icon: l,
-            badge: u,
+            badge: L,
             controls: _,
-            interactive: i,
-            ...x,
-            children: N
+            interactive: r,
+            ...w,
+            children: B
           }
         ),
         t ? h : null
@@ -69,5 +70,5 @@ import '../../assets/ListItem.css';const k = "_item_1nwey_3", q = {
   );
 };
 export {
-  F as ListItem
+  J as ListItem
 };

package/dist/components/List/ListItemLabel.js

@@ -14,7 +14,6 @@ const d = (r) => {
   const s = {
     as: "h3",
     size: "sm"
-    //    leading: "tight",
   };
   return j(r) ? { ...s, ...r } : z(r) ? {
     ...s,
@@ -26,7 +25,6 @@ const d = (r) => {
     size: "xs",
     weight: "normal",
     variant: "subtle"
-    //    leading: "tight",
   };
   return j(r) ? { ...s, ...r } : z(r) ? {
     ...s,

package/dist/components/Menu/MenuItemsVirtual.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { u as b } from "../../index-D-VWMqlv.js";
-import { useRef as g, useEffect as R } from "react";
+import { u as E } from "../../index-D-VWMqlv.js";
+import { useRef as b, useEffect as R } from "react";
 import "../../index-L8X2o7IH.js";
 import { useMenu as T } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
 import { MenuItem as V } from "./MenuItem.js";
 import { MenuSearch as $ } from "./MenuSearch.js";
 import { MenuHeader as j } from "./MenuHeader.js";
-import { MenuList as k, MenuListItem as N } from "./MenuBase.js";
+import { MenuList as N, MenuListItem as g } from "./MenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_15wg7_1", B = "_virtualMenuListItem_15wg7_6", y = {
+import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_u54k3_1", B = "_virtualMenuListItem_u54k3_8", y = {
   virtualScrollRef: q,
   virtualMenuListItem: B
 }, U = ({
@@ -29,9 +29,9 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_15wg7_1"
     groups: M,
     groupByKey: "groupId",
     keyboardEvents: !1
-  }), m = g(null), a = _.flatMap((t, e) => {
+  }), m = b(null), a = _.flatMap((t, e) => {
     var u;
-    const E = (t == null ? void 0 : t.props) || {}, { title: c } = E, p = ((u = t == null ? void 0 : t.items) == null ? void 0 : u.filter((r) => {
+    const k = (t == null ? void 0 : t.props) || {}, { title: c } = k, p = ((u = t == null ? void 0 : t.items) == null ? void 0 : u.filter((r) => {
       var s;
       return !((s = r.props) != null && s.hidden);
     })) || [];
@@ -49,7 +49,7 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_15wg7_1"
         };
       })
     ];
-  }), o = b({
+  }), o = E({
     count: a.length,
     gap: 8,
     estimateSize: () => 44,
@@ -60,12 +60,12 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_15wg7_1"
       const e = document.querySelector(`[data-index="${t.index}"]`);
       e && o.measureElement(e);
     }
-  }, [n]), /* @__PURE__ */ v(k, { children: [
+  }, [n]), /* @__PURE__ */ v(N, { children: [
     l && /* @__PURE__ */ i($, { ...l }),
     /* @__PURE__ */ i("div", { ref: m, className: y.virtualScrollRef, style: z, children: /* @__PURE__ */ i("div", { style: { position: "relative", height: `${o.getTotalSize()}px` }, children: n.map((t) => {
       const e = a[t.index];
       return e ? /* @__PURE__ */ v(
-        N,
+        g,
         {
           dataIndex: t.index,
           className: y.virtualMenuListItem,

package/dist/components/Searchbar/AutocompleteItem.js

@@ -1,21 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { BookmarksListItem as n } from "../Bookmarks/BookmarksListItem.js";
+import { BookmarksListItem as o } from "../Bookmarks/BookmarksListItem.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListItem as r } from "../Dialog/DialogListItem.js";
-import { ScopeListItem as i } from "./ScopeListItem.js";
-import { SuggestListItem as m } from "./SuggestListItem.js";
+import { DialogListItem as i } from "../Dialog/DialogListItem.js";
+import { ScopeListItem as r } from "./ScopeListItem.js";
+import { SuggestListItem as s } from "./SuggestListItem.js";
 import { ListItem as a } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-const h = ({ type: o, ...t }) => {
-  switch (o) {
+const h = ({ type: n, ...t }) => {
+  switch (n) {
     case "scope":
       return /* @__PURE__ */ e(
-        i,
+        r,
         {
           ...t,
-          color: "company",
           variant: "default",
           shadow: "none",
           size: "sm",
@@ -25,10 +24,9 @@ const h = ({ type: o, ...t }) => {
       );
     case "suggest":
       return /* @__PURE__ */ e(
-        m,
+        s,
         {
           ...t,
-          color: "company",
           variant: "default",
           shadow: "none",
           size: "sm",
@@ -38,7 +36,7 @@ const h = ({ type: o, ...t }) => {
       );
     case "bookmark":
       return /* @__PURE__ */ e(
-        n,
+        o,
         {
           ...t,
           variant: "default",
@@ -49,7 +47,7 @@ const h = ({ type: o, ...t }) => {
       );
     case "dialog":
       return /* @__PURE__ */ e(
-        r,
+        i,
         {
           ...t,
           variant: "default",

package/dist/components/Searchbar/ScopeListItem.js

@@ -4,9 +4,9 @@ import "react";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as e } from "../List/ListItem.js";
-import '../../assets/ScopeListItem.css';const r = "_item_1a3bc_1", s = {
+import '../../assets/ScopeListItem.css';const r = "_item_4v2ol_1", s = {
   item: r
-}, l = ({ as: t = "a", label: m, ...o }) => /* @__PURE__ */ i(e, { className: s.item, label: m, ...o, as: t });
+}, f = ({ as: t = "a", label: m, ...o }) => /* @__PURE__ */ i(e, { className: s.item, label: m, ...o, as: t });
 export {
-  l as ScopeListItem
+  f as ScopeListItem
 };

package/dist/components/Typography/Heading.js

@@ -1,37 +1,43 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as h } from "../../index-L8X2o7IH.js";
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { c as x } from "../../index-L8X2o7IH.js";
 import "react";
-import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
 import "../RootProvider/RootProvider.js";
+import { useHighlightedText as u } from "./useHighlightedText.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Heading.css';const p = "_heading_16r67_1", x = {
-  heading: p
-}, v = ({
-  loading: o,
-  as: i = "h2",
-  size: a,
-  leading: r = "tight",
-  weight: e = "medium",
+import '../../assets/Heading.css';const H = "_heading_1dyne_1", _ = {
+  heading: H
+}, T = ({
+  loading: e,
+  highlightWords: i = [],
+  as: o = "h2",
+  size: t,
+  leading: n = "tight",
+  weight: r = "medium",
   color: d,
-  variant: n,
-  maxRows: m,
-  className: s,
-  style: c,
+  variant: m,
+  maxRows: s,
+  className: c,
+  style: h,
   children: g
-}) => /* @__PURE__ */ t(l, { loading: o, children: /* @__PURE__ */ t(
-  i,
-  {
-    className: h(x.heading, s),
-    style: c,
-    "data-size": a,
-    "data-leading": r,
-    "data-weight": e,
-    "data-color": d,
-    "data-variant": a === "xxs" && "default" || n,
-    "data-max-rows": m,
-    children: g
-  }
-) });
+}) => {
+  const l = o, p = u(g, i || []);
+  return /* @__PURE__ */ a(f, { loading: e, children: /* @__PURE__ */ a(
+    l,
+    {
+      className: x(_.heading, c),
+      style: h,
+      "data-size": t,
+      "data-leading": n,
+      "data-weight": r,
+      "data-color": d,
+      "data-variant": t === "xxs" && "default" || m,
+      "data-max-rows": s,
+      children: p
+    }
+  ) });
+};
 export {
-  v as Heading
+  T as Heading
 };

package/dist/components/Typography/Typography.js

@@ -1,35 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
-import { Skeleton as h } from "../Skeleton/Skeleton.js";
-import '../../assets/Typography.css';const l = "_typography_cr720_1", g = {
-  typography: l
-}, C = ({
-  loading: o,
+import { jsx as o } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
+import { useHighlightedText as x } from "./useHighlightedText.js";
+import '../../assets/Typography.css';const _ = "_typography_cr720_1", u = {
+  typography: _
+}, z = ({
+  loading: t,
   loadingText: r = "Loading ...",
-  as: a = "div",
-  size: p = "md",
+  highlightWords: a,
+  as: p = "div",
+  size: e = "md",
   color: n,
-  variant: e,
-  className: s,
+  variant: s,
+  className: c,
   style: y = {},
-  maxWidth: c,
+  maxWidth: i,
   children: m,
-  ...i
-}) => /* @__PURE__ */ t(
-  a,
-  {
-    className: d(g.typography, s),
-    style: {
-      maxWidth: c,
-      ...y
-    },
-    "data-size": p,
-    "data-color": n,
-    "data-variant": e,
-    ...i,
-    children: o && /* @__PURE__ */ t(h, { loading: o, children: r }) || m
-  }
-);
+  ...h
+}) => {
+  const d = p, g = x(m, a || []);
+  return /* @__PURE__ */ o(
+    d,
+    {
+      className: l(u.typography, c),
+      style: {
+        maxWidth: i,
+        ...y
+      },
+      "data-size": e,
+      "data-color": n,
+      "data-variant": s,
+      ...h,
+      children: t && /* @__PURE__ */ o(f, { loading: t, children: r }) || g
+    }
+  );
+};
 export {
-  C as Typography
+  z as Typography
 };

package/dist/components/Typography/useHighlightedText.js

@@ -0,0 +1,53 @@
+import { jsx as u } from "react/jsx-runtime";
+import f, { useMemo as p, isValidElement as d, cloneElement as m } from "react";
+const g = /* @__PURE__ */ new Set(["mark", "code", "pre", "script", "style"]);
+function h(e) {
+  return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function y(e, t) {
+  if (!t.test(e))
+    return { node: e, changed: !1 };
+  t.lastIndex = 0;
+  const n = [];
+  let s = 0, c;
+  for (; c = t.exec(e); ) {
+    const r = c.index, l = r + c[0].length;
+    r > s && n.push(e.slice(s, r)), n.push(/* @__PURE__ */ u("mark", { children: c[0] }, n.length)), s = l;
+  }
+  return s < e.length && n.push(e.slice(s)), { node: n.length === 1 ? n[0] : n, changed: !0 };
+}
+function i(e, t) {
+  if (typeof e == "string")
+    return y(e, t);
+  if (d(e)) {
+    const n = e, s = typeof n.type == "string" ? n.type : void 0;
+    if (s && g.has(s)) return { node: e, changed: !1 };
+    let c = !1;
+    const r = f.Children.map(n.props.children, (o) => {
+      const a = i(o, t);
+      return a.changed && (c = !0), a.node;
+    });
+    if (!c)
+      return { node: e, changed: !1 };
+    const l = r && r.length === 1 ? r[0] : r;
+    return { node: m(n, { children: l }), changed: !0 };
+  }
+  return { node: e, changed: !1 };
+}
+function E(e, t) {
+  return p(() => {
+    if (!e || !(t != null && t.length)) return e;
+    const n = Array.from(
+      new Set(
+        t.map((r) => r.trim()).filter(Boolean).map(h)
+      )
+    );
+    if (n.length === 0) return e;
+    n.sort((r, l) => l.length - r.length);
+    const s = new RegExp(`(${n.join("|")})`, "gi"), { node: c } = i(e, s);
+    return c;
+  }, [e, t]);
+}
+export {
+  E as useHighlightedText
+};

package/dist/types/lib/components/Dialog/DialogList.d.ts

@@ -3,6 +3,7 @@ export interface DialogListProps {
     items: DialogListItemProps[];
     groups?: Record<string, DialogListGroupProps>;
     sortGroupBy?: (a: [string, DialogListItemProps[]], b: [string, DialogListItemProps[]]) => number;
+    highlightWords?: string[];
     isLoading?: boolean;
 }
-export declare const DialogList: ({ items, groups, sortGroupBy, isLoading }: DialogListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogList: ({ items, groups, sortGroupBy, highlightWords, isLoading }: DialogListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogList.stories.d.ts

@@ -1,12 +1,13 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ items, groups, sortGroupBy, isLoading }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy, highlightWords, isLoading }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         items: import('./DialogListItem').DialogListItemProps[];
         groups?: Record<string, import('./DialogListGroup').DialogListGroupProps>;
         sortGroupBy?: (a: [string, import('./DialogListItem').DialogListItemProps[]], b: [string, import('./DialogListItem').DialogListItemProps[]]) => number;
+        highlightWords?: string[];
         isLoading?: boolean;
     };
 };

package/dist/types/lib/components/Dialog/DialogListItem.d.ts

@@ -3,6 +3,8 @@ export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DialogListItemState = 'normal' | 'trashed' | 'archived';
 export type DialogListItemTheme = 'default' | 'subtle' | 'transparent';
 export interface DialogListItemProps extends ListItemProps, DialogMetadataProps {
+    /** Highlight words, ie. search terms */
+    highlightWords?: string[];
     /** Dialog title */
     title: string;
     /** Dialog id */
@@ -51,4 +53,4 @@ export interface DialogListItemProps extends ListItemProps, DialogMetadataProps
  * summary, sender, and receiver.
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  */
-export declare const DialogListItem: ({ size, state, loading, controls, select, selected, status, sender, recipient, recipientLabel, grouped, updatedAt, updatedAtLabel, archived, archivedAt, archivedAtLabel, trashed, trashedAt, trashedAtLabel, badge, dueAt, dueAtLabel, unread, seenByLog, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, title, description, summary, variant, id, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogListItem: ({ size, state, loading, controls, select, selected, status, sender, recipient, recipientLabel, grouped, updatedAt, updatedAtLabel, archived, archivedAt, archivedAtLabel, trashed, trashedAt, trashedAtLabel, badge, dueAt, dueAtLabel, unread, seenByLog, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, title, description, summary, highlightWords, variant, id, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Typography/Heading.d.ts

@@ -6,6 +6,7 @@ export type HeadingLeading = 'none' | 'tight' | 'normal';
 export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
 export interface HeadingProps {
     loading?: boolean;
+    highlightWords?: string[];
     as?: HeadingComponent;
     size?: HeadingSize;
     weight?: HeadingWeight;
@@ -17,4 +18,4 @@ export interface HeadingProps {
     style?: CSSProperties;
     children?: ReactNode;
 }
-export declare const Heading: ({ loading, as, size, leading, weight, color, variant, maxRows, className, style, children, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ loading, highlightWords, as, size, leading, weight, color, variant, maxRows, className, style, children, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Typography/Heading.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, as, size, leading, weight, color, variant, maxRows, className, style, children, }: import('./Heading').HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, highlightWords, as, size, leading, weight, color, variant, maxRows, className, style, children, }: import('./Heading').HeadingProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const HighlightWords: Story;

package/dist/types/lib/components/Typography/Typography.d.ts

@@ -5,6 +5,7 @@ export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface TypographyProps {
     loading?: boolean;
     loadingText?: string;
+    highlightWords?: string[];
     as?: ElementType;
     size?: TypographySize;
     color?: TypographyColor;
@@ -15,4 +16,4 @@ export interface TypographyProps {
     style?: CSSProperties;
     maxWidth?: string;
 }
-export declare const Typography: ({ loading, loadingText, as, size, color, variant, className, style, maxWidth, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Typography: ({ loading, loadingText, highlightWords, as, size, color, variant, className, style, maxWidth, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Typography/Typography.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, loadingText, as, size, color, variant, className, style, maxWidth, children, ...restProps }: import('./Typography').TypographyProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, loadingText, highlightWords, as, size, color, variant, className, style, maxWidth, children, ...restProps }: import('./Typography').TypographyProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const HighlightWords: Story;

package/dist/types/lib/components/Typography/useHighlightedText.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function useHighlightedText(content: ReactNode, highlightWords: string[]): ReactNode;

package/dist/types/lib/stories/Inbox.stories.d.ts

@@ -9,6 +9,7 @@ declare const meta: {
 export default meta;
 export declare const InboxPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const SearchPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoHitsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const DraftsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const SentPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const BookmarksPage: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.36.7",
+  "version": "0.37.0",
   "main": "dist/index.js",
   "files": [
     "dist/",