@altinn/altinn-components 0.16.0 → 0.17.0

package/README.md

@@ -1,32 +1,35 @@
 # altinn-components
 
 The next frontend of altinn.no is developed by multiple product teams, all working toward the shared goal of delivering a seamless, unified experience for the end users — ensuring they perceive it as a single and robust product.
-This package represents a collaborative effort between designers and developers across these teams, consolidating solutions to shared challenges. 
-It provides Altinn-specific React components tailored to address the common UI needs of these specific teams.   
+This package represents a collaborative effort between designers and developers across these teams, consolidating solutions to shared challenges.
+It provides Altinn-specific React components tailored to address the common UI needs of these specific teams.
 
-Today these teams are [Team Arbeidsflate](https://github.com/digdir/dialogporten-frontend), [Team authorization](https://github.com/Altinn/altinn-access-management-frontend), and Team Portal.
+Today these teams are [Team Arbeidsflate](https://github.com/digdir/dialogporten-frontend), [Team Authorization](https://github.com/Altinn/altinn-access-management-frontend), and Team Portal.
 
-Note that this package is specifically designed to meet the unique needs of the aforementioned teams and is not intended to serve as a general-purpose library. 
+Note that this package is specifically designed to meet the unique needs of the aforementioned teams and is not intended to serve as a general-purpose library.
 We already have the amazing [Norwegian public sector's Design System](https://designsystemet.no/), and we aim to incorporate its elements wherever it makes sense, ensuring alignment and leveraging its strengths while adapting to the specific requirements of Altinn.
 
-Currently, we do not use components from the design system _directly_ but rely on its token structure and continue to explore opportunities for deeper integration. 
-This approach helps us align with brand guidelines and the broader vision of a unified Altinn product. 
+Currently, we do not use components from the design system _directly_ but rely on its token structure and continue to explore opportunities for deeper integration.
+This approach helps us align with brand guidelines and the broader vision of a unified Altinn product.
 
 ## Feedback and questions
-Keep in mind that this package is a work in progress and will be updated continuously. 
+
+Keep in mind that this package is a work in progress and will be updated continuously.
 If you have any feedback or questions, please reach out to us on Github.
 
 ## Installation
+
 To install the package, run the following command:
 
 ```bash
 # for npm users
 npm install @altinn/components
 # for yarn users
-yarn add @altinn/components 
+yarn add @altinn/components
 # for pnpm users
 pnpm add @altinn/components
 ```
+
 Tested with Node.js 20.x <
 
 ## Requirements
@@ -34,17 +37,14 @@ Tested with Node.js 20.x <
 `React` `>=18`in your project as a peer dependency. And `react-dom` if needed.
 
 ## Usage
+
 Wrap your application in RootProvider to enable shared context across all components. Here’s a basic setup:
 
 ```tsx
-import { RootProvider } from '@altinn/components';
+import { RootProvider } from "@altinn/components";
 
 function App() {
-  return (
-    <RootProvider>
-      { /* Your application here */ }
-    </RootProvider>
-  );
+  return <RootProvider>{/* Your application here */}</RootProvider>;
 }
 ```
 
@@ -52,20 +52,24 @@ To use the components in your application, you need to import the components you
 
 ```tsx
 // example: import the Avatar component and type
-import { Avatar, type AvatarVariant } from '@altinn/components';
+import { Avatar, type AvatarVariant } from "@altinn/components";
 ```
+
 and import the css file in your application once, e.g. in your css:
+
 ```ts
-import '@altinn/altinn-components/lib/css/global.css';
+import "@altinn/altinn-components/lib/css/global.css";
 ```
-for correct `font-family` and minimal collection of resets.
 
+for correct `font-family` and minimal collection of resets.
 
 ## Documentation
+
 The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)  
-Components are decorated with tags to show the current status of the component. 
+Components are decorated with tags to show the current status of the component.
 
 The tags are:
+
 - `@outdated` - The component is out of sync with latest design.
 - `@beta` - The component is in beta and is more likely to have flaws or missing features.
 - `@experimental` - The component is experimental and is work in progress. Recommended not to use.
@@ -109,4 +113,4 @@ pnpm test-storybook --watch 'MyComponent.stories.tsx'
 
 - 
 To skip the test add 'skip-test' string into the tags array for the test you want to exclude. That option is defined in the test-runner.ts file. 
-Currently all the tests under stories/Demo and docs are excluded as the accessibility test is not needed there.
+Currently all the tests under stories/Demo and docs are excluded as the accessibility test is not needed there.

package/dist/ListItemBase-BVx5MDhO.js

@@ -0,0 +1,83 @@
+import { jsx as f } from "react/jsx-runtime";
+import { c as H } from "./index-L8X2o7IH.js";
+import './assets/ListItemBase.css';const I = "_item_12vtu_1", N = "_interactive_12vtu_54", q = "_interactiveSelected_12vtu_96", A = "_interactiveHidden_12vtu_100", t = {
+  item: I,
+  interactive: N,
+  interactiveSelected: q,
+  interactiveHidden: A
+}, G = ({
+  title: b,
+  interactive: w = !0,
+  as: x,
+  href: h,
+  onClick: a,
+  onKeyPress: e,
+  tabIndex: L,
+  size: d,
+  variant: n,
+  color: c,
+  theme: i,
+  shadow: j,
+  loading: r,
+  disabled: s,
+  hidden: v = !1,
+  active: o = !1,
+  selected: m,
+  className: _,
+  onMouseEnter: l,
+  children: p
+}) => {
+  const u = i === "transparent" ? "none" : j;
+  if (w) {
+    const B = H(
+      t.item,
+      t.interactive,
+      _,
+      m && t.interactiveSelected,
+      v && t.interactiveHidden
+    );
+    return /* @__PURE__ */ f(
+      x || "button",
+      {
+        "aria-label": b,
+        className: B,
+        "data-variant": n,
+        "data-color": c,
+        "data-theme": i,
+        "data-size": d,
+        "data-shadow": u,
+        "data-active": o,
+        href: h,
+        onKeyPress: (S) => {
+          S.key === "Enter" && (a == null || a()), e == null || e(S);
+        },
+        onClick: a,
+        tabIndex: L,
+        "aria-disabled": s || r,
+        disabled: s || r,
+        onMouseEnter: l,
+        children: p
+      }
+    );
+  }
+  const z = H(t.item, _, m && t.interactiveSelected);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: z,
+      "data-variant": n,
+      "data-color": c,
+      "data-theme": i,
+      "data-size": d,
+      "data-shadow": u,
+      "data-active": o,
+      "aria-hidden": v,
+      onMouseEnter: l,
+      children: p
+    }
+  );
+};
+export {
+  G as L,
+  t as s
+};

