@altinn/altinn-components 0.7.5 → 0.8.1

package/dist/components/Dialog/DialogActivityLog.js

@@ -2,7 +2,12 @@ import { jsx as r } from "react/jsx-runtime";
 import { MetaItem as c } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-const n = ({ size: o = "xs", label: t = "Activity log", ...i }) => /* @__PURE__ */ r(c, { ...i, size: o, icon: "clock-dashed", children: t });
+const s = ({
+  size: o = "xs",
+  label: t = "Activity log",
+  onClick: m,
+  ...i
+}) => /* @__PURE__ */ r(c, { ...i, size: o, icon: "clock-dashed", children: t });
 export {
-  n as DialogActivityLog
+  s as DialogActivityLog
 };

package/dist/components/Dialog/DialogGroup.js

@@ -1,18 +1,18 @@
 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 { Button as t } from "../Button/Button.js";
+import { Button as e } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as e } from "../Typography/Heading.js";
 import { ListBase as n } from "../List/ListBase.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import { SectionBase as p } from "../Page/SectionBase.js";
 import { SectionHeader as a } from "../Page/SectionHeader.js";
 const k = ({ title: i, children: m }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
   i && /* @__PURE__ */ o(a, { padding: !0, margin: !0, children: [
-    /* @__PURE__ */ r(e, { children: i }),
-    /* @__PURE__ */ r(t, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
+    /* @__PURE__ */ r(t, { children: i }),
+    /* @__PURE__ */ r(e, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
   ] }),
   /* @__PURE__ */ r(n, { spacing: "md", children: m })
 ] });

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

@@ -1,6 +1,6 @@
 import { DialogHeadings as e } from "./DialogHeadings.js";
-const a = {
-  title: "Dialog/DialogHeadings",
+const o = {
+  title: "Dialog/Sections/DialogHeadings",
   component: e,
   tags: ["autodocs"],
   parameters: {},
@@ -13,18 +13,18 @@ const a = {
       name: "Recipient"
     }
   }
-}, o = {}, r = {
+}, a = {}, n = {
   args: {
     grouped: !0
   }
-}, n = {
+}, r = {
   args: {
     grouped: !0
   }
 };
 export {
-  r as Company,
-  o as Default,
-  n as Grouped,
-  a as default
+  n as Company,
+  a as Default,
+  r as Grouped,
+  o as default
 };

package/dist/components/Dialog/DialogHistory.js

@@ -1,10 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
 import { HistoryList as t } from "../History/HistoryList.js";
-import "../../index-L8X2o7IH.js";
 import "react";
+import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { DialogSectionBase as m } from "./DialogSectionBase.js";
-const a = ({ title: i = "History", items: r }) => r ? /* @__PURE__ */ o(m, { title: i, children: /* @__PURE__ */ o(t, { items: r }) }) : null;
+import "../RootProvider/RootProvider.js";
+import "../../Autocomplete-Cb9fQrzy.js";
+const u = ({ title: i = "History", items: r }) => r ? /* @__PURE__ */ o(m, { title: i, children: /* @__PURE__ */ o(t, { items: r }) }) : null;
 export {
-  a as DialogHistory
+  u as DialogHistory
 };

package/dist/components/Dialog/DialogList.js

