@altinn/altinn-components 0.6.11 → 0.7.0

package/README.md

@@ -42,23 +42,12 @@ To use the components in your application, you need to import the components you
 // example: import the Avatar component and type
 import { Avatar, type AvatarVariant } from '@altinn/components';
 ```
-and import the css file in your application once:
+and import the css file in your application once, e.g. in your css:
 ```ts
 import '@altinn/altinn-components/lib/css/global.css';
 ```
 for correct `font-family` and minimal collection of resets.
 
-Using `nextjs`?
-
-You probably need to transpile the package. Add the following to your `next.config.js`:
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ['@altinn/components'],
-}
-module.exports = nextConfig
-```
 
 ## Documentation
 The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)

package/dist/assets/AutocompleteBase.css

@@ -1 +1 @@
-._autocomplete_1ccsg_1{width:100%;border:2px solid;border-radius:.25rem;background-color:var(--theme-background-default)}._autocomplete_1ccsg_1 ul{list-style:none;padding:0;margin:0}._autocomplete_1ccsg_1 li{padding:0;margin:.5rem 0}
+._autocomplete_1yzw8_1{width:100%;border:2px solid;border-radius:.25rem;background-color:var(--theme-background-default)}._autocomplete_1yzw8_1 ul{list-style:none;padding:0;margin:0}._autocomplete_1yzw8_1 li{padding:0;margin:0}

package/dist/assets/AutocompleteGroup.css

@@ -1 +1 @@
-._group_da4mp_1+._group_da4mp_1{border-top:1px solid var(--theme-border-subtle)}
+._group_l096y_1{padding:.5rem 0}._group_l096y_1+._group_l096y_1{border-top:1px solid var(--theme-border-subtle)}._header_l096y_9{padding:.75rem}._title_l096y_13{font-size:.875rem;font-weight:400;line-height:1.25rem;color:var(--theme-text-subtle);margin:0}

package/dist/assets/DialogBorder.css

@@ -1 +1 @@
-._border_1yyjs_1{border-left:.25rem solid;border-color:var(--theme-surface-active)}._border_1yyjs_1[data-seen=true]{border-color:var(--neutral-surface-default)}
+._border_tdijc_1{border-left:.25rem solid;border-color:var(--theme-surface-active);display:flex;flex-direction:column}._border_tdijc_1[data-seen=true]{border-color:var(--neutral-surface-default)}

package/dist/assets/DialogHeaderBase.css

@@ -1 +1 @@
-._header_e6sit_1{display:flex;flex-direction:column;row-gap:1.5em;margin-bottom:1.5rem}
+._header_45ink_1{display:flex;flex-direction:column}._header_45ink_1[data-size=xl]{row-gap:1.5em;margin-bottom:1.5rem}._header_45ink_1[data-size=md],._header_45ink_1[data-size=lg]{row-gap:.5rem}

package/dist/assets/DialogHeadings.css

@@ -1 +1 @@
-._headings_1dhfw_1{display:flex;column-gap:.5em;align-items:center;font-size:16px}._headings_1dhfw_1[data-size=xs],._headings_1dhfw_1[data-size=sm]{font-size:14px}._text_1dhfw_16{display:inline-flex;color:var(--neutral-text-subtle)}._sender_1dhfw_21{font-weight:500;color:var(--neutral-text-default)}
+._headings_fci15_1{display:flex;column-gap:.5em;align-items:center}._headings_fci15_1[data-size=xs],._headings_fci15_1[data-size=sm]{font-size:12px}._headings_fci15_1[data-size=md],._headings_fci15_1[data-size=lg]{font-size:14px}._headings_fci15_1[data-size=xl]{font-size:16px}._text_fci15_21{display:inline;color:var(--neutral-text-subtle)}._sender_fci15_26{font-weight:500;color:var(--neutral-text-default)}._recipient_fci15_31{white-space:nowrap}

package/dist/assets/DialogListItem.css

