@altinn/altinn-components 0.6.12 → 0.7.0

package/dist/components/Dialog/index.js

@@ -2,50 +2,50 @@ import { Dialog as e } from "./Dialog.js";
 import { DialogList as a } from "./DialogList.js";
 import { DialogMetadata as l } from "./DialogMetadata.js";
 import { DialogListItem as m } from "./DialogListItem.js";
-import { DialogListItemBase as f } from "./DialogListItemBase.js";
-import { DialogActions as x } from "./DialogActions.js";
-import { DialogActivityLog as B } from "./DialogActivityLog.js";
-import { DialogArticleBase as n } from "./DialogArticleBase.js";
-import { DialogBase as y } from "./DialogBase.js";
-import { DialogBodyBase as u } from "./DialogBodyBase.js";
-import { DialogBorder as L } from "./DialogBorder.js";
-import { DialogContent as v } from "./DialogContent.js";
-import { DialogFooter as T } from "./DialogFooter.js";
-import { DialogHeader as C } from "./DialogHeader.js";
-import { DialogHeaderBase as F } from "./DialogHeaderBase.js";
-import { DialogHeadings as N } from "./DialogHeadings.js";
-import { DialogHistory as j } from "./DialogHistory.js";
-import { DialogNav as q } from "./DialogNav.js";
-import { DialogSectionBase as z } from "./DialogSectionBase.js";
-import { DialogSeenBy as J } from "./DialogSeenBy.js";
-import { DialogSelect as O } from "./DialogSelect.js";
-import { DialogStatus as Q, DialogStatusEnum as R } from "./DialogStatus.js";
-import { DialogTitle as V } from "./DialogTitle.js";
-import { DialogTouchedBy as X } from "./DialogTouchedBy.js";
+import { DialogActions as f } from "./DialogActions.js";
+import { DialogActivityLog as x } from "./DialogActivityLog.js";
+import { DialogArticleBase as B } from "./DialogArticleBase.js";
+import { DialogBase as n } from "./DialogBase.js";
+import { DialogBodyBase as y } from "./DialogBodyBase.js";
+import { DialogBorder as u } from "./DialogBorder.js";
+import { DialogContent as L } from "./DialogContent.js";
+import { DialogFooter as v } from "./DialogFooter.js";
+import { DialogHeader as b } from "./DialogHeader.js";
+import { DialogHeaderBase as C } from "./DialogHeaderBase.js";
+import { DialogHeadings as F } from "./DialogHeadings.js";
+import { DialogHistory as M } from "./DialogHistory.js";
+import { DialogNav as j } from "./DialogNav.js";
+import { DialogSectionBase as q } from "./DialogSectionBase.js";
+import { DialogSeenBy as z } from "./DialogSeenBy.js";
+import { DialogSelect as J } from "./DialogSelect.js";
+import { DialogStatus as O, DialogStatusEnum as P } from "./DialogStatus.js";
+import { DialogTitle as R } from "./DialogTitle.js";
+import { DialogTouchedBy as V } from "./DialogTouchedBy.js";
+import { DialogLabel as X } from "./DialogLabel.js";
 export {
   e as Dialog,
-  x as DialogActions,
-  B as DialogActivityLog,
-  n as DialogArticleBase,
-  y as DialogBase,
-  u as DialogBodyBase,
-  L as DialogBorder,
-  v as DialogContent,
-  T as DialogFooter,
-  C as DialogHeader,
-  F as DialogHeaderBase,
-  N as DialogHeadings,
-  j as DialogHistory,
+  f as DialogActions,
+  x as DialogActivityLog,
+  B as DialogArticleBase,
+  n as DialogBase,
+  y as DialogBodyBase,
+  u as DialogBorder,
+  L as DialogContent,
+  v as DialogFooter,
+  b as DialogHeader,
+  C as DialogHeaderBase,
+  F as DialogHeadings,
+  M as DialogHistory,
+  X as DialogLabel,
   a as DialogList,
   m as DialogListItem,
-  f as DialogListItemBase,
   l as DialogMetadata,
-  q as DialogNav,
-  z as DialogSectionBase,
-  J as DialogSeenBy,
-  O as DialogSelect,
-  Q as DialogStatus,
-  R as DialogStatusEnum,
-  V as DialogTitle,
-  X as DialogTouchedBy
+  j as DialogNav,
+  q as DialogSectionBase,
+  z as DialogSeenBy,
+  J as DialogSelect,
+  O as DialogStatus,
+  P as DialogStatusEnum,
+  R as DialogTitle,
+  V as DialogTouchedBy
 };

