@altinn/altinn-components 0.6.12 → 0.7.1

package/dist/components/Dialog/DialogTitle.js

@@ -1,13 +1,12 @@
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { Icon as m } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
-import "../../index-L8X2o7IH.js";
-import '../../assets/DialogTitle.css';const n = "_title_ls5lr_1", a = {
-  title: n
-}, x = ({ size: e = "sm", seen: i = !1, variant: l, icon: t, children: o }) => /* @__PURE__ */ r("h2", { className: a.title, "data-seen": i, "data-size": e, "data-variant": l, children: [
-  /* @__PURE__ */ s("span", { children: o }),
-  t && /* @__PURE__ */ s(m, { name: t, className: a.icon })
+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 })
 ] });
 export {
-  x as DialogTitle
+  g as DialogTitle
 };

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

@@ -0,0 +1,31 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { withThemeByDataAttribute as m } from "@storybook/addon-themes";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { MetaItem as s } from "../Meta/MetaItem.js";
+import { DialogListItem as o } from "./DialogListItem.js";
+import { ListBase as a } from "../List/ListBase.js";
+const y = {
+  title: "Dialog/Examples",
+  component: o,
+  tags: ["autodocs"],
+  decorators: [
+    m({
+      themes: {
+        company: "company",
+        person: "person"
+      },
+      defaultTheme: "company"
+    })
+  ],
+  argTypes: {}
+}, g = (e) => /* @__PURE__ */ r(a, { children: [
+  /* @__PURE__ */ t(o, { ...e, status }),
+  /* @__PURE__ */ t(s, { children: status == null ? void 0 : status.value })
+] });
+export {
+  g as RequiresAttention,
+  y as default
+};

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

@@ -2,7 +2,6 @@ export * from './Dialog';
 export * from './DialogList';
 export * from './DialogMetadata';
 export * from './DialogListItem';
-export * from './DialogListItemBase';
 export * from './DialogActions.tsx';
 export * from './DialogActivityLog';
 export * from './DialogArticleBase';
@@ -22,3 +21,4 @@ export * from './DialogSelect';
 export * from './DialogStatus';
 export * from './DialogTitle';
 export * from './DialogTouchedBy';
+export * from './DialogLabel';

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/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, size, icon, avatar, avatarGroup, title, description, children, collapsible, expanded, badge, linkText, linkIcon, menu, select, controls, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -1,24 +1,45 @@
-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 { 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: s,
-  avatar: o,
-  avatarGroup: a,
+  icon: e,
+  avatar: s,
+  avatarGroup: c,
   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 })
-] });
+  description: I,
+  children: L,
+  collapsible: m,
+  expanded: i,
+  badge: a,
+  linkText: l,
+  linkIcon: f,
+  menu: d,
+  select: h,
+  controls: k,
+  ...b
+}) => /* @__PURE__ */ o(
+  u,
+  {
+    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 })
+    ] })
+  }
+);
 export {
-  B as ListItem
+  E 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 { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { Fragment as d, useState as g } from "react";
 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 { List as b } from "./List.js";
+const a = ["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__ */ c(s, { 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__ */ c(s, { 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,49 @@ 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 badge, linkIcon and context menu" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(k, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "List item with custom controls" })
+] }), M = (n) => /* @__PURE__ */ e(s, { children: a == null ? void 0 : a.map((o) => /* @__PURE__ */ c(d, { children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      size: o,
+      select: {
+        checked: !1
+      }
+    }
+  ),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      size: o,
+      select: {
+        checked: !0
+      },
+      selected: !0
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: o })
+] }, o)) }), S = (n) => /* @__PURE__ */ c(s, { 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) => {
-  const [o, d] = g(!1), m = () => {
-    d((r) => !r);
+  /* @__PURE__ */ e(r, { children: "Accent" })
+] }), _ = (n) => /* @__PURE__ */ e(s, { children: a == null ? void 0 : a.map((o) => /* @__PURE__ */ c(d, { 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)) }), j = (n) => {
+  const [o, p] = g(!1), m = () => {
+    p((i) => !i);
   }, l = [
     {
       name: "Per Ove Ludvigsen",
@@ -160,22 +193,22 @@ 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"
     }))
   };
-  return /* @__PURE__ */ a(p, { children: [
+  return /* @__PURE__ */ c(d, { children: [
     /* @__PURE__ */ e(
       t,
       {
@@ -187,15 +220,16 @@ const c = ["lg", "md", "sm", "xs"], D = {
         as: "button"
       }
     ),
-    o && /* @__PURE__ */ e(k, { size: "xs", spacing: "none", items: h })
+    o && /* @__PURE__ */ e(b, { 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
+  j as Collapsible,
+  S as Colors,
+  H as Controls,
+  B as Default,
+  E as MediaTypes,
+  M as Selectable,
+  _ as Sizes,
+  T as default
 };

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

@@ -1,29 +1,27 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
-import { BadgeProps } from '../Badge';
-import { ContextMenuProps } from '../ContextMenu';
-import { IconName } from '../Icon';
+import { ListItemSelectProps } from './ListItemSelect';
 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;
+    select?: ListItemSelectProps;
     selected?: boolean;
     expanded?: boolean;
     onClick?: () => void;
     onKeyPress?: KeyboardEventHandler;
     action?: ReactNode;
+    controls?: ReactNode;
     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, select, selected, disabled, expanded, controls, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemBase.js

@@ -1,58 +1,64 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { jsxs as L, jsx as m } 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 = ({
-  as: m,
-  children: r,
-  className: _,
-  href: d,
-  size: c,
-  color: l,
+import { ListItemSelect as v } from "./ListItemSelect.js";
+import '../../assets/ListItemBase.css';const w = "_item_us7f0_1", B = "_link_us7f0_74", r = {
+  item: w,
+  link: B
+}, k = ({
+  as: c,
+  children: l,
+  className: n,
+  href: o,
+  size: t,
+  color: f,
   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
+  hidden: p = !1,
+  shadow: _ = "xs",
+  select: s,
+  selected: h,
+  disabled: u,
+  expanded: i,
+  controls: I,
+  onClick: a,
+  onKeyPress: e,
+  style: b
 }) => {
-  const T = m || "a", j = e && a ? "chevron-up" : e ? "chevron-down" : f;
-  return /* @__PURE__ */ u(
-    T,
+  const j = c || "a";
+  return /* @__PURE__ */ L(
+    "article",
     {
-      className: N(s.item, _),
-      "data-color": l,
-      "data-size": c,
+      className: r.item,
+      "data-color": f,
+      "data-size": t,
+      "data-shadow": _,
       "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,
+      "aria-hidden": p,
+      "aria-disabled": u,
+      "aria-selected": h,
+      "aria-expanded": 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 })
+        s && /* @__PURE__ */ m(v, { ...s, size: t }),
+        /* @__PURE__ */ m(
+          j,
+          {
+            className: N(r.link, n),
+            "data-size": t,
+            "aria-expanded": i,
+            style: b,
+            href: o,
+            onKeyPress: (d) => {
+              d.key === "Enter" && (a == null || a()), e == null || e(d);
+            },
+            onClick: a,
+            tabIndex: -1,
+            children: l
+          }
+        ),
+        I
       ]
     }
   );
 };
 export {
-  G as ListItemBase
+  k as ListItemBase
 };