@@ -1 +1 @@
-._border_6r71i_1{width:100%;display:flex;flex-direction:column;text-decoration:none;row-gap:1rem;padding-left:1rem}._header_6r71i_10{display:flex;flex-direction:column;row-gap:.25rem}._summary_6r71i_16{font-size:1rem;line-height:1.35;margin:0;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--neutral-text-subtle)}._footer_6r71i_30{width:100%}._touchedBy_6r71i_34{position:absolute;right:0;bottom:0;margin:8px}._border_6r71i_1[data-size=md]{padding-left:.75rem;row-gap:.5rem}._summary_6r71i_16[data-size=md]{font-size:1rem}._link_6r71i_58[data-size=xs],._link_6r71i_58[data-size=sm]{padding:.5rem .75rem}._summary_6r71i_16[data-size=xs],._summary_6r71i_16[data-size=sm]{font-size:.875rem}._header_6r71i_10[data-size=xs],._header_6r71i_10[data-size=sm]{row-gap:0}._footer_6r71i_30[data-size=xs]{display:none}._border_6r71i_1[data-size=xs],._border_6r71i_1[data-size=sm]{padding-left:.75rem;row-gap:.25rem}
+._item_vo44o_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_vo44o_1[aria-selected=false]:hover h2{text-decoration:underline}._item_vo44o_1[data-size=lg],._item_vo44o_1[data-size=md]{padding:1em}._item_vo44o_1[data-size=sm],._item_vo44o_1[data-size=xs]{padding:.5em .75em}._select_vo44o_20{position:absolute;top:0;right:0;margin:.375rem}._summary_vo44o_27{font-size:1rem;line-height:1.35;margin:0;font-weight:400}._summary_vo44o_27[data-size=lg]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-top:.5rem}._summary_vo44o_27[data-size=md]{display:none}._footer_vo44o_48{width:100%;margin-top:1rem;display:flex;flex-direction:column;row-gap:1rem}._touchedBy_vo44o_56{position:absolute;right:0;bottom:0;margin:8px}._border_vo44o_65[data-size=lg],._border_vo44o_65[data-size=md]{padding-left:1rem}._border_vo44o_65[data-size=xs],._border_vo44o_65[data-size=sm]{width:100%;flex-direction:row;align-items:center;padding-left:.75rem}

package/dist/assets/DialogTitle.css

@@ -1 +1 @@
-._title_ls5lr_1{font-weight:600;margin:0;padding-right:1.25rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}._title_ls5lr_1[data-size=xs],._title_ls5lr_1[data-size=sm]{font-size:1rem}._title_ls5lr_1[data-size=md]{font-size:1.125rem;line-height:1.2}._title_ls5lr_1[data-size=lg]{font-size:1.25rem;line-height:1.2}._title_ls5lr_1[data-size=xl]{font-size:1.5rem;line-height:1.25}._title_ls5lr_1[data-seen=true],._title_ls5lr_1[data-variant=archive]{font-weight:400}._title_ls5lr_1[data-variant=bin]{font-weight:400;text-decoration:line-through}
+._heading_1fk12_1{padding-right:1.25rem;display:inline-flex;column-gap:.5rem}._title_1fk12_7{font-weight:600;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}._title_1fk12_7[data-size=xs],._title_1fk12_7[data-size=sm]{font-size:1rem}._title_1fk12_7[data-size=md],._title_1fk12_7[data-size=lg]{font-size:1.25rem;line-height:1.5rem}._title_1fk12_7[data-size=xl]{font-size:1.5rem;line-height:1.25}._title_1fk12_7[data-seen=true],._title_1fk12_7[data-variant=archived]{font-weight:400}._title_1fk12_7[data-variant=trashed]{font-weight:400;text-decoration:line-through}

package/dist/assets/ListItemAction.css

