@altinn/altinn-components 0.9.1 → 0.10.0

package/dist/components/Dialog/DialogListGroup.js

@@ -0,0 +1,21 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Heading as t } from "../Typography/Heading.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { Button as e } from "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { ListBase as n } from "../List/ListBase.js";
+import { Section as p } from "../Page/Section.js";
+import { SectionHeader as c } from "../Page/SectionHeader.js";
+const B = ({ title: i, children: m }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
+  i && /* @__PURE__ */ o(c, { margin: "sm", children: [
+    /* @__PURE__ */ r(t, { children: i }),
+    /* @__PURE__ */ r(e, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
+  ] }),
+  /* @__PURE__ */ r(n, { spacing: "md", children: m })
+] });
+export {
+  B as DialogListGroup
+};

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

@@ -1,15 +1,12 @@
 import { ElementType } from 'react';
-import { ListItemColor } from '../List';
-import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
-import { DialogSeenByProps } from './DialogSeenBy';
-import { DialogSelectProps } from './DialogSelect';
-import { DialogStatusProps } from './DialogStatus';
-import { DialogTouchedByActor } from './DialogTouchedBy';
+import { AvatarProps, DialogSeenByProps, DialogSelectProps, DialogStatusProps, DialogTouchedByActor, ListItemColor } from '..';
 export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type DialogListItemVariant = 'neutral' | 'draft' | 'trashed' | 'archived';
