@altinn/altinn-components 0.56.18 → 0.56.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/assets/Badge.css +1 -1
  2. package/dist/components/Badge/Badge.js +7 -7
  3. package/dist/components/Dialog/DialogHeader.js +38 -37
  4. package/dist/components/Dialog/DialogListItem.js +29 -27
  5. package/dist/components/Dialog/DialogMetadata.js +67 -55
  6. package/dist/components/Dialog/DialogStatus.js +21 -21
  7. package/dist/components/Metadata/MetaItem.js +21 -16
  8. package/dist/components/Metadata/MetaProgress.js +12 -8
  9. package/dist/components/Metadata/MetaTimestamp.js +18 -13
  10. package/dist/components/Tooltip/Tooltip.js +1 -1
  11. package/dist/types/lib/components/Dialog/DialogHeader.d.ts +1 -1
  12. package/dist/types/lib/components/Dialog/DialogHeader.stories.d.ts +3 -1
  13. package/dist/types/lib/components/Dialog/DialogListItem.d.ts +1 -1
  14. package/dist/types/lib/components/Dialog/DialogMetadata.d.ts +4 -1
  15. package/dist/types/lib/components/Dialog/DialogMetadata.stories.d.ts +2 -1
  16. package/dist/types/lib/components/Dialog/DialogStatus.d.ts +2 -1
  17. package/dist/types/lib/components/Dialog/DialogStatus.stories.d.ts +1 -1
  18. package/dist/types/lib/components/Metadata/MetaItem.d.ts +3 -1
  19. package/dist/types/lib/components/Metadata/MetaItem.stories.d.ts +1 -1
  20. package/dist/types/lib/components/Metadata/MetaProgress.d.ts +3 -1
  21. package/dist/types/lib/components/Metadata/MetaProgress.stories.d.ts +1 -1
  22. package/dist/types/lib/components/Metadata/MetaTimestamp.d.ts +3 -1
  23. package/dist/types/lib/components/Metadata/MetaTimestamp.stories.d.ts +1 -1
  24. package/dist/types/lib/components/ResourceListItem/ResourceListItem.d.ts +1 -1
  25. package/dist/types/lib/components/ResourceListItem/ResourceListItem.stories.d.ts +6 -0
  26. package/dist/types/lib/components/Tooltip/Tooltip.d.ts +1 -1
  27. package/dist/types/lib/components/Tooltip/Tooltip.stories.d.ts +1 -1
  28. package/package.json +1 -1
@@ -1 +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}
1
+ ._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}
@@ -1,20 +1,20 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
2
  import { c as o } from "../../index-p1eeF8LQ.js";
