@altinn/altinn-components 0.10.0 → 0.10.1

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

@@ -1,36 +1,36 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Fragment as s, useState as g } from "react";
+import { Fragment as s, useState as k } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { Button as k } from "../Button/Button.js";
-import { MetaItem as r } from "../Meta/MetaItem.js";
+import { Button as b } from "../Button/Button.js";
+import { MetaItem as i } from "../Meta/MetaItem.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemBase as b } from "./ListItemBase.js";
-import { ListItemHeader as y } from "./ListItemHeader.js";
-import { ListItem as t } from "./ListItem.js";
-import { ListBase as d } from "./ListBase.js";
-import { List as v } from "./List.js";
-const l = ["xl", "lg", "md", "sm", "xs"], S = {
+import { ListItemBase as y } from "./ListItemBase.js";
+import { ListItemHeader as v } from "./ListItemHeader.js";
+import { ListItem as r } from "./ListItem.js";
+import { ListBase as c } from "./ListBase.js";
+import { List as I } from "./List.js";
+const f = ["neutral", "accent", "transparent"], l = ["xl", "lg", "md", "sm", "xs"], j = {
   title: "List/ListItem",
-  component: t,
+  component: r,
   tags: ["autodocs"],
   parameters: {},
   args: {
     id: "id",
     title: "Title",
     description: "Description",
-    size: "md"
+    size: "sm"
   }
-}, _ = {
+}, P = {
   args: {}
-}, j = (n) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(t, { ...n }),
-  /* @__PURE__ */ e(r, { children: "No media" }),
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
-  /* @__PURE__ */ e(r, { children: "Icon" }),
+}, G = (n) => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ e(r, { ...n }),
+  /* @__PURE__ */ e(i, { children: "No media" }),
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear" }),
+  /* @__PURE__ */ e(i, { children: "Icon" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatar: {
@@ -39,9 +39,9 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Person" }),
+  /* @__PURE__ */ e(i, { children: "Person" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatar: {
@@ -50,9 +50,9 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Company" }),
+  /* @__PURE__ */ e(i, { children: "Company" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatar: {
@@ -62,9 +62,9 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Logo" }),
+  /* @__PURE__ */ e(i, { children: "Logo" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatarGroup: {
@@ -85,9 +85,9 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "People group" }),
+  /* @__PURE__ */ e(i, { children: "People group" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatarGroup: {
@@ -108,78 +108,78 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Company group" })
-] }), P = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !0 }),
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !1 }),
-  /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), G = (n) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
-  /* @__PURE__ */ e(r, { children: "Link icon, emphasising that this will take you somewhere" }),
-  /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
-  /* @__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(r, { children: "Collapsible item with badge" }),
-  /* @__PURE__ */ e(t, { ...n, collapsible: !0, expanded: !0 }),
-  /* @__PURE__ */ e(r, { children: "Collapsible and expanded item" }),
+  /* @__PURE__ */ e(i, { children: "Company group" })
+] }), N = (n) => /* @__PURE__ */ e(c, { children: l.map((t) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", size: t, loading: !0 }),
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", size: t, loading: !1 }),
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), Q = (n) => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ e(r, { ...n, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: "Link icon, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(r, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
+  /* @__PURE__ */ e(i, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(r, { ...n, collapsible: !0, badge: { label: "Admin" } }),
+  /* @__PURE__ */ e(i, { children: "Collapsible item with badge" }),
+  /* @__PURE__ */ e(r, { ...n, collapsible: !0, expanded: !0 }),
+  /* @__PURE__ */ e(i, { children: "Collapsible and expanded item" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       badge: { label: "Admin" },
       linkIcon: "chevron-right",
       menu: {
+        id: "menu",
         items: [
-          { title: "Innstillinger", icon: "cog" },
-          { title: "Aktivitetslogg", icon: "clock-dashed" }
+          { id: "settings", title: "Innstillinger", icon: "cog" },
+          { id: "log", title: "Aktivitetslogg", icon: "clock-dashed" }
         ]
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "List item with badge, linkIcon and context menu" }),
+  /* @__PURE__ */ e(i, { children: "List item with badge, linkIcon and context menu" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...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" }) })
+      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(b, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
     }
   ),
-  /* @__PURE__ */ e(r, { children: "List item with custom controls" })
-] }), N = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(i, { children: "List item with custom controls" })
+] }), Y = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((t) => /* @__PURE__ */ a(s, { children: [
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
-      size: i,
+      size: t,
       select: {
         checked: !1
       }
     }
   ),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
-      size: i,
+      size: t,
       select: {
         checked: !0
       },
       selected: !0
     }
   ),
-  /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), Q = (n) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(t, { ...n }),
-  /* @__PURE__ */ e(r, { children: "Default" }),
-  /* @__PURE__ */ e(t, { ...n, color: "accent" }),
-  /* @__PURE__ */ e(r, { children: "Accent" })
-] }), Y = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, selected: i === (n == null ? void 0 : n.size), linkIcon: "chevron-right" }),
-  /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), F = (n) => {
-  const [i, p] = g(!1), m = () => {
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), F = (n) => /* @__PURE__ */ e(c, { children: f.map((t) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", color: t, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), J = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((t) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", size: t, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(r, { ...n, avatar: { name: "Avatar" }, size: t, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), q = (n) => {
+  const [t, p] = k(!1), m = () => {
     p((o) => !o);
-  }, c = [
+  }, d = [
     {
       name: "Per Ove Ludvigsen",
       role: "Sportlig leder",
@@ -200,7 +200,7 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
       role: "Toppspillerutvikler",
       rights: "Ingen rettigheter"
     }
-  ], h = c == null ? void 0 : c.map((o) => ({
+  ], h = d.map((o, g) => ({
     avatar: {
       ...o,
       type: "person"
@@ -208,36 +208,44 @@ const l = ["xl", "lg", "md", "sm", "xs"], S = {
     title: o == null ? void 0 : o.name,
     description: o == null ? void 0 : o.role,
     badge: { label: o == null ? void 0 : o.rights },
-    linkIcon: "menu-elipsis-horizontal"
+    menu: {
+      id: "menu" + g,
+      items: [
+        {
+          id: "item1",
+          title: "Hallo"
+        }
+      ]
+    }
   })), u = {
-    items: c == null ? void 0 : c.map((o) => ({
+    items: d.map((o) => ({
       name: o == null ? void 0 : o.name,
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(b, { children: [
+  return /* @__PURE__ */ a(y, { children: [
     /* @__PURE__ */ e(
-      y,
+      v,
       {
         ...n,
         avatarGroup: u,
         collapsible: !0,
-        expanded: i,
+        expanded: t,
         onClick: m,
         as: "button"
       }
     ),
-    i && /* @__PURE__ */ e(v, { size: "sm", spacing: "none", items: h })
+    t && /* @__PURE__ */ e(I, { spacing: "none", defaultItemSize: "xs", defaultItemColor: "transparent", items: h })
   ] });
 };
 export {
-  F as Collapsible,
-  Q as Colors,
-  G as Controls,
-  _ as Default,
-  P as Loading,
-  j as MediaTypes,
-  N as Selectable,
-  Y as Sizes,
-  S as default
+  q as Collapsible,
+  F as Colors,
+  Q as Controls,
+  P as Default,
+  N as Loading,
+  G as MediaTypes,
+  Y as Selectable,
+  J as Sizes,
+  j as default
 };

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemVariant = 'solid' | 'dotted';
-export type ListItemColor = 'subtle' | 'accent' | 'transparent';
+export type ListItemColor = 'neutral' | 'accent' | 'transparent';
 export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ListItemBaseProps {
     color?: ListItemColor;

package/dist/components/List/ListItemBase.js

@@ -1,14 +1,14 @@
 import { jsx as c } from "react/jsx-runtime";
-import '../../assets/ListItemBase.css';const p = "_item_19vbq_1", x = {
+import '../../assets/ListItemBase.css';const p = "_item_1grve_1", x = {
   item: p
-}, f = ({
+}, v = ({
   size: e,
   variant: t = "solid",
-  color: a = "subtle",
+  color: a = "neutral",
   shadow: s = "xs",
   loading: i,
-  disabled: d,
-  hidden: r = !1,
+  disabled: r,
+  hidden: d = !1,
   active: n = !1,
   selected: l,
   expanded: o,
@@ -22,13 +22,13 @@ import '../../assets/ListItemBase.css';const p = "_item_19vbq_1", x = {
     "data-size": e,
     "data-shadow": a === "transparent" ? "none" : s,
     "data-active": n,
-    "aria-hidden": r,
-    "aria-disabled": d || i,
+    "aria-hidden": d,
+    "aria-disabled": r || i,
     "aria-selected": l,
     "aria-expanded": o,
     children: m
   }
 );
 export {
-  f as ListItemBase
+  v as ListItemBase
 };

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

@@ -1,24 +1,16 @@
-import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
-import { ListItemColor, ListItemSize } from './ListItemBase';
+import { ListItemSize } from './ListItemBase';
+import { ListItemLinkProps } from './ListItemLink';
 import { ListItemMenuProps } from './ListItemMenu';
 import { ListItemSelectProps } from './ListItemSelect';
-export interface ListItemHeaderProps {
-    as?: ElementType;
-    href?: string;
-    onClick?: () => void;
-    onKeyPress?: KeyboardEventHandler;
-    tabIndex?: number;
+export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Header is loading */
     loading?: boolean;
-    /** Header is disabled */
-    disabled?: boolean;
     /** Header size */
     size?: ListItemSize;
-    /** Optional color */
-    color?: ListItemColor;
     /** Optional classname */
     className?: string;
     /** Select controls */
@@ -50,4 +42,4 @@ export interface ListItemHeaderProps {
     /** Custom label */
     children?: ReactNode;
 }
-export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, collapsible, expanded, size, color, title, description, icon, avatar, avatarGroup, linkIcon, linkText, badge, menu, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, collapsible, expanded, size, title, description, icon, avatar, avatarGroup, linkIcon, linkText, badge, menu, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemHeader.js

@@ -1,75 +1,64 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { c as q } from "../../index-L8X2o7IH.js";
-import { ListItemControls as A } from "./ListItemControls.js";
-import { ListItemLabel as B } from "./ListItemLabel.js";
-import { ListItemMedia as D } from "./ListItemMedia.js";
-import { ListItemMenu as F } from "./ListItemMenu.js";
-import { ListItemSelect as G } from "./ListItemSelect.js";
-import '../../assets/ListItemHeader.css';const J = "_header_s8c6k_1", O = "_link_s8c6k_8", h = {
-  header: J,
-  link: O
-}, Y = ({
-  as: I,
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { c as y } from "../../index-L8X2o7IH.js";
+import { ListItemControls as C } from "./ListItemControls.js";
+import { ListItemLabel as H } from "./ListItemLabel.js";
+import { ListItemLink as S } from "./ListItemLink.js";
+import { ListItemMedia as q } from "./ListItemMedia.js";
+import { ListItemMenu as A } from "./ListItemMenu.js";
+import { ListItemSelect as B } from "./ListItemSelect.js";
+import '../../assets/ListItemHeader.css';const D = "_header_16s1f_1", E = "_link_16s1f_8", a = {
+  header: D,
+  link: E
+}, T = ({
+  as: c,
   loading: e,
-  disabled: L,
-  select: s,
+  disabled: p,
+  select: o,
   href: f,
-  onClick: a,
-  onKeyPress: m,
-  tabIndex: _,
-  collapsible: i,
-  expanded: n,
+  onClick: L,
+  onKeyPress: d,
+  tabIndex: h,
+  collapsible: m,
+  expanded: i,
   size: t = "sm",
-  color: o,
   title: l,
-  description: k,
-  icon: x,
-  avatar: b,
-  avatarGroup: u,
+  description: I,
+  icon: k,
+  avatar: _,
+  avatarGroup: x,
   linkIcon: j,
-  linkText: v,
-  badge: M,
-  menu: d,
-  controls: N,
-  className: w,
-  children: E
+  linkText: u,
+  badge: v,
+  menu: s,
+  controls: M,
+  className: N,
+  children: b
 }) => {
-  const H = I || "button", S = i && n ? "chevron-up" : i ? "chevron-down" : j;
-  return /* @__PURE__ */ p("header", { className: h.header, "data-size": t, "data-color": o, "aria-expanded": n, children: [
-    s && /* @__PURE__ */ r(G, { ...s, size: t }),
-    /* @__PURE__ */ p(
-      H,
+  const w = m && i ? "chevron-up" : m ? "chevron-down" : j;
+  return /* @__PURE__ */ n("header", { className: a.header, "data-size": t, "aria-expanded": i, children: [
+    o && /* @__PURE__ */ r(B, { ...o, size: t }),
+    /* @__PURE__ */ n(
+      S,
       {
-        className: q(h.link, w),
+        className: y(a.link, N),
+        as: c,
         href: f,
-        onKeyPress: (c) => {
-          c.key === "Enter" && (a == null || a()), m == null || m(c);
-        },
-        onClick: a,
-        tabIndex: _,
-        "data-size": t,
-        "data-color": o,
-        "aria-disabled": e || L,
+        onClick: L,
+        onKeyPress: d,
+        tabIndex: h,
+        loading: e,
+        disabled: p,
+        size: t,
         children: [
-          /* @__PURE__ */ r(
-            D,
-            {
-              loading: e,
-              size: t,
-              color: o,
-              icon: x,
-              avatar: b,
-              avatarGroup: u
-            }
-          ),
-          /* @__PURE__ */ r(B, { loading: e, size: t, title: l, description: k, children: E }),
-          /* @__PURE__ */ r(A, { linkIcon: S, linkText: v, badge: M })
+          /* @__PURE__ */ r(q, { loading: e, size: t, icon: k, avatar: _, avatarGroup: x }),
+          /* @__PURE__ */ r(H, { loading: e, size: t, title: l, description: I, children: b }),
+          /* @__PURE__ */ r(C, { linkIcon: w, linkText: u, badge: v })
         ]
       }
     ),
-    d && /* @__PURE__ */ r(F, { ...d }) || N
+    s && /* @__PURE__ */ r(A, { ...s }) || M
   ] });
 };
 export {
-  Y as ListItemHeader
+  T as ListItemHeader
 };

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

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Fragment as s, useState as g } from "react";
+import { Fragment as d, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
@@ -7,21 +7,21 @@ import { Button as k } from "../Button/Button.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
 import "../RootProvider/RootProvider.js";
 import { ListItemHeader as t } from "./ListItemHeader.js";
-import { ListBase as d } from "./ListBase.js";
-const l = ["lg", "md", "sm", "xs"], w = {
+import { ListBase as c } from "./ListBase.js";
+import { List as b } from "./List.js";
+const l = ["lg", "md", "sm", "xs"], T = {
   title: "List/ListItemHeader",
   component: t,
   tags: ["autodocs"],
   parameters: {},
   args: {
-    id: "id",
     title: "Title",
     description: "Description",
     size: "md"
   }
-}, D = {
+}, B = {
   args: {}
-}, T = (n) => /* @__PURE__ */ a(d, { children: [
+}, E = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "No media" }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
@@ -106,11 +106,11 @@ const l = ["lg", "md", "sm", "xs"], w = {
     }
   ),
   /* @__PURE__ */ e(r, { children: "Company group" })
-] }), B = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), S = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(d, { children: [
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !0 }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !1 }),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), E = (n) => /* @__PURE__ */ a(d, { children: [
+] }, i)) }), M = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
   /* @__PURE__ */ e(r, { children: "Link icon, emphasising that this will take you somewhere" }),
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
@@ -126,9 +126,10 @@ const l = ["lg", "md", "sm", "xs"], w = {
       badge: { label: "Admin" },
       linkIcon: "chevron-right",
       menu: {
+        id: "menu",
         items: [
-          { title: "Innstillinger", icon: "cog" },
-          { title: "Aktivitetslogg", icon: "clock-dashed" }
+          { id: "settings", title: "Innstillinger", icon: "cog" },
+          { id: "log", title: "Aktivitetslogg", icon: "clock-dashed" }
         ]
       }
     }
@@ -142,7 +143,7 @@ const l = ["lg", "md", "sm", "xs"], w = {
     }
   ),
   /* @__PURE__ */ e(r, { children: "List item with custom controls" })
-] }), M = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), _ = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(d, { children: [
   /* @__PURE__ */ e(
     t,
     {
@@ -165,27 +166,18 @@ const l = ["lg", "md", "sm", "xs"], w = {
     }
   ),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), S = (n) => /* @__PURE__ */ a(d, { children: [
+] }, i)) }), j = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "Default" }),
-  /* @__PURE__ */ e(t, { ...n, color: "accent" }),
+  /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "Accent" })
-] }), _ = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ e(
-    t,
-    {
-      ...n,
-      icon: "teddy-bear",
-      size: i,
-      selected: i === (n == null ? void 0 : n.size),
-      linkIcon: "chevron-right"
-    }
-  ),
+] }), P = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", selected: i === (n == null ? void 0 : n.size), linkIcon: "chevron-right" }),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), j = (n) => {
-  const [i, p] = g(!1), m = () => {
-    p((o) => !o);
-  }, c = [
+] }, i)) }), G = (n) => {
+  const [i, s] = g(!1), m = () => {
+    s((o) => !o);
+  }, p = [
     {
       name: "Per Ove Ludvigsen",
       role: "Sportlig leder",
@@ -206,7 +198,7 @@ const l = ["lg", "md", "sm", "xs"], w = {
       role: "Toppspillerutvikler",
       rights: "Ingen rettigheter"
     }
-  ], h = c == null ? void 0 : c.map((o) => ({
+  ], h = p.map((o) => ({
     avatar: {
       ...o,
       type: "person"
@@ -216,12 +208,12 @@ const l = ["lg", "md", "sm", "xs"], w = {
     badge: { label: o == null ? void 0 : o.rights },
     linkIcon: "menu-elipsis-horizontal"
   })), u = {
-    items: c == null ? void 0 : c.map((o) => ({
+    items: p.map((o) => ({
       name: o == null ? void 0 : o.name,
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(s, { children: [
+  return /* @__PURE__ */ a(d, { children: [
     /* @__PURE__ */ e(
       t,
       {
@@ -233,17 +225,17 @@ const l = ["lg", "md", "sm", "xs"], w = {
         as: "button"
       }
     ),
-    i && /* @__PURE__ */ e(List, { size: "sm", spacing: "none", items: h })
+    i && /* @__PURE__ */ e(b, { defaultItemSize: "sm", spacing: "none", items: h })
   ] });
 };
 export {
-  j as Collapsible,
-  S as Colors,
-  E as Controls,
-  D as Default,
-  B as Loading,
-  T as MediaTypes,
-  M as Selectable,
-  _ as Sizes,
-  w as default
+  G as Collapsible,
+  j as Colors,
+  M as Controls,
+  B as Default,
+  S as Loading,
+  E as MediaTypes,
+  _ as Selectable,
+  P as Sizes,
+  T as default
 };