@altinn/altinn-components 0.7.1 → 0.7.3

package/dist/components/Dialog/DialogMetadata.js

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

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

@@ -15,6 +15,7 @@ export declare enum DialogStatusEnum {
 }
 export type DialogStatusValue = keyof typeof DialogStatusEnum;
 export interface DialogStatusProps {
+    loading?: boolean;
     size?: MetaItemSize;
     value?: DialogStatusValue;
     label?: string;
@@ -22,4 +23,4 @@ export interface DialogStatusProps {
 /**
  * Dialog status.
  */
-export declare const DialogStatus: ({ size, value, label }: DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DialogStatus: ({ loading, size, value, label }: DialogStatusProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogStatus.js

@@ -1,26 +1,28 @@
 import { jsx as n } from "react/jsx-runtime";
 import { MetaItem as o } from "../Meta/MetaItem.js";
-import { MetaProgress as i } from "../Meta/MetaProgress.js";
+import { MetaProgress as s } from "../Meta/MetaProgress.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-var s = /* @__PURE__ */ ((r) => (r.draft = "DRAFT", r.sent = "SENT", r.new = "NEW", r.completed = "COMPLETED", r["in-progress"] = "IN_PROGRESS", r["requires-attention"] = "REQUIRES_ATTENTION", r))(s || {});
-const h = ({ size: r = "xs", value: e = "new", label: t }) => {
+var c = /* @__PURE__ */ ((r) => (r.draft = "DRAFT", r.sent = "SENT", r.new = "NEW", r.completed = "COMPLETED", r["in-progress"] = "IN_PROGRESS", r["requires-attention"] = "REQUIRES_ATTENTION", r))(c || {});
+const m = ({ loading: r, size: i = "xs", value: e = "new", label: t }) => {
+  if (r)
+    return null;
   switch (e) {
     case "new":
       return null;
     case "draft":
-      return /* @__PURE__ */ n(o, { size: r, variant: "dotted", children: t || e });
+      return /* @__PURE__ */ n(o, { size: i, variant: "dotted", children: t || e });
     case "requires-attention":
       return /* @__PURE__ */ n(o, { variant: "solid", children: t || e });
     case "in-progress":
-      return /* @__PURE__ */ n(i, { size: r, variant: "outline", progress: 75, children: t || e });
+      return /* @__PURE__ */ n(s, { size: i, variant: "outline", progress: 75, children: t || e });
     case "completed":
-      return /* @__PURE__ */ n(i, { size: r, variant: "outline", progress: 100, children: t || e });
+      return /* @__PURE__ */ n(s, { size: i, variant: "outline", progress: 100, children: t || e });
     default:
-      return /* @__PURE__ */ n(o, { size: r, variant: "outline", children: t || e });
+      return /* @__PURE__ */ n(o, { size: i, variant: "outline", children: t || e });
   }
 };
 export {
-  h as DialogStatus,
-  s as DialogStatusEnum
+  m as DialogStatus,
+  c as DialogStatusEnum
 };

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DialogSize, DialogVariant } from './DialogBase';
 export type DialogTitleProps = {
+    loading?: boolean;
     /** Size */
     size?: DialogSize;
     /** Variant */
@@ -15,4 +16,4 @@ export type DialogTitleProps = {
 /**
  * Dialog title
  */
-export declare const DialogTitle: ({ size, seen, variant, label, children }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: ({ loading, size, seen, variant, label, children }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogTitle.js

@@ -1,12 +1,13 @@
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { DialogLabel as d } from "./DialogLabel.js";
-import '../../assets/DialogTitle.css';const r = "_heading_1fk12_1", c = "_title_1fk12_7", i = {
-  heading: r,
-  title: c
-}, g = ({ size: a = "sm", seen: l = !1, variant: e, label: t, children: n }) => /* @__PURE__ */ o("div", { className: i.heading, children: [
-  /* @__PURE__ */ s("h2", { className: i.title, "data-seen": l, "data-size": a, "data-variant": e, children: n }),
-  t && /* @__PURE__ */ s(d, { variant: e, size: "xs", children: t })
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import { DialogLabel as c } from "./DialogLabel.js";
+import '../../assets/DialogTitle.css';const m = "_heading_1fk12_1", h = "_title_1fk12_7", a = {
+  heading: m,
+  title: h
+}, p = ({ loading: t, size: l = "sm", seen: n = !1, variant: i, label: s, children: o }) => /* @__PURE__ */ r("div", { className: a.heading, children: [
+  /* @__PURE__ */ e("h2", { className: a.title, "data-seen": n, "data-size": l, "data-variant": i, children: /* @__PURE__ */ e(d, { loading: t, children: o }) }),
+  !t && s && /* @__PURE__ */ e(c, { variant: i, size: "xs", children: s })
 ] });
 export {
-  g as DialogTitle
+  p as DialogTitle
 };

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

@@ -3,8 +3,9 @@ export interface DialogTouchedByActor {
     name: string;
 }
 export interface DialogTouchedByProps {
+    loading?: boolean;
     size?: AvatarSize;
     touchedBy?: DialogTouchedByActor[];
     className?: string;
 }
-export declare const DialogTouchedBy: ({ size, touchedBy, className }: DialogTouchedByProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DialogTouchedBy: ({ loading, size, touchedBy, className }: DialogTouchedByProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogTouchedBy.js

@@ -1,8 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { AvatarGroup as o } from "../Avatar/AvatarGroup.js";
-const a = ({ size: m = "sm", touchedBy: r = [], className: p }) => r != null && r.length ? /* @__PURE__ */ i(o, { defaultType: "person", items: r, size: m, className: p }) : null;
+import { AvatarGroup as t } from "../Avatar/AvatarGroup.js";
+const e = ({ loading: m, size: p = "sm", touchedBy: r = [], className: i }) => !(r != null && r.length) || m ? null : /* @__PURE__ */ o(t, { defaultType: "person", items: r, size: p, className: i });
 export {
-  a as DialogTouchedBy
+  e as DialogTouchedBy
 };

package/dist/components/GlobalMenu/AccountButton.js

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

package/dist/components/GlobalMenu/AccountMenu.js

@@ -5,14 +5,14 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import { Menu as b } from "../Menu/Menu.js";
-const v = (r) => `${r} hits`, k = ({
+const v = (r) => `${r} hits`, a = ({
   accounts: r = [],
-  accountGroups: f = {},
+  accountGroups: o = {},
   accountSearch: s,
   onSelectAccount: t,
   currentAccount: d
 }) => {
-  var m;
+  var g;
   const p = r.map((e) => ({
     id: e.id || e.name,
     groupId: e.groupId || "search",
@@ -23,34 +23,35 @@ const v = (r) => `${r} hits`, k = ({
       name: e.name
     },
     onClick: () => t == null ? void 0 : t(e.id || e.name)
-  })), [i, o] = M(""), l = i ? p.filter((e) => {
-    var g;
-    return (g = e == null ? void 0 : e.title) == null ? void 0 : g.toLowerCase().includes(i.toLowerCase());
+  })), [i, m] = M(""), l = i ? p.filter((e) => {
+    var f;
+    return (f = e == null ? void 0 : e.title) == null ? void 0 : f.toLowerCase().includes(i.toLowerCase());
   }).map((e) => ({
     ...e,
     groupId: "search"
-  })) : p, I = i ? {
+  })) : p, C = i ? {
     search: {
-      title: ((m = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : m.call(s, l.length)) ?? v(l.length)
+      title: ((g = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : g.call(s, l.length)) ?? v(l.length)
     }
-  } : f, h = {
+  } : o, I = {
     name: "account-search",
     value: i,
     placeholder: (s == null ? void 0 : s.placeholder) ?? "Find account",
-    onChange: (e) => o(e.target.value)
-  }, C = [
+    onChange: (e) => m(e.target.value),
+    onClear: () => m("")
+  }, h = [
     ...l.length > 0 ? l : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
   return /* @__PURE__ */ L(
     b,
     {
       theme: "global",
-      search: s && h,
-      groups: I,
-      items: C
+      search: s && I,
+      groups: C,
+      items: h
     }
   );
 };
 export {
-  k as AccountMenu
+  a as AccountMenu
 };

package/dist/components/Header/Header.d.ts

@@ -1,3 +1,4 @@
+import { BadgeProps } from '../Badge';
 import { GlobalMenuProps, Account } from '../GlobalMenu';
 import { SearchbarProps } from '../Searchbar';
 import { HeaderLogoProps } from './HeaderLogo';
@@ -5,6 +6,7 @@ export interface HeaderProps {
     menu: GlobalMenuProps;
     search?: SearchbarProps;
     currentAccount?: Account;
+    badge?: BadgeProps;
     logo?: HeaderLogoProps;
 }
-export declare const Header: ({ search, menu, currentAccount, logo }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ search, menu, currentAccount, logo, badge }: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/Header.js

@@ -1,53 +1,54 @@
 "use client";
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import "react";
-import { useEscapeKey as w } from "../../hooks/useEscapeKey.js";
-import { DropdownBase as g } from "../Dropdown/DropdownBase.js";
+import { useEscapeKey as g } from "../../hooks/useEscapeKey.js";
+import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
-import { DrawerBase as x } from "../Dropdown/DrawerBase.js";
+import { DrawerBase as H } from "../Dropdown/DrawerBase.js";
 import "../Icon/SvgIcon.js";
-import { useRootContext as H } from "../RootProvider/RootProvider.js";
+import { useRootContext as _ } from "../RootProvider/RootProvider.js";
 import { GlobalMenu as t } from "../GlobalMenu/GlobalMenu.js";
-import { HeaderBase as _ } from "./HeaderBase.js";
-import { HeaderLogo as C } from "./HeaderLogo.js";
-import { HeaderButton as b } from "./HeaderButton.js";
-import { Searchbar as y } from "../Searchbar/Searchbar.js";
-import { HeaderMenu as B } from "./HeaderMenu.js";
-import { HeaderSearch as N } from "./HeaderSearch.js";
-import '../../assets/Header.css';const S = "_drawer_1wgf5_1", I = "_dropdown_1wgf5_5", d = {
-  drawer: S,
-  dropdown: I
-}, J = ({ search: s, menu: r, currentAccount: a, logo: l = {} }) => {
-  const { currentId: e, toggleId: n, openId: i, closeAll: m } = H();
-  w(m);
-  const c = () => {
-    i("search");
-  }, f = () => {
-    n("search");
+import { HeaderBase as C } from "./HeaderBase.js";
+import { HeaderLogo as b } from "./HeaderLogo.js";
+import { HeaderButton as y } from "./HeaderButton.js";
+import { Searchbar as B } from "../Searchbar/Searchbar.js";
+import { HeaderMenu as N } from "./HeaderMenu.js";
+import { HeaderSearch as S } from "./HeaderSearch.js";
+import '../../assets/Header.css';const I = "_drawer_1wgf5_1", M = "_dropdown_1wgf5_5", d = {
+  drawer: I,
+  dropdown: M
+}, O = ({ search: s, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
+  const { currentId: e, toggleId: n, openId: c, closeAll: m } = _();
+  g(m);
+  const f = () => {
+    c("search");
   }, h = () => {
+    n("search");
+  }, w = () => {
     n("menu");
   };
-  return /* @__PURE__ */ p(_, { currentId: e, open: e === "search" || e === "menu", onClose: m, children: [
-    /* @__PURE__ */ o(C, { ...l, className: d.logo }),
-    /* @__PURE__ */ p(B, { className: d.menu, children: [
+  return /* @__PURE__ */ p(C, { currentId: e, open: e === "search" || e === "menu", onClose: m, children: [
+    /* @__PURE__ */ o(b, { ...l, className: d.logo }),
+    /* @__PURE__ */ p(N, { className: d.menu, children: [
       /* @__PURE__ */ o(
-        b,
+        y,
         {
+          badge: i,
           avatar: a && {
             type: a.type,
             name: a.name
           },
-          onClick: h,
+          onClick: w,
           expanded: e === "menu",
           label: r == null ? void 0 : r.menuLabel
         }
       ),
-      r && /* @__PURE__ */ o(g, { padding: !1, placement: "right", expanded: e === "menu", className: d.dropdown, children: /* @__PURE__ */ o(t, { ...r, currentAccount: a }) })
+      r && /* @__PURE__ */ o(x, { padding: !1, placement: "right", expanded: e === "menu", className: d.dropdown, children: /* @__PURE__ */ o(t, { ...r, currentAccount: a }) })
     ] }),
-    s && /* @__PURE__ */ o(N, { expanded: e === "search", children: /* @__PURE__ */ o(y, { ...s, expanded: e === "search", onClose: f, onFocus: c }) }),
-    r && /* @__PURE__ */ o(x, { expanded: e === "menu", className: d.drawer, children: /* @__PURE__ */ o(t, { ...r, currentAccount: a }) })
+    s && /* @__PURE__ */ o(S, { expanded: e === "search", children: /* @__PURE__ */ o(B, { ...s, expanded: e === "search", onClose: h, onFocus: f }) }),
+    r && /* @__PURE__ */ o(H, { expanded: e === "menu", className: d.drawer, children: /* @__PURE__ */ o(t, { ...r, currentAccount: a }) })
   ] });
 };
 export {
-  J as Header
+  O as Header
 };

package/dist/components/Header/HeaderButton.d.ts

@@ -1,5 +1,6 @@
 import { ElementType } from 'react';
 import { AvatarProps, AvatarGroupProps } from '../Avatar';
+import { BadgeProps } from '../Badge';
 import { ButtonProps } from '../Button';
 import { IconName } from '../Icon';
 export interface HeaderButtonProps extends ButtonProps {
@@ -10,6 +11,7 @@ export interface HeaderButtonProps extends ButtonProps {
     className?: string;
     expanded?: boolean;
     icon?: IconName;
+    badge?: BadgeProps;
     tabIndex?: number;
 }
-export declare const HeaderButton: ({ className, as, avatar, avatarGroup, icon, expanded, label, ...buttonProps }: HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderButton: ({ className, as, avatar, avatarGroup, icon, expanded, label, badge, ...buttonProps }: HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/HeaderButton.js

@@ -1,38 +1,46 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { c as e } from "../../index-L8X2o7IH.js";
-import { Avatar as u } from "../Avatar/Avatar.js";
-import { AvatarGroup as h } from "../Avatar/AvatarGroup.js";
-import { ButtonBase as r } from "../Button/ButtonBase.js";
-import { Icon as b } from "../Icon/Icon.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { c as s } from "../../index-L8X2o7IH.js";
+import { Avatar as N } from "../Avatar/Avatar.js";
+import { AvatarGroup as f } from "../Avatar/AvatarGroup.js";
+import { Badge as a } from "../Badge/Badge.js";
+import { ButtonBase as u } from "../Button/ButtonBase.js";
+import { Icon as p } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/HeaderButton.css';const f = "_button_t01b4_1", I = "_label_t01b4_14", N = "_icon_t01b4_20", g = "_loginIcon_t01b4_30", x = "_closeIcon_t01b4_35", n = {
-  button: f,
-  label: I,
-  icon: N,
-  loginIcon: g,
-  closeIcon: x
-}, H = ({
+import '../../assets/HeaderButton.css';const h = "_button_buvev_1", v = "_label_buvev_14", I = "_icon_buvev_20", g = "_avatarGroup_buvev_30", x = "_loginIcon_buvev_39", B = "_closeIcon_buvev_44", G = "_badge_buvev_48", n = {
+  button: h,
+  label: v,
+  icon: I,
+  avatarGroup: g,
+  loginIcon: x,
+  closeIcon: B,
+  badge: G
+}, w = ({
   className: l,
-  as: s = "button",
+  as: t = "button",
   avatar: c,
   avatarGroup: _,
-  icon: p = "padlock-locked",
+  icon: b = "padlock-locked",
   expanded: d,
-  label: t = "Menu",
+  label: m = "Menu",
+  badge: o,
   ...i
-}) => d ? /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
-  /* @__PURE__ */ o("span", { className: n.label, children: t }),
-  /* @__PURE__ */ o("span", { className: e(n.icon, n.closeIcon), children: /* @__PURE__ */ o(b, { name: "x-mark" }) })
-] }) : _ ? /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
-  /* @__PURE__ */ o("span", { className: n.label, children: t }),
-  /* @__PURE__ */ o(h, { ..._, size: "sm" })
-] }) : c ? /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
-  /* @__PURE__ */ o("span", { className: n.label, children: t }),
-  /* @__PURE__ */ o(u, { type: c == null ? void 0 : c.type, name: c == null ? void 0 : c.name, size: "lg" })
-] }) : /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
-  /* @__PURE__ */ o("span", { className: n.label, children: t }),
-  /* @__PURE__ */ o("span", { className: e(n.icon, n.loginIcon), children: /* @__PURE__ */ o(b, { name: p }) })
+}) => d ? /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
+  /* @__PURE__ */ e("span", { className: n.label, children: m }),
+  /* @__PURE__ */ e("span", { className: s(n.icon, n.closeIcon), children: /* @__PURE__ */ e(p, { name: "x-mark" }) }),
+  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
+] }) : _ ? /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
+  /* @__PURE__ */ e("span", { className: n.label, children: m }),
+  /* @__PURE__ */ e(f, { ..._, size: "sm", className: n.avatarGroup }),
+  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
+] }) : c ? /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
+  /* @__PURE__ */ e("span", { className: n.label, children: m }),
+  /* @__PURE__ */ e(N, { type: c == null ? void 0 : c.type, name: c == null ? void 0 : c.name, size: "lg" }),
+  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
+] }) : /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
+  /* @__PURE__ */ e("span", { className: n.label, children: m }),
+  /* @__PURE__ */ e("span", { className: s(n.icon, n.loginIcon), children: /* @__PURE__ */ e(p, { name: b }) }),
+  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
 ] });
 export {
-  H as HeaderButton
+  w as HeaderButton
 };

package/dist/components/Header/HeaderButton.stories.js

@@ -1,5 +1,5 @@
 import { HeaderButton as a } from "./HeaderButton.js";
-const n = {
+const r = {
   title: "Header/HeaderButton",
   component: a,
   tags: ["autodocs"],
@@ -7,7 +7,7 @@ const n = {
     layout: "centered"
   },
   args: {}
-}, r = {
+}, n = {
   args: {}
 }, t = {
   args: {
@@ -25,6 +25,10 @@ const n = {
     avatar: {
       type: "company",
       name: "Bergen bar"
+    },
+    badge: {
+      color: "alert",
+      label: "2"
     }
   }
 }, p = {
@@ -41,7 +45,7 @@ const n = {
       ]
     }
   }
-}, m = {
+}, c = {
   args: {
     expanded: !0,
     avatar: {
@@ -53,9 +57,9 @@ const n = {
 export {
   s as Company,
   p as CompanyGroup,
-  r as Default,
-  m as Expanded,
+  n as Default,
+  c as Expanded,
   t as Icon,
   o as Person,
-  n as default
+  r as default
 };

package/dist/components/List/ListItem.d.ts

@@ -32,4 +32,4 @@ export interface ListItemProps extends ListItemBaseProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ as, color, loading, size, icon, avatar, avatarGroup, title, description, children, collapsible, expanded, badge, linkText, linkIcon, menu, select, controls, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ as, color, loading, size, icon, avatar, avatarGroup, title, description, collapsible, expanded, badge, linkText, linkIcon, menu, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -1,45 +1,41 @@
-import { jsx as o, jsxs as j } from "react/jsx-runtime";
-import { ListItemBase as u } from "./ListItemBase.js";
-import { ListItemControls as v } from "./ListItemControls.js";
-import { ListItemHeader as x } from "./ListItemHeader.js";
-import { ListItemLabel as g } from "./ListItemLabel.js";
-import { ListItemMedia as w } from "./ListItemMedia.js";
-const E = ({
-  as: n = "a",
-  color: r,
-  loading: B,
-  size: t = "sm",
-  icon: e,
-  avatar: s,
-  avatarGroup: c,
-  title: p,
+import { jsx as t } from "react/jsx-runtime";
+import { ListItemBase as v } from "./ListItemBase.js";
+import { ListItemControls as x } from "./ListItemControls.js";
+import { ListItemHeader as j } from "./ListItemHeader.js";
+import { ListItemLabel as w } from "./ListItemLabel.js";
+const D = ({
+  as: e = "a",
+  color: n,
+  loading: o,
+  size: r = "sm",
+  icon: i,
+  avatar: c,
+  avatarGroup: p,
+  title: s,
   description: I,
-  children: L,
   collapsible: m,
-  expanded: i,
+  expanded: L,
   badge: a,
-  linkText: l,
-  linkIcon: f,
-  menu: d,
-  select: h,
-  controls: k,
-  ...b
-}) => /* @__PURE__ */ o(
-  u,
+  linkText: f,
+  linkIcon: l,
+  menu: h,
+  select: k,
+  controls: b,
+  children: d,
+  ...u
+}) => /* @__PURE__ */ t(
+  v,
   {
-    as: n,
-    size: t,
-    color: r,
-    expanded: i,
-    select: h,
-    controls: k || /* @__PURE__ */ o(v, { linkIcon: m && i ? "chevron-up" : m ? "chevron-down" : f, linkText: l, menu: d, badge: a }),
-    ...b,
-    children: /* @__PURE__ */ j(x, { size: t, children: [
-      /* @__PURE__ */ o(w, { color: r, size: t, icon: e, avatar: s, avatarGroup: c }),
-      /* @__PURE__ */ o(g, { title: p, description: I, size: t, children: L })
-    ] })
+    as: e,
+    size: r,
+    color: n,
+    loading: o,
+    select: k,
+    controls: b || /* @__PURE__ */ t(x, { linkIcon: m && L ? "chevron-up" : m ? "chevron-down" : l, linkText: f, menu: h, badge: a }),
+    ...u,
+    children: /* @__PURE__ */ t(j, { loading: o, size: r, icon: i, avatar: c, avatarGroup: p, children: /* @__PURE__ */ t(w, { loading: o, title: s, description: I, size: r, children: d }) })
   }
 );
 export {
-  E as ListItem
+  D as ListItem
 };