package/dist/assets/Flex.css

@@ -1 +1 @@
-._flex_8w6x1_1{display:flex}._flex_8w6x1_1[data-direction=col]{flex-direction:column}._flex_8w6x1_1[data-direction=row]{flex-direction:row}._flex_8w6x1_1[data-align=center]{align-items:center}._flex_8w6x1_1[data-align=start]{align-items:flex-start}._flex_8w6x1_1[data-align=end]{align-items:flex-end}._flex_8w6x1_1[data-justify=start]{justify-content:flex-start}._flex_8w6x1_1[data-justify=end]{justify-content:flex-end}._flex_8w6x1_1[data-justify=center]{justify-content:center}._flex_8w6x1_1[data-justify=between]{justify-content:space-between}@media (max-width: 1023px){._flex_8w6x1_1[data-bleed=true]{margin-left:-1rem;margin-right:-1rem}}._flex_8w6x1_1[data-padding=page]{padding:var(--ds-spacing-6)}@media (max-width: 1023px){._flex_8w6x1_1[data-padding=page]{padding-left:var(--ds-spacing-4);padding-right:var(--ds-spacing-4)}}._flex_8w6x1_1[data-spacing=xs]{gap:.125rem}._flex_8w6x1_1[data-spacing=page]{gap:1.5rem}._flex_8w6x1_1[data-margin=section]{margin:.625rem 0}._flex_8w6x1_1[data-margin=page]{margin:1.125rem 0}
+._flex_vvg9d_1{display:flex;list-style:none;padding:0}._flex_vvg9d_1[data-direction=col]{flex-direction:column}._flex_vvg9d_1[data-direction=row]{flex-direction:row}._flex_vvg9d_1[data-align=center]{align-items:center}._flex_vvg9d_1[data-align=start]{align-items:flex-start}._flex_vvg9d_1[data-align=end]{align-items:flex-end}._flex_vvg9d_1[data-justify=start]{justify-content:flex-start}._flex_vvg9d_1[data-justify=end]{justify-content:flex-end}._flex_vvg9d_1[data-justify=center]{justify-content:center}._flex_vvg9d_1[data-justify=between]{justify-content:space-between}@media (max-width: 1023px){._flex_vvg9d_1[data-bleed=true]{margin-left:-1rem;margin-right:-1rem}}._flex_vvg9d_1[data-padding=page]{padding:var(--ds-spacing-6)}@media (max-width: 1023px){._flex_vvg9d_1[data-padding=page]{padding-left:var(--ds-spacing-4);padding-right:var(--ds-spacing-4)}}._flex_vvg9d_1[data-spacing=xs]{gap:.125rem}._flex_vvg9d_1[data-spacing=page]{gap:1.5rem}._flex_vvg9d_1[data-margin=section]{margin:.625rem 0}._flex_vvg9d_1[data-margin=page]{margin:1.125rem 0}

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._item_bqpwx_1{padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;position:relative;width:100%;display:flex;flex-direction:column}._item_bqpwx_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_bqpwx_1[data-variant=outline],._item_bqpwx_1[data-variant=dotted]{outline-color:var(--ds-color-base-default)}._item_bqpwx_1[data-variant=outline]{outline-style:solid}._item_bqpwx_1[data-variant=dotted]{outline-color:var(--ds-color-border-subtle);outline-style:dashed}._item_bqpwx_1[data-theme=default]{background-color:var(--ds-color-background-default)}._item_bqpwx_1[data-theme=subtle]{background-color:var(--ds-color-background-subtle)}._interactive_bqpwx_53[data-theme=subtle]:hover,._item_bqpwx_1[data-theme=surface]{background-color:var(--ds-color-surface-hover)}._interactive_bqpwx_53[data-theme=surface]:hover{background-color:var(--ds-color-surface-active)}._item_bqpwx_1[data-theme=base]{background-color:var(--ds-color-base-default);color:var(--ds-color-contrast-default)}._interactive_bqpwx_53[data-theme=base]:hover{background-color:var(--ds-color-base-hover);color:var(--ds-color-contrast-default)}._item_bqpwx_1[data-active=true]{background-color:var(--ds-color-surface-default)}._item_bqpwx_1[aria-expanded=true],._item_bqpwx_1[aria-selected=true]{outline:2px solid}._item_bqpwx_1[aria-disabled=true]{pointer-events:none}._interactiveSelected_bqpwx_95{outline:2px solid var(--ds-color-border-strong)}._interactiveHidden_bqpwx_99{display:none}._interactive_bqpwx_53:not([data-theme=transparent]):hover{outline:2px solid var(--ds-color-border-strong)}
+._item_12vtu_1{padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;list-style:none;position:relative;width:100%;display:flex;flex-direction:column}._item_12vtu_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_12vtu_1[data-variant=outline],._item_12vtu_1[data-variant=dotted]{outline-color:var(--ds-color-base-default)}._item_12vtu_1[data-variant=outline]{outline-style:solid}._item_12vtu_1[data-variant=dotted]{outline-color:var(--ds-color-border-subtle);outline-style:dashed}._item_12vtu_1[data-theme=default]{background-color:var(--ds-color-background-default)}._item_12vtu_1[data-theme=subtle]{background-color:var(--ds-color-background-subtle)}._interactive_12vtu_54[data-theme=subtle]:hover,._item_12vtu_1[data-theme=surface]{background-color:var(--ds-color-surface-hover)}._interactive_12vtu_54[data-theme=surface]:hover{background-color:var(--ds-color-surface-active)}._item_12vtu_1[data-theme=base]{background-color:var(--ds-color-base-default);color:var(--ds-color-contrast-default)}._interactive_12vtu_54[data-theme=base]:hover{background-color:var(--ds-color-base-hover);color:var(--ds-color-contrast-default)}._item_12vtu_1[data-active=true]{background-color:var(--ds-color-surface-default)}._item_12vtu_1[aria-expanded=true],._item_12vtu_1[aria-selected=true]{outline:2px solid}._item_12vtu_1[aria-disabled=true]{pointer-events:none}._interactiveSelected_12vtu_96{outline:2px solid var(--ds-color-border-strong)}._interactiveHidden_12vtu_100{display:none}._interactive_12vtu_54:not([data-theme=transparent]):hover{outline:2px solid var(--ds-color-border-strong)}