3
- import '../../assets/Badge.css';const b = "_badge_yrqxu_1", m = "_label_yrqxu_28", s = {
3
+ import '../../assets/Badge.css';const b = "_badge_1i58d_1", i = "_label_1i58d_30", s = {
4
4
  badge: b,
5
- label: m
6
- }, _ = ({ label: t, color: l, variant: r = "subtle", theme: d, size: a = "sm", className: c, children: n }) => /* @__PURE__ */ e(
5
+ label: i
6
+ }, g = ({ label: t, color: d, variant: l = "subtle", theme: r, size: a = "sm", className: c, children: n }) => /* @__PURE__ */ e(
7
7
  "span",
8
8
  {
9
9
  className: o(s.badge, c),
10
- "data-color": l,
11
- "data-variant": r,
12
- "data-theme": d,
10
+ "data-color": d,
11
+ "data-variant": l,
12
+ "data-theme": r,
13
13
  "data-size": a,
14
14
  ...a === "xs" && { "aria-hidden": !0 },
15
15
  children: /* @__PURE__ */ e("span", { className: s.label, children: t || n })
16
16
  }
17
17
  );
18
18
  export {
19
- _ as Badge
19
+ g as Badge
20
20
  };
@@ -1,54 +1,55 @@
1
- import { jsxs as t, jsx as r } from "react/jsx-runtime";
2
- import { Badge as x } from "../Badge/Badge.js";
1
+ import { jsxs as i, jsx as t } from "react/jsx-runtime";
2
+ import { Badge as j } from "../Badge/Badge.js";
3
3
  import "../../index-p1eeF8LQ.js";
4
4
  import "react";
5
- import { Skeleton as j } from "../Skeleton/Skeleton.js";
6
5
  import { Heading as D } from "../Typography/Heading.js";
7
6
  import "../Button/Button.js";
8
7
  import "react-dom";
9
8
  import "../RootProvider/RootProvider.js";
10
9
  import { DialogMetadata as H } from "./DialogMetadata.js";
11
10
  import "../Snackbar/useSnackbar.js";
12
- import { Flex as S } from "../Page/Flex.js";
13
- import { Section as k } from "../Page/Section.js";
14
- const I = ({
15
- loading: i,
16
- title: e,
17
- badge: o,
18
- status: m,
19
- extendedStatusLabel: p,
20
- draftsLabel: n,
21
- sentCount: a,
22
- receivedCount: l,
11
+ import { Section as u } from "../Page/Section.js";
12
+ const E = ({
13
+ loading: o,
14
+ title: m,
15
+ badge: r,
16
+ status: p,
17
+ extendedStatusLabel: e,
18
+ draftsLabel: a,
19
+ sentCount: s,
20
+ receivedCount: n,
23
21
  updatedAt: c,
24
- updatedAtLabel: s,
25
- attachmentsCount: d,
26
- dueAt: f,
27
- dueAtLabel: h,
28
- activityLog: g
29
- }) => /* @__PURE__ */ t(k, { as: "header", spacing: 3, align: "start", children: [
30
- /* @__PURE__ */ r(D, { size: "xl", children: /* @__PURE__ */ t(S, { align: "center", children: [
31
- /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(j, { loading: i, children: e }) }),
32
- o && /* @__PURE__ */ r(x, { ...o })
33
- ] }) }),
34
- /* @__PURE__ */ r(
22
+ updatedAtLabel: f,
23
+ attachmentsCount: l,
24
+ dueAt: d,
25
+ dueAtLabel: x,
26
+ activityLog: g,
27
+ tooltips: h = {}
28
+ }) => /* @__PURE__ */ i(u, { as: "header", spacing: 3, align: "start", children: [
29
+ /* @__PURE__ */ i(D, { loading: o, size: "xl", children: [
30
+ m,
31
+ r && " ",
32
+ r && /* @__PURE__ */ t(j, { ...r })
33
+ ] }),
34
+ /* @__PURE__ */ t(
35
35
  H,
36
36
  {
37
- loading: i,
38
- status: m,
39
- extendedStatusLabel: p,
40
- draftsLabel: n,
41
- sentCount: a,
42
- receivedCount: l,
37
+ loading: o,
38
+ status: p,
39
+ extendedStatusLabel: e,
40
+ draftsLabel: a,
41
+ sentCount: s,
42
+ receivedCount: n,
43
43
  updatedAt: c,
44
- updatedAtLabel: s,
45
- dueAt: f,
46
- dueAtLabel: h,
47
- attachmentsCount: d,
48
- activityLog: g
44
+ updatedAtLabel: f,
45
+ dueAt: d,
46
+ dueAtLabel: x,
47
+ attachmentsCount: l,
48
+ activityLog: g,
49
+ tooltips: h
49
50
  }
50
51
  )
51
52
  ] });
52
53
  export {
53
- I as DialogHeader
54
+ E as DialogHeader
54
55
  };
@@ -1,32 +1,32 @@
1
1
  import { jsx as t, jsxs as i } from "react/jsx-runtime";
2
- import { Badge as K } from "../Badge/Badge.js";
2
+ import { Badge as O } from "../Badge/Badge.js";
3
3
  import "../../index-p1eeF8LQ.js";
4
4
  import "react";
5
- import { AvatarGroup as O } from "../Avatar/AvatarGroup.js";
5
+ import { AvatarGroup as P } from "../Avatar/AvatarGroup.js";
6
6
  import { Heading as b } from "../Typography/Heading.js";
7
7
  import "../Button/Button.js";
8
8
  import "react-dom";
9
9
  import "../RootProvider/RootProvider.js";
10
- import { DialogMetadata as P } from "./DialogMetadata.js";
11
- import { DialogByline as Q } from "./DialogByline.js";
10
+ import { DialogMetadata as Q } from "./DialogMetadata.js";
11
+ import { DialogByline as S } from "./DialogByline.js";
12
12
  import { ListItem as x } from "../List/ListItem.js";
13
13
  import "../Snackbar/useSnackbar.js";
14
- 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 = {
15
- border: S,
16
- title: T,
17
- controls: U,
18
- header: X,
19
- summary: Y,
20
- footer: Z,
21
- seenBy: $,
22
- dot: z,
23
- heading: W
24
- }, ft = ({
14
+ 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 = {
15
+ border: T,
16
+ title: U,
17
+ controls: X,
18
+ header: Y,
19
+ summary: Z,
20
+ footer: $,
21
+ seenBy: z,
22
+ dot: W,
23
+ heading: tt
24
+ }, wt = ({
25
25
  size: o = "xl",
26
- state: tt = "normal",
26
+ state: at = "normal",
27
27
  loading: s,
28
28
  controls: N,
29
- select: at,
29
+ select: st,
30
30
  selected: r,
31
31
  status: n,
32
32
  extendedStatusLabel: v,
@@ -52,15 +52,16 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
52
52
  receivedCount: q,
53
53
  attachmentsCount: C,
54
54
  attachmentsLabel: E,
55
+ tooltips: F = {},
55
56
  title: e,
56
- description: F,
57
+ description: J,
57
58
  summary: m,
58
59
  highlightWords: l,
59
- variant: J = "default",
60
+ variant: K = "default",
60
61
  id: h,
61
62
  ...f
62
63
  }) => {
63
- const w = r ? "tinted" : J;
64
+ const w = r ? "tinted" : K;
64
65
  return o === "xs" || o === "sm" ? /* @__PURE__ */ t(
65
66
  x,
66
67
  {
@@ -73,7 +74,7 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
73
74
  disabled: s,
74
75
  icon: c,
75
76
  title: e,
76
- description: m || F,
77
+ description: m || J,
77
78
  highlightWords: l
78
79
  }
79
80
  ) : /* @__PURE__ */ t(
@@ -111,12 +112,12 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
111
112
  className: a.title,
112
113
  children: [
113
114
  e,
114
- d && /* @__PURE__ */ t(K, { className: a.dot, variant: "tinted", size: "xs", ...d })
115
+ d && /* @__PURE__ */ t(O, { className: a.dot, variant: "tinted", size: "xs", ...d })
115
116
  ]
116
117
  }
117
118
  ) }),
118
119
  /* @__PURE__ */ t(
119
- Q,
120
+ S,
120
121
  {
121
122
  size: "xs",
122
123
  loading: s,
@@ -140,7 +141,7 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
140
141
  )
141
142
  ] }),
142
143
  /* @__PURE__ */ t(
143
- P,
144
+ Q,
144
145
  {
145
146
  className: a.footer,
146
147
  loading: s,
@@ -158,10 +159,11 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
158
159
  dueAt: M,
159
160
  dueAtLabel: V,
160
161
  attachmentsCount: C,
161
- attachmentsLabel: E
162
+ attachmentsLabel: E,
163
+ tooltips: F
162
164
  }
163
165
  ),
164
- p && /* @__PURE__ */ t(O, { className: a.seenBy, items: p.items })
166
+ p && /* @__PURE__ */ t(P, { className: a.seenBy, items: p.items })
165
167
  ]
