@altinn/altinn-components 0.56.17 → 0.56.19

package/dist/assets/Badge.css

@@ -1 +1 @@
-._badge_yrqxu_1{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:0 0 auto;max-height:min-content;--dsc-badge-background: var(--ds-color-base-default);--dsc-badge-color: var(--ds-color-base-contrast-default);--dsc-badge-border: var(--ds-color-base-default);border:1px solid transparent;background-color:var(--dsc-badge-background);color:var(--dsc-badge-color);border-color:var(--dsc-badge-border);box-sizing:border-box}._badge_yrqxu_1[data-size=xs]{width:.75rem;height:.75rem;padding:0;border-radius:1em}._badge_yrqxu_1[data-size=xs] ._label_yrqxu_28{color:transparent;width:100%;height:100%}._badge_yrqxu_1[data-size=sm]{font-weight:500;font-size:.75rem;line-height:1;padding:.5em;height:2em;min-width:2em;border-radius:2em}._badge_yrqxu_1[data-variant=subtle]{--dsc-badge-background: var(--ds-color-surface-tinted);--dsc-badge-border: var(--ds-color-surface-tinted);--dsc-badge-color: var(--ds-color-text-default)}._badge_yrqxu_1[data-variant=tinted]{--dsc-badge-background: var(--ds-color-surface-active);--dsc-badge-border: var(--ds-color-surface-active);--dsc-badge-color: var(--ds-color-text-default)}._badge_yrqxu_1[data-variant=base]{--dsc-badge-background: var(--ds-color-base-default);--dsc-badge-border: var(--ds-color-base-default);--dsc-badge-color: var(--ds-color-base-contrast-default)}._badge_yrqxu_1[data-variant=outline]{--dsc-badge-background: transparent;--dsc-badge-border: var(--ds-color-border-subtle);--dsc-badge-color: var(--ds-color-text-subtle)}._badge_yrqxu_1[data-variant=text],._badge_yrqxu_1[data-variant=text][data-size=xs],._badge_yrqxu_1[data-variant=text][data-size=sm]{--dsc-badge-background: transparent;--dsc-badge-border: transparent;--dsc-badge-color: var(--ds-color-text-subtle);font-size:.875rem;font-weight:400;padding:.5em 0}
+._badge_1i58d_1{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:0 0 auto;max-height:min-content;--dsc-badge-background: var(--ds-color-base-default);--dsc-badge-color: var(--ds-color-base-contrast-default);--dsc-badge-border: var(--ds-color-base-default);border:1px solid transparent;background-color:var(--dsc-badge-background);color:var(--dsc-badge-color);border-color:var(--dsc-badge-border);box-sizing:border-box;vertical-align:middle}._badge_1i58d_1[data-size=xs]{width:.75rem;height:.75rem;padding:0;border-radius:1em}._badge_1i58d_1[data-size=xs] ._label_1i58d_30{color:transparent;width:100%;height:100%}._badge_1i58d_1[data-size=sm]{font-weight:500;font-size:.75rem;line-height:1;padding:.5em;height:2em;min-width:2em;border-radius:2em}._badge_1i58d_1[data-variant=subtle]{--dsc-badge-background: var(--ds-color-surface-tinted);--dsc-badge-border: var(--ds-color-surface-tinted);--dsc-badge-color: var(--ds-color-text-default)}._badge_1i58d_1[data-variant=tinted]{--dsc-badge-background: var(--ds-color-surface-active);--dsc-badge-border: var(--ds-color-surface-active);--dsc-badge-color: var(--ds-color-text-default)}._badge_1i58d_1[data-variant=base]{--dsc-badge-background: var(--ds-color-base-default);--dsc-badge-border: var(--ds-color-base-default);--dsc-badge-color: var(--ds-color-base-contrast-default)}._badge_1i58d_1[data-variant=outline]{--dsc-badge-background: transparent;--dsc-badge-border: var(--ds-color-border-subtle);--dsc-badge-color: var(--ds-color-text-subtle)}._badge_1i58d_1[data-variant=text],._badge_1i58d_1[data-variant=text][data-size=xs],._badge_1i58d_1[data-variant=text][data-size=sm]{--dsc-badge-background: transparent;--dsc-badge-border: transparent;--dsc-badge-color: var(--ds-color-text-subtle);font-size:.875rem;font-weight:400;padding:.5em 0}

package/dist/assets/PageMenu.css

@@ -1 +1 @@
-._menu_13em0_1{padding:0 .5rem;border-radius:.375rem}._list_13em0_6{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}@media(min-width:1024px){._list_13em0_6{flex-direction:row;align-items:center;justify-content:start;column-gap:.5rem;width:auto}}._menu_13em0_1[data-theme=base],._item_13em0_29[data-theme=base]{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}._item_13em0_29[data-theme=base]:hover{background-color:var(--ds-color-base-hover)}._item_13em0_29[data-theme=base]:active{background-color:var(--ds-color-base-active)}
+._buttonGroup_1ybcg_1{display:flex;flex-direction:column;padding:.5rem;gap:.5rem}@media(min-width:1024px){._buttonGroup_1ybcg_1{flex-direction:row}}._button_1ybcg_1{justify-content:flex-start}

package/dist/components/Badge/Badge.js

@@ -1,20 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
 import { c as o } from "../../index-p1eeF8LQ.js";