package/dist/components/List/List.js

@@ -2,10 +2,9 @@ import { jsx as p } from "react/jsx-runtime";
 import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import "../RootProvider/RootProvider.js";
 import { ListItem as n } from "./ListItem.js";
 import { ListBase as f } from "./ListBase.js";
-const h = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((e, i) => /* @__PURE__ */ s(n, { ...e, size: t, key: "item" + i })) });
+const x = ({ theme: r, size: t = "md", spacing: m = "md", items: e = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: e.map((o, i) => /* @__PURE__ */ s(n, { ...o, size: t, key: "item" + i })) });
 export {
-  h as List
+  x as List
 };

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

@@ -1,37 +1,20 @@
-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 {
+import { ListItemBaseProps } from './ListItemBase';
+export interface ListItemProps extends ListItemBaseProps {
     id: string;
-    type?: string;
-    /** Element type to render */
-    as?: ElementType;
-    color?: ListItemColor;
-    href?: string;
-    onClick?(): void;
-    /** Item is active */
-    active?: boolean;
-    /** Item should be hidden from view */
-    hidden?: boolean;
+    /** Element is loading, display a placeholder */
+    loading?: boolean;
     /** Collapsible item, sets linkIcon to "chevron down" */
     collapsible?: boolean;
     /** Item is expanded, sets linkIcon to "chevron up" */
     expanded?: boolean;
-    /** Item is selected */
-    selected?: boolean;
-    /** Item is disabled, should disable mouse events */
-    disabled?: boolean;
-    /** Size of list item */
-    size?: ListItemSize;
     /** Title */
     title?: string;
     /** Optional description */
     description?: string;
-    /** Use children to create a custom label, overriding title and description */
-    children?: ReactNode;
     /** List item icon */
     icon?: IconName;
     /** List item avatar */
@@ -46,10 +29,7 @@ export interface ListItemProps {
     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, selected, disabled, size, icon, avatar, avatarGroup, title, description, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ as, color, loading, selected, disabled, size, icon, avatar, avatarGroup, title, description, children, collapsible, expanded, badge, linkText, linkIcon, menu, action, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -1,24 +1,49 @@
-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,
-  selected: i,
-  disabled: j,
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { ListItemAction as j } from "./ListItemAction.js";
+import { ListItemBase as v } from "./ListItemBase.js";
+import { ListItemFooter as x } from "./ListItemFooter.js";
+import { ListItemHeader as g } from "./ListItemHeader.js";
+import { ListItemLabel as u } from "./ListItemLabel.js";
+import { ListItemMedia as w } from "./ListItemMedia.js";
+const J = ({
+  as: s = "a",
+  color: r,
+  loading: A,
+  selected: B,
+  disabled: F,
   size: t = "sm",
-  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 })
-] });
+  icon: p,
+  avatar: I,
+  avatarGroup: L,
+  title: a,
+  description: d,
+  children: l,
+  collapsible: i,
+  expanded: m,
+  badge: f,
+  linkText: h,
+  linkIcon: b,
+  menu: e,
+  action: n,
+  ...k
+}) => /* @__PURE__ */ c(
+  v,
+  {
+    as: s,
+    size: t,
+    color: r,
+    expanded: m,
+    action: n || e && /* @__PURE__ */ o(j, { menu: e, children: n }),
+    ...k,
+    children: [
+      /* @__PURE__ */ c(g, { size: t, children: [
+        /* @__PURE__ */ o(w, { color: r, size: t, icon: p, avatar: I, avatarGroup: L }),
+        /* @__PURE__ */ o(u, { title: a, description: d, size: t, children: l })
+      ] }),
+      /* @__PURE__ */ o(x, { linkIcon: i && m ? "chevron-up" : i ? "chevron-down" : b, linkText: h, badge: f })
+    ]
+  }
+);
 export {
-  B as ListItem
+  J as ListItem
 };

