@altinn/altinn-components 0.6.12 → 0.7.1

package/dist/components/Dialog/DialogLabel.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { MetaItem as e } from "../Meta/MetaItem.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+const u = ({ size: r = "xs", variant: n, label: t, children: a }) => {
+  switch (n) {
+    case "trashed":
+      return /* @__PURE__ */ o(e, { size: r, icon: "trash", variant: "rounded", children: a || t });
+    case "archived":
+      return /* @__PURE__ */ o(e, { size: r, icon: "archive", variant: "rounded", children: a || t });
+    default:
+      return /* @__PURE__ */ o(e, { size: r, variant: "rounded", children: a || t });
+  }
+};
+export {
+  u as DialogLabel
+};

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

@@ -1,11 +1,13 @@
 import { ElementType } from 'react';
+import { ListItemBaseProps } from '../List';
 import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
+import { DialogSeenByProps } from './DialogSeenBy';
 import { DialogSelectProps } from './DialogSelect';
 import { DialogStatusProps } from './DialogStatus';
 import { DialogTouchedByActor } from './DialogTouchedBy';
-import { DialogListItemSize, DialogListItemVariant } from './DialogListItemBase';
-import { DialogSeenByProps } from './DialogSeenBy';
-export type DialogListItemProps = {
+export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogListItemVariant = 'neutral' | 'draft' | 'trashed' | 'archived';
+export interface DialogListItemProps extends ListItemBaseProps {
     /** Dialog title */
     title: string;
     /** Render as */
@@ -38,6 +40,16 @@ export type DialogListItemProps = {
     dueAt?: string;
     /** Dialog due date label */
     dueAtLabel?: string;
+    /** Archived date time */
+    archivedAt?: string;
+    /** Archived label */
+    archivedAtLabel?: string;
+    /** Deleted at date time */
+    trashedAt?: string;
+    /** Deleted label */
+    trashedAtLabel?: string;
+    /** Custom label */
+    label?: string;
     /** Dialog has been seen */
     seen?: boolean;
     /** Dialog is seen by the user */
@@ -50,10 +62,10 @@ export type DialogListItemProps = {
     onClick?: () => void;
     /** Group id */
     groupId?: string;
-};
+}
 /**
  * Represents a dialog in list view, displaying information such as the title,
  * summary, sender, and receiver.
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  */
-export declare const DialogListItem: ({ as, size, variant, href, onClick, select, selected, status, sender, recipient, grouped, updatedAt, updatedAtLabel, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, summary, }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogListItem: ({ size, variant, select, status, sender, recipient, grouped, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItem.js

@@ -1,73 +1,89 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { DialogHeadings as k } from "./DialogHeadings.js";
-import { DialogTitle as j } from "./DialogTitle.js";
-import { DialogTouchedBy as I } from "./DialogTouchedBy.js";
-import { DialogListItemBase as L } from "./DialogListItemBase.js";
-import { DialogBorder as T } from "./DialogBorder.js";
-import { DialogMetadata as H } from "./DialogMetadata.js";
-import '../../assets/DialogListItem.css';const M = "_border_6r71i_1", q = "_header_6r71i_10", w = "_summary_6r71i_16", z = "_footer_6r71i_30", A = "_touchedBy_6r71i_34", C = "_link_6r71i_58", e = {
-  border: M,
-  header: q,
-  summary: w,
-  footer: z,
-  touchedBy: A,
-  link: C
-}, Q = ({
-  as: m = "a",
-  size: r = "lg",
-  variant: t = "neutral",
-  href: l,
-  onClick: d,
-  select: c,
-  selected: n,
-  status: _,
-  sender: h,
-  recipient: f,
-  grouped: u,
-  updatedAt: g,
-  updatedAtLabel: p,
-  dueAt: y,
-  dueAtLabel: D,
-  seen: s = !1,
-  seenBy: B,
-  touchedBy: i,
-  attachmentsCount: x,
-  title: N,
-  summary: b
-}) => /* @__PURE__ */ o(
-  L,
-  {
-    as: m,
-    size: r,
-    href: l,
-    select: c,
-    selected: n,
-    variant: t,
-    onClick: d,
-    children: /* @__PURE__ */ a(T, { className: e.border, size: r, seen: s, children: [
-      /* @__PURE__ */ a("header", { "data-size": r, className: e.header, children: [
-        /* @__PURE__ */ o(j, { size: r, seen: s, variant: t, children: N }),
-        /* @__PURE__ */ o(k, { size: "xs", grouped: u, sender: h, recipient: f })
-      ] }),
-      /* @__PURE__ */ o("p", { "data-size": r, className: e.summary, children: b }),
-      /* @__PURE__ */ a("footer", { "data-size": r, className: e.footer, children: [
-        /* @__PURE__ */ o(
-          H,
-          {
-            status: _,
-            updatedAt: g,
-            updatedAtLabel: p,
-            dueAt: y,
-            dueAtLabel: D,
-            seenBy: B,
-            attachmentsCount: x
-          }
-        ),
-        i && /* @__PURE__ */ o(I, { size: "xs", touchedBy: i, className: e.touchedBy })
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { ListItemBase as p } from "../List/ListItemBase.js";
+import "../../index-L8X2o7IH.js";
+import { ListItemLabel as M } from "../List/ListItemLabel.js";
+import "react";
+import "../Icon/SvgIcon.js";
+import { DialogBorder as h } from "./DialogBorder.js";
+import { DialogMetadata as g } from "./DialogMetadata.js";
+import { DialogHeaderBase as S } from "./DialogHeaderBase.js";
+import { DialogHeadings as V } from "./DialogHeadings.js";
+import { DialogTitle as k } from "./DialogTitle.js";
+import { DialogTouchedBy as q } from "./DialogTouchedBy.js";
+import { DialogSelect as w } from "./DialogSelect.js";
+import "../RootProvider/RootProvider.js";
+import '../../assets/DialogListItem.css';const C = "_item_vo44o_1", E = "_select_vo44o_20", F = "_summary_vo44o_27", G = "_footer_vo44o_48", J = "_touchedBy_vo44o_56", K = "_border_vo44o_65", t = {
+  item: C,
+  select: E,
+  summary: F,
+  footer: G,
+  touchedBy: J,
+  border: K
+}, to = ({
+  size: o = "lg",
+  variant: u = "neutral",
+  select: a,
+  status: y,
+  sender: D,
+  recipient: N,
+  grouped: v,
+  updatedAt: i,
+  updatedAtLabel: s,
+  archivedAt: c,
+  archivedAtLabel: B,
+  trashedAt: l,
+  trashedAtLabel: b,
+  label: x,
+  dueAt: I,
+  dueAtLabel: L,
+  seen: e = !1,
+  seenBy: j,
+  touchedBy: n,
+  attachmentsCount: H,
+  title: d,
+  summary: _,
+  ...f
+}) => {
+  const T = l ? "trashed" : c ? "archived" : u;
+  return o === "xs" || o === "sm" ? /* @__PURE__ */ r(p, { ...f, size: o, className: t.item, children: /* @__PURE__ */ m(h, { className: t.border, size: o, seen: e, children: [
+    /* @__PURE__ */ r(M, { size: o, title: d, description: _ }),
+    /* @__PURE__ */ r(g, { updatedAt: i, updatedAtLabel: s })
+  ] }) }) : /* @__PURE__ */ r(
+    p,
+    {
+      ...f,
+      size: o,
+      className: t.item,
+      controls: a && /* @__PURE__ */ r(w, { className: t.select, ...a }),
+      children: /* @__PURE__ */ m(h, { className: t.border, size: o, seen: e, children: [
+        /* @__PURE__ */ m(S, { size: o, children: [
+          /* @__PURE__ */ r(k, { size: o, variant: T, label: x, seen: e, children: d }),
+          /* @__PURE__ */ r(V, { size: o, grouped: v, sender: D, recipient: N })
+        ] }),
+        /* @__PURE__ */ r("p", { "data-size": o, className: t.summary, children: _ }),
+        /* @__PURE__ */ m("footer", { "data-size": o, className: t.footer, children: [
+          /* @__PURE__ */ r(
+            g,
+            {
+              status: y,
+              updatedAt: i,
+              updatedAtLabel: s,
+              archivedAt: c,
+              archivedAtLabel: B,
+              trashedAt: l,
+              trashedAtLabel: b,
+              dueAt: I,
+              dueAtLabel: L,
+              seenBy: j,
+              attachmentsCount: H
+            }
+          ),
+          n && /* @__PURE__ */ r(q, { size: "xs", touchedBy: n, className: t.touchedBy })
+        ] })
       ] })
-    ] })
-  }
-);
+    }
+  );
+};
 export {
-  Q as DialogListItem
+  to as DialogListItem
 };

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

@@ -1,10 +1,11 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Fragment as u, useState as y } from "react";
-import { DialogListItem as r } from "./DialogListItem.js";
+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 { DialogListItem as n } from "./DialogListItem.js";
 import { DialogStatusEnum as g } from "./DialogStatus.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { MetaItem as i } from "../Meta/MetaItem.js";
+import { MetaItem as r } from "../Meta/MetaItem.js";
 import "../RootProvider/RootProvider.js";
 import { ListBase as s } from "../List/ListBase.js";
 const f = (t) => {
@@ -22,18 +23,24 @@ const f = (t) => {
     default:
       return "";
   }
-}, d = ["lg", "md", "sm", "xs"];
-var p;
-const o = (p = Object.keys(g)) == null ? void 0 : p.map((t) => ({
+}, o = ["lg", "md", "sm", "xs"];
+var b;
+const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
   value: t,
   label: f(t)
-})), I = {
+})), j = {
   title: "Dialog/DialogListItem",
-  component: r,
+  component: n,
   tags: ["autodocs"],
-  parameters: {
-    theme: "company"
-  },
+  decorators: [
+    y({
+      themes: {
+        company: "company",
+        person: "person"
+      },
+      defaultTheme: "company"
+    })
+  ],
   argTypes: {},
   args: {
     title: "Title",
@@ -50,12 +57,53 @@ const o = (p = Object.keys(g)) == null ? void 0 : p.map((t) => ({
     updatedAtLabel: "25. november 2024 kl 15.30",
     status: {}
   }
-}, O = (t) => /* @__PURE__ */ e(s, { children: o == null ? void 0 : o.map((a) => /* @__PURE__ */ l(u, { children: [
-  /* @__PURE__ */ e(r, { ...t, status: a }),
-  /* @__PURE__ */ e(i, { children: a == null ? void 0 : a.value })
-] }, a == null ? void 0 : a.value)) }), j = (t) => /* @__PURE__ */ l(s, { children: [
+}, C = (t) => /* @__PURE__ */ e(s, { children: c == null ? void 0 : c.map((l) => /* @__PURE__ */ i(u, { children: [
+  /* @__PURE__ */ e(n, { ...t, status: l }),
+  /* @__PURE__ */ e(r, { children: l == null ? void 0 : l.value })
+] }, l == null ? void 0 : l.value)) }), E = (t) => /* @__PURE__ */ i(s, { 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(
-    r,
+    n,
+    {
+      ...t,
+      seen: !0,
+      seenBy: { seenByEndUser: !0, label: "Sett av deg" },
+      status: { value: "requires-attention", label: "Krever handling" }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Dialog has been seen" }),
+  /* @__PURE__ */ e(
+    n,
+    {
+      ...t,
+      size: "md",
+      label: "Arkivert",
+      status: { value: "completed", label: "Avsluttet" },
+      seen: !0,
+      seenBy: { seenByEndUser: !0, label: "Sett av deg" },
+      archivedAt: "2024-11-27",
+      archivedAtLabel: "Arkivert av Kjell Olsen, 27. nov 2024"
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Dialog has been moved to archive" }),
+  /* @__PURE__ */ e(
+    n,
+    {
+      ...t,
+      size: "md",
+      label: "Papirkurv",
+      status: { value: "completed", label: "Avsluttet" },
+      seen: !0,
+      seenBy: { seenByEndUser: !0, label: "Sett av deg" },
+      trashedAt: "2024-11-27",
+      trashedAtLabel: "Slettet av Kjell Olsen, 27. nov 2024"
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Dialog has been moved to trash" })
+] }), I = (t) => /* @__PURE__ */ i(s, { children: [
+  /* @__PURE__ */ e(
+    n,
     {
       ...t,
       status: { label: "Krever handling", value: "requires-attention" },
@@ -63,57 +111,57 @@ const o = (p = Object.keys(g)) == null ? void 0 : p.map((t) => ({
       dueAtLabel: "Frist: 1. januar 2025"
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Dialog requires action wihtin a spesific due date." })
-] }), x = (t) => /* @__PURE__ */ l(s, { children: [
-  /* @__PURE__ */ e(r, { ...t, attachmentsCount: 2 }),
-  /* @__PURE__ */ e(i, { children: "Dialog has attachments." })
-] }), K = (t) => /* @__PURE__ */ l(s, { children: [
-  /* @__PURE__ */ e(r, { ...t, seen: !0, seenBy: { seenByEndUser: !0, label: "Sett av deg" } }),
-  /* @__PURE__ */ e(i, { children: "Seen by end user. Dialog is marked as seen." }),
-  /* @__PURE__ */ e(r, { ...t, seenBy: { seenByOthersCount: 4, label: "Sett av 4" } }),
-  /* @__PURE__ */ e(i, { children: "Seen by others. Dialog is not marked as seen." }),
+  /* @__PURE__ */ e(r, { children: "Dialog requires action wihtin a spesific due date." })
+] }), q = (t) => /* @__PURE__ */ i(s, { children: [
+  /* @__PURE__ */ e(n, { ...t, attachmentsCount: 2 }),
+  /* @__PURE__ */ e(r, { children: "Dialog has attachments." })
+] }), T = (t) => /* @__PURE__ */ i(s, { 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" } }),
+  /* @__PURE__ */ e(r, { children: "Seen by others. Dialog is not marked as seen." }),
   /* @__PURE__ */ e(
-    r,
+    n,
     {
       ...t,
       seen: !0,
       seenBy: { seenByOthersCount: 4, seenByEndUser: !0, label: "Sett av deg + 4" }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Seen by end user and others. Dialog is marked as seen." })
-] }), q = (t) => /* @__PURE__ */ l(s, { children: [
-  /* @__PURE__ */ e(r, { ...t, touchedBy: [{ name: "Kari Nordmann" }] }),
-  /* @__PURE__ */ e(i, { children: "Dialog has been touched by a single actor." }),
-  /* @__PURE__ */ e(r, { ...t, touchedBy: [{ name: "Kari Nordmann" }, { name: "Ola Nordmann" }] }),
-  /* @__PURE__ */ e(i, { children: "Dialog has been touched by two actors." }),
+  /* @__PURE__ */ e(r, { children: "Seen by end user and others. Dialog is marked as seen." })
+] }), w = (t) => /* @__PURE__ */ i(s, { 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" }] }),
+  /* @__PURE__ */ e(r, { children: "Dialog has been touched by two actors." }),
   /* @__PURE__ */ e(
-    r,
+    n,
     {
       ...t,
       touchedBy: [{ name: "Kari Nordmann" }, { name: "Ola Nordmann" }, { name: "Per Nordmann" }]
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Dialog has been touched by a multiple actors." })
-] }), E = (t) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ e(r, { children: "Dialog has been touched by a multiple actors." })
+] }), x = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(
-    r,
+    n,
     {
       ...t,
       title: "Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit."
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Long title" }),
+  /* @__PURE__ */ e(r, { children: "Long title" }),
   /* @__PURE__ */ e(
-    r,
+    n,
     {
       ...t,
       summary: "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\\n\\nCras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit."
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Long summary" })
+  /* @__PURE__ */ e(r, { children: "Long summary" })
 ] }), M = (t) => {
   var h;
-  const [a, b] = y({
+  const [l, p] = v({
     1: {
       id: "1",
       title: "Item 1",
@@ -129,43 +177,44 @@ const o = (p = Object.keys(g)) == null ? void 0 : p.map((t) => ({
       title: "Item 2",
       selected: !1
     }
-  }), m = ({ id: n }) => {
-    b((c) => ({
-      ...c,
-      [n]: {
-        ...c[n],
-        selected: !c[n].selected
+  }), m = ({ id: a }) => {
+    p((d) => ({
+      ...d,
+      [a]: {
+        ...d[a],
+        selected: !d[a].selected
       }
     }));
   };
-  return /* @__PURE__ */ e(s, { children: (h = Object.values(a)) == null ? void 0 : h.map((n) => /* @__PURE__ */ l(u, { children: [
+  return /* @__PURE__ */ e(s, { children: (h = Object.values(l)) == null ? void 0 : h.map((a) => /* @__PURE__ */ i(u, { children: [
     /* @__PURE__ */ e(
-      r,
+      n,
       {
         ...t,
-        title: n.title,
-        onClick: n.selected ? () => m(n) : null,
-        selected: n.selected,
-        select: { checked: n == null ? void 0 : n.selected, onChange: () => m(n) }
+        title: a.title,
+        onClick: a.selected ? () => m(a) : null,
+        selected: a.selected,
+        select: { checked: a == null ? void 0 : a.selected, onChange: () => m(a) }
       }
     ),
-    /* @__PURE__ */ l(i, { children: [
+    /* @__PURE__ */ i(r, { children: [
       "selected:",
-      n.selected ? "true" : "false"
+      a.selected ? "true" : "false"
     ] })
-  ] }, n == null ? void 0 : n.id)) });
-}, T = (t) => /* @__PURE__ */ e(s, { children: d == null ? void 0 : d.map((a) => /* @__PURE__ */ l(u, { children: [
-  /* @__PURE__ */ e(r, { ...t, size: a }),
-  /* @__PURE__ */ e(i, { children: a })
-] }, a)) });
+  ] }, a == null ? void 0 : a.id)) });
+}, P = (t) => /* @__PURE__ */ e(s, { children: o == null ? void 0 : o.map((l) => /* @__PURE__ */ i(u, { children: [
+  /* @__PURE__ */ e(n, { ...t, size: l, status: { value: "in-progress", label: "Under arbeid" } }),
+  /* @__PURE__ */ e(r, { children: l })
+] }, l)) });
 export {
-  x as Attachments,
-  j as DueAt,
-  K as SeenBy,
+  q as Attachments,
+  I as DueAt,
+  T as SeenBy,
   M as Selectable,
-  T as Sizes,
-  O as Statuses,
-  E as TextLength,
-  q as TouchedBy,
-  I as default
+  P as Sizes,
+  C as Statuses,
+  x as TextLength,
+  w as TouchedBy,
+  E as Variants,
+  j as default
 };

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

@@ -11,6 +11,14 @@ export type DialogMetadataProps = {
     dueAt?: string;
     /** Due date label */
     dueAtLabel?: string;
+    /** Archived date time */
+    archivedAt?: string;
+    /** Archived label */
+    archivedAtLabel?: string;
+    /** Deleted at date time */
+    trashedAt?: string;
+    /** Deleted label */
+    trashedAtLabel?: string;
     /** Who have seen the dialog after latest update */
     seenBy?: DialogSeenByProps;
     /** Number of attachments */
@@ -19,4 +27,4 @@ export type DialogMetadataProps = {
 /**
  * Metadata for a dialog in list view.
  */
-export declare const DialogMetadata: ({ status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, seenBy, attachmentsCount, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogMetadata: ({ status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, attachmentsCount, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogMetadata.js

@@ -1,26 +1,30 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { MetaBase as x } from "../Meta/MetaBase.js";
-import { MetaItem as l } from "../Meta/MetaItem.js";
+import { jsxs as z, jsx as i } from "react/jsx-runtime";
+import { MetaBase as f } from "../Meta/MetaBase.js";
+import { MetaItem as d } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { MetaTimestamp as p } from "../Meta/MetaTimestamp.js";
-import { DialogSeenBy as f } from "./DialogSeenBy.js";
-import { DialogStatus as n } from "./DialogStatus.js";
-const k = ({
-  status: r,
-  updatedAt: o,
-  updatedAtLabel: a,
-  dueAt: e,
-  dueAtLabel: m,
-  seenBy: s,
-  attachmentsCount: t = 0
-}) => /* @__PURE__ */ c(x, { size: "xs", children: [
-  r && /* @__PURE__ */ i(n, { size: "xs", ...r }),
-  o && /* @__PURE__ */ i(p, { datetime: o, size: "xs", children: a }),
-  e && m && /* @__PURE__ */ i(p, { datetime: e, size: "xs", icon: "clock-dashed", children: m }),
-  s && /* @__PURE__ */ i(f, { size: "xs", ...s }),
-  t > 0 && /* @__PURE__ */ i(l, { size: "xs", icon: "paperclip", children: t })
+import { MetaTimestamp as e } from "../Meta/MetaTimestamp.js";
+import { DialogSeenBy as h } from "./DialogSeenBy.js";
+import { DialogStatus as M } from "./DialogStatus.js";
+const q = ({
+  status: o,
+  updatedAt: r,
+  updatedAtLabel: l,
+  dueAt: m,
+  dueAtLabel: s,
+  trashedAt: t,
+  trashedAtLabel: c,
+  archivedAt: p,
+  archivedAtLabel: x,
+  seenBy: n,
+  attachmentsCount: a = 0
+}) => /* @__PURE__ */ z(f, { size: "xs", children: [
+  o && /* @__PURE__ */ i(M, { size: "xs", ...o }),
+  r && /* @__PURE__ */ i(e, { datetime: r, size: "xs", children: l }),
+  m && s && /* @__PURE__ */ i(e, { datetime: m, size: "xs", icon: "clock-dashed", children: s }),
+  a > 0 && /* @__PURE__ */ i(d, { size: "xs", icon: "paperclip", children: a }),
+  t && c && /* @__PURE__ */ i(e, { datetime: t, size: "xs", icon: "trash", children: c }) || p && x && /* @__PURE__ */ i(e, { datetime: p, size: "xs", icon: "archive", children: x }) || n && /* @__PURE__ */ i(h, { size: "xs", ...n })
 ] });
 export {
-  k as DialogMetadata
+  q as DialogMetadata
 };

package/dist/components/Dialog/DialogNav.js

@@ -1,32 +1,32 @@
 "use client";
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+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 { ContextMenu as l } from "../ContextMenu/ContextMenu.js";
 import { MetaTimestamp as p } from "../Meta/MetaTimestamp.js";
-import { DialogStatus as v } from "./DialogStatus.js";
-import { DialogTouchedBy as d } from "./DialogTouchedBy.js";
-import '../../assets/DialogNav.css';const f = "_nav_678a5_1", x = "_action_678a5_8", m = {
+import { DialogStatus as d } from "./DialogStatus.js";
+import { DialogTouchedBy as v } from "./DialogTouchedBy.js";
+import '../../assets/DialogNav.css';const f = "_nav_678a5_1", x = "_action_678a5_8", t = {
   nav: f,
   action: x
 }, M = ({
-  backButton: r = {
+  backButton: i = {
     as: "a",
     label: "Back"
   },
-  status: i,
-  dueAt: a,
+  status: a,
+  dueAt: r,
   dueAtLabel: e,
-  touchedBy: s,
-  menu: n
-}) => /* @__PURE__ */ t("nav", { className: m.nav, children: [
-  /* @__PURE__ */ o(c, { ...r, variant: "text", color: "secondary", icon: "arrow-left", reverse: !0, children: (r == null ? void 0 : r.label) || "Back" }),
-  /* @__PURE__ */ t("div", { className: m.action, children: [
-    a && e && /* @__PURE__ */ o(p, { datetime: a, icon: "clock-dashed", size: "xs", children: e }),
-    i && /* @__PURE__ */ o(v, { ...i }),
-    s && /* @__PURE__ */ o(d, { touchedBy: s }),
-    n && /* @__PURE__ */ o(l, { ...n, size: "md" })
+  touchedBy: n,
+  menu: s
+}) => /* @__PURE__ */ m("nav", { className: t.nav, children: [
+  /* @__PURE__ */ o(c, { ...i, variant: "text", color: "secondary", icon: "arrow-left", children: (i == null ? void 0 : i.label) || "Back" }),
+  /* @__PURE__ */ m("div", { className: t.action, children: [
+    r && e && /* @__PURE__ */ o(p, { datetime: r, icon: "clock-dashed", size: "xs", children: e }),
+    a && /* @__PURE__ */ o(d, { ...a }),
+    n && /* @__PURE__ */ o(v, { touchedBy: n }),
+    s && /* @__PURE__ */ o(l, { ...s, size: "md" })
   ] })
 ] });
 export {

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

@@ -1,20 +1,18 @@
 import { ReactNode } from 'react';
-import { IconName } from '../Icon';
-import { DialogListItemVariant } from './DialogListItemBase';
-export type DialogTitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import { DialogSize, DialogVariant } from './DialogBase';
 export type DialogTitleProps = {
-    /** Variant */
-    variant: DialogListItemVariant;
     /** Size */
-    size?: DialogTitleSize;
+    size?: DialogSize;
+    /** Variant */
+    variant?: DialogVariant;
+    /** Label */
+    label?: string;
     /** Variant */
     seen?: boolean;
-    /** Display an icon next to title */
-    icon?: IconName;
     /** Dialog title */
     children?: ReactNode;
 };
 /**
  * Dialog title
  */
-export declare const DialogTitle: ({ size, seen, variant, icon, children }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: ({ size, seen, variant, label, children }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;