@@ -1 +1 @@
-._action_1lv65_3{display:flex;align-items:center;gap:.625rem;padding:.625rem}._linkText_1lv65_10{font-size:.875rem;white-space:nowrap}._linkIcon_1lv65_15{font-size:1.5rem}
+._action_mbqkv_3{display:flex;align-items:center;margin:.625rem}

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._item_17cbe_3{border:0;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center}._item_17cbe_3[data-size=xs]{min-height:36px}._item_17cbe_3[data-size=sm]{min-height:44px}._item_17cbe_3[data-size=md]{min-height:56px}._item_17cbe_3[data-size=lg]{min-height:64px}._item_17cbe_3[data-size=xl]{min-height:72px}._content_17cbe_46{flex-grow:1;display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem}._action_17cbe_56{display:flex;align-items:center;gap:.625rem;padding:.625rem}._linkText_17cbe_63{font-size:.875rem;white-space:nowrap}._linkIcon_17cbe_68{font-size:1.5rem}._item_17cbe_3{background-color:var(--theme-background-default);box-shadow:var(--ds-shadow-xs)}._item_17cbe_3:hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_17cbe_3:hover strong{text-decoration:underline}._item_17cbe_3[data-active=true],._item_17cbe_3[data-color=accent]{background-color:var(--theme-surface-default)}._item_17cbe_3[data-color=accent]:hover{background-color:var(--theme-surface-hover)}
+._item_jxdl8_1{position:relative;width:100%;display:flex;align-items:stretch;justify-content:stretch}._item_jxdl8_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_jxdl8_1[data-size=xs]{min-height:36px}._item_jxdl8_1[data-size=sm]{min-height:44px}._item_jxdl8_1[data-size=md]{min-height:56px}._item_jxdl8_1[data-size=lg]{min-height:64px}._item_jxdl8_1[data-size=xl]{min-height:72px}._item_jxdl8_1{background-color:var(--theme-background-default)}._item_jxdl8_1:hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_jxdl8_1:hover strong,._item_jxdl8_1:hover h2{text-decoration:underline}._item_jxdl8_1[data-active=true],._item_jxdl8_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_jxdl8_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._link_jxdl8_69{padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer}._link_jxdl8_69{flex-grow:1;display:flex;align-items:center}

package/dist/assets/ListItemFooter.css

@@ -0,0 +1 @@
+._footer_r3tc7_1{display:flex;align-items:center;gap:.625rem;padding:.625rem}._linkText_r3tc7_8{font-size:.875rem;white-space:nowrap}._linkIcon_r3tc7_13{font-size:1.5rem}

package/dist/assets/ListItemHeader.css

@@ -0,0 +1 @@
+._header_70chu_1{flex-grow:1;display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem}

package/dist/assets/ListItemLabel.css

@@ -1 +1 @@
-._label_1ajdw_3{display:flex;justify-content:center}._label_1ajdw_3[data-size=xs]{align-items:center;column-gap:.25em;font-size:.875rem}._label_1ajdw_3[data-size=sm]{align-items:center;column-gap:.25rem}._label_1ajdw_3[data-size=md],._label_1ajdw_3[data-size=lg],._label_1ajdw_3[data-size=xl]{flex-direction:column}._title_1ajdw_33{font-weight:600;margin:0}._title_1ajdw_33[data-size=lg]{font-size:1.125rem}._title_1ajdw_33[data-size=xl]{font-size:1.25rem}._description_1ajdw_46{color:var(--theme-text-subtle);margin:0}._description_1ajdw_46[data-size=md],._description_1ajdw_46[data-size=lg],._description_1ajdw_46[data-size=xl]{font-size:.875em}
+._label_1aaut_3{flex-grow:1;display:flex}._label_1aaut_3[data-size=xs]{align-items:center;column-gap:.25em;font-size:.875rem}._label_1aaut_3[data-size=sm]{align-items:center;column-gap:.25rem}._label_1aaut_3[data-size=md],._label_1aaut_3[data-size=lg],._label_1aaut_3[data-size=xl]{flex-direction:column}._title_1aaut_33{font-weight:600;margin:0}._title_1aaut_33[data-size=lg]{font-size:1.125rem}._title_1aaut_33[data-size=xl]{font-size:1.25rem}._description_1aaut_46{color:var(--theme-text-subtle);margin:0}._description_1aaut_46[data-size=md],._description_1aaut_46[data-size=lg],._description_1aaut_46[data-size=xl]{font-size:.875em}