package/dist/assets/ListItemIcon.css

@@ -1 +1 @@
-._icon_vryvy_1{flex-shrink:0;position:relative;display:flex;justify-content:center;align-items:center}
+._listIcon_ghios_1{flex-shrink:0;position:relative;display:flex;justify-content:center;align-items:center}

package/dist/components/Bookmarks/BookmarksSection.js

@@ -1,40 +1,40 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { createElement as c } from "react";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { createElement as f } from "react";
 import "../../index-L8X2o7IH.js";
-import { BookmarksListItem as f } from "./BookmarksListItem.js";
+import { BookmarksListItem as h } from "./BookmarksListItem.js";
 import { EditableBookmark as k } from "./EditableBookmark.js";
 import "../RootProvider/RootProvider.js";
-import { ListBase as h } from "../List/ListBase.js";
-import { Typography as x } from "../Typography/Typography.js";
-import { Heading as l } from "../Typography/Heading.js";
+import { ListBase as p } from "../List/ListBase.js";
+import { Typography as l } from "../Typography/Typography.js";
+import { Heading as x } from "../Typography/Heading.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as z } from "../Page/Section.js";
 const g = ({
-  loading: i,
+  loading: o,
   title: e,
-  description: p,
+  description: s,
   items: t,
-  untitled: s = "Untitled bookmark",
-  titleField: d,
-  expandedId: a,
+  untitled: d = "Untitled bookmark",
+  titleField: a,
+  expandedId: n,
   onToggle: m
-}) => /* @__PURE__ */ n(z, { padding: 6, theme: "surface-hover", spacing: 4, bleed: !0, children: [
-  /* @__PURE__ */ o(l, { size: "md", children: e }),
-  i ? /* @__PURE__ */ o(f, { title: e, loading: i, size: "sm" }) : t.length > 0 && /* @__PURE__ */ o(h, { spacing: "xs", children: t.map((r) => /* @__PURE__ */ c(
+}) => /* @__PURE__ */ c(z, { padding: 6, theme: "surface-hover", spacing: 4, bleed: !0, children: [
+  /* @__PURE__ */ i(x, { size: "md", children: e }),
+  o ? /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(h, { title: e, loading: o, size: "sm" }) }) : t.length > 0 && /* @__PURE__ */ i(p, { spacing: "xs", children: t.map((r) => /* @__PURE__ */ f(
     k,
     {
       ...r,
       key: r.id,
-      loading: i || r.loading,
+      loading: o || r.loading,
       onToggle: () => m == null ? void 0 : m(r.id),
-      expanded: a === r.id,
-      untitled: s,
-      titleField: d,
+      expanded: n === r.id,
+      untitled: d,
+      titleField: a,
       size: "sm"
     }
   )) }),
-  /* @__PURE__ */ o(x, { size: "xs", children: p })
+  /* @__PURE__ */ i(l, { size: "xs", children: s })
 ] });
 export {
   g as BookmarksSection

package/dist/components/Dialog/DialogListItem.js

@@ -31,12 +31,12 @@ import '../../assets/DialogListItem.css';const K = "_link_1yhch_1", O = "_border
   sender: h,
   recipient: g,
   recipientLabel: k = "to",
-  grouped: I = !1,
+  grouped: D = !1,
   updatedAt: l,
   updatedAtLabel: i,
-  archivedAt: n,
-  archivedAtLabel: D,
-  trashedAt: d,
+  archivedAt: d,
+  archivedAtLabel: I,
+  trashedAt: _,
   trashedAtLabel: L,
   label: S,
   dueAt: j,
@@ -46,12 +46,12 @@ import '../../assets/DialogListItem.css';const K = "_link_1yhch_1", O = "_border
   touchedBy: M,
   attachmentsCount: T,
   title: r,
-  description: _,
+  description: n,
   summary: y,
   theme: q = "default",
   ...p
 }) => {
-  const w = d ? "trashed" : n ? "archived" : x, f = c ? "subtle" : q;
+  const w = _ ? "trashed" : d ? "archived" : x, f = c ? "subtle" : q;
   return e === "xs" || e === "sm" || e === "md" ? /* @__PURE__ */ t(
     N,
     {
@@ -59,7 +59,7 @@ import '../../assets/DialogListItem.css';const K = "_link_1yhch_1", O = "_border
       size: e,
       selected: c,
       theme: f,
-      label: /* @__PURE__ */ t("div", { className: a.border, "data-size": e, "data-seen": m, "data-loading": o, children: /* @__PURE__ */ t(G, { loading: o, size: e, title: r, description: y || _ }) }),
+      label: /* @__PURE__ */ t("div", { className: a.border, "data-size": e, "data-seen": m, "data-loading": o, children: /* @__PURE__ */ t(G, { loading: o, size: e, title: r, description: y || n }) }),
       badge: /* @__PURE__ */ t(u, { loading: o, sender: h, updatedAt: l, updatedAtLabel: i }),
       title: r
     }
@@ -70,7 +70,6 @@ import '../../assets/DialogListItem.css';const K = "_link_1yhch_1", O = "_border
       size: e,
       selected: c,
       theme: f,
-      linkIcon: null,
       controls: s && /* @__PURE__ */ t(J, { className: a.select, ...s, size: "xl" }),
       title: r,
       label: /* @__PURE__ */ b("div", { className: a.border, "data-size": e, "data-seen": m, "data-loading": o, children: [
@@ -84,10 +83,10 @@ import '../../assets/DialogListItem.css';const K = "_link_1yhch_1", O = "_border
               sender: h,
               recipient: g,
               recipientLabel: k,
-              grouped: I
+              grouped: D
             }
           ),
-          /* @__PURE__ */ t(E, { loading: o, children: /* @__PURE__ */ t("p", { "data-size": e, className: a.summary, children: y || _ }) })
+          /* @__PURE__ */ t(E, { loading: o, children: /* @__PURE__ */ t("p", { "data-size": e, className: a.summary, children: y || n }) })
         ] }),
         /* @__PURE__ */ t(
           u,
@@ -97,9 +96,9 @@ import '../../assets/DialogListItem.css';const K = "_link_1yhch_1", O = "_border
             status: B,
             updatedAt: l,
             updatedAtLabel: i,
-            archivedAt: n,
-            archivedAtLabel: D,
-            trashedAt: d,
+            archivedAt: d,
+            archivedAtLabel: I,
+            trashedAt: _,
             trashedAtLabel: L,
             dueAt: j,
             dueAtLabel: v,

package/dist/components/Dialog/SeenByLog.js

@@ -17,7 +17,6 @@ const v = ({ items: r, endUserLabel: o = "you" }) => /* @__PURE__ */ i(c, { spac
       avatar: { type: "person", name: t == null ? void 0 : t.name },
       title: t == null ? void 0 : t.name,
       description: t != null && t.isEndUser ? o : "",
-      linkIcon: null,
       badge: /* @__PURE__ */ i(n, { datetime: a, children: p })
     },
     m

package/dist/components/List/List.js

@@ -3,17 +3,17 @@ import { createElement as l } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
 import { ListItem as a } from "./ListItem.js";
-import { ListBase as e } from "./ListBase.js";
+import { ListBase as h } from "./ListBase.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const k = ({ defaultItemSize: o, defaultItemTheme: p, defaultItemColor: s, items: t = [], ...c }) => /* @__PURE__ */ f(e, { ...c, children: t.map((r, n) => /* @__PURE__ */ l(
+const k = ({ defaultItemSize: o, defaultItemTheme: p, defaultItemColor: s, items: c = [], ...n }) => /* @__PURE__ */ f(h, { ...n, children: c.map((r, t) => /* @__PURE__ */ l(
   a,
   {
     ...r,
     size: (r == null ? void 0 : r.size) || o,
     color: (r == null ? void 0 : r.color) || s,
     theme: (r == null ? void 0 : r.theme) || p,
-    key: "item" + n
+    key: `item-${r.id ?? t}`
   }
 )) });
 export {

package/dist/components/List/ListBase.js

@@ -5,7 +5,7 @@ import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as m } from "../Page/Flex.js";
-const l = ({ spacing: o = 2, children: r, ...t }) => /* @__PURE__ */ i(m, { direction: "col", spacing: o, ...t, children: r });
+const a = ({ spacing: o = 2, children: r, ...t }) => /* @__PURE__ */ i(m, { direction: "col", spacing: o, as: "ul", ...t, children: r });
 export {
-  l as ListBase
+  a as ListBase
 };

package/dist/components/List/ListItem.js

@@ -1,113 +1,113 @@
-import { jsxs as U, jsx as t } from "react/jsx-runtime";
-import { ListItemBase as h } from "./ListItemBase.js";
+import { jsx as r, jsxs as R } from "react/jsx-runtime";
+import { s as x, L as c } from "../../ListItemBase-BVx5MDhO.js";
 import { ListItemHeader as B } from "./ListItemHeader.js";
-import { S as b } from "../../ChevronRight-DUaHaWi-.js";
-import { S as q } from "../../ChevronUp-H8Nuww4h.js";
-import { S as w } from "../../ChevronDown-CRAwzuD3.js";
-const O = ({
+import { S as U } from "../../ChevronRight-DUaHaWi-.js";
+import { S as k } from "../../ChevronUp-H8Nuww4h.js";
+import { S as l } from "../../ChevronDown-CRAwzuD3.js";
+const K = ({
   className: o,
   variant: v = "solid",
-  color: p,
-  theme: I = "default",
+  color: f,
+  theme: p = "default",
   shadow: S = "xs",
-  loading: r,
+  loading: e,
   collapsible: D,
   expanded: m,
-  size: c = "sm",
-  icon: s,
+  size: t = "sm",
+  icon: u,
   avatar: L,
-  avatarGroup: k,
+  avatarGroup: I,
   title: i,
-  description: u,
-  badge: C,
-  linkIcon: H = b,
-  label: e,
-  select: j,
+  description: C,
+  badge: j,
+  linkIcon: H = !1,
+  label: h,
+  select: y,
   controls: n,
-  children: R,
-  ...f
+  children: N,
+  ...s
 }) => {
-  const x = D ? m ? q : w : H, y = typeof e == "function" ? e() : e;
-  return m ? /* @__PURE__ */ U(
-    h,
+  const a = D ? m ? k : l : void 0, d = typeof h == "function" ? h() : h;
+  return m ? /* @__PURE__ */ r("li", { className: x.item, children: /* @__PURE__ */ R(
+    c,
     {
       interactive: !1,
       variant: v,
-      color: p,
-      theme: I,
+      color: f,
+      theme: p,
       shadow: S,
       expanded: m,
       title: i,
-      loading: r,
+      loading: e,
       children: [
-        /* @__PURE__ */ t(
-          h,
+        /* @__PURE__ */ r(
+          c,
           {
             theme: "transparent",
             interactive: !n,
-            size: c,
-            color: p,
-            loading: r,
+            size: t,
+            color: f,
+            loading: e,
             title: i,
-            ...f,
-            children: /* @__PURE__ */ t(
+            ...s,
+            children: /* @__PURE__ */ r(
               B,
               {
                 className: o,
-                loading: r,
-                select: j,
-                size: c,
+                loading: e,
+                select: y,
+                size: t,
                 title: i,
-                description: u,
-                icon: s,
+                description: C,
+                icon: u,
                 avatar: L,
-                avatarGroup: k,
-                badge: C,
-                linkIcon: x,
+                avatarGroup: I,
+                badge: j,
+                chevron: a,
                 controls: n,
-                ...f,
-                children: y
+                ...s,
+                children: d
               }
             )
           }
         ),
-        R
+        N
       ]
     }
-  ) : /* @__PURE__ */ t(
-    h,
+  ) }) : /* @__PURE__ */ r("li", { className: x.item, children: /* @__PURE__ */ r(
+    c,
     {
       interactive: !n,
       variant: v,
-      color: p,
-      theme: I,
+      color: f,
+      theme: p,
       shadow: S,
       expanded: m,
-      loading: r,
+      loading: e,
       title: i,
-      ...f,
-      children: /* @__PURE__ */ t(
+      ...s,
+      children: /* @__PURE__ */ r(
         B,
         {
           className: o,
-          loading: r,
-          select: j,
-          size: c,
+          loading: e,
+          select: y,
+          size: t,
           title: i,
-          description: u,
-          icon: s,
+          description: C,
+          icon: u,
           avatar: L,
-          avatarGroup: k,
-          badge: C,
-          linkIcon: x,
+          avatarGroup: I,
+          badge: j,
+          chevron: a ?? (H ? U : void 0),
           controls: n,
-          ...f,
-          children: y
+          ...s,
+          children: d
         }
       )
     }
-  );
+  ) });
 };
 export {
-  O as ListItem
+  K as ListItem
 };

package/dist/components/List/ListItemBase.js

@@ -1,80 +1,6 @@
-import { jsx as w } from "react/jsx-runtime";
-import { c as x } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemBase.css';const B = "_item_bqpwx_1", E = "_interactive_bqpwx_53", I = "_interactiveSelected_bqpwx_95", L = "_interactiveHidden_bqpwx_99", t = {
-  item: B,
-  interactive: E,
-  interactiveSelected: I,
-  interactiveHidden: L
-}, F = ({
-  title: S,
-  interactive: f = !0,
-  as: q,
-  href: u,
-  onClick: a,
-  onKeyPress: e,
-  tabIndex: H,
-  size: c,
-  variant: d,
-  color: s,
-  theme: i,
-  shadow: h,
-  loading: n,
-  disabled: r,
-  hidden: o = !1,
-  active: v = !1,
-  selected: m,
-  className: p,
-  children: _
-}) => {
-  const l = i === "transparent" ? "none" : h;
-  if (f) {
-    const z = x(
-      t.item,
-      t.interactive,
-      p,
-      m && t.interactiveSelected,
-      o && t.interactiveHidden
-    );
-    return /* @__PURE__ */ w(
-      q || "button",
-      {
-        "aria-label": S,
-        className: z,
-        "data-variant": d,
-        "data-color": s,
-        "data-theme": i,
-        "data-size": c,
-        "data-shadow": l,
-        "data-active": v,
-        href: u,
-        onKeyPress: (b) => {
-          b.key === "Enter" && (a == null || a()), e == null || e(b);
-        },
-        onClick: a,
-        tabIndex: H,
-        "aria-disabled": r || n,
-        disabled: r || n,
-        children: _
-      }
-    );
-  }
-  const j = x(t.item, p, m && t.interactiveSelected);
-  return /* @__PURE__ */ w(
-    "article",
-    {
-      className: j,
-      "data-variant": d,
-      "data-color": s,
-      "data-theme": i,
-      "data-size": c,
-      "data-shadow": l,
-      "data-active": v,
-      "aria-hidden": o,
-      "aria-disabled": r || n,
-      children: _
-    }
-  );
-};
+import "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import { L as e } from "../../ListItemBase-BVx5MDhO.js";
 export {
-  F as ListItemBase
+  e as ListItemBase
 };