166
168
  }
167
169
  )
@@ -169,5 +171,5 @@ import '../../assets/DialogListItem.css';const S = "_border_lwts6_1", T = "_titl
169
171
  );
170
172
  };
171
173
  export {
172
- ft as DialogListItem
174
+ wt as DialogListItem
173
175
  };
@@ -1,19 +1,19 @@
1
1
  "use client";
2
- import { jsxs as I, jsx as o } from "react/jsx-runtime";
2
+ import { jsxs as S, jsx as a } from "react/jsx-runtime";
3
3
  import "../../index-p1eeF8LQ.js";
4
- import a, { forwardRef as d } from "react";
4
+ import c, { forwardRef as s } from "react";
5
5
  import "../Button/Button.js";
6
6
  import "react-dom";
7
7
  import "../RootProvider/RootProvider.js";
8
- import { MetaBase as _ } from "../Metadata/MetaBase.js";
9
- import { MetaItem as c } from "../Metadata/MetaItem.js";
8
+ import { MetaBase as E } from "../Metadata/MetaBase.js";
9
+ import { MetaItem as d } from "../Metadata/MetaItem.js";
10
10
  import { MetaTimestamp as m } from "../Metadata/MetaTimestamp.js";
11
- import { DialogStatus as E } from "./DialogStatus.js";
11
+ import { DialogStatus as M } from "./DialogStatus.js";
12
12
  import "../Snackbar/useSnackbar.js";
