@altinn/altinn-components 0.6.10 → 0.6.12

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/Footer.css

@@ -0,0 +1 @@
+._address_5rd7f_1{display:flex;flex-direction:column;column-gap:.5rem}

package/dist/assets/FooterBase.css

@@ -1 +1 @@
-._footer_1d8fg_1{width:100%;border-top:1px solid;border-color:var(--theme-border-subtle);display:flex;flex-direction:column;row-gap:1rem;padding:1rem 0;margin:2rem 1rem}._grid_1d8fg_14{width:100%;max-width:80rem;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;row-gap:1rem}@media (min-width: 1024px){._grid_1d8fg_14{padding:0 1rem;flex-direction:row}}
+._footer_z2xgm_1{border-top:1px solid;border-color:var(--theme-border-subtle);display:flex;flex-direction:column;row-gap:1rem;padding:1rem 0;margin:2rem 1rem}._grid_z2xgm_13{width:100%;max-width:80rem;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;row-gap:1rem}@media (min-width: 1024px){._grid_z2xgm_13{padding:0 1rem;flex-direction:row}}

package/dist/assets/ListItemAction.css

@@ -0,0 +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}

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._item_1cdyi_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_1cdyi_3[data-size=xs]{min-height:36px}._item_1cdyi_3[data-size=sm]{min-height:44px}._item_1cdyi_3[data-size=md]{min-height:56px}._item_1cdyi_3[data-size=lg]{min-height:64px}._item_1cdyi_3[data-size=xl]{min-height:72px}._content_1cdyi_46{flex-grow:1;display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem}._action_1cdyi_56{display:flex;align-items:center;gap:.625rem;padding:.625rem}._linkIcon_1cdyi_63{font-size:1.5rem}._item_1cdyi_3{background-color:var(--theme-background-default);box-shadow:var(--ds-shadow-xs)}._item_1cdyi_3:hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_1cdyi_3:hover strong{text-decoration:underline}._item_1cdyi_3[data-active=true],._item_1cdyi_3[data-color=accent]{background-color:var(--theme-surface-default)}._item_1cdyi_3[data-color=accent]:hover{background-color:var(--theme-surface-hover)}
+._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)}

package/dist/components/Footer/Footer.d.ts

@@ -1,6 +1,7 @@
 import { FooterMenuProps } from './FooterMenu';
 export interface FooterProps {
     address: string;
+    address2?: string;
     menu: FooterMenuProps;
 }
