@altinn/altinn-components 0.31.0 → 0.32.0

package/dist/assets/ModalBase.css

@@ -0,0 +1 @@
+._modal_1jt70_1{padding:0;min-width:450px;border-radius:.5rem;box-shadow:var(--ds-shadow-xs);border:none}._modal_1jt70_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_1jt70_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_1jt70_1[data-variant=full]{width:100%;height:100%;min-width:unset;min-height:unset}._modal_1jt70_1[data-variant=content]{width:1056px;margin:auto}

package/dist/components/ActivityLog/ActivityLog.js

@@ -1,14 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { createElement as i } from "react";
+"use client";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as m, createElement as u } from "react";
 import "../../index-L8X2o7IH.js";
+import { Button as h } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Timeline as m } from "../Timeline/Timeline.js";
+import { Timeline as y } from "../Timeline/Timeline.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ActivityLogItem as p } from "./ActivityLogItem.js";
-function d({ items: r }) {
-  return /* @__PURE__ */ t(m, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ i(p, { ...o, key: o.id })) });
-}
+import { Section as v } from "../Page/Section.js";
+import { ActivityLogSegment as x } from "./ActivityLogSegment.js";
+const q = ({
+  items: o,
+  maxItems: t,
+  expandLabel: i = "Expand history",
+  collapseLabel: l = "Collapse history"
+}) => {
+  if (!(o != null && o.length))
+    return null;
+  const [n, p] = m(!1), c = () => {
+    p((r) => !r);
+  }, d = t ? o.slice(0, t) : o, s = n ? o : d, a = t && o.length > t;
+  return /* @__PURE__ */ f(v, { spacing: 4, children: [
+    /* @__PURE__ */ e(y, { children: s.map((r, g) => /* @__PURE__ */ u(x, { ...r, key: g })) }),
+    a && /* @__PURE__ */ e(h, { variant: "outline", onClick: c, children: n ? l : i })
+  ] });
+};
 export {
-  d as ActivityLog
+  q as ActivityLog
 };

package/dist/components/ActivityLog/ActivityLogItem.js

@@ -1,13 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { TimelineSegment as o } from "../Timeline/TimelineSegment.js";
-import { TimelineActivity as p } from "../Timeline/TimelineActivity.js";
 import { Typography as e } from "../Typography/Typography.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const s = ({ byline: r, datetime: t, children: m }) => /* @__PURE__ */ i(o, { children: /* @__PURE__ */ i(p, { byline: r, datetime: t, children: /* @__PURE__ */ i(e, { children: m }) }) });
+import { TimelineActivity as p } from "../Timeline/TimelineActivity.js";
+const A = ({ byline: t, datetime: i, children: o, summary: c, ...m }) => o ? /* @__PURE__ */ r(p, { byline: t, datetime: i, ...m, children: o }) : /* @__PURE__ */ r(p, { byline: t, datetime: i, ...m, children: /* @__PURE__ */ r(e, { children: c }) });
 export {
-  s as ActivityLogItem
+  A as ActivityLogItem
 };

package/dist/components/ActivityLog/ActivityLogSegment.js

@@ -0,0 +1,17 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { createElement as g } from "react";
+import "../../index-L8X2o7IH.js";
+import "../RootProvider/RootProvider.js";
+import { TimelineSegment as f } from "../Timeline/TimelineSegment.js";
+import { Typography as l } from "../Typography/Typography.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { ActivityLogItem as y } from "./ActivityLogItem.js";
+const T = ({ id: i, items: r, datetime: p, byline: m, children: e, summary: o }) => /* @__PURE__ */ n(f, { datetime: p, byline: m, spacing: 2, id: i, children: [
+  o && /* @__PURE__ */ c(l, { children: o }),
+  e,
+  r == null ? void 0 : r.map((t) => /* @__PURE__ */ g(y, { ...t, key: t.id }))
+] });
+export {
+  T as ActivityLogSegment
+};