@@ -4,7 +4,7 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import { useMenu as f } from "../../hooks/useMenu.js";
-import { D as l } from "../../Autocomplete-hEFuiN2u.js";
+import { D as l } from "../../Autocomplete-Cb9fQrzy.js";
 import { SectionBase as y } from "../Page/SectionBase.js";
 import { DialogGroup as d } from "./DialogGroup.js";
 const P = ({ items: e, groups: m = {} }) => {

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

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { ListItemBaseProps } from '../List';
+import { ListItemColor } from '../List';
 import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
 import { DialogSeenByProps } from './DialogSeenBy';
 import { DialogSelectProps } from './DialogSelect';
@@ -7,11 +7,13 @@ import { DialogStatusProps } from './DialogStatus';
 import { DialogTouchedByActor } from './DialogTouchedBy';
 export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DialogListItemVariant = 'neutral' | 'draft' | 'trashed' | 'archived';
-export interface DialogListItemProps extends ListItemBaseProps {
+export interface DialogListItemProps {
     /** Dialog title */
     title: string;
     /** Dialog description */
     description?: string;
+    /** Dialog summary (will override description) */
+    summary?: string;
     /** Dialog is loading */
     loading?: boolean;
     /** Render as */
@@ -22,6 +24,8 @@ export interface DialogListItemProps extends ListItemBaseProps {
     variant?: DialogListItemVariant;
     /** Link */
     href?: string;
+    /** OnClick handler */
+    onClick?: () => void;
     /** Select: Use to support batch operations */
     select?: DialogSelectProps;
     /** Dialog is selected */
@@ -50,8 +54,12 @@ export interface DialogListItemProps extends ListItemBaseProps {
     trashedAt?: string;
     /** Deleted label */
     trashedAtLabel?: string;
+    /** Tab index */
+    tabIndex?: number;
     /** Custom label */
     label?: string;
+    /** *Custom background color */
+    color?: ListItemColor;
     /** Dialog has been seen */
     seen?: boolean;
     /** Dialog is seen by the user */
@@ -60,8 +68,6 @@ export interface DialogListItemProps extends ListItemBaseProps {
     touchedBy?: DialogTouchedByActor[];
     /** Number of attachments */
     attachmentsCount?: number;
-    /** OnClick handler */
-    onClick?: () => void;
     /** Group id */
     groupId?: string;
 }
@@ -70,4 +76,4 @@ export interface DialogListItemProps extends ListItemBaseProps {
  * 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, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+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;

package/dist/components/Dialog/DialogListItem.js

@@ -1,19 +1,18 @@
 import "react/jsx-runtime";
-import "../List/ListItemBase.js";
 import "../../index-L8X2o7IH.js";
-import "react";
 import "../Icon/SvgIcon.js";
-import "../List/ListItemLabel.js";
+import "react";
 import "./DialogBorder.js";
 import "./DialogMetadata.js";
 import "./DialogHeaderBase.js";
 import "./DialogHeadings.js";
 import "./DialogTitle.js";
+import "../RootProvider/RootProvider.js";
 import "./DialogTouchedBy.js";
-import { D as c } from "../../Autocomplete-hEFuiN2u.js";
+import { D as b } from "../../Autocomplete-Cb9fQrzy.js";
 import "./DialogSelect.js";
-import "../RootProvider/RootProvider.js";
+import "../List/ListItemLabel.js";
 import "./DialogDescription.js";
 export {
-  c as DialogListItem
+  b as DialogListItem
 };

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

@@ -1,7 +1,7 @@
 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 { D as n } from "../../Autocomplete-hEFuiN2u.js";
+import { D as n } from "../../Autocomplete-Cb9fQrzy.js";
 import { DialogStatusEnum as g } from "./DialogStatus.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";

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

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

package/dist/components/Dialog/DialogNav.js

@@ -3,7 +3,7 @@ import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { Button as c } from "../Button/Button.js";
-import { C as l } from "../../Autocomplete-hEFuiN2u.js";
+import { C as l } from "../../Autocomplete-Cb9fQrzy.js";
 import { MetaTimestamp as p } from "../Meta/MetaTimestamp.js";
 import { DialogStatus as d } from "./DialogStatus.js";
 import { DialogTouchedBy as v } from "./DialogTouchedBy.js";

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

@@ -1,6 +1,6 @@
 import { DialogNav as t } from "./DialogNav.js";
 const e = {
-  title: "Dialog/DialogNav",
+  title: "Dialog/Sections/DialogNav",
   component: t,
   tags: ["autodocs"],
   parameters: {},

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

@@ -16,4 +16,4 @@ export interface DialogSeenByProps {
 /**
  * Dialog seen by. Used to indicate if the dialog has been seen by end user or other users.
  */
-export declare const DialogSeenBy: ({ size, label, seenByEndUser, seenByOthersCount, ...rest }: DialogSeenByProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogSeenBy: ({ size, label, seenByEndUser, seenByOthersCount, onClick, ...rest }: DialogSeenByProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogSeenBy.js

@@ -1,17 +1,18 @@
-import { jsx as i } from "react/jsx-runtime";
-import { MetaItem as m } from "../Meta/MetaItem.js";
+import { jsx as s } from "react/jsx-runtime";
+import { MetaItem as c } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-const f = ({
+const x = ({
   size: e = "xs",
   label: o = "Seen by label",
   seenByEndUser: n = !1,
   seenByOthersCount: t = 0,
+  onClick: m,
   ...r
 }) => {
-  const s = n || t > 0 ? "eye" : "eye-closed";
-  return /* @__PURE__ */ i(m, { size: e, icon: s, ...r, children: o });
+  const i = n || t > 0 ? "eye" : "eye-closed";
+  return /* @__PURE__ */ s(c, { size: e, icon: i, ...r, children: o });
 };
 export {
-  f as DialogSeenBy
+  x as DialogSeenBy
 };

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

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { DialogSeenBy as t } from "./DialogSeenBy.js";
 const y = {
-  title: "Dialog/Atoms/DialogSeenBy",
+  title: "Dialog/Sections/DialogSeenBy",
   component: t,
   tags: ["autodocs"],
   parameters: {},
@@ -20,12 +20,12 @@ const y = {
     seenByEndUser: !0,
     seenByOthersCount: 0
   }
-}, u = {
+}, c = {
   args: {
     seenByEndUser: !0,
     seenByOthersCount: 10
   }
-}, c = ({
+}, i = ({
   seenByEndUser: n,
   seenByOthersCount: e
 }) => {
@@ -35,9 +35,9 @@ const y = {
   return /* @__PURE__ */ o(t, { seenByEndUser: n, seenByOthersCount: e, label: r });
 };
 export {
-  c as ExampleLabel,
+  i as ExampleLabel,
   B as Unseen,
   y as default,
   d as seenByEndUser,
-  u as seenByEndUserAndOthers
+  c as seenByEndUserAndOthers
 };

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

@@ -1,6 +1,6 @@
 import { DialogStatusEnum as e, DialogStatus as t } from "./DialogStatus.js";
 const s = {
-  title: "Dialog/DialogStatus",
+  title: "Dialog/Sections/DialogStatus",
   component: t,
   tags: ["autodocs"],
   parameters: {

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

@@ -1,6 +1,6 @@
 import { DialogTouchedBy as a } from "./DialogTouchedBy.js";
 const o = {
-  title: "Dialog/Atoms/DialogTouchedBy",
+  title: "Dialog/Sections/DialogTouchedBy",
   component: a,
   tags: ["autodocs"],
   parameters: {},

package/dist/components/Dialog/index.js

@@ -1,7 +1,7 @@
 import { Dialog as e } from "./Dialog.js";
 import { DialogList as a } from "./DialogList.js";
 import { DialogMetadata as l } from "./DialogMetadata.js";
-import { D as m } from "../../Autocomplete-hEFuiN2u.js";
+import { D as m } from "../../Autocomplete-Cb9fQrzy.js";
 import { DialogActions as f } from "./DialogActions.js";
 import { DialogActivityLog as x } from "./DialogActivityLog.js";
 import { DialogArticleBase as B } from "./DialogArticleBase.js";

package/dist/components/Dropdown/DrawerButton.js

@@ -5,7 +5,7 @@ import "react";
 import { ButtonBase as m } from "../Button/ButtonBase.js";
 import { ButtonLabel as n } from "../Button/ButtonLabel.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import '../../assets/DrawerButton.css';const s = "_button_19v2d_1", e = {
   button: s
 }, f = ({ label: o, children: r, onClick: i }) => /* @__PURE__ */ t(m, { variant: "solid", size: "md", className: e.button, onClick: i, children: /* @__PURE__ */ t(n, { size: "md", children: r || o }) });

package/dist/components/Dropdown/DrawerOrDropdown.js

@@ -10,7 +10,7 @@ import { DrawerHeader as f } from "./DrawerHeader.js";
 import { DrawerFooter as n } from "./DrawerFooter.js";
 import { DrawerButton as t } from "./DrawerButton.js";
 import { DrawerBody as D } from "./DrawerBody.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import '../../assets/DrawerOrDropdown.css';const _ = "_dropdown_1mzzo_1", B = "_drawer_1mzzo_5", i = {
   dropdown: _,
   drawer: B

package/dist/components/GlobalMenu/AccountButton.js

@@ -6,7 +6,7 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 const b = ({ account: e, linkText: t, onClick: l, multipleAccounts: d }) => d ? /* @__PURE__ */ r(m, { size: "lg", onClick: l, linkText: t, linkIcon: "chevron-right", as: "button", children: [
   /* @__PURE__ */ i(
     s,

package/dist/components/GlobalMenu/AccountMenu.js

@@ -4,7 +4,7 @@ import { useState as y } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import { Menu as L } from "../Menu/Menu.js";
 const M = (p) => `${p} hits`, k = ({
   accounts: p = [],

package/dist/components/GlobalMenu/BackButton.js

@@ -4,7 +4,7 @@ import "../Icon/SvgIcon.js";
 import "react";
 import { MenuItem as i } from "../Menu/MenuItem.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 const u = ({ label: t, onClick: o }) => /* @__PURE__ */ r(i, { id: "back", icon: "arrow-left", title: t, onClick: o });
 export {
   u as BackButton

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -8,7 +8,7 @@ import { AccountMenu as v } from "./AccountMenu.js";
 import { AccountButton as C } from "./AccountButton.js";
 import { BackButton as j } from "./BackButton.js";
 import { LogoutButton as A } from "./LogoutButton.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import { MenuListItem as l } from "../Menu/MenuBase.js";
 import { Menu as d } from "../Menu/Menu.js";
 import { GlobalMenuBase as m, GlobalMenuHeader as f, GlobalMenuFooter as F } from "./GlobalMenuBase.js";

package/dist/components/Header/HeaderBase.js

@@ -4,7 +4,7 @@ import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import '../../assets/HeaderBase.css';const i = "_header_5ao8r_1", n = "_backdrop_5ao8r_11", r = {
   header: i,
   backdrop: n

package/dist/components/History/HistoryItem.d.ts

@@ -1,14 +1,14 @@
-import { HistoryAttachmentsProps } from './HistoryAttachments';
-export interface CreatedByProps {
-    type?: 'company' | 'person';
-    name?: string;
-    imageUrl?: string;
-}
+import { AttachmentSectionProps } from '../Attachment';
+import { AvatarProps } from '../Avatar/';
+import { TransmissionSectionProps } from '../Transmission';
+import { TypographySize } from '../Typography';
 export interface HistoryItemProps {
-    createdBy?: CreatedByProps;
-    createdAt?: string;
+    size?: TypographySize;
+    createdBy?: AvatarProps;
+    createdAt: string;
     createdAtLabel?: string;
     summary?: string;
-    attachments?: HistoryAttachmentsProps;
+    attachments?: AttachmentSectionProps;
+    transmissions?: TransmissionSectionProps;
 }
-export declare const HistoryItem: ({ createdBy, createdAt, createdAtLabel, summary, attachments, }: HistoryItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HistoryItem: ({ createdBy, createdAt, createdAtLabel, summary, attachments, transmissions, }: HistoryItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/History/HistoryItem.js

@@ -1,44 +1,40 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { Avatar as p } from "../Avatar/Avatar.js";
+"use client";
+import { jsxs as p, jsx as r, Fragment as x } from "react/jsx-runtime";
+import { useState as u } from "react";
 import "../../index-L8X2o7IH.js";
-import "react";
-import { MetaBase as l } from "../Meta/MetaBase.js";
 import "../Icon/SvgIcon.js";
-import { MetaTimestamp as a } from "../Meta/MetaTimestamp.js";
-import { Typography as h } from "../Typography/Typography.js";
-import { HistoryAttachments as b } from "./HistoryAttachments.js";
-import { HistoryBorder as d } from "./HistoryBorder.js";
-import '../../assets/HistoryItem.css';const _ = "_item_1bsu6_1", c = "_header_1bsu6_6", f = "_border_1bsu6_10", u = "_body_1bsu6_17", m = {
-  item: _,
-  header: c,
-  border: f,
-  body: u
-}, T = ({
-  createdBy: o = {
-    type: "person"
-  },
-  createdAt: i,
-  createdAtLabel: t,
-  summary: n,
-  attachments: e
-}) => /* @__PURE__ */ s("section", { className: m.item, children: [
-  /* @__PURE__ */ r("header", { className: m.header, children: /* @__PURE__ */ r(
-    p,
-    {
-      type: o.type || "person",
-      imageUrl: o == null ? void 0 : o.imageUrl,
-      name: o.name || "Unknown name",
-      size: "sm"
-    }
-  ) }),
-  /* @__PURE__ */ r(d, { className: m.border, children: /* @__PURE__ */ s("article", { className: m.body, children: [
-    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { datetime: i, size: "xs", children: [o == null ? void 0 : o.name, t].join(", ") }) }),
-    /* @__PURE__ */ s(h, { size: "lg", children: [
-      /* @__PURE__ */ r("p", { children: n }),
-      e && /* @__PURE__ */ r(b, { ...e })
-    ] })
-  ] }) })
-] });
+import { AttachmentSection as E } from "../Attachment/AttachmentSection.js";
+import { HistoryItemBase as H } from "./HistoryItemBase.js";
+import "../RootProvider/RootProvider.js";
+import "../../Autocomplete-Cb9fQrzy.js";
+import { TransmissionSection as S } from "../Transmission/TransmissionSection.js";
+import { HistoryMetadata as b } from "./HistoryMetadata.js";
+const T = ({
+  createdBy: i,
+  createdAt: d,
+  createdAtLabel: l,
+  summary: t,
+  attachments: o,
+  transmissions: e
+}) => {
+  const m = o == null ? void 0 : o.title, c = e == null ? void 0 : e.title, [n, f] = u(!1);
+  return /* @__PURE__ */ p(H, { createdBy: i, createdAt: d, createdAtLabel: l, children: [
+    t && /* @__PURE__ */ r("p", { children: t }),
+    n ? /* @__PURE__ */ p(x, { children: [
+      o && /* @__PURE__ */ r(E, { ...o }),
+      e && /* @__PURE__ */ r(S, { ...e })
+    ] }) : /* @__PURE__ */ r(
+      b,
+      {
+        attachmentsLabel: m,
+        transmissionsLabel: c,
+        onClick: () => {
+          f(!0);
+        }
+      }
+    )
+  ] });
+};
 export {
   T as HistoryItem
 };

package/dist/components/History/HistoryItem.stories.js

@@ -14,7 +14,7 @@ const a = {
   }
 }, r = {
   args: {}
-}, l = {
+}, s = {
   args: {
     attachments: {
       title: "6 vedlegg",
@@ -42,9 +42,60 @@ const a = {
       ]
     }
   }
+}, n = {
+  args: {
+    size: "sm",
+    summary: "Leveransen er godkjent",
+    transmissions: {
+      title: "2 forsendelser",
+      items: [
+        {
+          sender: {
+            type: "company",
+            name: "Skatteetaten",
+            imageUrl: "https://cdn.sanity.io/images/z3it2oa7/production/e16a4f384d1d5ed959e1d74f0626259711d67509-88x88.png?w=96"
+          },
+          title: "Leveransen er godkjent",
+          badge: {
+            label: "Godkjent"
+          },
+          attachments: {
+            title: "1 vedlegg",
+            items: [
+              {
+                href: "#",
+                label: "Godkjent leveranse.pdf"
+              }
+            ]
+          }
+        },
+        {
+          title: "Tredjepartsopplysninger ble levert",
+          sender: {
+            type: "person",
+            name: "Hassan El Fakiri"
+          },
+          attachments: {
+            title: "2 vedlegg",
+            items: [
+              {
+                href: "#",
+                label: "1-0 Castro.pdf"
+              },
+              {
+                href: "#",
+                label: "2-0 Kornvig.pdf"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
 };
 export {
-  l as Attachments,
+  s as Attachments,
   r as Default,
+  n as Transmissions,
   a as default
 };

package/dist/components/History/HistoryItemBase.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { AvatarProps } from '../Avatar/';
+import { IconName } from '../Icon/';
+export interface HistoryItemBaseProps {
+    loading?: boolean;
+    /** Keep ISO 8601 format for consistency */
+    createdAt: string;
+    createdAtLabel?: string;
+    createdBy?: AvatarProps;
+    icon?: IconName;
+    children: ReactNode;
+}
+export declare const HistoryItemBase: ({ loading, icon, createdAt, createdAtLabel, createdBy, children, }: HistoryItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/History/HistoryItemBase.js

@@ -0,0 +1,36 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { MetaTimestamp as c } from "../Meta/MetaTimestamp.js";
+import { Typography as d } from "../Typography/Typography.js";
+import { HistoryBorder as b } from "./HistoryBorder.js";
+import { HistoryItemMedia as _ } from "./HistoryItemMedia.js";
+import '../../assets/HistoryItemBase.css';const l = "_item_17rsb_1", p = "_sidebar_17rsb_5", y = "_border_17rsb_11", h = "_content_17rsb_19", f = "_body_17rsb_24", r = {
+  item: l,
+  sidebar: p,
+  border: y,
+  content: h,
+  body: f
+}, M = ({
+  loading: o,
+  icon: i,
+  createdAt: m,
+  createdAtLabel: a,
+  createdBy: t,
+  children: n
+}) => /* @__PURE__ */ s("section", { className: r.item, children: [
+  /* @__PURE__ */ s("aside", { className: r.sidebar, children: [
+    /* @__PURE__ */ e(_, { loading: o, icon: i, avatar: t }),
+    /* @__PURE__ */ e(b, { className: r.border })
+  ] }),
+  /* @__PURE__ */ s("article", { className: r.content, children: [
+    /* @__PURE__ */ s(c, { datetime: m, size: "xs", children: [
+      t && /* @__PURE__ */ e("strong", { children: t.name + ", " }),
+      a
+    ] }),
+    /* @__PURE__ */ e(d, { size: "lg", className: r.body, children: n })
+  ] })
+] });
+export {
+  M as HistoryItemBase
+};