13
- import { S as M } from "../../Checkmark-Byz_C9x4.js";
14
- import { u as s } from "../../useId-BVFxCjkq.js";
15
- import { S as P, a as k, c as C, b as R } from "../../Trash-DBcymOP9.js";
16
- var q = function(t, i) {
13
+ import { S as P } from "../../Checkmark-Byz_C9x4.js";
14
+ import { u as p } from "../../useId-BVFxCjkq.js";
15
+ import { S as k, a as C, c as R, b as q } from "../../Trash-DBcymOP9.js";
16
+ var B = function(t, i) {
17
17
  var l = {};
18
18
  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && i.indexOf(e) < 0 && (l[e] = t[e]);
19
19
  if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -21,17 +21,17 @@ var q = function(t, i) {
21
21
  i.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
22
22
  return l;
23
23
  };
24
- const B = d((t, i) => {
25
- var { title: l, titleId: e } = t, r = q(t, ["title", "titleId"]);
26
- let n = s();
27
- return n = l ? e || "title-" + n : void 0, a.createElement(
24
+ const D = s((t, i) => {
25
+ var { title: l, titleId: e } = t, r = B(t, ["title", "titleId"]);
26
+ let n = p();
27
+ return n = l ? e || "title-" + n : void 0, c.createElement(
28
28
  "svg",
29
29
  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),
30
- l ? a.createElement("title", { id: n }, l) : null,
31
- 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" })
30
+ l ? c.createElement("title", { id: n }, l) : null,
31
+ 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" })
32
32
  );
33
33
  });
34
- var D = function(t, i) {
34
+ var H = function(t, i) {
35
35
  var l = {};
36
36
  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && i.indexOf(e) < 0 && (l[e] = t[e]);
37
37
  if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -39,14 +39,14 @@ var D = function(t, i) {
39
39
  i.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
40
40
  return l;
41
41
  };
42
- const H = d((t, i) => {
43
- var { title: l, titleId: e } = t, r = D(t, ["title", "titleId"]);
44
- let n = s();
45
- return n = l ? e || "title-" + n : void 0, a.createElement(
42
+ const A = s((t, i) => {
43
+ var { title: l, titleId: e } = t, r = H(t, ["title", "titleId"]);
44
+ let n = p();
45
+ return n = l ? e || "title-" + n : void 0, c.createElement(
46
46
  "svg",
47
47
  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),
48
- l ? a.createElement("title", { id: n }, l) : null,
49
- 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" })
48
+ l ? c.createElement("title", { id: n }, l) : null,
49
+ 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" })
50
50
  );
51
51
  });
52
52
  var T = function(t, i) {
@@ -57,56 +57,68 @@ var T = function(t, i) {
57
57
  i.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
58
58
  return l;
59
59
  };
60
- const V = d((t, i) => {
60
+ const V = s((t, i) => {
61
61
  var { title: l, titleId: e } = t, r = T(t, ["title", "titleId"]);
62
- let n = s();
63
- return n = l ? e || "title-" + n : void 0, a.createElement(
62
+ let n = p();
63
+ return n = l ? e || "title-" + n : void 0, c.createElement(
64
64
  "svg",
65
65
  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),
66
- l ? a.createElement("title", { id: n }, l) : null,
67
- 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" })
66
+ l ? c.createElement("title", { id: n }, l) : null,
67
+ 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" })
68
68
  );
69
- }), ee = ({
69
+ }), te = ({
70
70
  className: t,
71
71
  loading: i,
72
72
  status: l,
73
73
  sender: e,
74
74
  updatedAt: r,
75
75
  updatedAtLabel: n,
76
- dueAt: p,
77
- dueAtLabel: v,
78
- archivedAt: u,
79
- archivedAtLabel: h,
80
- trashedAt: b,
76
+ dueAt: v,
77
+ dueAtLabel: u,
78
+ archivedAt: h,
79
+ archivedAtLabel: b,
80
+ trashedAt: g,
81
81
  trashedAtLabel: w,
82
82
  draftsLabel: O,
83
- sentCount: g = 0,
84
- receivedCount: y = 0,
85
- attachmentsCount: x = 0,
86
- attachmentsLabel: S,
87
- transmissionsLabel: z,
83
+ sentCount: y = 0,
84
+ receivedCount: x = 0,
85
+ attachmentsCount: z = 0,
86
+ attachmentsLabel: _,
87
+ transmissionsLabel: j,
88
88
  activityLog: f,
89
- extendedStatusLabel: j
90
- }) => /* @__PURE__ */ I(_, { className: t, size: "xs", children: [
91
- l && /* @__PURE__ */ o(E, { loading: i, size: "xs", ...l }),
92
- j && /* @__PURE__ */ o(c, { size: "xs", variant: "outline", children: j }),
93
- O && /* @__PURE__ */ o(c, { size: "xs", variant: "dotted", children: O }),
94
- g > 0 && /* @__PURE__ */ o(c, { size: "xs", variant: "outline", icon: M, children: g }),
95
- y > 0 && /* @__PURE__ */ o(c, { size: "xs", variant: "outline", icon: B, children: y }),
96
- r && /* @__PURE__ */ I(m, { loading: i, datetime: r, size: "xs", children: [
97
- /* @__PURE__ */ o("strong", { children: e && e.name + ", " }),
89
+ extendedStatusLabel: I,
90
+ tooltips: o = {}
91
+ }) => /* @__PURE__ */ S(E, { className: t, size: "xs", children: [
92
+ l && /* @__PURE__ */ a(M, { tooltip: o.status, loading: i, size: "xs", ...l }),
93
+ I && /* @__PURE__ */ a(d, { tooltip: o.extendedStatus, size: "xs", variant: "outline", children: I }),
94
+ O && /* @__PURE__ */ a(d, { tooltip: o.drafts, size: "xs", variant: "dotted", children: O }),
95
+ y > 0 && /* @__PURE__ */ a(d, { tooltip: o.sent, size: "xs", variant: "outline", icon: P, children: y }),
96
+ x > 0 && /* @__PURE__ */ a(d, { tooltip: o.received, size: "xs", variant: "outline", icon: D, children: x }),
97
+ r && /* @__PURE__ */ S(m, { tooltip: o.updatedAt, loading: i, datetime: r, size: "xs", children: [
98
+ /* @__PURE__ */ a("strong", { children: e && e.name + ", " }),
98
99
  n
99
100
  ] }),
100
- p && v && /* @__PURE__ */ o(m, { loading: i, datetime: p, size: "xs", icon: P, children: v }),
101
- x > 0 && /* @__PURE__ */ o(c, { loading: i, size: "xs", icon: k, children: S || x }),
102
- z && /* @__PURE__ */ o(c, { loading: i, size: "xs", icon: V, children: z }),
103
- 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 }),
104
- f && /* @__PURE__ */ o(
105
- c,
101
+ v && u && /* @__PURE__ */ a(m, { tooltip: o.dueAt, loading: i, datetime: v, size: "xs", icon: k, children: u }),
102
+ z > 0 && /* @__PURE__ */ a(d, { tooltip: o.attachments, loading: i, size: "xs", icon: C, children: _ || z }),
103
+ j && /* @__PURE__ */ a(d, { tooltip: o.transmissions, loading: i, size: "xs", icon: V, children: j }),
104
+ g && w && /* @__PURE__ */ a(m, { tooltip: o.trashedAt, loading: i, datetime: g, size: "xs", icon: R, children: w }) || h && b && /* @__PURE__ */ a(
105
+ m,
106
106
  {
107
+ tooltip: o.archivedAt,
107
108
  loading: i,
109
+ datetime: h,
108
110
  size: "xs",
109
- icon: H,
111
+ icon: q,
112
+ children: b
113
+ }
114
+ ),
115
+ f && /* @__PURE__ */ a(
116
+ d,
117
+ {
118
+ tooltip: o.activityLog,
119
+ loading: i,
120
+ size: "xs",
121
+ icon: A,
110
122
  as: f?.onClick ? "button" : "span",
111
123
  onClick: f?.onClick,
112
124
  children: f?.label || "Activity log"
@@ -114,5 +126,5 @@ const V = d((t, i) => {
114
126
  )
115
127
  ] });
116
128
  export {
117
- ee as DialogMetadata
129
+ te as DialogMetadata
118
130
  };
@@ -1,47 +1,47 @@
1
1
  "use client";
2
2
  import { jsx as o } from "react/jsx-runtime";
3
3
  import "../../index-p1eeF8LQ.js";
4
- import a, { forwardRef as p } from "react";
4
+ import a, { forwardRef as f } from "react";
5
5
  import "../Button/Button.js";
6
6
  import "react-dom";
7
7
  import "../RootProvider/RootProvider.js";
8
8
  import { MetaItem as c } from "../Metadata/MetaItem.js";
9
9
  import { MetaProgress as d } from "../Metadata/MetaProgress.js";
10
10
  import "../Snackbar/useSnackbar.js";
11
- import { u as f } from "../../useId-BVFxCjkq.js";
12
- var s = function(e, n) {
13
- var r = {};
14
- for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
11
+ import { u as p } from "../../useId-BVFxCjkq.js";
12
+ var s = function(e, i) {
13
+ var t = {};
14
+ for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && i.indexOf(r) < 0 && (t[r] = e[r]);
15
15
  if (e != null && typeof Object.getOwnPropertySymbols == "function")
16
- for (var i = 0, t = Object.getOwnPropertySymbols(e); i < t.length; i++)
17
- n.indexOf(t[i]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[i]) && (r[t[i]] = e[t[i]]);
18
- return r;
16
+ for (var n = 0, r = Object.getOwnPropertySymbols(e); n < r.length; n++)
17
+ i.indexOf(r[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[n]) && (t[r[n]] = e[r[n]]);
18
+ return t;
19
19
  };
20
- const m = p((e, n) => {
21
- var { title: r, titleId: t } = e, i = s(e, ["title", "titleId"]);
22
- let l = f();
23
- return l = r ? t || "title-" + l : void 0, a.createElement(
20
+ const m = f((e, i) => {
21
+ var { title: t, titleId: r } = e, n = s(e, ["title", "titleId"]);
22
+ let l = p();
23
+ return l = t ? r || "title-" + l : void 0, a.createElement(
24
24
  "svg",
25
- 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),
26
- r ? a.createElement("title", { id: l }, r) : null,
25
+ 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),
26
+ t ? a.createElement("title", { id: l }, t) : null,
27
27
  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" })
28
28
  );
29
29
  });
30
30
  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 || {});
31
- const P = ({ loading: e, size: n = "xs", value: r = "not-applicable", label: t }) => {
31
+ const P = ({ loading: e, size: i = "xs", value: t = "not-applicable", label: r, tooltip: n }) => {
32
32
  if (e)
33
33
  return null;
34
- switch (r) {
34
+ switch (t) {
35
35
  case "draft":
36
- return /* @__PURE__ */ o(c, { size: n, variant: "dotted", children: t || r });
36
+ return /* @__PURE__ */ o(c, { tooltip: n, size: i, variant: "dotted", children: r || t });
37
37
  case "requires-attention":
38
- return /* @__PURE__ */ o(c, { variant: "solid", children: t || r });
38
+ return /* @__PURE__ */ o(c, { tooltip: n, variant: "solid", children: r || t });
39
39
  case "awaiting":
40
- return /* @__PURE__ */ o(c, { size: n, variant: "outline", icon: m, children: t || r });
40
+ return /* @__PURE__ */ o(c, { tooltip: n, size: i, variant: "outline", icon: m, children: r || t });
41
41
  case "in-progress":
42
- return /* @__PURE__ */ o(d, { size: n, variant: "outline", progress: 75, children: t || r });
42
+ return /* @__PURE__ */ o(d, { tooltip: n, size: i, variant: "outline", progress: 75, children: r || t });
43
43
  case "completed":
44
- return /* @__PURE__ */ o(d, { size: n, variant: "outline", progress: 100, children: t || r });
44
+ return /* @__PURE__ */ o(d, { tooltip: n, size: i, variant: "outline", progress: 100, children: r || t });
45
45
  default:
46
46
  return null;
47
47
  }
@@ -1,25 +1,30 @@
1
- import { jsxs as x, jsx as e } from "react/jsx-runtime";
1
+ import { jsx as t, jsxs as M } from "react/jsx-runtime";
2
2
  import "../../index-p1eeF8LQ.js";
3
3
  import "react";
4
4
  import "../Button/Button.js";
5
5
  import "react-dom";
6
6
  import "../RootProvider/RootProvider.js";
7
- import { MetaItemBase as I } from "./MetaItemBase.js";
8
- import { MetaItemIcon as f } from "./MetaItemIcon.js";
9
- import { MetaItemLabel as M } from "./MetaItemLabel.js";
7
+ import { Tooltip as i } from "../Tooltip/Tooltip.js";
8
+ import { MetaItemBase as c } from "./MetaItemBase.js";
9
+ import { MetaItemIcon as b } from "./MetaItemIcon.js";
10
+ import { MetaItemLabel as h } from "./MetaItemLabel.js";
10
11
  import "../Snackbar/useSnackbar.js";
11
- const d = ({
12
- loading: t,
13
- reverse: p,
14
- size: m = "xs",
15
- variant: r = "text",
16
- icon: o,
17
- children: i,
18
- ...s
19
- }) => /* @__PURE__ */ x(I, { loading: t, reverse: p, variant: r, size: m, ...s, children: [
20
- !t && o && /* @__PURE__ */ e(f, { icon: o }),
21
- /* @__PURE__ */ e(M, { variant: r, size: m, children: i })
12
+ const y = ({
13
+ loading: m,
14
+ reverse: e,
15
+ size: r = "xs",
16
+ variant: o = "text",
17
+ icon: p,
18
+ children: f,
19
+ tooltip: x,
20
+ ...I
21
+ }) => x ? /* @__PURE__ */ t(i, { placement: "bottom", content: x, children: /* @__PURE__ */ M(c, { loading: m, reverse: e, variant: o, size: r, ...I, children: [
22
+ !m && p && /* @__PURE__ */ t(b, { icon: p }),
23
+ /* @__PURE__ */ t(h, { variant: o, size: r, children: f })
24
+ ] }) }) : /* @__PURE__ */ M(c, { loading: m, reverse: e, variant: o, size: r, ...I, children: [
25
+ !m && p && /* @__PURE__ */ t(b, { icon: p }),
26
+ /* @__PURE__ */ t(h, { variant: o, size: r, children: f })
22
27
  ] });
23
28
  export {
24
- d as MetaItem
29
+ y as MetaItem
25
30
  };
@@ -1,17 +1,21 @@
1
- import { jsxs as p, jsx as o } from "react/jsx-runtime";
1
+ import { jsx as o, jsxs as c } from "react/jsx-runtime";
2
2
  import "../../index-p1eeF8LQ.js";
3
3
  import "react";
4
4
  import "../Button/Button.js";
5
5
  import "react-dom";
6
6
  import "../RootProvider/RootProvider.js";
7
- import { MetaItemBase as i } from "./MetaItemBase.js";
8
- import { MetaItemIcon as s } from "./MetaItemIcon.js";
9
- import { MetaItemLabel as x } from "./MetaItemLabel.js";
7
+ import { Tooltip as x } from "../Tooltip/Tooltip.js";
8
+ import { MetaItemBase as f } from "./MetaItemBase.js";
9
+ import { MetaItemIcon as i } from "./MetaItemIcon.js";
10
+ import { MetaItemLabel as n } from "./MetaItemLabel.js";
10
11
  import "../Snackbar/useSnackbar.js";
11
- const g = ({ size: t = "xs", variant: r = "text", progress: m = 0, children: e }) => /* @__PURE__ */ p(i, { variant: r, size: t, children: [
12
- /* @__PURE__ */ o(s, { size: t, progress: m }),
13
- /* @__PURE__ */ o(x, { variant: r, size: t, children: e })
12
+ 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: [
13
+ /* @__PURE__ */ o(i, { size: t, progress: r }),
14
+ /* @__PURE__ */ o(n, { variant: m, size: t, children: p })
15
+ ] }) }) : /* @__PURE__ */ c(f, { variant: m, size: t, children: [
16
+ /* @__PURE__ */ o(i, { size: t, progress: r }),
17
+ /* @__PURE__ */ o(n, { variant: m, size: t, children: p })
14
18
  ] });
15
19
  export {
16
- g as MetaProgress
20
+ L as MetaProgress
17
21
  };
@@ -1,24 +1,29 @@
1
- import { jsxs as s, jsx as e } from "react/jsx-runtime";
1
+ import { jsx as m, jsxs as s } from "react/jsx-runtime";
2
2
  import "../../index-p1eeF8LQ.js";
3
3
  import "react";
4
4
  import "../Button/Button.js";
5
5
  import "react-dom";
6
6
  import "../RootProvider/RootProvider.js";
7
- import { MetaItemBase as a } from "./MetaItemBase.js";
8
- import { MetaItemIcon as x } from "./MetaItemIcon.js";
9
- import { MetaItemLabel as f } from "./MetaItemLabel.js";
7
+ import { Tooltip as b } from "../Tooltip/Tooltip.js";
8
+ import { MetaItemBase as I } from "./MetaItemBase.js";
9
+ import { MetaItemIcon as M } from "./MetaItemIcon.js";
10
+ import { MetaItemLabel as c } from "./MetaItemLabel.js";
10
11
  import "../Snackbar/useSnackbar.js";
11
- const L = ({
12
- loading: m,
12
+ const q = ({
13
+ loading: r,
13
14
  size: t = "xs",
14
- variant: r = "text",
15
+ variant: o = "text",
15
16
  datetime: p,
16
- icon: o,
17
- children: i
18
- }) => /* @__PURE__ */ s(a, { loading: m, as: "time", variant: r, datetime: p, size: t, children: [
19
- !m && o && /* @__PURE__ */ e(x, { size: t, icon: o }),
20
- /* @__PURE__ */ e(f, { variant: r, size: t, children: i })
17
+ icon: e,
18
+ tooltip: f,
19
+ children: x
20
+ }) => f ? /* @__PURE__ */ m(b, { placement: "bottom", content: f, children: /* @__PURE__ */ s(I, { loading: r, as: "time", variant: o, datetime: p, size: t, children: [
21
+ !r && e && /* @__PURE__ */ m(M, { size: t, icon: e }),
22
+ /* @__PURE__ */ m(c, { variant: o, size: t, children: x })
23
+ ] }) }) : /* @__PURE__ */ s(I, { loading: r, as: "time", variant: o, datetime: p, size: t, children: [
24
+ !r && e && /* @__PURE__ */ m(M, { size: t, icon: e }),
25
+ /* @__PURE__ */ m(c, { variant: o, size: t, children: x })
21
26
  ] });
22
27
  export {
23
- L as MetaTimestamp
28
+ q as MetaTimestamp
24
29
  };
@@ -95,7 +95,7 @@ import '../../assets/Tooltip.css';const H = U(function({ id: s, children: e, con
95
95
  }
96
96
  }, V = "_tooltip_10ebf_1", Z = {
97
97
  tooltip: V
98
- }, 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 });
98
+ }, 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;
99
99
  export {
100
100
  le as Tooltip
101
101
  };
@@ -25,4 +25,4 @@ export interface DialogHeaderProps extends DialogMetadataProps {
25
25
  /** Due date label */
26
26
  dueAtLabel?: string;
27
27
  }
28
- 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;
28
+ 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;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ loading, title, badge, status, extendedStatusLabel, draftsLabel, sentCount, receivedCount, updatedAt, updatedAtLabel, attachmentsCount, dueAt, dueAtLabel, activityLog, }: import('./DialogHeader').DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
4
+ 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;
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  args: {
@@ -20,4 +20,6 @@ export declare const Default: Story;
20
20
  export declare const InProgress: Story;
21
21
  export declare const Completed: Story;
22
22
  export declare const Loading: Story;
23
+ export declare const WithBadge: Story;
23
24
  export declare const WithExtendedStatus: Story;
25
+ export declare const WithTooltips: Story;
@@ -53,4 +53,4 @@ export interface DialogListItemProps extends ListItemProps, DialogMetadataProps
53
53
  * summary, sender, and receiver.
54
54
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
55
55
  */
56
- 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;
56
+ 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;
@@ -3,6 +3,7 @@ interface DialogMetadataButtonProps {
3
3
  label: string;
4
4
  onClick?: () => void;
5
5
  }
6
+ export type DialogMetadataTooltips = Record<string, string>;
6
7
  export type DialogMetadataProps = {
7
8
  className?: string;
8
9
  /** Metadata is loading */
@@ -47,9 +48,11 @@ export type DialogMetadataProps = {
47
48
  transmissionsLabel?: string;
48
49
  /** Activity Log */
49
50
  activityLog?: DialogMetadataButtonProps;
51
+ /** Tooltips */
52
+ tooltips?: DialogMetadataTooltips;
50
53
  };
51
54
  /**
52
55
  * Metadata for a dialog in list view.
53
56
  */
54
- 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;
57
+ 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;
55
58
  export {};
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- 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;
4
+ 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;
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  args: {
@@ -19,3 +19,4 @@ export declare const NotApplicable: Story;
19
19
  export declare const Transmissions: Story;
20
20
  export declare const ActivityLog: Story;
21
21
  export declare const WithExtendedStatus: Story;
22
+ export declare const WithTooltips: Story;
@@ -18,9 +18,10 @@ export interface DialogStatusProps {
18
18
  loading?: boolean;
19
19
  size?: MetaItemSize;
20
20
  value?: DialogStatusValue;
21
+ tooltip?: string;
21
22
  label?: string;
22
23
  }
23
24
  /**
24
25
  * Dialog status.
25
26
  */
26
- export declare const DialogStatus: ({ loading, size, value, label }: DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
27
+ export declare const DialogStatus: ({ loading, size, value, label, tooltip }: DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ loading, size, value, label }: import('./DialogStatus').DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
4
+ component: ({ loading, size, value, label, tooltip }: import('./DialogStatus').DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  argTypes: {
@@ -13,9 +13,11 @@ export interface MetaItemProps {
13
13
  icon?: MetaItemIconProps['icon'];
14
14
  /** Label */
15
15
  children?: ReactNode;
16
+ /** Tooltip */
17
+ tooltip?: string;
16
18
  /** classname */
17
19
  className?: string;
18
20
  /** OnClick handler */
19
21
  onClick?: () => void;
20
22
  }
21
- export declare const MetaItem: ({ loading, reverse, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;
23
+ export declare const MetaItem: ({ loading, reverse, size, variant, icon, children, tooltip, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ loading, reverse, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ loading, reverse, size, variant, icon, children, tooltip, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  parameters: {
7
7
  layout: string;
@@ -7,7 +7,9 @@ export interface MetaProgressProps {
7
7
  variant?: MetaItemVariant;
8
8
  /** Progress of 100 */
9
9
  progress?: number;
10
+ /** Tooltip */
11
+ tooltip?: string;
10
12
  /** Label */
11
13
  children?: ReactNode;
12
14
  }
13
- export declare const MetaProgress: ({ size, variant, progress, children }: MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const MetaProgress: ({ size, variant, progress, tooltip, children }: MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ size, variant, progress, children }: import('./MetaProgress').MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ size, variant, progress, tooltip, children }: import('./MetaProgress').MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  parameters: {
7
7
  layout: string;
@@ -10,7 +10,9 @@ export interface MetaTimestampProps {
10
10
  datetime?: string;
11
11
  /** Icon name */
12
12
  icon?: MetaItemIconProps['icon'];
13
+ /** Tooltip */
14
+ tooltip?: string;
13
15
  /** Label */
14
16
  children?: ReactNode;
15
17
  }
16
- export declare const MetaTimestamp: ({ loading, size, variant, datetime, icon, children, }: MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
18
+ export declare const MetaTimestamp: ({ loading, size, variant, datetime, icon, tooltip, children, }: MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ loading, size, variant, datetime, icon, children, }: import('./MetaTimestamp').MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ loading, size, variant, datetime, icon, tooltip, children, }: import('./MetaTimestamp').MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  args: {
@@ -1,6 +1,6 @@
1
1
  import { BadgeProps } from '../Badge';
2
2
  import { ListItemProps } from '../List';
3
- export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick' | 'loading' | 'shadow' | 'border' | 'interactive'> {
3
+ export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick' | 'loading' | 'shadow' | 'border' | 'interactive' | 'variant'> {
4
4
  /** Unique identifier for the resource item */
5
5
  id: string;
6
6
  /** Name of the owner of the resource */
@@ -47,6 +47,12 @@ declare const meta: {
47
47
  type: "select";
48
48
  };
49
49
  };
50
+ variant: {
51
+ options: string[];
52
+ control: {
53
+ type: "inline-radio";
54
+ };
55
+ };
50
56
  };
51
57
  };
52
58
  export default meta;
@@ -5,4 +5,4 @@ export type TooltipProps = {
5
5
  hidden?: boolean;
6
6
  size?: Size;
7
7
  } & Omit<DsTooltipProps, 'content | children'>;
8
- export declare const Tooltip: ({ size, placement, children, content, hidden }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const Tooltip: ({ size, placement, children, content, hidden }: TooltipProps) => string | import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  declare const meta: {
2
2
  title: string;
3
- component: ({ size, placement, children, content, hidden }: import('./Tooltip').TooltipProps) => import("react/jsx-runtime").JSX.Element;
3
+ component: ({ size, placement, children, content, hidden }: import('./Tooltip').TooltipProps) => string | import("react/jsx-runtime").JSX.Element;
4
4
  tags: string[];
5
5
  parameters: {};
6
6
  args: {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altinn/altinn-components",
3
- "version": "0.56.18",
3
+ "version": "0.56.19",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist/",