package/dist/components/ActivityLog/index.js

@@ -1,6 +1,8 @@
-import { ActivityLog as i } from "./ActivityLog.js";
-import { ActivityLogItem as e } from "./ActivityLogItem.js";
+import { ActivityLog as e } from "./ActivityLog.js";
+import { ActivityLogSegment as r } from "./ActivityLogSegment.js";
+import { ActivityLogItem as g } from "./ActivityLogItem.js";
 export {
-  i as ActivityLog,
-  e as ActivityLogItem
+  e as ActivityLog,
+  g as ActivityLogItem,
+  r as ActivityLogSegment
 };

package/dist/components/Dialog/Dialog.js

@@ -1,19 +1,41 @@
-import { jsxs as D, jsx as o } from "react/jsx-runtime";
+import { jsxs as r, jsx as o, Fragment as f } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { DialogLayout as g } from "./DialogLayout.js";
-import { DialogHeader as s } from "./DialogHeader.js";
-import { DialogBody as e } from "./DialogBody.js";
-import { DialogTabs as x } from "./DialogTabs.js";
+import { DialogLayout as x } from "./DialogLayout.js";
+import { DialogHeader as d } from "./DialogHeader.js";
+import { DialogBody as j } from "./DialogBody.js";
+import { DialogSection as u } from "./DialogSection.js";
+import { DialogContact as y } from "./DialogContact.js";
+import { DialogHistory as H } from "./DialogHistory.js";
+import { Divider as g } from "../Divider/Divider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const h = ({ loading: r, backButton: p, contextMenu: a, pageMenu: f, header: i, body: m, tabs: t, children: l }) => /* @__PURE__ */ D(g, { backButton: p, contextMenu: a, pageMenu: f, children: [
-  i && /* @__PURE__ */ o(s, { loading: r, ...i }),
-  m && /* @__PURE__ */ o(e, { loading: r, ...m }),
-  t && /* @__PURE__ */ o(x, { ...t }),
-  l
+const E = ({
+  loading: m,
+  backButton: l,
+  contextMenu: c,
+  pageMenu: n,
+  sender: s,
+  title: i,
+  history: t,
+  additionalInfo: p,
+  contact: e,
+  children: D,
+  ...a
+}) => /* @__PURE__ */ r(x, { backButton: l, contextMenu: c, pageMenu: n, children: [
+  i && /* @__PURE__ */ o(d, { loading: m, ...a, title: i }),
+  D && /* @__PURE__ */ o(j, { loading: m, sender: s, ...a, children: D }),
+  t && /* @__PURE__ */ o(H, { ...t }),
+  p && /* @__PURE__ */ r(f, { children: [
+    /* @__PURE__ */ o(g, {}),
+    /* @__PURE__ */ o(u, { ...p })
+  ] }),
+  e && /* @__PURE__ */ r(f, { children: [
+    /* @__PURE__ */ o(g, {}),
+    /* @__PURE__ */ o(y, { ...e })
+  ] })
 ] });
 export {
-  h as Dialog
+  E as Dialog
 };

package/dist/components/Dialog/DialogActivityLog.js

@@ -1,11 +1,17 @@
-import "react/jsx-runtime";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { D as c } from "../../DialogActivityLog-BoPREh7Y.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import "../Metadata/MetaItem.js";
+import { ActivityLog as a } from "../ActivityLog/ActivityLog.js";
+import { ModalBase as d } from "../Modal/ModalBase.js";
+import { ModalHeader as e } from "../Modal/ModalHeader.js";
+import { ModalBody as c } from "../Modal/ModalBody.js";
+const j = ({ title: t, items: i, open: m, onClose: r }) => /* @__PURE__ */ p(d, { open: m, onClose: r, variant: "content", children: [
+  /* @__PURE__ */ o(e, { title: t, onClose: r }),
+  /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(a, { items: i }) })
+] });
 export {
-  c as DialogActivityLog
+  j as DialogActivityLog
 };