-export declare const Footer: ({ address, menu }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Footer: ({ address, address2, menu }: FooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/Footer.js

@@ -1,14 +1,19 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { FooterAddress as m } from "./FooterAddress.js";
-import { FooterBase as i } from "./FooterBase.js";
-import { FooterLogo as s } from "./FooterLogo.js";
-import { FooterMenu as p } from "./FooterMenu.js";
-const x = ({ address: t, menu: e }) => /* @__PURE__ */ o(i, { children: [
-  /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ r(s, {}),
-    t
+import { FooterAddress as t } from "./FooterAddress.js";
+import { FooterBase as n } from "./FooterBase.js";
+import { FooterLogo as i } from "./FooterLogo.js";
+import { FooterMenu as m } from "./FooterMenu.js";
+import '../../assets/Footer.css';const a = "_address_5rd7f_1", c = {
+  address: a
+}, x = ({ address: s, address2: e, menu: d }) => /* @__PURE__ */ o(n, { children: [
+  /* @__PURE__ */ o(t, { children: [
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ o("div", { className: c.address, children: [
+      /* @__PURE__ */ r("span", { children: s }),
+      /* @__PURE__ */ r("span", { children: e })
+    ] })
   ] }),
-  /* @__PURE__ */ r(p, { ...e })
+  /* @__PURE__ */ r(m, { ...d })
 ] });
 export {
   x as Footer

package/dist/components/Footer/Footer.stories.js

@@ -3,9 +3,12 @@ const o = {
   title: "Footer/Footer",
   component: t,
   tags: ["autodocs"],
-  parameters: {},
+  parameters: {
+    layout: "fullscreen"
+  },
   args: {
     address: "Postboks 1382 Vika, 0114 Oslo.",
+    address2: "Org.nr. 991 825 827",
     menu: {
       items: [
         {
@@ -27,8 +30,8 @@ const o = {
       ]
     }
   }
-}, i = {};
+}, r = {};
 export {
-  i as Default,
+  r as Default,
   o as default
 };

package/dist/components/Footer/FooterBase.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as e } from "react/jsx-runtime";
 import { c } from "../../index-L8X2o7IH.js";
-import '../../assets/FooterBase.css';const d = "_footer_1d8fg_1", f = "_grid_1d8fg_14", o = {
-  footer: d,
-  grid: f
-}, a = ({ className: r, children: s }) => /* @__PURE__ */ t("footer", { className: c(o.footer, r), children: /* @__PURE__ */ e("div", { className: o.grid, children: [
+import '../../assets/FooterBase.css';const i = "_footer_z2xgm_1", m = "_grid_z2xgm_13", o = {
+  footer: i,
+  grid: m
+}, n = ({ className: r, children: s }) => /* @__PURE__ */ t("footer", { className: c(o.footer, r), children: /* @__PURE__ */ e("div", { className: o.grid, children: [
   s,
   " "
 ] }) });
 export {
-  a as FooterBase
+  n as FooterBase
 };

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -5,12 +5,12 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import { AccountMenu as v } from "./AccountMenu.js";
-import { MenuListItem as l } from "../Menu/MenuBase.js";
-import { Menu as d } from "../Menu/Menu.js";
 import { AccountButton as C } from "./AccountButton.js";
 import { BackButton as j } from "./BackButton.js";
-import { GlobalMenuBase as m, GlobalMenuHeader as f, GlobalMenuFooter as A } from "./GlobalMenuBase.js";
-import { LogoutButton as F } from "./LogoutButton.js";
+import { LogoutButton as A } from "./LogoutButton.js";
+import { MenuListItem as l } from "../Menu/MenuBase.js";
+import { Menu as d } from "../Menu/Menu.js";
+import { GlobalMenuBase as m, GlobalMenuHeader as f, GlobalMenuFooter as F } from "./GlobalMenuBase.js";
 const N = ({
   accounts: a = [],
   accountGroups: h = {},
@@ -55,7 +55,7 @@ const N = ({
     /* @__PURE__ */ o(d, { groups: c, items: p }),
     u && /* @__PURE__ */ n(x, { children: [
       /* @__PURE__ */ o(l, { as: "div", role: "separator" }),
-      /* @__PURE__ */ o(A, { children: /* @__PURE__ */ o(F, { ...u }) })
+      /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(A, { ...u }) })
     ] })
   ] }) : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(d, { groups: c, items: p }) });
 };

package/dist/components/GlobalMenu/index.d.ts

@@ -1,2 +1,5 @@
 export * from './AccountMenu';
 export * from './GlobalMenu';
+export * from './AccountButton';
+export * from './BackButton';
+export * from './LogoutButton';

package/dist/components/GlobalMenu/index.js

@@ -1,6 +1,12 @@
 import { AccountMenu as r } from "./AccountMenu.js";
-import { GlobalMenu as t } from "./GlobalMenu.js";
+import { GlobalMenu as e } from "./GlobalMenu.js";
+import { AccountButton as c } from "./AccountButton.js";
+import { BackButton as m } from "./BackButton.js";
+import { LogoutButton as x } from "./LogoutButton.js";
 export {
+  c as AccountButton,
   r as AccountMenu,
-  t as GlobalMenu
+  m as BackButton,
+  e as GlobalMenu,
+  x as LogoutButton
 };

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

@@ -1,9 +1,10 @@
-import { GlobalMenuProps } from '../GlobalMenu';
-import { Account } from '../GlobalMenu/AccountButton.tsx';
+import { GlobalMenuProps, Account } from '../GlobalMenu';
 import { SearchbarProps } from '../Searchbar';
+import { HeaderLogoProps } from './HeaderLogo';
 export interface HeaderProps {
     menu: GlobalMenuProps;
     search?: SearchbarProps;
     currentAccount?: Account;
+    logo?: HeaderLogoProps;
 }
-export declare const Header: ({ search, menu, currentAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ search, menu, currentAccount, logo }: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/Header.js

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

package/dist/components/Layout/Layout.stories.js

@@ -1,15 +1,15 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { useState as g, createElement as I } from "react";
+import { jsx as n, jsxs as u, Fragment as I } from "react/jsx-runtime";
+import { useState as g, createElement as y } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListItem as y } from "../Dialog/DialogListItem.js";
-import { ListBase as A } from "../List/ListBase.js";
+import { DialogListItem as A } from "../Dialog/DialogListItem.js";
+import { ListBase as v } from "../List/ListBase.js";
 import { Layout as k } from "./Layout.js";
-import { ActionHeader as v } from "../LayoutAction/ActionHeader.js";
-import { ActionFooter as w } from "../LayoutAction/ActionFooter.js";
-import { ActionMenu as C } from "../LayoutAction/ActionMenu.js";
-import { Snackbar as L } from "../Snackbar/Snackbar.js";
+import { ActionHeader as w } from "../LayoutAction/ActionHeader.js";
+import { ActionFooter as C } from "../LayoutAction/ActionFooter.js";
+import { ActionMenu as L } from "../LayoutAction/ActionMenu.js";
+import { Snackbar as M } from "../Snackbar/Snackbar.js";
 const m = {
   search: {
     name: "search",
@@ -29,8 +29,9 @@ const m = {
       }
     ]
   }
-}, M = {
+}, x = {
   address: "Postboks 1382 Vika, 0114 Oslo.",
+  address2: "Org.nr. 991 825 827",
   menu: {
     items: [
       {
@@ -99,7 +100,7 @@ const m = {
       title: "Papirkurv"
     }
   ]
-}, H = {
+}, Q = {
   title: "Layout/Layout",
   component: k,
   tags: ["autodocs"],
@@ -109,14 +110,14 @@ const m = {
   args: {
     theme: "person",
     header: m,
-    footer: M,
+    footer: x,
     sidebar: {
       menu: f
     }
   }
-}, Q = {
+}, U = {
   args: {}
-}, U = (a) => {
+}, V = (a) => {
   const [r, s] = g(""), h = (t) => {
     s(t.target.value);
   }, p = [
@@ -173,7 +174,7 @@ const m = {
       }
     }
   );
-}, V = (a) => {
+}, $ = (a) => {
   const [r, s] = g([]), [h, p] = g({
     1: {
       id: "1",
@@ -237,9 +238,9 @@ const m = {
       sidebar: { hidden: i, menu: f },
       content: { theme: "neutral" },
       children: [
-        /* @__PURE__ */ n(v, { title: b, hidden: !i }),
-        /* @__PURE__ */ n(A, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ I(
-          y,
+        /* @__PURE__ */ n(w, { title: b, hidden: !i }),
+        /* @__PURE__ */ n(v, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ y(
+          A,
           {
             ...e,
             key: e == null ? void 0 : e.id,
@@ -249,17 +250,17 @@ const m = {
             select: { checked: e == null ? void 0 : e.selected, onChange: () => d(e) }
           }
         )) }),
-        /* @__PURE__ */ u(w, { children: [
-          i && /* @__PURE__ */ n(C, { items: c }),
-          r.length > 0 && (r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ n(L, { ...e }, o)))
-        ] })
+        /* @__PURE__ */ n(C, { hidden: !1, children: /* @__PURE__ */ u(I, { children: [
+          i && /* @__PURE__ */ n(L, { items: c, theme: "global-dark" }),
+          r.length > 0 && (r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ n(M, { ...e }, o)))
+        ] }) })
       ]
     }
   );
 };
 export {
-  U as ControlledStateSearch,
-  Q as Default,
-  V as InboxBulkMode,
-  H as default
+  V as ControlledStateSearch,
+  U as Default,
+  $ as InboxBulkMode,
+  Q as default
 };

package/dist/components/LayoutAction/ActionFooter.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 export interface ActionFooterProps {
-    hidden: boolean;
+    hidden?: boolean;
     children?: ReactElement;
 }
 export declare const ActionFooter: ({ hidden, children }: ActionFooterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { ElementType, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
+import { ContextMenuProps } from '../ContextMenu';
 import { IconName } from '../Icon';
 import { ListItemColor, ListItemSize } from './ListItemBase';
 export interface ListItemProps {
@@ -23,24 +24,32 @@ export interface ListItemProps {
     selected?: boolean;
     /** Item is disabled, should disable mouse events */
     disabled?: boolean;
-    /** Display an icon indicating behaviour */
-    linkIcon?: IconName;
     /** Size of list item */
     size?: ListItemSize;
     /** Title */
     title?: string;
     /** Optional description */
     description?: string;
-    /** Optional badge */
-    badge?: BadgeProps;
+    /** Use children to create a custom label, overriding title and description */
+    children?: ReactNode;
     /** List item icon */
     icon?: IconName;
     /** List item avatar */
     avatar?: AvatarProps;
     /** List item avatarGroup */
     avatarGroup?: AvatarGroupProps;
-    children?: ReactNode;
+    /** Optional text indicating behaviour */
+    linkText?: string;
+    /** Optional icon indicating behaviour */
+    linkIcon?: IconName;
+    /** Optional badge */
+    badge?: BadgeProps;
+    /** Optional context menu */
+    menu?: ContextMenuProps;
+    /** Custom action overrides linkText, linkIcon, badge and menu */
+    action?: ReactNode;
+    /** Child items */
     items?: ListItemProps[];
     className?: string;
 }
-export declare const ListItem: ({ as, color, children, selected, disabled, size, icon, avatar, avatarGroup, badge, title, description, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ as, color, selected, disabled, size, icon, avatar, avatarGroup, title, description, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -1,25 +1,24 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { ListItemBase as x } from "./ListItemBase.js";
-import { ListItemLabel as b } from "./ListItemLabel.js";
-import { ListItemMedia as j } from "./ListItemMedia.js";
-const M = ({
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
+import { ListItemBase as n } from "./ListItemBase.js";
+import { ListItemLabel as x } from "./ListItemLabel.js";
+import { ListItemMedia as b } from "./ListItemMedia.js";
+const B = ({
   as: e = "a",
   color: m,
-  children: i,
-  selected: s,
-  disabled: l,
+  selected: i,
+  disabled: j,
   size: t = "sm",
-  icon: o,
-  avatar: a,
-  avatarGroup: p,
-  badge: L,
-  title: d,
-  description: f,
-  ...I
-}) => /* @__PURE__ */ n(x, { as: e, size: t, badge: L, color: m, selected: s, ...I, children: [
-  /* @__PURE__ */ r(j, { color: m, size: t, icon: o, avatar: a, avatarGroup: p }),
-  /* @__PURE__ */ r(b, { title: d, description: f, size: t, children: i })
+  icon: s,
+  avatar: o,
+  avatarGroup: a,
+  title: p,
+  description: L,
+  children: d,
+  ...f
+}) => /* @__PURE__ */ I(n, { as: e, size: t, color: m, selected: i, ...f, children: [
+  /* @__PURE__ */ r(b, { color: m, size: t, icon: s, avatar: o, avatarGroup: a }),
+  /* @__PURE__ */ r(x, { title: p, description: L, size: t, children: d })
 ] });
 export {
-  M as ListItem
+  B as ListItem
 };