package/dist/assets/ListItemMedia.css

@@ -1 +1 @@
-._media_pfuu4_3{display:flex;align-items:center;justify-content:center;min-width:1em;height:1em}._media_pfuu4_3{font-size:1.5rem}._media_pfuu4_3[data-size=xs]{font-size:1.25rem}._media_pfuu4_3[data-size=md]{font-size:1.875rem}._media_pfuu4_3[data-size=md] ._icon_pfuu4_23{font-size:1.5rem}._media_pfuu4_3[data-size=lg]{font-size:2.25rem}._media_pfuu4_3[data-size=lg] ._icon_pfuu4_23{font-size:1.75rem}._media_pfuu4_3[data-size=xl]{font-size:2.75rem}._media_pfuu4_3[data-size=xl] ._icon_pfuu4_23{font-size:2rem}
+._media_14b0z_3{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1em;height:1em}._media_14b0z_3{font-size:1.5rem}._media_14b0z_3[data-size=xs]{font-size:1.25rem}._media_14b0z_3[data-size=md]{font-size:1.875rem}._media_14b0z_3[data-size=md] ._icon_14b0z_24{font-size:1.5rem}._media_14b0z_3[data-size=lg]{font-size:2.25rem}._media_14b0z_3[data-size=lg] ._icon_14b0z_24{font-size:1.75rem}._media_14b0z_3[data-size=xl]{font-size:2.75rem}._media_14b0z_3[data-size=xl] ._icon_14b0z_24{font-size:2rem}

package/dist/assets/MetaItemBase.css