package/dist/components/Dialog/DialogBody.js

@@ -1,43 +1,24 @@
-import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { jsxs as t, jsx as r, Fragment as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Timeline as c } from "../Timeline/Timeline.js";
-import { TimelineSection as d } from "../Timeline/TimelineSection.js";
+import { TimelineSection as n } from "../Timeline/TimelineSection.js";
 import { TimelineHeader as f } from "../Timeline/TimelineHeader.js";
-import { Typography as s } from "../Typography/Typography.js";
-import { SeenByLog as y } from "./SeenByLog.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { SeenByLog as e } from "./SeenByLog.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const H = ({
-  loading: m,
-  sender: t,
-  recipient: o,
-  recipientLabel: n,
-  updatedAt: p,
-  updatedAtLabel: l,
-  children: a,
-  seenByLog: e
-}) => /* @__PURE__ */ i(c, { children: [
-  /* @__PURE__ */ i(f, { loading: m, icon: t, children: [
-    /* @__PURE__ */ r("strong", { children: t.name }),
-    n + " " + (o == null ? void 0 : o.name)
+const F = ({ loading: m, sender: o, recipient: i, recipientLabel: l, children: h, seenByLog: p }) => /* @__PURE__ */ t(c, { children: [
+  /* @__PURE__ */ t(f, { loading: m, icon: o, children: [
+    /* @__PURE__ */ r("strong", { children: o == null ? void 0 : o.name }),
+    l + " " + (i == null ? void 0 : i.name)
   ] }),
-  /* @__PURE__ */ r(
-    d,
-    {
-      loading: m,
-      datetime: p,
-      byline: l,
-      spacing: 4,
-      color: m ? "neutral" : void 0,
-      children: !m && /* @__PURE__ */ i(h, { children: [
-        /* @__PURE__ */ r(s, { maxWidth: "60ch", style: { marginTop: "0.5em" }, children: a }),
-        e && /* @__PURE__ */ r(y, { ...e })
-      ] })
-    }
-  )
+  /* @__PURE__ */ r(n, { loading: m, spacing: 4, color: m ? "neutral" : void 0, children: !m && /* @__PURE__ */ t(a, { children: [
+    /* @__PURE__ */ r(T, { maxWidth: "60ch", style: { marginTop: "0.5em" }, children: h }),
+    p && /* @__PURE__ */ r(e, { ...p })
+  ] }) })
 ] });
 export {
-  H as DialogBody
+  F as DialogBody
 };

package/dist/components/Dialog/DialogHeader.js

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

package/dist/components/Dialog/DialogMetadata.js

@@ -1,20 +1,19 @@
 "use client";
 import { jsxs as z, jsx as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import * as o from "react";
+import * as i from "react";
 import { forwardRef as f } from "react";
 import "../RootProvider/RootProvider.js";
-import { S as E, D as _ } from "../../DialogActivityLog-BoPREh7Y.js";
-import { DialogSeenBy as P } from "./DialogSeenBy.js";
-import { DialogStatus as M } from "./DialogStatus.js";
+import { DialogSeenBy as _ } from "./DialogSeenBy.js";
+import { DialogStatus as S } from "./DialogStatus.js";
 import "../Searchbar/AutocompleteBase.js";
-import { MetaBase as R } from "../Metadata/MetaBase.js";
-import { MetaItem as c } from "../Metadata/MetaItem.js";
-import { MetaTimestamp as m } from "../Metadata/MetaTimestamp.js";
+import { MetaBase as P } from "../Metadata/MetaBase.js";
+import { MetaItem as m } from "../Metadata/MetaItem.js";
+import { MetaTimestamp as p } from "../Metadata/MetaTimestamp.js";
 import "../Snackbar/useSnackbar.js";
-import { S as D } from "../../Checkmark-D17Nyv_u.js";
+import { S as M } from "../../Checkmark-D17Nyv_u.js";
 import { u as d } from "../../useId-BVFxCjkq.js";
-var B = function(t, n) {
+var R = function(t, n) {
   var r = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -23,16 +22,16 @@ var B = function(t, n) {
   return r;
 };
 const V = f((t, n) => {
-  var { title: r, titleId: e } = t, l = B(t, ["title", "titleId"]);
-  let i = d();
-  return i = r ? e || "title-" + i : void 0, o.createElement(
+  var { title: r, titleId: e } = t, l = R(t, ["title", "titleId"]);
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": i }, l),
-    r ? o.createElement("title", { id: i }, r) : null,
-    o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-.75.75h-.25V19A1.75 1.75 0 0 1 18 20.75H6A1.75 1.75 0 0 1 4.25 19V8.75H4A.75.75 0 0 1 3.25 8zm2.5 4.75h12.5V19a.25.25 0 0 1-.25.25H6a.25.25 0 0 1-.25-.25zm-1-4v2.5h14.5v-2.5zm9.25 8.5a.75.75 0 0 0 0-1.5h-4a.75.75 0 0 0 0 1.5z", clipRule: "evenodd" })
+    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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-.75.75h-.25V19A1.75 1.75 0 0 1 18 20.75H6A1.75 1.75 0 0 1 4.25 19V8.75H4A.75.75 0 0 1 3.25 8zm2.5 4.75h12.5V19a.25.25 0 0 1-.25.25H6a.25.25 0 0 1-.25-.25zm-1-4v2.5h14.5v-2.5zm9.25 8.5a.75.75 0 0 0 0-1.5h-4a.75.75 0 0 0 0 1.5z", clipRule: "evenodd" })
   );
 });
-var H = function(t, n) {
+var C = function(t, n) {
   var r = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -40,17 +39,17 @@ var H = function(t, n) {
       n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
   return r;
 };
-const C = f((t, n) => {
-  var { title: r, titleId: e } = t, l = H(t, ["title", "titleId"]);
-  let i = d();
-  return i = r ? e || "title-" + i : void 0, o.createElement(
+const B = f((t, n) => {
+  var { title: r, titleId: e } = t, l = C(t, ["title", "titleId"]);
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": i }, l),
-    r ? o.createElement("title", { id: i }, r) : null,
-    o.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" })
+    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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.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 $ = function(t, n) {
+var H = function(t, n) {
   var r = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -59,13 +58,13 @@ var $ = function(t, n) {
   return r;
 };
 const k = f((t, n) => {
-  var { title: r, titleId: e } = t, l = $(t, ["title", "titleId"]);
-  let i = d();
-  return i = r ? e || "title-" + i : void 0, o.createElement(
+  var { title: r, titleId: e } = t, l = H(t, ["title", "titleId"]);
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": i }, l),
-    r ? o.createElement("title", { id: i }, r) : null,
-    o.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" })
+    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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M9 2.25a.75.75 0 0 1 .75.75v1.25h4.5V3a.75.75 0 0 1 1.5 0v1.25h3.75c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h3.75V3A.75.75 0 0 1 9 2.25M15.75 7a.75.75 0 0 1-1.5 0V5.75h-4.5V7a.75.75 0 0 1-1.5 0V5.75h-3.5v3.5h14.5v-3.5h-3.5zm-11 11.25v-7.5h14.5v7.5zm2-5.25a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m4 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m4.75-.75a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 0-1.5zM10.75 16a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m4.75-.75a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 0-1.5zM6.75 16a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75", clipRule: "evenodd" })
   );
 });
 var A = function(t, n) {
@@ -76,17 +75,53 @@ var A = function(t, n) {
       n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
   return r;
 };
-const T = f((t, n) => {
+const $ = f((t, n) => {
   var { title: r, titleId: e } = t, l = A(t, ["title", "titleId"]);
-  let i = d();
-  return i = r ? e || "title-" + i : void 0, o.createElement(
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.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 q = function(t, n) {
+  var r = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
+      n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
+  return r;
+};
+const D = f((t, n) => {
+  var { title: r, titleId: e } = t, l = q(t, ["title", "titleId"]);
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.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" })
+  );
+});
+var T = function(t, n) {
+  var r = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
+      n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
+  return r;
+};
+const F = f((t, n) => {
+  var { title: r, titleId: e } = t, l = T(t, ["title", "titleId"]);
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": i }, l),
-    r ? o.createElement("title", { id: i }, r) : null,
-    o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M15.912 4.382c-.546.032-1.086.292-1.503.71l-8.132 8.131c-1.2 1.201-1.754 3.549 0 5.304 1.755 1.754 4.103 1.2 5.304 0l7.424-7.425a.75.75 0 0 1 1.06 1.06l-7.424 7.425c-1.627 1.628-4.936 2.488-7.424 0s-1.628-5.797 0-7.424l8.131-8.132c.644-.643 1.518-1.09 2.475-1.146.976-.058 1.978.295 2.829 1.146.85.851 1.203 1.853 1.146 2.828-.056.957-.503 1.832-1.146 2.475l-7.425 7.425c-.316.316-.838.553-1.376.613-.568.063-1.255-.062-1.806-.613-.55-.55-.676-1.238-.613-1.806.06-.538.297-1.06.613-1.376l6.718-6.718a.75.75 0 0 1 1.06 1.061l-6.717 6.718a.95.95 0 0 0-.183.48c-.025.227.026.424.183.58.156.157.353.208.58.183a.95.95 0 0 0 .48-.183l7.425-7.424c.417-.418.678-.957.71-1.503.03-.527-.147-1.116-.71-1.68s-1.152-.74-1.68-.71", clipRule: "evenodd" })
+    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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M15.912 4.382c-.546.032-1.086.292-1.503.71l-8.132 8.131c-1.2 1.201-1.754 3.549 0 5.304 1.755 1.754 4.103 1.2 5.304 0l7.424-7.425a.75.75 0 0 1 1.06 1.06l-7.424 7.425c-1.627 1.628-4.936 2.488-7.424 0s-1.628-5.797 0-7.424l8.131-8.132c.644-.643 1.518-1.09 2.475-1.146.976-.058 1.978.295 2.829 1.146.85.851 1.203 1.853 1.146 2.828-.056.957-.503 1.832-1.146 2.475l-7.425 7.425c-.316.316-.838.553-1.376.613-.568.063-1.255-.062-1.806-.613-.55-.55-.676-1.238-.613-1.806.06-.538.297-1.06.613-1.376l6.718-6.718a.75.75 0 0 1 1.06 1.061l-6.717 6.718a.95.95 0 0 0-.183.48c-.025.227.026.424.183.58.156.157.353.208.58.183a.95.95 0 0 0 .48-.183l7.425-7.424c.417-.418.678-.957.71-1.503.03-.527-.147-1.116-.71-1.68s-1.152-.74-1.68-.71", clipRule: "evenodd" })
   );
 });
-var F = function(t, n) {
+var G = function(t, n) {
   var r = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -94,51 +129,61 @@ var F = function(t, n) {
       n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
   return r;
 };
-const q = f((t, n) => {
-  var { title: r, titleId: e } = t, l = F(t, ["title", "titleId"]);
-  let i = d();
-  return i = r ? e || "title-" + i : void 0, o.createElement(
+const J = f((t, n) => {
+  var { title: r, titleId: e } = t, l = G(t, ["title", "titleId"]);
+  let o = d();
+  return o = r ? e || "title-" + o : void 0, i.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": i }, l),
-    r ? o.createElement("title", { id: i }, r) : null,
-    o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 6.25a.75.75 0 0 0 0 1.5h.805l.876 11.384a1.75 1.75 0 0 0 1.745 1.616h8.148a1.75 1.75 0 0 0 1.745-1.616l.876-11.384h.805a.75.75 0 0 0 0-1.5h-2.75V6A2.75 2.75 0 0 0 14 3.25h-4A2.75 2.75 0 0 0 7.25 6v.25zm5.5-1.5c-.69 0-1.25.56-1.25 1.25v.25h6.5V6c0-.69-.56-1.25-1.25-1.25zm-3.19 3 .867 11.27c.01.13.118.23.249.23h8.148c.13 0 .24-.1.25-.23l.866-11.27zm3.19 2a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75m4 0a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75", clipRule: "evenodd" })
+    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": o }, l),
+    r ? i.createElement("title", { id: o }, r) : null,
+    i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 6.25a.75.75 0 0 0 0 1.5h.805l.876 11.384a1.75 1.75 0 0 0 1.745 1.616h8.148a1.75 1.75 0 0 0 1.745-1.616l.876-11.384h.805a.75.75 0 0 0 0-1.5h-2.75V6A2.75 2.75 0 0 0 14 3.25h-4A2.75 2.75 0 0 0 7.25 6v.25zm5.5-1.5c-.69 0-1.25.56-1.25 1.25v.25h6.5V6c0-.69-.56-1.25-1.25-1.25zm-3.19 3 .867 11.27c.01.13.118.23.249.23h8.148c.13 0 .24-.1.25-.23l.866-11.27zm3.19 2a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75m4 0a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75", clipRule: "evenodd" })
   );
-}), re = ({
+}), ne = ({
   className: t,
   loading: n,
   status: r,
   sender: e,
   updatedAt: l,
-  updatedAtLabel: i,
-  dueAt: p,
-  dueAtLabel: s,
-  archivedAt: v,
-  archivedAtLabel: u,
-  trashedAt: h,
-  trashedAtLabel: b,
-  seenBy: y,
-  draftsLabel: O,
+  updatedAtLabel: o,
+  dueAt: h,
+  dueAtLabel: u,
+  archivedAt: s,
+  archivedAtLabel: v,
+  trashedAt: b,
+  trashedAtLabel: O,
+  seenBy: w,
+  draftsLabel: y,
   sentCount: g = 0,
-  receivedCount: w = 0,
-  attachmentsCount: x = 0,
-  attachmentsLabel: S,
-  transmissionsLabel: j,
-  activityLog: I
-}) => /* @__PURE__ */ z(R, { className: t, size: "xs", children: [
-  r && /* @__PURE__ */ a(M, { loading: n, size: "xs", ...r }),
-  O && /* @__PURE__ */ a(c, { size: "xs", variant: "dotted", children: O }),
-  g > 0 && /* @__PURE__ */ a(c, { size: "xs", variant: "outline", icon: D, children: g }),
-  w > 0 && /* @__PURE__ */ a(c, { size: "xs", variant: "outline", icon: C, children: w }),
-  l && /* @__PURE__ */ z(m, { loading: n, datetime: l, size: "xs", children: [
+  receivedCount: x = 0,
+  attachmentsCount: j = 0,
+  attachmentsLabel: E,
+  transmissionsLabel: I,
+  activityLog: c
+}) => /* @__PURE__ */ z(P, { className: t, size: "xs", children: [
+  r && /* @__PURE__ */ a(S, { loading: n, size: "xs", ...r }),
+  y && /* @__PURE__ */ a(m, { size: "xs", variant: "dotted", children: y }),
+  g > 0 && /* @__PURE__ */ a(m, { size: "xs", variant: "outline", icon: M, children: g }),
+  x > 0 && /* @__PURE__ */ a(m, { size: "xs", variant: "outline", icon: B, children: x }),
+  l && /* @__PURE__ */ z(p, { loading: n, datetime: l, size: "xs", children: [
     /* @__PURE__ */ a("strong", { children: e && e.name + ", " }),
-    i
+    o
   ] }),
-  p && s && /* @__PURE__ */ a(m, { loading: n, datetime: p, size: "xs", icon: E, children: s }),
-  x > 0 && /* @__PURE__ */ a(c, { loading: n, size: "xs", icon: T, children: S || x }),
-  j && /* @__PURE__ */ a(c, { loading: n, size: "xs", icon: k, children: j }),
-  h && b && /* @__PURE__ */ a(m, { loading: n, datetime: h, size: "xs", icon: q, children: b }) || v && u && /* @__PURE__ */ a(m, { loading: n, datetime: v, size: "xs", icon: V, children: u }) || y && /* @__PURE__ */ a(P, { size: "xs", ...y, loading: n }),
-  I && /* @__PURE__ */ a(_, { ...I, loading: n, size: "xs" })
+  h && u && /* @__PURE__ */ a(p, { loading: n, datetime: h, size: "xs", icon: k, children: u }),
+  j > 0 && /* @__PURE__ */ a(m, { loading: n, size: "xs", icon: F, children: E || j }),
+  I && /* @__PURE__ */ a(m, { loading: n, size: "xs", icon: D, children: I }),
+  b && O && /* @__PURE__ */ a(p, { loading: n, datetime: b, size: "xs", icon: J, children: O }) || s && v && /* @__PURE__ */ a(p, { loading: n, datetime: s, size: "xs", icon: V, children: v }) || w && /* @__PURE__ */ a(_, { size: "xs", ...w, loading: n }),
+  c && /* @__PURE__ */ a(
+    m,
+    {
+      loading: n,
+      size: "xs",
+      icon: $,
+      as: c != null && c.onClick ? "button" : "span",
+      onClick: c == null ? void 0 : c.onClick,
+      children: (c == null ? void 0 : c.label) || "Activity log"
+    }
+  )
 ] });
 export {
-  re as DialogMetadata
+  ne as DialogMetadata
 };

package/dist/components/Dialog/index.js

@@ -1,10 +1,10 @@
 import { Dialog as t } from "./Dialog.js";
-import { DialogLayout as a } from "./DialogLayout.js";
+import { DialogLayout as i } from "./DialogLayout.js";
 import { DialogHeader as m } from "./DialogHeader.js";
 import { DialogBody as l } from "./DialogBody.js";
 import { DialogTabs as f } from "./DialogTabs.js";
 import { DialogSection as D } from "./DialogSection.js";
-import { DialogContact as n } from "./DialogContact.js";
+import { DialogContact as s } from "./DialogContact.js";
 import { DialogHistory as S } from "./DialogHistory.js";
 import { DialogHistorySegment as c } from "./DialogHistorySegment.js";
 import { DialogHistoryItem as B } from "./DialogHistoryItem.js";
@@ -14,7 +14,7 @@ import { DialogListItem as h } from "./DialogListItem.js";
 import { DialogMetadata as C } from "./DialogMetadata.js";
 import { DialogByline as G } from "./DialogByline.js";
 import { DialogActions as T } from "./DialogActions.js";
-import { D as k } from "../../DialogActivityLog-BoPREh7Y.js";
+import { DialogActivityLog as k } from "./DialogActivityLog.js";
 import { DialogSeenBy as w } from "./DialogSeenBy.js";
 import { DialogSelect as F } from "./DialogSelect.js";
 import { DialogStatus as K, DialogStatusEnum as N } from "./DialogStatus.js";
@@ -28,12 +28,12 @@ export {
   P as DialogAttachments,
   l as DialogBody,
   G as DialogByline,
-  n as DialogContact,
+  s as DialogContact,
   m as DialogHeader,
   S as DialogHistory,
   B as DialogHistoryItem,
   c as DialogHistorySegment,
-  a as DialogLayout,
+  i as DialogLayout,
   d as DialogList,
   I as DialogListGroup,
   h as DialogListItem,