package/dist/components/List/ListItem.stories.js

@@ -1,13 +1,14 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Fragment as p, useState as g } from "react";
-import { MetaItem as i } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import { Button as k } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
+import { MetaItem as r } from "../Meta/MetaItem.js";
 import { ListItem as t } from "./ListItem.js";
-import { ListBase as s } from "./ListBase.js";
-import { List as k } from "./List.js";
-const c = ["lg", "md", "sm", "xs"], D = {
+import { ListBase as c } from "./ListBase.js";
+import { List as y } from "./List.js";
+const s = ["lg", "md", "sm", "xs"], T = {
   title: "List/ListItem",
   component: t,
   tags: ["autodocs"],
@@ -18,13 +19,13 @@ const c = ["lg", "md", "sm", "xs"], D = {
     description: "Description",
     size: "md"
   }
-}, T = {
+}, B = {
   args: {}
-}, w = (n) => /* @__PURE__ */ a(s, { children: [
+}, E = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n }),
-  /* @__PURE__ */ e(i, { children: "No media" }),
+  /* @__PURE__ */ e(r, { children: "No media" }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
-  /* @__PURE__ */ e(i, { children: "Icon" }),
+  /* @__PURE__ */ e(r, { children: "Icon" }),
   /* @__PURE__ */ e(
     t,
     {
@@ -35,7 +36,7 @@ const c = ["lg", "md", "sm", "xs"], D = {
       }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Person" }),
+  /* @__PURE__ */ e(r, { children: "Person" }),
   /* @__PURE__ */ e(
     t,
     {
@@ -46,7 +47,7 @@ const c = ["lg", "md", "sm", "xs"], D = {
       }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Company" }),
+  /* @__PURE__ */ e(r, { children: "Company" }),
   /* @__PURE__ */ e(
     t,
     {
@@ -58,7 +59,7 @@ const c = ["lg", "md", "sm", "xs"], D = {
       }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Logo" }),
+  /* @__PURE__ */ e(r, { children: "Logo" }),
   /* @__PURE__ */ e(
     t,
     {
@@ -81,7 +82,7 @@ const c = ["lg", "md", "sm", "xs"], D = {
       }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "People group" }),
+  /* @__PURE__ */ e(r, { children: "People group" }),
   /* @__PURE__ */ e(
     t,
     {
@@ -104,20 +105,21 @@ const c = ["lg", "md", "sm", "xs"], D = {
       }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "Company group" })
-] }), E = (n) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { children: "Company group" })
+] }), H = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
-  /* @__PURE__ */ e(i, { children: "Link icon, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(r, { children: "Link icon, emphasising that this will take you somewhere" }),
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
-  /* @__PURE__ */ e(i, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(r, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
   /* @__PURE__ */ e(t, { ...n, collapsible: !0, badge: { label: "Admin" } }),
-  /* @__PURE__ */ e(i, { children: "Collapsible item with badge" }),
+  /* @__PURE__ */ e(r, { children: "Collapsible item with badge" }),
   /* @__PURE__ */ e(t, { ...n, collapsible: !0, expanded: !0 }),
-  /* @__PURE__ */ e(i, { children: "Collapsible and expanded item" }),
+  /* @__PURE__ */ e(r, { children: "Collapsible and expanded item" }),
   /* @__PURE__ */ e(
     t,
     {
       ...n,
+      badge: { label: "Admin" },
       linkIcon: "chevron-right",
       menu: {
         items: [
@@ -127,18 +129,26 @@ const c = ["lg", "md", "sm", "xs"], D = {
       }
     }
   ),
-  /* @__PURE__ */ e(i, { children: "List item with context menu and linkIcon" })
-] }), H = (n) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { children: "List item with context menu and linkIcon" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      action: /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(k, { icon: "pencil", reverse: !0, size: "sm", variant: "outline", children: "Rediger" }) })
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "List item with custom action" })
+] }), M = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n }),
-  /* @__PURE__ */ e(i, { children: "Default" }),
+  /* @__PURE__ */ e(r, { children: "Default" }),
   /* @__PURE__ */ e(t, { ...n, color: "accent" }),