@@ -0,0 +1 @@
+._item_o4xu8_1{border:1px;border-radius:2px;color:var(--neutral-text-subtle);display:inline-flex;align-items:center;column-gap:.25em;white-space:nowrap;text-decoration:none}button._item_o4xu8_1:hover,a._item_o4xu8_1:hover{color:var(--theme-base-hover)}._item_o4xu8_1[data-size=xs]{font-size:.875rem;height:1.5rem}._item_o4xu8_1[data-size=sm]{font-size:1rem}._item_o4xu8_1[data-size=md]{font-size:1.125rem}._item_o4xu8_1[data-variant=text]{border-color:transparent;padding-left:0;padding-right:0}._item_o4xu8_1[data-variant=outline]{border-color:var(--theme-border-subtle);border-style:solid}._item_o4xu8_1[data-variant=rounded]{border-color:var(--theme-border-subtle);border-style:solid;border-radius:.75rem}._item_o4xu8_1[data-variant=dotted]{border-color:var(--theme-base-hover);border-style:dashed}._item_o4xu8_1[data-variant=solid]{border-color:var(--theme-base-hover);background-color:var(--theme-base-hover);color:#fff}._item_o4xu8_1[data-variant=rounded],._item_o4xu8_1[data-variant=outline],._item_o4xu8_1[data-variant=dotted],._item_o4xu8_1[data-variant=solid]{padding:0 .25em}

package/dist/assets/MetaItemLabel.css

@@ -0,0 +1 @@
+._label_8431v_1{display:inline-flex;font-weight:400;align-items:center}._label_8431v_1[data-size=xs]{font-size:.875rem}._label_8431v_1[data-size=sm]{font-size:1rem}._label_8431v_1[data-size=md]{font-size:1.125rem}._label_8431v_1[data-variant=rounded],._label_8431v_1[data-variant=outline],._label_8431v_1[data-variant=dotted],._label_8431v_1[data-variant=solid]{font-size:.875em;font-weight:500;padding:0 .25em}

package/dist/assets/MetaItemMedia.css

@@ -0,0 +1 @@
+._media_m8ywm_1{display:inline-flex;align-items:center;justify-content:center}._media_m8ywm_1[data-size=xs]{font-size:1rem}._media_m8ywm_1[data-size=sm]{font-size:1.25rem}

package/dist/components/Bookmarks/BookmarksList.d.ts

@@ -1,4 +1,4 @@
-import { ListSpacing } from '../';
+import { ListSpacing } from '..';
 import { BookmarksListItemProps } from './BookmarksListItem';
 export interface BookmarksListProps {
     items: BookmarksListItemProps[];

package/dist/components/Bookmarks/BookmarksListItem.d.ts

@@ -1,20 +1,9 @@
-import { ElementType } from 'react';
-import { ListItemSize } from '..';
+import { ListItemProps } from '..';
 import { QueryItemProps } from './QueryLabel';
-export interface BookmarksListItemProps {
+export interface BookmarksListItemProps extends ListItemProps {
     id: string;
-    /** Element type to render */
-    as?: ElementType;
-    /** ELement link */
-    href?: string;
-    /** Optional onClick */
-    onClick?(): void;
-    /** Size of list item */
-    size?: ListItemSize;
     /** Optional title */
     title?: string;
-    /** Optional description */
-    description?: string;
     /** Query params */
     params?: QueryItemProps[];
 }

package/dist/components/Bookmarks/BookmarksListItem.js

@@ -1,16 +1,11 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { QueryLabel as s } from "./QueryLabel.js";
+import { QueryLabel as n } from "./QueryLabel.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemBase as n } from "../List/ListItemBase.js";
-import { ListItemLabel as p } from "../List/ListItemLabel.js";
-import { ListItemMedia as a } from "../List/ListItemMedia.js";
-const b = ({ size: r = "sm", title: m, description: c, params: i, ...t }) => /* @__PURE__ */ e(n, { size: r, linkIcon: "chevron-right", ...t, children: [
-  /* @__PURE__ */ o(a, { size: r, icon: "magnifying-glass" }),
-  /* @__PURE__ */ o(p, { title: m, size: r, children: !m && /* @__PURE__ */ o(s, { params: i }) })
-] });
+import { ListItem as e } from "../List/ListItem.js";
+const k = ({ size: o = "sm", title: i, description: p, params: t, ...m }) => /* @__PURE__ */ r(e, { size: o, icon: "magnifying-glass", linkIcon: "chevron-right", ...m, children: !i && /* @__PURE__ */ r(n, { params: t }) });
 export {
-  b as BookmarksListItem
+  k as BookmarksListItem
 };

package/dist/components/Button/Button.js

@@ -42,8 +42,8 @@ import '../../assets/Button.css';const B = "_button_1ysmx_1", y = "_reverse_1ysm
     className: u(t.button, { [t.reverse]: n }),
     ...c,
     children: [
-      /* @__PURE__ */ s(_, { size: r, children: i }),
-      m && /* @__PURE__ */ s(x, { size: r, icon: m })
+      m && /* @__PURE__ */ s(x, { size: r, icon: m }),
+      /* @__PURE__ */ s(_, { size: r, children: i })
     ]
   }
 );

package/dist/components/Button/Buttons.stories.js

@@ -35,8 +35,8 @@ const g = {
       /* @__PURE__ */ o(c, { children: t }),
       n == null ? void 0 : n.map((r) => /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", columnGap: "1rem" }, children: [
         /* @__PURE__ */ o(p, { ...e, icon: "x-mark", variant: t, size: r }),
-        /* @__PURE__ */ o(l, { ...e, reverse: !0, variant: t, icon: "arrow-left", size: r, children: "Button" }),
-        /* @__PURE__ */ o(l, { ...e, variant: t, icon: "arrow-right", size: r, children: "Button" }),
+        /* @__PURE__ */ o(l, { ...e, variant: t, icon: "arrow-left", size: r, children: "Button" }),
+        /* @__PURE__ */ o(l, { ...e, reverse: !0, variant: t, icon: "arrow-right", size: r, children: "Button" }),
         /* @__PURE__ */ o(d, { ...e, variant: t, icon: "chevron-down", size: r, children: "ComboButton" }),
         /* @__PURE__ */ o(c, { children: r })
       ] }, r))

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