+export type DialogListItemVariant = 'normal' | 'trashed' | 'archived';
 export interface DialogListItemProps {
     /** Dialog title */
     title: string;
+    /** Dialog sender */
+    sender: AvatarProps;
     /** Dialog description */
     description?: string;
     /** Dialog summary (will override description) */
@@ -32,12 +29,12 @@ export interface DialogListItemProps {
     selected?: boolean;
     /** Dialog status */
     status?: DialogStatusProps;
-    /** Dialog sender */
-    sender?: DialogSenderProps;
     /** Dialog Recipient  */
-    recipient?: DialogRecipientProps;
-    /** Group view, show avatar for recipient */
-    grouped?: boolean;
+    recipient?: AvatarProps;
+    /** Dialog Recipient  */
+    recipientLabel?: string;
+    /** Group recipient, show both sender and recipient avatars */
+    recipientGroup?: boolean;
     /** Updated datetime */
     updatedAt?: string;
     /** Updated at label */
@@ -58,7 +55,7 @@ export interface DialogListItemProps {
     tabIndex?: number;
     /** Custom label */
     label?: string;
-    /** *Custom background color */
+    /** Custom color */
     color?: ListItemColor;
     /** Dialog has been seen */
     seen?: boolean;
@@ -76,4 +73,4 @@ export interface DialogListItemProps {
  * summary, sender, and receiver.
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  */
-export declare const DialogListItem: ({ size, variant, loading, select, status, sender, recipient, grouped, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, description, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogListItem: ({ size, variant, loading, select, status, sender, recipient, recipientLabel, recipientGroup, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, description, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItem.js

@@ -1,96 +1,107 @@
-import { jsx as m, jsxs as c } from "react/jsx-runtime";
-import { ListItemBase as d } from "../List/ListItemBase.js";
-import { ListItemHeader as B } from "../List/ListItemHeader.js";
-import { ListItemLabel as q } from "../List/ListItemLabel.js";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "react";
 import "../Icon/SvgIcon.js";
+import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import "../RootProvider/RootProvider.js";
+import { DialogMetadata as y } from "./DialogMetadata.js";
+import { DialogByline as C } from "./DialogByline.js";
+import { Skeleton as E } from "../Skeleton/Skeleton.js";
 import { DialogBorder as N } from "./DialogBorder.js";
-import { DialogMetadata as b } from "./DialogMetadata.js";
-import { DialogHeaderBase as w } from "./DialogHeaderBase.js";
-import { DialogHeadings as C } from "./DialogHeadings.js";
-import { DialogTitle as E } from "./DialogTitle.js";
-import { DialogTouchedBy as F } from "./DialogTouchedBy.js";
-import { DialogSelect as G } from "./DialogSelect.js";
-import { DialogDescription as J } from "./DialogDescription.js";
-import '../../assets/DialogListItem.css';const K = "_item_6aymu_1", O = "_select_6aymu_6", P = "_summary_6aymu_13", Q = "_footer_6aymu_34", R = "_touchedBy_6aymu_42", U = "_border_6aymu_51", t = {
-  item: K,
+import { DialogSelect as F } from "./DialogSelect.js";
+import { DialogHeading as G } from "./DialogHeading.js";
+import "../RootProvider/RootProvider.js";
+import { ListItemBase as u } from "../List/ListItemBase.js";
+import { ListItemHeader as B } from "../List/ListItemHeader.js";
+import { ListItemLabel as J } from "../List/ListItemLabel.js";
+import '../../assets/DialogListItem.css';const K = "_border_1676z_14", O = "_select_1676z_40", P = "_header_1676z_47", Q = "_summary_1676z_59", R = "_footer_1676z_87", T = "_touchedBy_1676z_91", t = {
+  border: K,
   select: O,
-  summary: P,
-  footer: Q,
-  touchedBy: R,
-  border: U
-}, lr = ({
-  size: r = "lg",
-  variant: x = "neutral",
-  loading: o,
+  header: P,
+  summary: Q,
+  footer: R,
+  touchedBy: T
+}, cr = ({
+  size: r = "xl",
+  variant: b = "normal",
+  loading: e,
   select: s,
-  status: I,
-  sender: i,
-  recipient: l,
-  grouped: L,
-  updatedAt: f,
-  updatedAtLabel: p,
-  archivedAt: _,
-  archivedAtLabel: H,
-  trashedAt: h,
-  trashedAtLabel: j,
-  label: T,
-  dueAt: v,
-  dueAtLabel: M,
-  seen: a = !1,
-  seenBy: S,
-  touchedBy: u,
-  attachmentsCount: V,
-  title: y,
-  description: n,
-  summary: D,
-  ...e
+  status: x,
+  sender: l,
+  recipient: D,
+  recipientLabel: I = "to",
+  recipientGroup: L = !1,
+  updatedAt: i,
+  updatedAtLabel: h,
+  archivedAt: d,
+  archivedAtLabel: j,
+  trashedAt: _,
+  trashedAtLabel: H,
+  label: S,
+  dueAt: k,
+  dueAtLabel: v,
+  seen: m = !1,
+  seenBy: M,
+  touchedBy: V,
+  attachmentsCount: q,
+  title: f,
+  description: p,
+  summary: n,
+  ...a
 }) => {
-  const k = h ? "trashed" : _ ? "archived" : x;
-  return r === "xs" || r === "sm" ? /* @__PURE__ */ m(d, { ...e, loading: o, size: r, children: /* @__PURE__ */ m(B, { ...e, loading: o, size: r, className: t.item, children: /* @__PURE__ */ c(N, { className: t.border, size: r, seen: a, loading: o, children: [
-    /* @__PURE__ */ m(q, { loading: o, size: r, title: y, description: D || n }),
-    /* @__PURE__ */ m(b, { loading: o, updatedAt: f, updatedAtLabel: p })
-  ] }) }) }) : /* @__PURE__ */ m(d, { ...e, loading: o, size: r, children: /* @__PURE__ */ m(
+  const w = _ ? "trashed" : d ? "archived" : b;
+  return r === "xs" || r === "sm" || r === "md" ? /* @__PURE__ */ o(u, { ...a, size: r, children: /* @__PURE__ */ o(B, { ...a, loading: e, size: r, className: t.item, children: /* @__PURE__ */ c(N, { className: t.border, size: r, seen: m, loading: e, children: [
+    /* @__PURE__ */ o(J, { loading: e, size: r, title: f, description: n || p }),
+    /* @__PURE__ */ o(y, { loading: e, sender: l, updatedAt: i, updatedAtLabel: h })
+  ] }) }) }) : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
     B,
     {
-      ...e,
-      loading: o,
+      ...a,
+      loading: e,
       size: r,
       className: t.item,
-      controls: s && /* @__PURE__ */ m(G, { className: t.select, ...s }),
-      children: /* @__PURE__ */ c(N, { className: t.border, size: r, seen: a, loading: o, children: [
-        /* @__PURE__ */ c(w, { size: r, children: [
-          /* @__PURE__ */ m(E, { loading: o, size: r, variant: k, label: T, seen: a, children: y }),
-          i && l && /* @__PURE__ */ m(C, { loading: o, size: r, grouped: L, sender: i, recipient: l })
-        ] }),
-        /* @__PURE__ */ m(J, { loading: o, size: r, children: D || n }),
-        /* @__PURE__ */ c("footer", { "data-size": r, className: t.footer, children: [
-          /* @__PURE__ */ m(
-            b,
+      controls: s && /* @__PURE__ */ o(F, { className: t.select, ...s }),
+      children: /* @__PURE__ */ c(N, { className: t.border, size: r, seen: m, loading: e, children: [
+        /* @__PURE__ */ c("header", { className: t.header, "data-size": r, children: [
+          /* @__PURE__ */ o(G, { loading: e, size: r, variant: w, label: S, seen: m, children: f }),
+          /* @__PURE__ */ o(
+            C,
             {
-              loading: o,
-              status: I,
-              updatedAt: f,
-              updatedAtLabel: p,
-              archivedAt: _,
-              archivedAtLabel: H,
-              trashedAt: h,
-              trashedAtLabel: j,
-              dueAt: v,
-              dueAtLabel: M,
-              seenBy: S,
-              attachmentsCount: V
+              size: "xs",
+              loading: e,
+              sender: l,
+              recipient: D,
+              recipientLabel: I,
+              recipientGroup: L
             }
           ),
-          u && /* @__PURE__ */ m(F, { loading: o, size: "xs", touchedBy: u, className: t.touchedBy })
-        ] })
+          /* @__PURE__ */ o("p", { "data-size": r, className: t.summary, children: /* @__PURE__ */ o(E, { loading: e, children: n || p }) })
+        ] }),
+        /* @__PURE__ */ o(
+          y,
+          {
+            className: t.footer,
+            loading: e,
+            status: x,
+            updatedAt: i,
+            updatedAtLabel: h,
+            archivedAt: d,
+            archivedAtLabel: j,
+            trashedAt: _,
+            trashedAtLabel: H,
+            dueAt: k,
+            dueAtLabel: v,
+            attachmentsCount: q,
+            seenBy: M,
+            touchedBy: {
+              touchedBy: V,
+              className: t.touchedBy
+            }
+          }
+        )
       ] })
     }
   ) });
 };
 export {
-  lr as DialogListItem
+  cr as DialogListItem
 };

package/dist/components/Dialog/DialogListItem.stories.js

@@ -1,15 +1,15 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { withThemeByDataAttribute as y } from "@storybook/addon-themes";
-import { Fragment as u, useState as v } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { withThemeByDataAttribute as p } from "@storybook/addon-themes";
+import { Fragment as c, useState as y } from "react";
 import { DialogListItem as n } from "./DialogListItem.js";
-import { DialogStatusEnum as g } from "./DialogStatus.js";
+import { DialogStatusEnum as v } from "./DialogStatus.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
 import "../RootProvider/RootProvider.js";
-import { ListBase as s } from "../List/ListBase.js";
-const f = (t) => {
+import { ListBase as i } from "../List/ListBase.js";
+const g = (t) => {
   switch (t) {
     case "draft":
       return "Utkast";
@@ -24,17 +24,17 @@ const f = (t) => {
     default:
       return "";
   }
-}, o = ["lg", "md", "sm", "xs"];
-var b;
-const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
+}, o = ["xl", "lg", "md", "sm", "xs"];
+var h;
+const f = (h = Object.keys(v)) == null ? void 0 : h.map((t) => ({
   value: t,
-  label: f(t)
+  label: g(t)
 })), C = {
   title: "Dialog/DialogListItem",
   component: n,
   tags: ["autodocs"],
   decorators: [
-    y({
+    p({
       themes: {
         company: "company",
         person: "person"
@@ -58,15 +58,15 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     updatedAtLabel: "25. november 2024 kl 15.30",
     status: {}
   }
-}, E = (t) => /* @__PURE__ */ e(s, { children: c == null ? void 0 : c.map((a) => /* @__PURE__ */ i(u, { children: [
-  /* @__PURE__ */ e(n, { ...t, status: a }),
-  /* @__PURE__ */ e(r, { children: a == null ? void 0 : a.value })
-] }, a == null ? void 0 : a.value)) }), I = (t) => /* @__PURE__ */ i(s, { children: [
+}, E = (t) => /* @__PURE__ */ e(i, { children: f.map((l) => /* @__PURE__ */ s(c, { children: [
+  /* @__PURE__ */ e(n, { ...t, status: l }),
+  /* @__PURE__ */ e(r, { children: l == null ? void 0 : l.value })
+] }, l.value)) }), I = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(n, { ...t, loading: !0, label: "Ulest" }),
   /* @__PURE__ */ e(r, { children: "Loading" }),
   /* @__PURE__ */ e(n, { ...t, label: "Ulest" }),
   /* @__PURE__ */ e(r, { children: "Loaded" })
-] }), q = (t) => /* @__PURE__ */ i(s, { children: [
+] }), q = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(n, { ...t, label: "Ulest", status: { value: "requires-attention", label: "Krever handling" } }),
   /* @__PURE__ */ e(r, { children: "Dialog is new and has not been seen by anybody" }),
   /* @__PURE__ */ e(
@@ -83,7 +83,6 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     n,
     {
       ...t,
-      size: "md",
       label: "Arkivert",
       status: { value: "completed", label: "Avsluttet" },
       seen: !0,
@@ -97,7 +96,6 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     n,
     {
       ...t,
-      size: "md",
       label: "Papirkurv",
       status: { value: "completed", label: "Avsluttet" },
       seen: !0,
@@ -107,7 +105,7 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Dialog has been moved to trash" })
-] }), T = (t) => /* @__PURE__ */ i(s, { children: [
+] }), x = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(
     n,
     {
@@ -118,10 +116,10 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Dialog requires action wihtin a spesific due date." })
-] }), w = (t) => /* @__PURE__ */ i(s, { children: [
+] }), T = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(n, { ...t, attachmentsCount: 2 }),
   /* @__PURE__ */ e(r, { children: "Dialog has attachments." })
-] }), x = (t) => /* @__PURE__ */ i(s, { children: [
+] }), w = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(n, { ...t, seen: !0, seenBy: { seenByEndUser: !0, label: "Sett av deg" } }),
   /* @__PURE__ */ e(r, { children: "Seen by end user. Dialog is marked as seen." }),
   /* @__PURE__ */ e(n, { ...t, seenBy: { seenByOthersCount: 4, label: "Sett av 4" } }),
@@ -135,7 +133,7 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Seen by end user and others. Dialog is marked as seen." })
-] }), M = (t) => /* @__PURE__ */ i(s, { children: [
+] }), M = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(n, { ...t, touchedBy: [{ name: "Kari Nordmann" }] }),
   /* @__PURE__ */ e(r, { children: "Dialog has been touched by a single actor." }),
   /* @__PURE__ */ e(n, { ...t, touchedBy: [{ name: "Kari Nordmann" }, { name: "Ola Nordmann" }] }),
@@ -148,7 +146,7 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Dialog has been touched by a multiple actors." })
-] }), P = (t) => /* @__PURE__ */ i(s, { children: [
+] }), P = (t) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ e(
     n,
     {
@@ -166,8 +164,8 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
   ),
   /* @__PURE__ */ e(r, { children: "Long summary" })
 ] }), F = (t) => {
-  var h;
-  const [a, p] = v({
+  var m;
+  const [l, b] = y({
     1: {
       id: "1",
       title: "Item 1",
@@ -183,40 +181,40 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
       title: "Item 2",
       selected: !1
     }
-  }), m = ({ id: l }) => {
-    p((d) => ({
+  }), u = ({ id: a }) => {
+    b((d) => ({
       ...d,
-      [l]: {
-        ...d[l],
-        selected: !d[l].selected
+      [a]: {
+        ...d[a],
+        selected: !d[a].selected
       }
     }));
   };
-  return /* @__PURE__ */ e(s, { children: (h = Object.values(a)) == null ? void 0 : h.map((l) => /* @__PURE__ */ i(u, { children: [
+  return /* @__PURE__ */ e(i, { children: (m = Object.values(l)) == null ? void 0 : m.map((a) => /* @__PURE__ */ s(c, { children: [
     /* @__PURE__ */ e(
       n,
       {
         ...t,
-        title: l.title,
-        onClick: l.selected ? () => m(l) : null,
-        selected: l.selected,
-        select: { checked: l == null ? void 0 : l.selected, onChange: () => m(l) }
+        title: a.title,
+        onClick: a.selected ? () => u(a) : void 0,
+        selected: a.selected,
+        select: { checked: a == null ? void 0 : a.selected, onChange: () => u(a) }
       }
     ),
-    /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ s(r, { children: [
       "selected:",
-      l.selected ? "true" : "false"
+      a.selected ? "true" : "false"
     ] })
-  ] }, l == null ? void 0 : l.id)) });
-}, R = (t) => /* @__PURE__ */ e(s, { children: o == null ? void 0 : o.map((a) => /* @__PURE__ */ i(u, { children: [
-  /* @__PURE__ */ e(n, { ...t, size: a, status: { value: "in-progress", label: "Under arbeid" } }),
-  /* @__PURE__ */ e(r, { children: a })
-] }, a)) });
+  ] }, a == null ? void 0 : a.id)) });
+}, R = (t) => /* @__PURE__ */ e(i, { children: o == null ? void 0 : o.map((l) => /* @__PURE__ */ s(c, { children: [
+  /* @__PURE__ */ e(n, { ...t, size: l, status: { value: "in-progress", label: "Under arbeid" } }),
+  /* @__PURE__ */ e(r, { children: l })
+] }, l)) });
 export {
-  w as Attachments,
-  T as DueAt,
+  T as Attachments,
+  x as DueAt,
   I as Loading,
-  x as SeenBy,
+  w as SeenBy,
   F as Selectable,
   R as Sizes,
   E as Statuses,

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

@@ -1,10 +1,12 @@
-import { DialogSeenByProps } from './DialogSeenBy';
-import { DialogStatusProps } from './DialogStatus';
+import { AvatarProps, DialogSeenByProps, DialogStatusProps, DialogTouchedByProps } from '..';
 export type DialogMetadataProps = {
+    className?: string;
     /** Metadata is loading */
     loading?: boolean;
     /** Dialog status */
     status?: DialogStatusProps;
+    /** Sender */
+    sender?: AvatarProps;
     /** Updated datetime */
     updatedAt?: string;
     /** Updated label */
@@ -23,10 +25,18 @@ export type DialogMetadataProps = {
     trashedAtLabel?: string;
     /** Who have seen the dialog after latest update */
     seenBy?: DialogSeenByProps;
+    /** Who have seen the dialog after latest update */
+    touchedBy?: DialogTouchedByProps;
     /** Number of attachments */
     attachmentsCount?: number;
+    /** Attachments label */
+    attachmentsLabel?: string;
+    /** Transmissions label */
+    transmissionsLabel?: string;
+    /** Clickable items */
+    onClick?: () => void;
 };
 /**
  * Metadata for a dialog in list view.
  */
-export declare const DialogMetadata: ({ loading, status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, attachmentsCount, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogMetadata: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, touchedBy, attachmentsCount, attachmentsLabel, transmissionsLabel, onClick, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogMetadata.js

@@ -1,31 +1,46 @@
-import { jsxs as M, jsx as e } from "react/jsx-runtime";
-import { MetaBase as a } from "../Meta/MetaBase.js";
-import { MetaItem as D } from "../Meta/MetaItem.js";
+import { jsxs as T, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { MetaTimestamp as r } from "../Meta/MetaTimestamp.js";
-import { DialogSeenBy as j } from "./DialogSeenBy.js";
-import { DialogStatus as l } from "./DialogStatus.js";
-const E = ({
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { MetaBase as q } from "../Meta/MetaBase.js";
+import { MetaItem as B } from "../Meta/MetaItem.js";
+import { MetaTimestamp as m } from "../Meta/MetaTimestamp.js";
+import { DialogSeenBy as w } from "./DialogSeenBy.js";
+import { DialogStatus as y } from "./DialogStatus.js";
+import { DialogTouchedBy as E } from "./DialogTouchedBy.js";
+import "../RootProvider/RootProvider.js";
+const W = ({
+  className: I,
   loading: i,
-  status: m,
-  updatedAt: s,
-  updatedAtLabel: n,
-  dueAt: o,
-  dueAtLabel: t,
+  status: o,
+  sender: s,
+  updatedAt: t,
+  updatedAtLabel: a,
+  dueAt: p,
+  dueAtLabel: x,
   trashedAt: c,
-  trashedAtLabel: p,
-  archivedAt: x,
-  archivedAtLabel: z,
-  seenBy: f,
-  attachmentsCount: h = 0
-}) => /* @__PURE__ */ M(a, { size: "xs", children: [
-  m && /* @__PURE__ */ e(l, { loading: i, size: "xs", ...m }),
-  s && /* @__PURE__ */ e(r, { loading: i, datetime: s, size: "xs", children: n }),
-  o && t && /* @__PURE__ */ e(r, { loading: i, datetime: o, size: "xs", icon: "clock-dashed", children: t }),
-  h > 0 && /* @__PURE__ */ e(D, { loading: i, size: "xs", icon: "paperclip", children: h }),
-  c && p && /* @__PURE__ */ e(r, { loading: i, datetime: c, size: "xs", icon: "trash", children: p }) || x && z && /* @__PURE__ */ e(r, { loading: i, datetime: x, size: "xs", icon: "archive", children: z }) || !i && f && /* @__PURE__ */ e(j, { size: "xs", ...f })
+  trashedAtLabel: z,
+  archivedAt: f,
+  archivedAtLabel: h,
+  seenBy: D,
+  touchedBy: M,
+  attachmentsCount: j = 0,
+  attachmentsLabel: n,
+  transmissionsLabel: S,
+  onClick: e
+}) => /* @__PURE__ */ T(q, { className: I, size: "xs", children: [
+  o && /* @__PURE__ */ r(y, { loading: i, size: "xs", ...o }),
+  t && /* @__PURE__ */ T(m, { loading: i, datetime: t, size: "xs", children: [
+    /* @__PURE__ */ r("strong", { children: s && s.name + ", " }),
+    a
+  ] }),
+  p && x && /* @__PURE__ */ r(m, { loading: i, datetime: p, size: "xs", icon: "clock-dashed", children: x }),
+  (n || j > 0) && /* @__PURE__ */ r(B, { as: e && "button", onClick: e, loading: i, size: "xs", icon: "paperclip", children: n || j }),
+  S && /* @__PURE__ */ r(B, { as: e && "button", onClick: e, loading: i, size: "xs", icon: "files", children: S }),
+  c && z && /* @__PURE__ */ r(m, { loading: i, datetime: c, size: "xs", icon: "trash", children: z }) || f && h && /* @__PURE__ */ r(m, { loading: i, datetime: f, size: "xs", icon: "archive", children: h }) || !i && D && /* @__PURE__ */ r(w, { size: "xs", ...D }),
+  M && /* @__PURE__ */ r(E, { ...M, loading: i, size: "xs" })
 ] });
 export {
-  E as DialogMetadata
+  W as DialogMetadata
 };

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ loading, status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, attachmentsCount, }: import('./DialogMetadata').DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, touchedBy, attachmentsCount, attachmentsLabel, transmissionsLabel, onClick, }: import('./DialogMetadata').DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/components/Dialog/DialogMetadata.stories.js

@@ -1,6 +1,6 @@
 import { DialogMetadata as e } from "./DialogMetadata.js";
 const a = {
-  title: "Dialog/Sections/DialogMetadata",
+  title: "Dialog/DialogMetadata",
   component: e,
   tags: ["autodocs"],
   parameters: {},
@@ -45,7 +45,7 @@ const a = {
       label: "Sett av 4"
     }
   }
-}, o = {
+}, u = {
   args: {
     status: {
       value: "completed",
@@ -59,7 +59,7 @@ const a = {
   }
 };
 export {
-  o as CompletedSeenByEndUser,
+  u as CompletedSeenByEndUser,
   s as Draft,
   l as InProgressSeenByOthers,
   r as RequiresAttentionAndDueDate,

package/dist/components/Dialog/DialogSection.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface DialogSectionProps {
+    title?: string;
+    children?: ReactNode;
+}
+export declare const DialogSection: ({ title, children }: DialogSectionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogSection.js

@@ -0,0 +1,15 @@
+import { jsxs as o, jsx as m } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Heading as t } from "../Typography/Heading.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { Section as n } from "../Page/Section.js";
+const l = ({ title: r, children: i }) => i ? /* @__PURE__ */ o(n, { spacing: "md", margin: "md", children: [
+  r && /* @__PURE__ */ m(t, { size: "sm", children: r }),
+  i
+] }) : null;
+export {
+  l as DialogSection
+};

package/dist/components/Dialog/DialogSeenBy.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
-import { MetaItem as c } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
+import { MetaItem as c } from "../Meta/MetaItem.js";
 import "../Icon/SvgIcon.js";
 const x = ({
   size: e = "xs",