-import '../../assets/Badge.css';const b = "_badge_yrqxu_1", m = "_label_yrqxu_28", s = {
+import '../../assets/Badge.css';const b = "_badge_1i58d_1", i = "_label_1i58d_30", s = {
   badge: b,
-  label: m
-}, _ = ({ label: t, color: l, variant: r = "subtle", theme: d, size: a = "sm", className: c, children: n }) => /* @__PURE__ */ e(
+  label: i
+}, g = ({ label: t, color: d, variant: l = "subtle", theme: r, size: a = "sm", className: c, children: n }) => /* @__PURE__ */ e(
   "span",
   {
     className: o(s.badge, c),
-    "data-color": l,
-    "data-variant": r,
-    "data-theme": d,
+    "data-color": d,
+    "data-variant": l,
+    "data-theme": r,
     "data-size": a,
     ...a === "xs" && { "aria-hidden": !0 },
     children: /* @__PURE__ */ e("span", { className: s.label, children: t || n })
   }
 );
 export {
-  _ as Badge
+  g as Badge
 };

package/dist/components/Dialog/DialogHeader.js

@@ -1,54 +1,55 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { Badge as x } from "../Badge/Badge.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { Badge as j } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { Skeleton as j } from "../Skeleton/Skeleton.js";
 import { Heading as D } from "../Typography/Heading.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { DialogMetadata as H } from "./DialogMetadata.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as S } from "../Page/Flex.js";
-import { Section as k } from "../Page/Section.js";
-const I = ({
-  loading: i,
-  title: e,
-  badge: o,
-  status: m,
-  extendedStatusLabel: p,
-  draftsLabel: n,
-  sentCount: a,
-  receivedCount: l,
+import { Section as u } from "../Page/Section.js";
+const E = ({
+  loading: o,
+  title: m,
+  badge: r,
+  status: p,
+  extendedStatusLabel: e,
+  draftsLabel: a,
+  sentCount: s,
+  receivedCount: n,
   updatedAt: c,
-  updatedAtLabel: s,
-  attachmentsCount: d,
-  dueAt: f,
-  dueAtLabel: h,
-  activityLog: g
-}) => /* @__PURE__ */ t(k, { as: "header", spacing: 3, align: "start", children: [
-  /* @__PURE__ */ r(D, { size: "xl", children: /* @__PURE__ */ t(S, { align: "center", children: [
-    /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(j, { loading: i, children: e }) }),
-    o && /* @__PURE__ */ r(x, { ...o })
-  ] }) }),
-  /* @__PURE__ */ r(
+  updatedAtLabel: f,
+  attachmentsCount: l,
+  dueAt: d,
+  dueAtLabel: x,
+  activityLog: g,
+  tooltips: h = {}
+}) => /* @__PURE__ */ i(u, { as: "header", spacing: 3, align: "start", children: [
+  /* @__PURE__ */ i(D, { loading: o, size: "xl", children: [
+    m,
+    r && " ",
+    r && /* @__PURE__ */ t(j, { ...r })
+  ] }),
+  /* @__PURE__ */ t(
     H,
     {
-      loading: i,
-      status: m,
-      extendedStatusLabel: p,
-      draftsLabel: n,
-      sentCount: a,
-      receivedCount: l,
+      loading: o,
+      status: p,
+      extendedStatusLabel: e,
+      draftsLabel: a,
+      sentCount: s,
+      receivedCount: n,
       updatedAt: c,
-      updatedAtLabel: s,
-      dueAt: f,
-      dueAtLabel: h,
-      attachmentsCount: d,
-      activityLog: g
+      updatedAtLabel: f,
+      dueAt: d,
+      dueAtLabel: x,
+      attachmentsCount: l,
+      activityLog: g,
+      tooltips: h
     }
   )
 ] });
 export {
-  I as DialogHeader
+  E as DialogHeader
 };

package/dist/components/Dialog/DialogListItem.js

@@ -1,32 +1,32 @@
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { Badge as K } from "../Badge/Badge.js";
+import { Badge as O } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { AvatarGroup as O } from "../Avatar/AvatarGroup.js";
+import { AvatarGroup as P } from "../Avatar/AvatarGroup.js";
 import { Heading as b } from "../Typography/Heading.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { DialogMetadata as P } from "./DialogMetadata.js";
-import { DialogByline as Q } from "./DialogByline.js";
+import { DialogMetadata as Q } from "./DialogMetadata.js";
+import { DialogByline as S } from "./DialogByline.js";
 import { ListItem as x } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_title_lwts6_27", U = "_controls_lwts6_58", X = "_header_lwts6_65", Y = "_summary_lwts6_82", Z = "_footer_lwts6_96", $ = "_seenBy_lwts6_101", z = "_dot_lwts6_108", W = "_heading_lwts6_112", a = {
-  border: S,
-  title: T,
-  controls: U,
-  header: X,
-  summary: Y,
-  footer: Z,
-  seenBy: $,
-  dot: z,
-  heading: W
-}, ft = ({
+import '../../assets/DialogListItem.css';const T = "_border_lwts6_1", U = "_title_lwts6_27", X = "_controls_lwts6_58", Y = "_header_lwts6_65", Z = "_summary_lwts6_82", $ = "_footer_lwts6_96", z = "_seenBy_lwts6_101", W = "_dot_lwts6_108", tt = "_heading_lwts6_112", a = {
+  border: T,
+  title: U,
+  controls: X,
+  header: Y,
+  summary: Z,
+  footer: $,
+  seenBy: z,
+  dot: W,
+  heading: tt
+}, wt = ({
   size: o = "xl",
-  state: tt = "normal",
+  state: at = "normal",
   loading: s,
   controls: N,
-  select: at,
+  select: st,
   selected: r,
   status: n,
   extendedStatusLabel: v,
@@ -52,15 +52,16 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
   receivedCount: q,
   attachmentsCount: C,
   attachmentsLabel: E,
+  tooltips: F = {},
   title: e,
-  description: F,
+  description: J,
   summary: m,
   highlightWords: l,
-  variant: J = "default",
+  variant: K = "default",
   id: h,
   ...f
 }) => {
-  const w = r ? "tinted" : J;
+  const w = r ? "tinted" : K;
   return o === "xs" || o === "sm" ? /* @__PURE__ */ t(
     x,
     {
@@ -73,7 +74,7 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
       disabled: s,
       icon: c,
       title: e,
-      description: m || F,
+      description: m || J,
       highlightWords: l
     }
   ) : /* @__PURE__ */ t(
@@ -111,12 +112,12 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
                   className: a.title,
                   children: [
                     e,
-                    d && /* @__PURE__ */ t(K, { className: a.dot, variant: "tinted", size: "xs", ...d })
+                    d && /* @__PURE__ */ t(O, { className: a.dot, variant: "tinted", size: "xs", ...d })
                   ]
                 }
               ) }),
               /* @__PURE__ */ t(
-                Q,
+                S,
                 {
                   size: "xs",
                   loading: s,
@@ -140,7 +141,7 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
               )
             ] }),
             /* @__PURE__ */ t(
-              P,
+              Q,
               {
                 className: a.footer,
                 loading: s,
@@ -158,10 +159,11 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
                 dueAt: M,
                 dueAtLabel: V,
                 attachmentsCount: C,
-                attachmentsLabel: E
+                attachmentsLabel: E,
+                tooltips: F
               }
             ),