@@ -1,10 +1,20 @@
 import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { Dialog as a } from "./Dialog.js";
-const d = {
+import { withThemeByDataAttribute as a } from "@storybook/addon-themes";
+import { Dialog as i } from "./Dialog.js";
+const m = {
   title: "Dialog/Dialog",
-  component: a,
+  component: i,
   tags: ["autodocs"],
   parameters: {},
+  decorators: [
+    a({
+      themes: {
+        company: "company",
+        person: "person"
+      },
+      defaultTheme: "company"
+    })
+  ],
   argTypes: { body: { control: "text" } },
   args: {
     seenBy: {
@@ -59,7 +69,7 @@ const d = {
     title: "Title",
     summary: "Summary"
   }
-}, o = {
+}, p = {
   args: {
     body: /* @__PURE__ */ t(r, { children: [
       /* @__PURE__ */ e("h2", { children: "Heading 2" }),
@@ -71,7 +81,7 @@ const d = {
       ] })
     ] })
   }
-}, m = {
+}, g = {
   args: {
     attachments: {
       title: "2 vedlegg",
@@ -87,7 +97,7 @@ const d = {
       ]
     }
   }
-}, p = {
+}, c = {
   args: {
     actions: [
       {
@@ -102,7 +112,7 @@ const d = {
       }
     ]
   }
-}, i = {
+}, n = {
   args: {
     status: { label: "Krever handling", value: "requires-attention" },
     sender: {
@@ -137,9 +147,9 @@ const d = {
       ]
     }
   }
-}, g = {
+}, h = {
   args: {
-    ...i.args,
+    ...n.args,
     status: { value: "in-progress", label: "Under arbeid" },
     dueAt: null,
     dueAtLabel: null,
@@ -198,7 +208,7 @@ const d = {
       ]
     }
   }
-}, n = {
+}, s = {
   args: {
     status: { value: "draft", label: "Utkast" },
     sender: {
@@ -224,9 +234,9 @@ const d = {
     ],
     attachments: {}
   }
-}, c = {
+}, u = {
   args: {
-    ...n.args,
+    ...s.args,
     status: { value: "sent", label: "Sendt" },
     actions: null,
     summary: "Skjema er sendt inn.",
@@ -242,12 +252,12 @@ const d = {
   }
 };
 export {
-  p as Actions,
-  m as Attachments,
-  o as Body,
-  n as Draft,
-  g as InProgress,
-  i as RequiresAttention,
-  c as Sent,
-  d as default
+  c as Actions,
+  g as Attachments,
+  p as Body,
+  s as Draft,
+  h as InProgress,
+  n as RequiresAttention,
+  u as Sent,
+  m as default
 };

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogVariant = 'neutral' | 'draft' | 'trashed' | 'archived';
 export interface DialogBaseProps {
     children?: ReactNode;
 }

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DialogListItemSize } from './DialogListItemBase';
+import { DialogListItemSize } from './DialogListItem.tsx';
 export interface DialogBorderProps {
     seen?: boolean;
     size?: DialogListItemSize;

package/dist/components/Dialog/DialogBorder.js

@@ -1,8 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/DialogBorder.css';const d = "_border_1yyjs_1", c = {
-  border: d
-}, n = ({ seen: r = !0, size: o = "lg", className: e, children: s }) => /* @__PURE__ */ t("div", { className: a(c.border, e), "data-size": o, "data-seen": r, children: s });
+import { jsx as s } from "react/jsx-runtime";
+import { c as d } from "../../index-L8X2o7IH.js";
+import '../../assets/DialogBorder.css';const a = "_border_tdijc_1", c = {
+  border: a
+}, n = ({ seen: r = !0, size: o = "lg", className: e, children: t }) => /* @__PURE__ */ s("div", { className: d(c.border, e), "data-size": o, "data-seen": r, children: t });
 export {
   n as DialogBorder
 };

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

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

package/dist/components/Dialog/DialogGroup.js

@@ -4,16 +4,16 @@ import "../Icon/SvgIcon.js";
 import "react";
 import { Button as t } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as m } from "../Typography/Heading.js";
+import { Heading as e } from "../Typography/Heading.js";
 import { ListBase as n } from "../List/ListBase.js";
 import { SectionBase as p } from "../Page/SectionBase.js";
 import { SectionHeader as a } from "../Page/SectionHeader.js";
-const j = ({ title: i, children: e }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
+const j = ({ title: i, children: m }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
   i && /* @__PURE__ */ o(a, { padding: !0, margin: !0, children: [
-    /* @__PURE__ */ r(m, { children: i }),
-    /* @__PURE__ */ r(t, { variant: "text", icon: "checkmark", size: "sm", reverse: !0, children: "Velg alle" })
+    /* @__PURE__ */ r(e, { children: i }),
+    /* @__PURE__ */ r(t, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
   ] }),
-  /* @__PURE__ */ r(n, { spacing: "md", children: e })
+  /* @__PURE__ */ r(n, { spacing: "md", children: m })
 ] });
 export {
   j as DialogGroup

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

@@ -1,5 +1,5 @@
 import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
-import { DialogListItemVariant } from './DialogListItemBase.tsx';
+import { DialogListItemVariant } from './DialogListItem.tsx';
 export interface DialogHeaderProps {
     title: string;
     seen: boolean;

package/dist/components/Dialog/DialogHeader.js

@@ -1,10 +1,10 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { DialogHeaderBase as s } from "./DialogHeaderBase.js";
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { DialogHeaderBase as m } from "./DialogHeaderBase.js";
 import { DialogHeadings as t } from "./DialogHeadings.js";
-import { DialogTitle as d } from "./DialogTitle.js";
-const f = ({ title: i, sender: o, recipient: e, seen: l, variant: a }) => /* @__PURE__ */ m(s, { children: [
-  /* @__PURE__ */ r(d, { seen: l, size: "xl", variant: a, children: i }),
-  /* @__PURE__ */ r(t, { size: "xl", sender: o, recipient: e })
+import { DialogTitle as x } from "./DialogTitle.js";
+const f = ({ title: r, sender: e, recipient: o, seen: l, variant: s }) => /* @__PURE__ */ a(m, { size: "xl", children: [
+  /* @__PURE__ */ i(x, { seen: l, size: "xl", variant: s, children: r }),
+  /* @__PURE__ */ i(t, { size: "xl", sender: e, recipient: o })
 ] });
 export {
   f as DialogHeader

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
+import { DialogSize } from './DialogBase';
 export interface DialogHeaderBaseProps {
+    size?: DialogSize;
     children?: ReactNode;
 }
-export declare const DialogHeaderBase: ({ children }: DialogHeaderBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogHeaderBase: ({ size, children }: DialogHeaderBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogHeaderBase.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import '../../assets/DialogHeaderBase.css';const a = "_header_e6sit_1", s = {
-  header: a
-}, o = ({ children: e }) => /* @__PURE__ */ r("header", { className: s.header, children: e });
+import '../../assets/DialogHeaderBase.css';const s = "_header_45ink_1", t = {
+  header: s
+}, o = ({ size: e, children: a }) => /* @__PURE__ */ r("header", { className: t.header, "data-size": e, children: a });
 export {
   o as DialogHeaderBase
 };

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

@@ -1,3 +1,4 @@
+import { DialogSize } from './DialogBase';
 export type DialogSenderType = 'company' | 'person';
 export type DialogRecipientType = 'company' | 'person';
 export interface DialogSenderProps {
@@ -9,9 +10,8 @@ export interface DialogRecipientProps {
     type?: DialogRecipientType;
     name: string;
 }
-type DialogHeadingsSize = 'sm' | 'xs' | 'sm' | 'lg' | 'xl';
 export interface DialogHeadingsProps {
-    size: DialogHeadingsSize;
+    size: DialogSize;
     /** Group sender and recipient avatars */
     grouped?: boolean;
     /** Sender */
@@ -21,4 +21,3 @@ export interface DialogHeadingsProps {
 }
 /** Dialog headings for sender and recipient. Should present an avatar for the sender. */
 export declare const DialogHeadings: ({ grouped, size, sender, recipient, }: DialogHeadingsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Dialog/DialogHeadings.js

@@ -1,14 +1,12 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as m } from "react/jsx-runtime";
 import { Avatar as l } from "../Avatar/Avatar.js";
-import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
-import { MetaItem as d } from "../Meta/MetaItem.js";
-import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
-import '../../assets/DialogHeadings.css';const x = "_headings_1dhfw_1", h = "_text_1dhfw_16", g = "_sender_1dhfw_21", m = {
-  headings: x,
-  text: h,
-  sender: g
-}, s = {
+import { AvatarGroup as o } from "../Avatar/AvatarGroup.js";
+import '../../assets/DialogHeadings.css';const i = "_headings_fci15_1", p = "_text_fci15_21", x = "_sender_fci15_26", d = "_recipient_fci15_31", s = {
+  headings: i,
+  text: p,
+  sender: x,
+  recipient: d
+}, t = {
   avatar: {
     xs: "xs",
     sm: "xs",
@@ -16,37 +14,37 @@ import '../../assets/DialogHeadings.css';const x = "_headings_1dhfw_1", h = "_te
     lg: "xs",
     xl: "lg"
   }
-}, N = ({
+}, v = ({
   grouped: r,
   size: n = "lg",
   sender: a = { type: "company", name: "Sender" },
-  recipient: t = { type: "person", name: "Recipient" }
-}) => /* @__PURE__ */ o("div", { className: m.headings, "data-size": n, children: [
-  r ? /* @__PURE__ */ e(
-    c,
+  recipient: e = { type: "person", name: "Recipient" }
+}) => /* @__PURE__ */ c("div", { className: s.headings, "data-size": n, children: [
+  r ? /* @__PURE__ */ m(
+    o,
     {
-      items: [{ ...a, type: "company" }, t],
-      size: s == null ? void 0 : s.avatar[n],
-      className: m.avatar
+      items: [{ ...a, type: "company" }, e],
+      size: t == null ? void 0 : t.avatar[n],
+      className: s.avatar
     }
-  ) : /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ m(
     l,
     {
       type: "company",
       imageUrl: a == null ? void 0 : a.imageUrl,
       name: a.name,
-      size: s == null ? void 0 : s.avatar[n],
-      className: m.avatar
+      size: t == null ? void 0 : t.avatar[n],
+      className: s.avatar
     }
   ),
-  /* @__PURE__ */ o(d, { size: "xs", className: m.text, children: [
-    /* @__PURE__ */ e("span", { className: m.sender, children: a.name }),
-    (t == null ? void 0 : t.name) && /* @__PURE__ */ o("span", { children: [
+  /* @__PURE__ */ c("span", { "data-size": n, className: s.text, children: [
+    /* @__PURE__ */ m("span", { className: s.sender, children: a.name }),
+    (e == null ? void 0 : e.name) && /* @__PURE__ */ c("span", { className: s.recipient, children: [
       " til ",
-      /* @__PURE__ */ e("span", { children: t.name })
+      /* @__PURE__ */ m("span", { children: e.name })
     ] })
   ] })
 ] });
 export {
-  N as DialogHeadings
+  v as DialogHeadings
 };

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { MetaItemSize } from '../Meta';
+import { DialogVariant } from './DialogBase';
+export interface DialogLabelProps {
+    size?: MetaItemSize;
+    variant?: DialogVariant;
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * Dialog label.
+ */
+export declare const DialogLabel: ({ size, variant, label, children }: DialogLabelProps) => import("react/jsx-runtime").JSX.Element;

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;