@altinn/altinn-components 0.7.0 → 0.7.2

package/dist/assets/DialogBorder.css

@@ -1 +1 @@
-._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)}
+._border_12m8d_1{border-left:.25rem solid;border-color:var(--theme-surface-active);display:flex;flex-direction:column}._border_12m8d_1[data-seen=true],._border_12m8d_1[data-loading=true]{border-color:var(--neutral-surface-default)}

package/dist/assets/DialogHeadings.css

@@ -1 +1 @@
-._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}
+._headings_qkf0g_1{display:inline-flex;column-gap:.5em;align-items:center}._headings_qkf0g_1[data-size=xs],._headings_qkf0g_1[data-size=sm]{font-size:12px}._headings_qkf0g_1[data-size=md],._headings_qkf0g_1[data-size=lg]{font-size:14px}._headings_qkf0g_1[data-size=xl]{font-size:16px}._text_qkf0g_21{display:inline-flex;flex-wrap:wrap;column-gap:.25em;color:var(--neutral-text-subtle)}._sender_qkf0g_28{font-weight:500;color:var(--neutral-text-default)}._recipient_qkf0g_33{display:inline-flex;column-gap:.25em;white-space:nowrap}

package/dist/assets/DialogListItem.css

@@ -1 +1 @@
-._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}
+._item_v64fv_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_v64fv_1[data-size=lg],._item_v64fv_1[data-size=md]{padding:1em}._item_v64fv_1[data-size=sm],._item_v64fv_1[data-size=xs]{padding:.5em .75em}._select_v64fv_16{position:absolute;top:0;right:0;margin:.375rem}._summary_v64fv_23{font-size:1rem;line-height:1.35;margin:0;font-weight:400}._summary_v64fv_23[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_v64fv_23[data-size=md]{display:none}._footer_v64fv_44{width:100%;margin-top:1rem;display:flex;flex-direction:column;row-gap:1rem}._touchedBy_v64fv_52{position:absolute;right:0;bottom:0;margin:8px}._border_v64fv_61[data-size=lg],._border_v64fv_61[data-size=md]{padding-left:1rem}._border_v64fv_61[data-size=xs],._border_v64fv_61[data-size=sm]{width:100%;flex-direction:row;align-items:center;padding-left:.75rem}

package/dist/assets/DialogSummary.css

@@ -0,0 +1 @@
+._summary_1sruo_1{font-size:1rem;line-height:1.35;margin:0;font-weight:400}._summary_1sruo_1[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_1sruo_1[data-size=md]{display:none}

package/dist/assets/HeaderButton.css

@@ -1 +1 @@
-._button_t01b4_1{position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;background-color:var(--global-base-default);color:#fff;padding:.625rem;border:none;border-radius:4px}._label_t01b4_14{font-size:1.125rem;font-weight:500;padding:.25rem}._icon_t01b4_20{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:1.5rem}._loginIcon_t01b4_30{background-color:#fff;color:#000}._closeIcon_t01b4_35{border:1px solid white}
+._button_buvev_1{position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;background-color:var(--global-base-default);color:#fff;padding:.625rem;border:none;border-radius:4px}._label_buvev_14{font-size:1.125rem;font-weight:500;padding:.25rem}._icon_buvev_20{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:1.5rem}._avatarGroup_buvev_30{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;overflow:visible}._loginIcon_buvev_39{background-color:#fff;color:#000}._closeIcon_buvev_44{border:1px solid white}._badge_buvev_48{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._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}
+._item_i2afq_1{position:relative;width:100%;display:flex;align-items:center;justify-content:stretch}._item_i2afq_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_i2afq_1[aria-disabled=true]{pointer-events:none}._item_i2afq_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_i2afq_1[data-size=xs]{min-height:36px}._item_i2afq_1[data-size=sm]{min-height:44px}._item_i2afq_1[data-size=md]{min-height:56px}._item_i2afq_1[data-size=lg]{min-height:64px}._item_i2afq_1[data-size=xl]{min-height:72px}._item_i2afq_1{background-color:var(--theme-background-default)}._item_i2afq_1:not([aria-disabled=true]):hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_i2afq_1:not([aria-disabled=true]):hover strong,._item_i2afq_1:not([aria-disabled=true]):hover h2{text-decoration:underline}._item_i2afq_1[data-active=true],._item_i2afq_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_i2afq_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._link_i2afq_78{align-self:stretch;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_i2afq_78{flex-grow:1;display:flex;align-items:center}

package/dist/assets/ListItemControls.css

@@ -0,0 +1 @@
+._controls_dduzt_1{position:absolute;right:0;display:flex;align-items:center;gap:.625rem;padding:0 .625rem}._controls_dduzt_1:empty{display:none}._linkText_dduzt_14{font-size:.875rem;white-space:nowrap}._linkIcon_dduzt_19{font-size:1.5rem}

package/dist/assets/ListItemLabel.css

@@ -1 +1 @@
-._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}
+._label_7jiaq_3{flex-grow:1;display:flex}._label_7jiaq_3[data-size=xs]{align-items:center;column-gap:.25em}._label_7jiaq_3[data-size=sm]{align-items:center;column-gap:.25rem}._label_7jiaq_3[data-size=md],._label_7jiaq_3[data-size=lg],._label_7jiaq_3[data-size=xl]{align-items:flex-start;flex-direction:column;row-gap:.125rem}._title_7jiaq_38{font-weight:600;line-height:1.25;margin:0}._description_7jiaq_44{font-weight:400;line-height:1.25;color:var(--theme-text-subtle);margin:0}._title_7jiaq_38[data-size=xs],._description_7jiaq_44[data-size=xs]{font-size:.875rem}._title_7jiaq_38[data-size=sm],._description_7jiaq_44[data-size=sm],._title_7jiaq_38[data-size=md]{font-size:1rem}._title_7jiaq_38[data-size=lg]{font-size:1.125rem}._description_7jiaq_44[data-size=md],._description_7jiaq_44[data-size=lg]{font-size:.875em}

package/dist/assets/ListItemSelect.css

@@ -0,0 +1 @@
+._label_hd89l_1{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;padding:.75rem;border-radius:50%;border:0}._label_hd89l_1[data-size=lg],._label_hd89l_1[data-size=md]{font-size:1.25rem;margin-left:.375rem;margin-right:-.25rem}._label_hd89l_1[data-size=sm],._label_hd89l_1[data-size=xs]{font-size:1rem;padding:.625rem;margin-left:.325rem;margin-right:-.5rem}._label_hd89l_1[data-size=xs]{font-size:1rem;padding:.5rem;margin-left:.25rem;margin-right:-.5rem}._label_hd89l_1:hover{background-color:var(--theme-surface-default)}._input_hd89l_38{position:absolute;opacity:0}._icon_hd89l_43{color:var(--theme-base-default)}._icon_hd89l_43 [data-hover=true]{opacity:0}._label_hd89l_1:hover [data-hover=true]{opacity:1}

package/dist/assets/MenuItemBase.css

@@ -1 +1 @@
-._item_16huj_1{padding:0;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;column-gap:.25rem;margin:.5rem 0}._item_16huj_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_16huj_1[data-size=sm]{min-height:44px}._content_16huj_36{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._action_16huj_44{display:flex;justify-content:center;align-items:center;padding:10px}._linkText_16huj_51{font-size:.875rem;white-space:nowrap}._linkIcon_16huj_56{font-size:1.5rem}._item_16huj_1{background-color:transparent;color:var(--theme-text-default)}._item_16huj_1[aria-selected=true]{background-color:var(--theme-background-default)}._item_16huj_1:hover,._item_16huj_1:active{background-color:var(--theme-surface-hover)}._media_16huj_76[data-color=subtle]{background-color:var(--theme-background-default);color:var(--theme-text-default)}._media_16huj_76[data-color=strong]{background-color:var(--theme-base-default);color:var(--theme-background-default)}
+._item_y1gbn_1{padding:0;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;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_y1gbn_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_y1gbn_1[data-size=sm]{min-height:44px}._content_y1gbn_37{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._action_y1gbn_45{display:flex;justify-content:center;align-items:center;padding:10px}._linkText_y1gbn_52{font-size:.875rem;white-space:nowrap}._linkIcon_y1gbn_57{font-size:1.5rem}._item_y1gbn_1{background-color:transparent;color:var(--theme-text-default)}._item_y1gbn_1[aria-selected=true]{background-color:var(--theme-background-default)}._item_y1gbn_1:hover,._item_y1gbn_1:active{background-color:var(--theme-surface-hover)}._media_y1gbn_77[data-color=subtle]{background-color:var(--theme-background-default);color:var(--theme-text-default)}._media_y1gbn_77[data-color=strong]{background-color:var(--theme-base-default);color:var(--theme-background-default)}

package/dist/assets/MenuSearch.css

@@ -1 +1 @@
-._input_73dww_1{width:100%;height:2.75rem;font-size:.875rem;line-height:1rem;font-weight:400;padding:9px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._button_73dww_13[aria-selected=true]{background-color:var(--theme-background-subtle);color:var(--theme-text-default)}._close_73dww_18{padding:6px 0}._icon_73dww_22{border-left:1px solid;border-color:var(--theme-background-subtle);display:flex;align-items:center;justify-content:center;font-size:1.25rem;padding:0 6px}
+._field_mo7y9_1{position:relative}._icon_mo7y9_5{position:absolute;top:0;left:0;font-size:1.25rem;color:var(--theme-text-subtle);margin:12px 10px}._input_mo7y9_14{width:100%;height:2.75rem;font-size:.875rem;line-height:1rem;font-weight:400;padding:9px 36px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._input_mo7y9_14[type=search]::-webkit-search-decoration,._input_mo7y9_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_mo7y9_31{position:absolute;top:0;right:0;margin:12px 10px;border-radius:100%;width:1.25rem;height:1.25rem}

package/dist/assets/Skeleton.css

@@ -0,0 +1 @@
+._skelaton_10sb8_1{background-color:#ccc;animation:_fade_10sb8_1 1.5s infinite reverse;background-size:200%;color:transparent}._skelaton_10sb8_1[data-loading=true]>*{opacity:0}._skelaton_10sb8_1[data-variant=circle]{border-radius:50%}._skelaton_10sb8_1[data-variant=text]{border-radius:.125rem}@keyframes _fade_10sb8_1{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}

package/dist/assets/ToolbarSearch.css

@@ -1 +1 @@
-._input_cwjz7_1{font-size:.875rem;line-height:1rem;font-weight:600;padding:9px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._button_cwjz7_11[aria-selected=true]{background-color:var(--theme-background-subtle);color:var(--theme-text-default)}._close_cwjz7_16{padding:6px 0}._icon_cwjz7_20{border-left:1px solid;border-color:var(--theme-background-subtle);display:flex;align-items:center;justify-content:center;font-size:1.25rem;padding:0 6px}
+._field_dvezx_1{position:relative}._icon_dvezx_5{position:absolute;top:0;left:0;font-size:1.25rem;color:var(--theme-text-subtle);margin:8px}._input_dvezx_14{width:100%;font-size:.875rem;line-height:1rem;font-weight:500;padding:9px 30px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._input_dvezx_14[type=search]::-webkit-search-decoration,._input_dvezx_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_dvezx_30{position:absolute;top:0;right:0;margin:8px;border-radius:100%;width:1.25rem;height:1.25rem}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -6,5 +6,6 @@ export interface ContextMenuProps {
     placement?: DropdownPlacement;
     size?: ContextMenuSize;
     groups?: MenuItemGroups;
+    className?: string;
 }
-export declare const ContextMenu: ({ id, placement, size, groups, items, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ id, placement, size, groups, className, items, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenu.js

@@ -3,19 +3,30 @@ import { jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { MenuItems as u } from "../Menu/MenuItems.js";
-import { useRootContext as s } from "../RootProvider/RootProvider.js";
-import { ContextMenuBase as x } from "./ContextMenuBase.js";
-const M = ({
+import { MenuItems as s } from "../Menu/MenuItems.js";
+import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { ContextMenuBase as c } from "./ContextMenuBase.js";
+const a = ({
   id: t = "context-menu",
   placement: e = "right",
   size: r,
   groups: n = {},
-  items: m
+  className: m,
+  items: i
 }) => {
-  const { currentId: i, toggleId: p } = s();
-  return /* @__PURE__ */ o(x, { size: r, placement: e, expanded: i === t, onToggle: () => p(t), children: /* @__PURE__ */ o(u, { groups: n, items: m }) });
+  const { currentId: p, toggleId: u } = x();
+  return /* @__PURE__ */ o(
+    c,
+    {
+      size: r,
+      placement: e,
+      className: m,
+      expanded: p === t,
+      onToggle: () => u(t),
+      children: /* @__PURE__ */ o(s, { groups: n, items: i })
+    }
+  );
 };
 export {
-  M as ContextMenu
+  a as ContextMenu
 };

package/dist/components/ContextMenu/ContextMenuBase.d.ts

@@ -5,7 +5,8 @@ export interface ContextMenuBaseProps {
     placement: DropdownPlacement;
     expanded: boolean;
     size?: ContextMenuSize;
+    className?: string;
     onToggle?: () => void;
     children?: ReactNode;
 }
-export declare const ContextMenuBase: ({ size, placement, expanded, onToggle, children, }: ContextMenuBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuBase: ({ size, placement, expanded, className, onToggle, children, }: ContextMenuBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenuBase.js

@@ -1,24 +1,25 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { IconButton as c } from "../Button/IconButton.js";
+import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import { DropdownBase as m } from "../Dropdown/DropdownBase.js";
-import '../../assets/ContextMenuBase.css';const l = "_toggle_ya7jy_1", d = "_button_ya7jy_5", p = "_icon_ya7jy_14", _ = "_dropdown_ya7jy_18", o = {
-  toggle: l,
-  button: d,
-  icon: p,
-  dropdown: _
-}, f = ({
+import { DropdownBase as d } from "../Dropdown/DropdownBase.js";
+import '../../assets/ContextMenuBase.css';const p = "_toggle_ya7jy_1", _ = "_button_ya7jy_5", y = "_icon_ya7jy_14", g = "_dropdown_ya7jy_18", o = {
+  toggle: p,
+  button: _,
+  icon: y,
+  dropdown: g
+}, B = ({
   size: n = "sm",
   placement: r = "right",
-  expanded: e = !1,
-  onToggle: s,
-  children: i
-}) => /* @__PURE__ */ a("div", { className: o.toggle, "data-theme": "neutral", children: [
+  expanded: s = !1,
+  className: e,
+  onToggle: a,
+  children: c
+}) => /* @__PURE__ */ i("div", { className: m(o.toggle, e), "data-theme": "neutral", children: [
   /* @__PURE__ */ t(
-    c,
+    l,
     {
       className: o.button,
       size: n,
@@ -26,11 +27,11 @@ import '../../assets/ContextMenuBase.css';const l = "_toggle_ya7jy_1", d = "_but
       iconSize: "md",
       variant: "text",
       color: "secondary",
-      onClick: s
+      onClick: a
     }
   ),
-  /* @__PURE__ */ t(m, { className: o.dropdown, placement: r, expanded: e, children: i })
+  /* @__PURE__ */ t(d, { className: o.dropdown, placement: r, expanded: s, children: c })
 ] });
 export {
-  f as ContextMenuBase
+  B as ContextMenuBase
 };

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

@@ -1,10 +1,9 @@
-import { MouseEventHandler } from 'react';
 export type DialogButtonPriority = 'primary' | 'secondary' | 'tertiary';
 export interface DialogActionButtonProps {
     id: string;
     priority: DialogButtonPriority;
     label?: string;
-    onClick?: MouseEventHandler;
+    onClick?: () => void;
     loading?: boolean;
 }
 export interface DialogActionsProps {

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

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { DialogListItemSize } from './DialogListItem.tsx';
 export interface DialogBorderProps {
+    loading?: boolean;
     seen?: boolean;
     size?: DialogListItemSize;
     className?: string;
     children?: ReactNode;
 }
-export declare const DialogBorder: ({ seen, size, className, children }: DialogBorderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogBorder: ({ loading, seen, size, className, children }: DialogBorderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogBorder.js

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

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

@@ -18,6 +18,7 @@ export interface DialogHeadingsProps {
     sender?: DialogSenderProps;
     /** Recipient */
     recipient?: DialogRecipientProps;
+    loading?: boolean;
 }
 /** 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 declare const DialogHeadings: ({ loading, grouped, size, sender, recipient, }: DialogHeadingsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogHeadings.js

@@ -1,12 +1,13 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
-import { Avatar as l } from "../Avatar/Avatar.js";
-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 = {
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { Avatar as i } from "../Avatar/Avatar.js";
+import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
+import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import '../../assets/DialogHeadings.css';const d = "_headings_qkf0g_1", g = "_text_qkf0g_21", h = "_sender_qkf0g_28", x = "_recipient_qkf0g_33", s = {
+  headings: d,
+  text: g,
+  sender: h,
+  recipient: x
+}, e = {
   avatar: {
     xs: "xs",
     sm: "xs",
@@ -14,37 +15,41 @@ import '../../assets/DialogHeadings.css';const i = "_headings_fci15_1", p = "_te
     lg: "xs",
     xl: "lg"
   }
-}, v = ({
-  grouped: r,
-  size: n = "lg",
-  sender: a = { type: "company", name: "Sender" },
-  recipient: e = { type: "person", name: "Recipient" }
-}) => /* @__PURE__ */ c("div", { className: s.headings, "data-size": n, children: [
-  r ? /* @__PURE__ */ m(
-    o,
+}, N = ({
+  loading: c,
+  grouped: o,
+  size: m = "lg",
+  sender: t = { type: "company", name: "Sender" },
+  recipient: n = { type: "person", name: "Recipient" }
+}) => /* @__PURE__ */ r("div", { className: s.headings, "data-size": m, children: [
+  /* @__PURE__ */ a(l, { variant: "circle", className: s.avatar, loading: c, children: o ? /* @__PURE__ */ a(
+    p,
     {
-      items: [{ ...a, type: "company" }, e],
-      size: t == null ? void 0 : t.avatar[n],
+      items: [{ ...t, type: "company" }, n],
+      size: e == null ? void 0 : e.avatar[m],
       className: s.avatar
     }
-  ) : /* @__PURE__ */ m(
-    l,
+  ) : /* @__PURE__ */ a(
+    i,
     {
       type: "company",
-      imageUrl: a == null ? void 0 : a.imageUrl,
-      name: a.name,
-      size: t == null ? void 0 : t.avatar[n],
+      imageUrl: t == null ? void 0 : t.imageUrl,
+      name: t.name,
+      size: e == null ? void 0 : e.avatar[m],
       className: s.avatar
     }
-  ),
-  /* @__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__ */ m("span", { children: e.name })
-    ] })
+  ) }),
+  /* @__PURE__ */ r("span", { "data-size": m, className: s.text, children: [
+    /* @__PURE__ */ r("span", { className: s.sender, children: [
+      " ",
+      /* @__PURE__ */ a(l, { loading: c, children: t.name })
+    ] }),
+    (n == null ? void 0 : n.name) && /* @__PURE__ */ a("span", { className: s.recipient, children: /* @__PURE__ */ r(l, { loading: c, children: [
+      /* @__PURE__ */ a("span", { children: "til" }),
+      /* @__PURE__ */ a("span", { children: n.name })
+    ] }) })
   ] })
 ] });
 export {
-  v as DialogHeadings
+  N as DialogHeadings
 };

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

@@ -10,6 +10,8 @@ export type DialogListItemVariant = 'neutral' | 'draft' | 'trashed' | 'archived'
 export interface DialogListItemProps extends ListItemBaseProps {
     /** Dialog title */
     title: string;
+    /** Dialog is loading */
+    loading?: boolean;
     /** Render as */
     as?: ElementType;
     /** Size */
@@ -68,4 +70,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, 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;
+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, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItem.js

@@ -1,89 +1,93 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { ListItemBase as p } from "../List/ListItemBase.js";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { ListItemBase as h } from "../List/ListItemBase.js";
 import "../../index-L8X2o7IH.js";
+import "react";
 import "../Icon/SvgIcon.js";
 import { ListItemLabel as M } from "../List/ListItemLabel.js";
-import "react";
-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 { DialogBorder as d } from "./DialogBorder.js";
+import { DialogMetadata as D } from "./DialogMetadata.js";
+import { DialogHeaderBase as V } from "./DialogHeaderBase.js";
+import { DialogHeadings as k } from "./DialogHeadings.js";
+import { DialogTitle as q } from "./DialogTitle.js";
+import { DialogTouchedBy as w } from "./DialogTouchedBy.js";
+import { DialogSelect as C } 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",
+import { DialogSummary as E } from "./DialogSummary.js";
+import '../../assets/DialogListItem.css';const F = "_item_v64fv_1", G = "_select_v64fv_16", J = "_summary_v64fv_23", K = "_footer_v64fv_44", O = "_touchedBy_v64fv_52", P = "_border_v64fv_61", m = {
+  item: F,
+  select: G,
+  summary: J,
+  footer: K,
+  touchedBy: O,
+  border: P
+}, cr = ({
+  size: r = "lg",
   variant: u = "neutral",
-  select: a,
+  loading: o,
+  select: s,
   status: y,
-  sender: D,
+  sender: B,
   recipient: N,
-  grouped: v,
-  updatedAt: i,
-  updatedAtLabel: c,
-  archivedAt: s,
-  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
+  grouped: b,
+  updatedAt: a,
+  updatedAtLabel: i,
+  archivedAt: l,
+  archivedAtLabel: x,
+  trashedAt: f,
+  trashedAtLabel: I,
+  label: L,
+  dueAt: j,
+  dueAtLabel: H,
+  seen: c = !1,
+  seenBy: S,
+  touchedBy: _,
+  attachmentsCount: T,
+  title: p,
+  summary: n,
+  ...v
 }) => {
-  const T = l ? "trashed" : s ? "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: c })
-  ] }) }) : /* @__PURE__ */ r(
-    p,
+  const g = f ? "trashed" : l ? "archived" : u;
+  return r === "xs" || r === "sm" ? /* @__PURE__ */ t(h, { ...v, loading: o, size: r, className: m.item, children: /* @__PURE__ */ e(d, { className: m.border, size: r, seen: c, loading: o, children: [
+    /* @__PURE__ */ t(M, { loading: o, size: r, title: p, description: n }),
+    /* @__PURE__ */ t(D, { loading: o, updatedAt: a, updatedAtLabel: i })
+  ] }) }) : /* @__PURE__ */ t(
+    h,
     {
-      ...f,
-      size: o,
-      className: t.item,
-      action: 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 })
+      ...v,
+      loading: o,
+      size: r,
+      className: m.item,
+      controls: s && /* @__PURE__ */ t(C, { className: m.select, ...s }),
+      children: /* @__PURE__ */ e(d, { className: m.border, size: r, seen: c, loading: o, children: [
+        /* @__PURE__ */ e(V, { size: r, children: [
+          /* @__PURE__ */ t(q, { loading: o, size: r, variant: g, label: L, seen: c, children: p }),
+          /* @__PURE__ */ t(k, { loading: o, size: r, grouped: b, sender: B, 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,
+        /* @__PURE__ */ t(E, { loading: o, size: r, children: n }),
+        /* @__PURE__ */ e("footer", { "data-size": r, className: m.footer, children: [
+          /* @__PURE__ */ t(
+            D,
             {
+              loading: o,
               status: y,
-              updatedAt: i,
-              updatedAtLabel: c,
-              archivedAt: s,
-              archivedAtLabel: B,
-              trashedAt: l,
-              trashedAtLabel: b,
-              dueAt: I,
-              dueAtLabel: L,
-              seenBy: j,
-              attachmentsCount: H
+              updatedAt: a,
+              updatedAtLabel: i,
+              archivedAt: l,
+              archivedAtLabel: x,
+              trashedAt: f,
+              trashedAtLabel: I,
+              dueAt: j,
+              dueAtLabel: H,
+              seenBy: S,
+              attachmentsCount: T
             }
           ),
-          n && /* @__PURE__ */ r(q, { size: "xs", touchedBy: n, className: t.touchedBy })
+          _ && /* @__PURE__ */ t(w, { loading: o, size: "xs", touchedBy: _, className: m.touchedBy })
         ] })
       ] })
     }
   );
 };
 export {
-  to as DialogListItem
+  cr as DialogListItem
 };