-  /* @__PURE__ */ e(i, { children: "Accent" })
-] }), B = (n) => /* @__PURE__ */ e(s, { children: c == null ? void 0 : c.map((o) => /* @__PURE__ */ a(p, { children: [
-  /* @__PURE__ */ e(t, { ...n, size: o, selected: o === (n == null ? void 0 : n.size) }),
-  /* @__PURE__ */ e(i, { children: o })
-] }, o)) }), M = (n) => {
+  /* @__PURE__ */ e(r, { children: "Accent" })
+] }), P = (n) => /* @__PURE__ */ e(c, { children: s == null ? void 0 : s.map((o) => /* @__PURE__ */ a(p, { children: [
+  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: o, selected: o === (n == null ? void 0 : n.size), linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(r, { children: o })
+] }, o)) }), _ = (n) => {
   const [o, d] = g(!1), m = () => {
-    d((r) => !r);
+    d((i) => !i);
   }, l = [
     {
       name: "Per Ove Ludvigsen",
@@ -160,18 +170,18 @@ const c = ["lg", "md", "sm", "xs"], D = {
       role: "Toppspillerutvikler",
       rights: "Ingen rettigheter"
     }
-  ], h = l == null ? void 0 : l.map((r) => ({
+  ], h = l == null ? void 0 : l.map((i) => ({
     avatar: {
-      ...r,
+      ...i,
       type: "person"
     },
-    title: r == null ? void 0 : r.name,
-    description: r == null ? void 0 : r.role,
-    badge: { label: r == null ? void 0 : r.rights },
+    title: i == null ? void 0 : i.name,
+    description: i == null ? void 0 : i.role,
+    badge: { label: i == null ? void 0 : i.rights },
     linkIcon: "menu-elipsis-horizontal"
   })), u = {
-    items: l == null ? void 0 : l.map((r) => ({
-      name: r == null ? void 0 : r.name,
+    items: l == null ? void 0 : l.map((i) => ({
+      name: i == null ? void 0 : i.name,
       type: "person"
     }))
   };
@@ -187,15 +197,15 @@ const c = ["lg", "md", "sm", "xs"], D = {
         as: "button"
       }
     ),
-    o && /* @__PURE__ */ e(k, { size: "xs", spacing: "none", items: h })
+    o && /* @__PURE__ */ e(y, { size: "sm", spacing: "none", items: h })
   ] });
 };
 export {
-  E as ActionProps,
-  M as Collapsible,
-  H as Colors,
-  T as Default,
-  w as MediaTypes,
-  B as Sizes,
-  D as default
+  H as ActionProps,
+  _ as Collapsible,
+  M as Colors,
+  B as Default,
+  E as MediaTypes,
+  P as Sizes,
+  T as default
 };

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

@@ -1,13 +1,8 @@
 import { ReactNode } from 'react';
-import { BadgeProps } from '../Badge';
 import { ContextMenuProps } from '../ContextMenu';
-import { IconName } from '../Icon';
-interface ListItemActionProps {
-    badge?: BadgeProps;
+interface ListItemLinkProps {
     menu?: ContextMenuProps;
-    linkText?: string;
-    linkIcon?: IconName;
     children?: ReactNode;
 }
-export declare const ListItemAction: ({ linkText, linkIcon, menu, badge, children }: ListItemActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemAction: ({ menu, children }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/ListItemAction.js

@@ -1,19 +1,8 @@
-import { jsx as n, jsxs as e, Fragment as l } from "react/jsx-runtime";
-import { Badge as m } from "../Badge/Badge.js";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
-import { Icon as _ } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
-import "../../index-L8X2o7IH.js";
-import '../../assets/ListItemAction.css';const p = "_action_1lv65_3", x = "_linkText_1lv65_10", k = "_linkIcon_1lv65_15", t = {
-  action: p,
-  linkText: x,
-  linkIcon: k
-}, h = ({ linkText: o, linkIcon: i, menu: c, badge: s, children: r }) => /* @__PURE__ */ n("div", { className: t.action, children: r || /* @__PURE__ */ e(l, { children: [
-  s && /* @__PURE__ */ n(m, { ...s }),
-  c && /* @__PURE__ */ n(a, { ...c }),
-  o && /* @__PURE__ */ n("span", { className: t.linkText, children: o }),
-  i && /* @__PURE__ */ n(_, { name: i, className: t.linkIcon })
-] }) });
+import { jsx as t, Fragment as c } from "react/jsx-runtime";
+import { ContextMenu as i } from "../ContextMenu/ContextMenu.js";
+import '../../assets/ListItemAction.css';const r = "_action_mbqkv_3", s = {
+  action: r
+}, m = ({ menu: o, children: n }) => /* @__PURE__ */ t("div", { className: s.action, children: n || /* @__PURE__ */ t(c, { children: o && /* @__PURE__ */ t(i, { ...o }) }) });
 export {
-  h as ListItemAction
+  m as ListItemAction
 };

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

@@ -1,22 +1,18 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
-import { BadgeProps } from '../Badge';
-import { ContextMenuProps } from '../ContextMenu';
-import { IconName } from '../Icon';
 export type ListItemColor = 'default' | 'accent';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface ListItemBaseProps {
+export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ListItemBaseProps {
     as?: ElementType;
     size?: ListItemSize;
-    menu?: ContextMenuProps;
-    linkText?: string;
-    linkIcon?: IconName;
+    shadow?: ListItemShadow;
     color?: ListItemColor;
-    badge?: BadgeProps;
     href?: string;
     className?: string;
     active?: boolean;
     hidden?: boolean;
     collapsible?: boolean;
+    disabled?: boolean;
     selected?: boolean;
     expanded?: boolean;
     onClick?: () => void;
@@ -25,5 +21,4 @@ interface ListItemBaseProps {
     children?: ReactNode;
     style?: React.CSSProperties;
 }
-export declare const ListItemBase: ({ as, children, className, href, size, color, active, hidden, selected, collapsible, expanded, linkText, linkIcon, menu, badge, action, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const ListItemBase: ({ as, children, className, href, size, color, active, hidden, shadow, disabled, selected, expanded, action, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemBase.js

@@ -1,58 +1,62 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
-import { c as N } from "../../index-L8X2o7IH.js";
-import { ListItemAction as w } from "./ListItemAction.js";
-import '../../assets/ListItemBase.css';const z = "_item_17cbe_3", A = "_content_17cbe_46", B = "_action_17cbe_56", E = "_linkText_17cbe_63", g = "_linkIcon_17cbe_68", s = {
-  item: z,
-  content: A,
-  action: B,
-  linkText: E,
-  linkIcon: g
-}, G = ({
+import { jsxs as I, jsx as N } from "react/jsx-runtime";
+import { c as u } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemBase.css';const v = "_item_jxdl8_1", w = "_link_jxdl8_69", r = {
+  item: v,
+  link: w
+}, E = ({
   as: m,
-  children: r,
-  className: _,
-  href: d,
-  size: c,
-  color: l,
-  active: x = !1,
-  hidden: I = !1,
-  selected: p,
-  collapsible: e,
-  expanded: a,
-  linkText: b,
-  linkIcon: f,
-  menu: h,
-  badge: k,
-  action: v,
-  onClick: t,
-  onKeyPress: n,
-  style: L
+  children: l,
+  className: c,
+  href: n,
+  size: e,
+  color: x,
+  active: o = !1,
+  hidden: _ = !1,
+  shadow: p = "xs",
+  disabled: f,
+  selected: j,
+  expanded: d,
+  action: h,
+  onClick: a,
+  onKeyPress: t,
+  style: i
 }) => {
-  const T = m || "a", j = e && a ? "chevron-up" : e ? "chevron-down" : f;
-  return /* @__PURE__ */ u(
-    T,
+  const b = m || "a";
+  return /* @__PURE__ */ I(
+    "article",
     {
-      className: N(s.item, _),
-      "data-color": l,
-      "data-size": c,
-      "data-active": x,
-      "aria-hidden": I,
-      "aria-selected": p,
-      "aria-expanded": a,
-      href: d,
-      onKeyPress: (o) => {
-        o.key === "Enter" && (t == null || t()), n == null || n(o);
-      },
-      onClick: t,
-      tabIndex: -1,
-      style: L,
+      className: r.item,
+      "data-color": x,
+      "data-size": e,
+      "data-shadow": p,
+      "data-active": o,
+      "aria-hidden": _,
+      "aria-disabled": f,
+      "aria-selected": j,
+      "aria-expanded": d,
+      style: i,
       children: [
-        /* @__PURE__ */ i("div", { className: s.content, "data-size": c, children: r }),
-        /* @__PURE__ */ i(w, { badge: k, linkText: b, linkIcon: j, menu: h, children: v })
+        /* @__PURE__ */ N(
+          b,
+          {
+            className: u(r.link, c),
+            "data-size": e,
+            "aria-expanded": d,
+            style: i,
+            href: n,
+            onKeyPress: (s) => {
+              s.key === "Enter" && (a == null || a()), t == null || t(s);
+            },
+            onClick: a,
+            tabIndex: -1,
+            children: l
+          }
+        ),
+        h
       ]
     }
   );
 };
 export {
-  G as ListItemBase
+  E as ListItemBase
 };

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BadgeProps } from '../Badge';
+import { IconName } from '../Icon';
+interface ListItemFooterProps {
+    badge?: BadgeProps;
+    linkText?: string;
+    linkIcon?: IconName;
+    children?: ReactNode;
+}
+export declare const ListItemFooter: ({ badge, linkText, linkIcon, children }: ListItemFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/ListItemFooter.js

@@ -0,0 +1,17 @@
+import { jsx as o, jsxs as c, Fragment as i } from "react/jsx-runtime";
+import { Badge as m } from "../Badge/Badge.js";
+import { Icon as l } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/ListItemFooter.css';const a = "_footer_r3tc7_1", _ = "_linkText_r3tc7_8", f = "_linkIcon_r3tc7_13", t = {
+  footer: a,
+  linkText: _,
+  linkIcon: f
+}, T = ({ badge: r, linkText: n, linkIcon: e, children: s }) => /* @__PURE__ */ o("footer", { className: t.footer, children: s || /* @__PURE__ */ c(i, { children: [
+  r && /* @__PURE__ */ o(m, { ...r }),
+  n && /* @__PURE__ */ o("span", { className: t.linkText, children: n }),
+  e && /* @__PURE__ */ o(l, { name: e, className: t.linkIcon })
+] }) });
+export {
+  T as ListItemFooter
+};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ListItemSize } from './ListItemBase';
+export interface ListItemHeaderProps {
+    size?: ListItemSize;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ListItemHeader: ({ size, className, children }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;