-            p && /* @__PURE__ */ t(O, { className: a.seenBy, items: p.items })
+            p && /* @__PURE__ */ t(P, { className: a.seenBy, items: p.items })
           ]
         }
       )
@@ -169,5 +171,5 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
   );
 };
 export {
-  ft as DialogListItem
+  wt as DialogListItem
 };

package/dist/components/Dialog/DialogMetadata.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import { jsxs as S, jsx as a } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import a, { forwardRef as d } from "react";
+import c, { forwardRef as s } from "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { MetaBase as _ } from "../Metadata/MetaBase.js";
-import { MetaItem as c } from "../Metadata/MetaItem.js";
+import { MetaBase as E } from "../Metadata/MetaBase.js";
+import { MetaItem as d } from "../Metadata/MetaItem.js";
 import { MetaTimestamp as m } from "../Metadata/MetaTimestamp.js";
-import { DialogStatus as E } from "./DialogStatus.js";
+import { DialogStatus as M } from "./DialogStatus.js";
 import "../Snackbar/useSnackbar.js";
-import { S as M } from "../../Checkmark-Byz_C9x4.js";
-import { u as s } from "../../useId-BVFxCjkq.js";
-import { S as P, a as k, c as C, b as R } from "../../Trash-DBcymOP9.js";
-var q = function(t, i) {
+import { S as P } from "../../Checkmark-Byz_C9x4.js";
+import { u as p } from "../../useId-BVFxCjkq.js";
+import { S as k, a as C, c as R, b as q } from "../../Trash-DBcymOP9.js";
+var B = function(t, i) {
   var l = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && i.indexOf(e) < 0 && (l[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -21,17 +21,17 @@ var q = function(t, i) {
       i.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const B = d((t, i) => {
-  var { title: l, titleId: e } = t, r = q(t, ["title", "titleId"]);
-  let n = s();
-  return n = l ? e || "title-" + n : void 0, a.createElement(
+const D = s((t, i) => {
+  var { title: l, titleId: e } = t, r = B(t, ["title", "titleId"]);
+  let n = p();
+  return n = l ? e || "title-" + n : void 0, c.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": n }, r),
-    l ? a.createElement("title", { id: n }, l) : null,
-    a.createElement("path", { fill: "currentColor", d: "M12.75 5a.75.75 0 0 0-1.5 0v12.19l-3.22-3.22a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l4.5-4.5a.75.75 0 1 0-1.06-1.06l-3.22 3.22z" })
+    l ? c.createElement("title", { id: n }, l) : null,
+    c.createElement("path", { fill: "currentColor", d: "M12.75 5a.75.75 0 0 0-1.5 0v12.19l-3.22-3.22a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l4.5-4.5a.75.75 0 1 0-1.06-1.06l-3.22 3.22z" })
   );
 });
-var D = function(t, i) {
+var H = function(t, i) {
   var l = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && i.indexOf(e) < 0 && (l[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -39,14 +39,14 @@ var D = function(t, i) {
       i.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const H = d((t, i) => {
-  var { title: l, titleId: e } = t, r = D(t, ["title", "titleId"]);
-  let n = s();
-  return n = l ? e || "title-" + n : void 0, a.createElement(
+const A = s((t, i) => {
+  var { title: l, titleId: e } = t, r = H(t, ["title", "titleId"]);
+  let n = p();
+  return n = l ? e || "title-" + n : void 0, c.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": n }, r),
-    l ? a.createElement("title", { id: n }, l) : null,
-    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 1.75a.75.75 0 0 1 .75.75v2.464a9.75 9.75 0 1 1 12.342 15.023.75.75 0 1 1-.86-1.229A8.251 8.251 0 1 0 6.084 6.25H9a.75.75 0 0 1 0 1.5H4.5A.75.75 0 0 1 3.75 7V2.5a.75.75 0 0 1 .75-.75M12.75 6a.75.75 0 0 0-1.5 0v6c0 .199.079.39.22.53l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28zM3 11.25a.75.75 0 0 1 .75.75q0 .66.105 1.31a.75.75 0 0 1-1.481.24A10 10 0 0 1 2.25 12a.75.75 0 0 1 .75-.75m1.855 4.875a.75.75 0 0 0-1.299.75q.39.675.882 1.28a.75.75 0 1 0 1.163-.947 8 8 0 0 1-.746-1.083m1.995 3.294a.75.75 0 0 1 1.025-.274q.57.33 1.188.564a.75.75 0 1 1-.535 1.402 10 10 0 0 1-1.403-.667.75.75 0 0 1-.275-1.025m6.7 2.207a.75.75 0 1 0-.24-1.48q-.65.104-1.31.104a.75.75 0 0 0 0 1.5q.78 0 1.55-.124", clipRule: "evenodd" })
+    l ? c.createElement("title", { id: n }, l) : null,
+    c.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 1.75a.75.75 0 0 1 .75.75v2.464a9.75 9.75 0 1 1 12.342 15.023.75.75 0 1 1-.86-1.229A8.251 8.251 0 1 0 6.084 6.25H9a.75.75 0 0 1 0 1.5H4.5A.75.75 0 0 1 3.75 7V2.5a.75.75 0 0 1 .75-.75M12.75 6a.75.75 0 0 0-1.5 0v6c0 .199.079.39.22.53l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28zM3 11.25a.75.75 0 0 1 .75.75q0 .66.105 1.31a.75.75 0 0 1-1.481.24A10 10 0 0 1 2.25 12a.75.75 0 0 1 .75-.75m1.855 4.875a.75.75 0 0 0-1.299.75q.39.675.882 1.28a.75.75 0 1 0 1.163-.947 8 8 0 0 1-.746-1.083m1.995 3.294a.75.75 0 0 1 1.025-.274q.57.33 1.188.564a.75.75 0 1 1-.535 1.402 10 10 0 0 1-1.403-.667.75.75 0 0 1-.275-1.025m6.7 2.207a.75.75 0 1 0-.24-1.48q-.65.104-1.31.104a.75.75 0 0 0 0 1.5q.78 0 1.55-.124", clipRule: "evenodd" })
   );
 });
 var T = function(t, i) {
@@ -57,56 +57,68 @@ var T = function(t, i) {
       i.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const V = d((t, i) => {
+const V = s((t, i) => {
   var { title: l, titleId: e } = t, r = T(t, ["title", "titleId"]);
-  let n = s();
-  return n = l ? e || "title-" + n : void 0, a.createElement(
+  let n = p();
+  return n = l ? e || "title-" + n : void 0, c.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": n }, r),
-    l ? a.createElement("title", { id: n }, l) : null,
-    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.25 3.5c0-.69.56-1.25 1.25-1.25H14a.75.75 0 0 1 .53.22l5 5c.141.14.22.331.22.53v8.5c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25zm6.25 5.25c-.69 0-1.25-.56-1.25-1.25V3.75h-3.5v12.5h8.5v-7.5zm.25-3.94 2.44 2.44h-2.44zM6.502 7.75H5.75v12.5h8.5v-.748a.75.75 0 0 1 1.5 0v.998c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h1.002a.75.75 0 1 1 0 1.5", clipRule: "evenodd" })
+    l ? c.createElement("title", { id: n }, l) : null,
+    c.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.25 3.5c0-.69.56-1.25 1.25-1.25H14a.75.75 0 0 1 .53.22l5 5c.141.14.22.331.22.53v8.5c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25zm6.25 5.25c-.69 0-1.25-.56-1.25-1.25V3.75h-3.5v12.5h8.5v-7.5zm.25-3.94 2.44 2.44h-2.44zM6.502 7.75H5.75v12.5h8.5v-.748a.75.75 0 0 1 1.5 0v.998c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h1.002a.75.75 0 1 1 0 1.5", clipRule: "evenodd" })
   );
-}), ee = ({
+}), te = ({
   className: t,
   loading: i,
   status: l,
   sender: e,
   updatedAt: r,
   updatedAtLabel: n,
-  dueAt: p,
-  dueAtLabel: v,
-  archivedAt: u,
-  archivedAtLabel: h,
-  trashedAt: b,
+  dueAt: v,
+  dueAtLabel: u,
+  archivedAt: h,
+  archivedAtLabel: b,
+  trashedAt: g,
   trashedAtLabel: w,
   draftsLabel: O,
-  sentCount: g = 0,
-  receivedCount: y = 0,
-  attachmentsCount: x = 0,
-  attachmentsLabel: S,
-  transmissionsLabel: z,
+  sentCount: y = 0,
+  receivedCount: x = 0,
+  attachmentsCount: z = 0,
+  attachmentsLabel: _,
+  transmissionsLabel: j,
   activityLog: f,
-  extendedStatusLabel: j
-}) => /* @__PURE__ */ I(_, { className: t, size: "xs", children: [
-  l && /* @__PURE__ */ o(E, { loading: i, size: "xs", ...l }),
-  j && /* @__PURE__ */ o(c, { size: "xs", variant: "outline", children: j }),
-  O && /* @__PURE__ */ o(c, { size: "xs", variant: "dotted", children: O }),
-  g > 0 && /* @__PURE__ */ o(c, { size: "xs", variant: "outline", icon: M, children: g }),
-  y > 0 && /* @__PURE__ */ o(c, { size: "xs", variant: "outline", icon: B, children: y }),
-  r && /* @__PURE__ */ I(m, { loading: i, datetime: r, size: "xs", children: [
-    /* @__PURE__ */ o("strong", { children: e && e.name + ", " }),
+  extendedStatusLabel: I,
+  tooltips: o = {}
+}) => /* @__PURE__ */ S(E, { className: t, size: "xs", children: [
+  l && /* @__PURE__ */ a(M, { tooltip: o.status, loading: i, size: "xs", ...l }),
+  I && /* @__PURE__ */ a(d, { tooltip: o.extendedStatus, size: "xs", variant: "outline", children: I }),
+  O && /* @__PURE__ */ a(d, { tooltip: o.drafts, size: "xs", variant: "dotted", children: O }),
+  y > 0 && /* @__PURE__ */ a(d, { tooltip: o.sent, size: "xs", variant: "outline", icon: P, children: y }),
+  x > 0 && /* @__PURE__ */ a(d, { tooltip: o.received, size: "xs", variant: "outline", icon: D, children: x }),
+  r && /* @__PURE__ */ S(m, { tooltip: o.updatedAt, loading: i, datetime: r, size: "xs", children: [
+    /* @__PURE__ */ a("strong", { children: e && e.name + ", " }),
     n
   ] }),
-  p && v && /* @__PURE__ */ o(m, { loading: i, datetime: p, size: "xs", icon: P, children: v }),
-  x > 0 && /* @__PURE__ */ o(c, { loading: i, size: "xs", icon: k, children: S || x }),
-  z && /* @__PURE__ */ o(c, { loading: i, size: "xs", icon: V, children: z }),
-  b && w && /* @__PURE__ */ o(m, { loading: i, datetime: b, size: "xs", icon: C, children: w }) || u && h && /* @__PURE__ */ o(m, { loading: i, datetime: u, size: "xs", icon: R, children: h }),
-  f && /* @__PURE__ */ o(
-    c,
+  v && u && /* @__PURE__ */ a(m, { tooltip: o.dueAt, loading: i, datetime: v, size: "xs", icon: k, children: u }),
+  z > 0 && /* @__PURE__ */ a(d, { tooltip: o.attachments, loading: i, size: "xs", icon: C, children: _ || z }),
+  j && /* @__PURE__ */ a(d, { tooltip: o.transmissions, loading: i, size: "xs", icon: V, children: j }),
+  g && w && /* @__PURE__ */ a(m, { tooltip: o.trashedAt, loading: i, datetime: g, size: "xs", icon: R, children: w }) || h && b && /* @__PURE__ */ a(
+    m,
     {
+      tooltip: o.archivedAt,
       loading: i,
+      datetime: h,
       size: "xs",
-      icon: H,
+      icon: q,
+      children: b
+    }
+  ),
+  f && /* @__PURE__ */ a(
+    d,
+    {
+      tooltip: o.activityLog,
+      loading: i,
+      size: "xs",
+      icon: A,
       as: f?.onClick ? "button" : "span",
       onClick: f?.onClick,
       children: f?.label || "Activity log"
@@ -114,5 +126,5 @@ const V = d((t, i) => {
   )
 ] });
 export {
-  ee as DialogMetadata
+  te as DialogMetadata
 };

package/dist/components/Dialog/DialogStatus.js

@@ -1,47 +1,47 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import a, { forwardRef as p } from "react";
+import a, { forwardRef as f } from "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { MetaItem as c } from "../Metadata/MetaItem.js";
 import { MetaProgress as d } from "../Metadata/MetaProgress.js";
 import "../Snackbar/useSnackbar.js";
-import { u as f } from "../../useId-BVFxCjkq.js";
-var s = function(e, n) {
-  var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+import { u as p } from "../../useId-BVFxCjkq.js";
+var s = function(e, i) {
+  var t = {};
+  for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && i.indexOf(r) < 0 && (t[r] = e[r]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var i = 0, t = Object.getOwnPropertySymbols(e); i < t.length; i++)
-      n.indexOf(t[i]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[i]) && (r[t[i]] = e[t[i]]);
-  return r;
+    for (var n = 0, r = Object.getOwnPropertySymbols(e); n < r.length; n++)
+      i.indexOf(r[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[n]) && (t[r[n]] = e[r[n]]);
+  return t;
 };
-const m = p((e, n) => {
-  var { title: r, titleId: t } = e, i = s(e, ["title", "titleId"]);
-  let l = f();
-  return l = r ? t || "title-" + l : void 0, a.createElement(
+const m = f((e, i) => {
+  var { title: t, titleId: r } = e, n = s(e, ["title", "titleId"]);
+  let l = p();
+  return l = t ? r || "title-" + l : 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: n, "aria-labelledby": l }, i),
-    r ? a.createElement("title", { id: l }, r) : 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": l }, n),
+    t ? a.createElement("title", { id: l }, t) : null,
     a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M6 3.25a.75.75 0 0 0 0 1.5h.315c.109 1.966.642 3.846 1.546 5.302.502.81 1.116 1.479 1.81 1.948-.694.47-1.308 1.138-1.81 1.948-.904 1.456-1.437 3.336-1.546 5.302H6a.75.75 0 0 0 0 1.5h12a.75.75 0 0 0 0-1.5h-.298c-.109-1.966-.643-3.846-1.546-5.302-.503-.81-1.116-1.479-1.81-1.948.694-.47 1.307-1.138 1.81-1.948.904-1.456 1.437-3.336 1.546-5.302H18a.75.75 0 0 0 0-1.5zm6.008 8c.972 0 2.027-.624 2.873-1.989.738-1.189 1.211-2.785 1.318-4.511H7.818c.107 1.726.58 3.322 1.318 4.511.846 1.365 1.901 1.989 2.872 1.989m0 1.5c-.971 0-2.026.624-2.872 1.989-.738 1.189-1.211 2.784-1.318 4.511h8.381c-.107-1.727-.58-3.322-1.318-4.511-.846-1.365-1.901-1.989-2.873-1.989", clipRule: "evenodd" })
   );
 });
 var u = /* @__PURE__ */ ((e) => (e["not-applicable"] = "NOT_APPLICABLE", e.draft = "DRAFT", e.awaiting = "AWAITING", e.completed = "COMPLETED", e["in-progress"] = "IN_PROGRESS", e["requires-attention"] = "REQUIRES_ATTENTION", e))(u || {});
-const P = ({ loading: e, size: n = "xs", value: r = "not-applicable", label: t }) => {
+const P = ({ loading: e, size: i = "xs", value: t = "not-applicable", label: r, tooltip: n }) => {
   if (e)
     return null;
-  switch (r) {
+  switch (t) {
     case "draft":
-      return /* @__PURE__ */ o(c, { size: n, variant: "dotted", children: t || r });
+      return /* @__PURE__ */ o(c, { tooltip: n, size: i, variant: "dotted", children: r || t });
     case "requires-attention":
-      return /* @__PURE__ */ o(c, { variant: "solid", children: t || r });
+      return /* @__PURE__ */ o(c, { tooltip: n, variant: "solid", children: r || t });
     case "awaiting":
-      return /* @__PURE__ */ o(c, { size: n, variant: "outline", icon: m, children: t || r });
+      return /* @__PURE__ */ o(c, { tooltip: n, size: i, variant: "outline", icon: m, children: r || t });
     case "in-progress":
-      return /* @__PURE__ */ o(d, { size: n, variant: "outline", progress: 75, children: t || r });
+      return /* @__PURE__ */ o(d, { tooltip: n, size: i, variant: "outline", progress: 75, children: r || t });
     case "completed":
-      return /* @__PURE__ */ o(d, { size: n, variant: "outline", progress: 100, children: t || r });
+      return /* @__PURE__ */ o(d, { tooltip: n, size: i, variant: "outline", progress: 100, children: r || t });
     default:
       return null;
   }

package/dist/components/LayoutAction/LayoutAction.js

@@ -1,4 +1,4 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
@@ -9,30 +9,30 @@ import { ActionHeader as f } from "./ActionHeader.js";
 import { ActionFooter as u } from "./ActionFooter.js";
 import "../Snackbar/useSnackbar.js";
 import { PageMenu as x } from "../Page/PageMenu.js";
-const M = ({
-  color: r = "company",
-  theme: t = "base",
-  hidden: i,
+const H = ({
+  color: m = "company",
+  theme: i = "base",
+  hidden: r,
   title: p,
-  menu: m,
-  dismissable: a,
-  onDismiss: e,
-  children: n
-}) => /* @__PURE__ */ c(s, { children: [
+  menu: t,
+  dismissable: e,
+  onDismiss: a,
+  children: c
+}) => /* @__PURE__ */ n(s, { children: [
   /* @__PURE__ */ o(
     f,
     {
-      theme: t,
-      color: r,
-      hidden: i,
+      theme: i,
+      color: m,
+      hidden: r,
       title: p,
-      dismissable: a,
-      onDismiss: e
+      dismissable: e,
+      onDismiss: a
     }
   ),
-  n,
-  /* @__PURE__ */ o(u, { hidden: i, children: m && /* @__PURE__ */ o(x, { ...m, theme: t, color: r }) })
+  c,
+  /* @__PURE__ */ o(u, { hidden: r, children: t && /* @__PURE__ */ o(x, { ...t }) })
 ] });
 export {
-  M as LayoutAction
+  H as LayoutAction
 };

package/dist/components/Metadata/MetaItem.js

@@ -1,25 +1,30 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { jsx as t, jsxs as M } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { MetaItemBase as I } from "./MetaItemBase.js";
-import { MetaItemIcon as f } from "./MetaItemIcon.js";
-import { MetaItemLabel as M } from "./MetaItemLabel.js";
+import { Tooltip as i } from "../Tooltip/Tooltip.js";
+import { MetaItemBase as c } from "./MetaItemBase.js";
+import { MetaItemIcon as b } from "./MetaItemIcon.js";
+import { MetaItemLabel as h } from "./MetaItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-const d = ({
-  loading: t,
-  reverse: p,
-  size: m = "xs",
-  variant: r = "text",
-  icon: o,
-  children: i,
-  ...s
-}) => /* @__PURE__ */ x(I, { loading: t, reverse: p, variant: r, size: m, ...s, children: [
-  !t && o && /* @__PURE__ */ e(f, { icon: o }),
-  /* @__PURE__ */ e(M, { variant: r, size: m, children: i })
+const y = ({
+  loading: m,
+  reverse: e,
+  size: r = "xs",
+  variant: o = "text",
+  icon: p,
+  children: f,
+  tooltip: x,
+  ...I
+}) => x ? /* @__PURE__ */ t(i, { placement: "bottom", content: x, children: /* @__PURE__ */ M(c, { loading: m, reverse: e, variant: o, size: r, ...I, children: [
+  !m && p && /* @__PURE__ */ t(b, { icon: p }),
+  /* @__PURE__ */ t(h, { variant: o, size: r, children: f })
+] }) }) : /* @__PURE__ */ M(c, { loading: m, reverse: e, variant: o, size: r, ...I, children: [
+  !m && p && /* @__PURE__ */ t(b, { icon: p }),
+  /* @__PURE__ */ t(h, { variant: o, size: r, children: f })
 ] });
 export {
-  d as MetaItem
+  y as MetaItem
 };

package/dist/components/Metadata/MetaProgress.js

@@ -1,17 +1,21 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { MetaItemBase as i } from "./MetaItemBase.js";
-import { MetaItemIcon as s } from "./MetaItemIcon.js";
-import { MetaItemLabel as x } from "./MetaItemLabel.js";
+import { Tooltip as x } from "../Tooltip/Tooltip.js";
+import { MetaItemBase as f } from "./MetaItemBase.js";
+import { MetaItemIcon as i } from "./MetaItemIcon.js";
+import { MetaItemLabel as n } from "./MetaItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-const g = ({ size: t = "xs", variant: r = "text", progress: m = 0, children: e }) => /* @__PURE__ */ p(i, { variant: r, size: t, children: [
-  /* @__PURE__ */ o(s, { size: t, progress: m }),
-  /* @__PURE__ */ o(x, { variant: r, size: t, children: e })
+const L = ({ size: t = "xs", variant: m = "text", progress: r = 0, tooltip: e, children: p }) => e ? /* @__PURE__ */ o(x, { placement: "bottom", content: e, children: /* @__PURE__ */ c(f, { variant: m, size: t, children: [
+  /* @__PURE__ */ o(i, { size: t, progress: r }),
+  /* @__PURE__ */ o(n, { variant: m, size: t, children: p })
+] }) }) : /* @__PURE__ */ c(f, { variant: m, size: t, children: [
+  /* @__PURE__ */ o(i, { size: t, progress: r }),
+  /* @__PURE__ */ o(n, { variant: m, size: t, children: p })
 ] });
 export {
-  g as MetaProgress
+  L as MetaProgress
 };

package/dist/components/Metadata/MetaTimestamp.js

@@ -1,24 +1,29 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsx as m, jsxs as s } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { MetaItemBase as a } from "./MetaItemBase.js";
-import { MetaItemIcon as x } from "./MetaItemIcon.js";
-import { MetaItemLabel as f } from "./MetaItemLabel.js";
+import { Tooltip as b } from "../Tooltip/Tooltip.js";
+import { MetaItemBase as I } from "./MetaItemBase.js";
+import { MetaItemIcon as M } from "./MetaItemIcon.js";
+import { MetaItemLabel as c } from "./MetaItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-const L = ({
-  loading: m,
+const q = ({
+  loading: r,
   size: t = "xs",
-  variant: r = "text",
+  variant: o = "text",
   datetime: p,
-  icon: o,
-  children: i
-}) => /* @__PURE__ */ s(a, { loading: m, as: "time", variant: r, datetime: p, size: t, children: [
-  !m && o && /* @__PURE__ */ e(x, { size: t, icon: o }),
-  /* @__PURE__ */ e(f, { variant: r, size: t, children: i })
+  icon: e,
+  tooltip: f,
+  children: x
+}) => f ? /* @__PURE__ */ m(b, { placement: "bottom", content: f, children: /* @__PURE__ */ s(I, { loading: r, as: "time", variant: o, datetime: p, size: t, children: [
+  !r && e && /* @__PURE__ */ m(M, { size: t, icon: e }),
+  /* @__PURE__ */ m(c, { variant: o, size: t, children: x })
+] }) }) : /* @__PURE__ */ s(I, { loading: r, as: "time", variant: o, datetime: p, size: t, children: [
+  !r && e && /* @__PURE__ */ m(M, { size: t, icon: e }),
+  /* @__PURE__ */ m(c, { variant: o, size: t, children: x })
 ] });
 export {
-  L as MetaTimestamp
+  q as MetaTimestamp
 };

package/dist/components/Page/PageMenu.js

@@ -1,16 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
+import { Icon as u } from "../Icon/Icon.js";
 import "react";
-import "../Button/Button.js";
+import { Button as p } from "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as s } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/PageMenu.css';const n = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", e = {
-  menu: n,
-  list: l,
-  item: a
-}, x = ({ theme: i, color: r, items: o = [] }) => /* @__PURE__ */ t("nav", { "data-theme": i, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: o.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(s, { ...m, className: e.item }) }, m.id)) }) });
+import '../../assets/PageMenu.css';const c = "_buttonGroup_1ybcg_1", a = "_button_1ybcg_1", r = {
+  buttonGroup: c,
+  button: a
+}, v = ({ items: s }) => /* @__PURE__ */ t("nav", { "data-size": "sm", className: r.buttonGroup, children: s?.map((o) => {
+  const { icon: n, title: e, ...i } = o;
+  return /* @__PURE__ */ m(p, { variant: "ghost", className: r.button, size: "sm", ...i, children: [
+    n && /* @__PURE__ */ t(u, { svgElement: n }),
+    /* @__PURE__ */ t("span", { children: e })
+  ] }, o.id);
+}) });
 export {
-  x as PageMenu
+  v as PageMenu
 };

package/dist/components/Tooltip/Tooltip.js

@@ -95,7 +95,7 @@ import '../../assets/Tooltip.css';const H = U(function({ id: s, children: e, con
   }
 }, V = "_tooltip_10ebf_1", Z = {
   tooltip: V
-}, le = ({ size: r = "xs", placement: s, children: e, content: n, hidden: t }) => /* @__PURE__ */ w(H, { "aria-hidden": t, "data-size": r, content: n, placement: s, className: Z.tooltip, children: e });
+}, le = ({ size: r = "xs", placement: s, children: e, content: n, hidden: t }) => n ? /* @__PURE__ */ w(H, { "aria-hidden": t, "data-size": r, content: n, placement: s, className: Z.tooltip, children: e }) : e;
 export {
   le as Tooltip
 };

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

@@ -25,4 +25,4 @@ export interface DialogHeaderProps extends DialogMetadataProps {
     /** Due date label */
     dueAtLabel?: string;
 }
-export declare const DialogHeader: ({ loading, title, badge, status, extendedStatusLabel, draftsLabel, sentCount, receivedCount, updatedAt, updatedAtLabel, attachmentsCount, dueAt, dueAtLabel, activityLog, }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogHeader: ({ loading, title, badge, status, extendedStatusLabel, draftsLabel, sentCount, receivedCount, updatedAt, updatedAtLabel, attachmentsCount, dueAt, dueAtLabel, activityLog, tooltips, }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, title, badge, status, extendedStatusLabel, draftsLabel, sentCount, receivedCount, updatedAt, updatedAtLabel, attachmentsCount, dueAt, dueAtLabel, activityLog, }: import('./DialogHeader').DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, title, badge, status, extendedStatusLabel, draftsLabel, sentCount, receivedCount, updatedAt, updatedAtLabel, attachmentsCount, dueAt, dueAtLabel, activityLog, tooltips, }: import('./DialogHeader').DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -20,4 +20,6 @@ export declare const Default: Story;
 export declare const InProgress: Story;
 export declare const Completed: Story;
 export declare const Loading: Story;
+export declare const WithBadge: Story;
 export declare const WithExtendedStatus: Story;
+export declare const WithTooltips: Story;

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

@@ -53,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, extendedStatusLabel, 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;
+export declare const DialogListItem: ({ size, state, loading, controls, select, selected, status, extendedStatusLabel, sender, recipient, recipientLabel, grouped, updatedAt, updatedAtLabel, archived, archivedAt, archivedAtLabel, trashed, trashedAt, trashedAtLabel, badge, dueAt, dueAtLabel, unread, seenByLog, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, tooltips, title, description, summary, highlightWords, variant, id, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,7 @@ interface DialogMetadataButtonProps {
     label: string;
     onClick?: () => void;
 }
+export type DialogMetadataTooltips = Record<string, string>;
 export type DialogMetadataProps = {
     className?: string;
     /** Metadata is loading */
@@ -47,9 +48,11 @@ export type DialogMetadataProps = {
     transmissionsLabel?: string;
     /** Activity Log */
     activityLog?: DialogMetadataButtonProps;
+    /** Tooltips */
+    tooltips?: DialogMetadataTooltips;
 };
 /**
  * Metadata for a dialog in list view.
  */
-export declare const DialogMetadata: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, extendedStatusLabel, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogMetadata: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, extendedStatusLabel, tooltips, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, extendedStatusLabel, }: import('./DialogMetadata').DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, extendedStatusLabel, tooltips, }: import('./DialogMetadata').DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -19,3 +19,4 @@ export declare const NotApplicable: Story;
 export declare const Transmissions: Story;
 export declare const ActivityLog: Story;
 export declare const WithExtendedStatus: Story;
+export declare const WithTooltips: Story;

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

@@ -18,9 +18,10 @@ export interface DialogStatusProps {
     loading?: boolean;
     size?: MetaItemSize;
     value?: DialogStatusValue;
+    tooltip?: string;
     label?: string;
 }
 /**
  * Dialog status.
  */
-export declare const DialogStatus: ({ loading, size, value, label }: DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DialogStatus: ({ loading, size, value, label, tooltip }: DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, size, value, label }: import('./DialogStatus').DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
+    component: ({ loading, size, value, label, tooltip }: import('./DialogStatus').DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
     tags: string[];
     parameters: {};
     argTypes: {

package/dist/types/lib/components/Metadata/MetaItem.d.ts

@@ -13,9 +13,11 @@ export interface MetaItemProps {
     icon?: MetaItemIconProps['icon'];
     /** Label */
     children?: ReactNode;
+    /** Tooltip */
+    tooltip?: string;
     /** classname */
     className?: string;
     /** OnClick handler */
     onClick?: () => void;
 }
-export declare const MetaItem: ({ loading, reverse, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaItem: ({ loading, reverse, size, variant, icon, children, tooltip, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Metadata/MetaItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, reverse, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, reverse, size, variant, icon, children, tooltip, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/types/lib/components/Metadata/MetaProgress.d.ts

@@ -7,7 +7,9 @@ export interface MetaProgressProps {
     variant?: MetaItemVariant;
     /** Progress of 100 */
     progress?: number;
+    /** Tooltip */
+    tooltip?: string;
     /** Label */
     children?: ReactNode;
 }
-export declare const MetaProgress: ({ size, variant, progress, children }: MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaProgress: ({ size, variant, progress, tooltip, children }: MetaProgressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Metadata/MetaProgress.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ size, variant, progress, children }: import('./MetaProgress').MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ size, variant, progress, tooltip, children }: import('./MetaProgress').MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/types/lib/components/Metadata/MetaTimestamp.d.ts

@@ -10,7 +10,9 @@ export interface MetaTimestampProps {
     datetime?: string;
     /** Icon name */
     icon?: MetaItemIconProps['icon'];
+    /** Tooltip */
+    tooltip?: string;
     /** Label */
     children?: ReactNode;
 }
-export declare const MetaTimestamp: ({ loading, size, variant, datetime, icon, children, }: MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaTimestamp: ({ loading, size, variant, datetime, icon, tooltip, children, }: MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Metadata/MetaTimestamp.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, size, variant, datetime, icon, children, }: import('./MetaTimestamp').MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, size, variant, datetime, icon, tooltip, children, }: import('./MetaTimestamp').MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Page/PageMenu.d.ts

@@ -1,9 +1,13 @@
-import { MenuItemColor, MenuItemProps } from '..';
-export type PageMenuTheme = 'default' | 'subtle' | 'base';
+import { ButtonProps, SvgElement } from '..';
+export interface PageMenuButtonProps extends ButtonProps {
+    id: string;
+    title: string;
+    icon?: SvgElement;
+}
 export interface PageMenuProps {
-    id?: string;
-    theme?: PageMenuTheme;
-    color?: MenuItemColor;
-    items?: MenuItemProps[];
+    items?: PageMenuButtonProps[];
 }
-export declare const PageMenu: ({ theme, color, items }: PageMenuProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Page menu
+ */
+export declare const PageMenu: ({ items }: PageMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/PageMenu.stories.d.ts

@@ -4,4 +4,3 @@ declare const meta: Meta<typeof PageMenu>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const BulkActionbar: Story;

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

@@ -1,6 +1,6 @@
 import { BadgeProps } from '../Badge';
 import { ListItemProps } from '../List';
-export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick' | 'loading' | 'shadow' | 'border' | 'interactive'> {
+export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick' | 'loading' | 'shadow' | 'border' | 'interactive' | 'variant'> {
     /** Unique identifier for the resource item */
     id: string;
     /** Name of the owner of the resource */

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

@@ -47,6 +47,12 @@ declare const meta: {
                 type: "select";
             };
         };
+        variant: {
+            options: string[];
+            control: {
+                type: "inline-radio";
+            };
+        };
     };
 };
 export default meta;

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

@@ -5,4 +5,4 @@ export type TooltipProps = {
     hidden?: boolean;
     size?: Size;
 } & Omit<DsTooltipProps, 'content | children'>;
-export declare const Tooltip: ({ size, placement, children, content, hidden }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ size, placement, children, content, hidden }: TooltipProps) => string | import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ size, placement, children, content, hidden }: import('./Tooltip').TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ size, placement, children, content, hidden }: import('./Tooltip').TooltipProps) => string | import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

package/package.json

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