@altinn/altinn-components 0.16.0 → 0.18.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
+npm install @altinn/altinn-components
 # for yarn users
-yarn add @altinn/components 
+yarn add @altinn/altinn-components
 # for pnpm users
-pnpm add @altinn/components
+pnpm add @altinn/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,61 +52,69 @@ 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.
 - `@deprecated` - The component is deprecated and should not be used.
 
-The main motivation behind having tags is relieving the pressure of having to make everything stable before releasing it for use. 
+The main motivation behind having tags is relieving the pressure of having to make everything stable before releasing it for use.
 It also allows us to get feedback on the components in an early stage.
 
 ## Storybook test runner (accessibility)
+
 Config for the storybook test runner is placed under .storybook/test-runner.ts
 
+First you will need to run the storybook:
 
-First you will need to run the storybook: 
 ```
 pnpm storybook
 ```
+
 -
 
 When that is done, in another terminal run following command to test all the stories for accessibility
+
 ```
 pnpm test-storybook
 ```
- - 
 
-To test a specific file, run... 
+-
+
+To test a specific file, run...
+
 ```
 pnpm test-storybook --watch
 ```
-...and press 'p' to choose filtering by file name. Then start typing the name of the storybook file f.ex. 'badge'. The helper will list all the files matching your input. 
 
-Hit enter to test the file. 
+...and press 'p' to choose filtering by file name. Then start typing the name of the storybook file f.ex. 'badge'. The helper will list all the files matching your input.
+
+Hit enter to test the file.
 
 If there is more files matching your input, they will also be tested.
 
-- 
-If the storybook cli runs all the tests even with --watch flag, alternatively you can simply run: 
+- If the storybook cli runs all the tests even with --watch flag, alternatively you can simply run:
 
 ```
 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.
+- 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.

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/AccessAreaList/AccessAreaListItem.js

@@ -1,34 +1,39 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ListItem as c } from "../List/ListItem.js";
-import '../../assets/AccessAreaListItem.css';const l = "_content_7hk0i_1", p = {
-  content: l
-}, I = ({
-  name: e,
-  icon: r,
-  size: s = "md",
-  children: i,
+import { ListItem as a } from "../List/ListItem.js";
+import '../../assets/AccessAreaListItem.css';const b = "_content_7hk0i_1", d = {
+  content: b
+}, j = ({
+  name: c,
+  icon: m,
+  size: i = "md",
+  children: r,
   expanded: t = !1,
-  onClick: m,
-  ...n
-}) => /* @__PURE__ */ o(
-  c,
+  onClick: l,
+  badgeText: o,
+  colorTheme: e,
+  loading: n,
+  ...p
+}) => /* @__PURE__ */ s(
+  a,
   {
     as: "button",
-    icon: r,
-    title: e,
-    size: s,
-    collapsible: !0,
+    icon: { svgElement: m, theme: "subtle", color: e },
+    title: c,
+    size: i,
+    collapsible: !n,
     expanded: t,
-    onClick: m,
-    ...n,
-    children: t && /* @__PURE__ */ o("div", { className: p.content, children: i })
+    onClick: l,
+    badge: o ? { label: o, color: e } : void 0,
+    loading: n,
+    ...p,
+    children: t && /* @__PURE__ */ s("div", { className: d.content, children: r })
   }
 );
 export {
-  I as AccessAreaListItem
+  j as AccessAreaListItem
 };

package/dist/components/AccessPackageList/AccessPackageListItem.js

@@ -5,21 +5,13 @@ import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as i } from "../List/ListItem.js";
-const d = ({ as: r = "button", icon: t, title: m, ...o }) => /* @__PURE__ */ e(
-  i,
-  {
-    avatar: t ? {
-      imageUrl: t,
-      type: "company",
-      name: m || ""
-    } : void 0,
-    as: r,
-    size: "sm",
-    color: "accent",
-    title: m,
-    ...o
-  }
-);
+import { S as s } from "../../Package-ASRzCHA7.js";
+const k = ({
+  as: t = "button",
+  title: m,
+  color: o = "neutral",
+  ...r
+}) => /* @__PURE__ */ e(i, { icon: s, as: t, size: "sm", title: m, color: o, theme: "subtle", ...r });
 export {
-  d as AccessPackageListItem
+  k as AccessPackageListItem
 };

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
 };