@altinn/altinn-components 0.16.0 → 0.17.0

package/dist/components/List/ListItemHeader.js

@@ -1,39 +1,39 @@
-import { jsxs as t, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { c as E } from "../../index-L8X2o7IH.js";
-import { isValidElement as g } from "react";
+import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { c as g } from "../../index-L8X2o7IH.js";
+import { isValidElement as y } from "react";
 import { Icon as d } from "../Icon/Icon.js";
-import { Badge as y } from "../Badge/Badge.js";
+import { Badge as B } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as B } from "./ListItemLink.js";
-import { ListItemLabel as M } from "./ListItemLabel.js";
+import { ListItemLink as M } from "./ListItemLink.js";
+import { ListItemLabel as v } from "./ListItemLabel.js";
 import { ListItemIcon as C } from "./ListItemIcon.js";
 import { ListItemControls as F } from "./ListItemControls.js";
 import { ListItemSelect as H } from "./ListItemSelect.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link_13dzg_39", m = {
+import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link_13dzg_39", r = {
   header: V,
   link: b
 }, X = ({
   as: f,
-  loading: i,
-  disabled: h,
+  loading: m,
+  disabled: I,
   select: c,
-  href: L,
-  onClick: x,
-  onKeyPress: z,
-  tabIndex: I,
+  href: h,
+  onClick: L,
+  onKeyPress: x,
+  tabIndex: z,
   size: s = "sm",
-  title: _,
-  description: u,
-  icon: N,
-  avatar: v,
+  title: k,
+  description: _,
+  icon: u,
+  avatar: N,
   avatarGroup: S,
-  linkIcon: o,
-  badge: r,
-  controls: l,
+  chevron: l,
+  badge: t,
+  controls: o,
   className: j,
-  children: k
+  children: E
 }) => {
   const n = {
     xs: "sm",
@@ -41,46 +41,46 @@ import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link
     md: "lg",
     lg: "lg",
     xl: "xl"
-  }[s], a = () => r && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(y, { ...r }) : g(r) ? r : null;
-  return /* @__PURE__ */ t("header", { className: m.header, "data-size": s, children: [
-    /* @__PURE__ */ t("div", { className: m.link, children: [
-      c && /* @__PURE__ */ e(H, { ...c, className: m.select, size: n }),
-      /* @__PURE__ */ t(
-        B,
+  }[s], a = () => t && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(B, { ...t }) : y(t) ? t : null;
+  return /* @__PURE__ */ i("header", { className: r.header, "data-size": s, children: [
+    /* @__PURE__ */ i("div", { className: r.link, children: [
+      c && /* @__PURE__ */ e(H, { ...c, className: r.select, size: n }),
+      /* @__PURE__ */ i(
+        M,
         {
-          interactive: !!l,
-          className: E(m.link, j),
+          interactive: !!o,
+          className: g(r.link, j),
           as: f,
-          href: L,
-          onClick: x,
-          onKeyPress: z,
-          tabIndex: I,
-          loading: i,
-          disabled: h || i,
+          href: h,
+          onClick: L,
+          onKeyPress: x,
+          tabIndex: z,
+          loading: m,
+          disabled: I || m,
           size: s,
           children: [
             /* @__PURE__ */ e(
               C,
               {
-                loading: i,
+                loading: m,
                 size: n,
-                icon: N,
-                avatar: v,
+                icon: u,
+                avatar: N,
                 avatarGroup: S
               }
             ),
-            /* @__PURE__ */ e(M, { size: s, loading: i, title: _, description: u, children: k }),
-            l && /* @__PURE__ */ t(p, { children: [
+            /* @__PURE__ */ e(v, { size: s, loading: m, title: k, description: _, children: E }),
+            o && /* @__PURE__ */ i(p, { children: [
               a(),
-              o && /* @__PURE__ */ e(d, { svgElement: o, size: n })
+              l && /* @__PURE__ */ e(d, { svgElement: l, size: n })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ e(F, { className: m.controls, children: l || /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ e(F, { className: r.controls, children: o || /* @__PURE__ */ i(p, { children: [
       a(),
-      o && /* @__PURE__ */ e(d, { svgElement: o, size: n })
+      l && /* @__PURE__ */ e(d, { svgElement: l, size: n })
     ] }) })
   ] });
 };

package/dist/components/List/ListItemIcon.js

@@ -1,15 +1,15 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Icon as c } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
-import { IconOrAvatar as p } from "../Icon/IconOrAvatar.js";
+import { IconOrAvatar as l } from "../Icon/IconOrAvatar.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as e } from "../../XMark-Bv1I87Ev.js";
-import '../../assets/ListItemIcon.css';const f = "_icon_vryvy_1", l = {
-  icon: f
-}, d = ({ loading: s, size: r = "sm", icon: t, avatar: m, avatarGroup: n, children: i }) => !t && !m && !n && !i ? null : s ? /* @__PURE__ */ o(c, { svgElement: e, size: r, loading: !0 }) : /* @__PURE__ */ o("span", { className: l.icon, children: i || /* @__PURE__ */ o(p, { size: r, icon: t, avatar: m, avatarGroup: n }) });
+import { S as p } from "../../XMark-Bv1I87Ev.js";
+import '../../assets/ListItemIcon.css';const e = "_listIcon_ghios_1", I = {
+  listIcon: e
+}, j = ({ loading: n, size: t = "sm", icon: r, avatar: m, avatarGroup: s, children: i }) => !r && !m && !s && !i ? null : n ? /* @__PURE__ */ o(c, { svgElement: p, size: t, loading: !0 }) : /* @__PURE__ */ o("span", { className: I.listIcon, children: i || /* @__PURE__ */ o(l, { size: t, icon: r, avatar: m, avatarGroup: s }) });
 export {
-  d as ListItemIcon
+  j as ListItemIcon
 };

package/dist/components/List/index.js

@@ -1,4 +1,4 @@
-import { ListItemBase as o } from "./ListItemBase.js";
+import { L as o } from "../../ListItemBase-BVx5MDhO.js";
 import { ListItemLink as m } from "./ListItemLink.js";
 import { ListItemHeader as L } from "./ListItemHeader.js";
 import { ListItemLabel as f } from "./ListItemLabel.js";

package/dist/components/Page/Flex.js

@@ -1,6 +1,6 @@
-import { jsx as w } from "react/jsx-runtime";
+import { jsx as v } from "react/jsx-runtime";
 import { c as _ } from "../../index-L8X2o7IH.js";
-import '../../assets/Flex.css';const h = "_flex_8w6x1_1", j = {
+import '../../assets/Flex.css';const h = "_flex_vvg9d_1", j = {
   flex: h
 }, C = ({
   as: a = "div",
@@ -16,14 +16,14 @@ import '../../assets/Flex.css';const h = "_flex_8w6x1_1", j = {
   margin: c,
   bleed: f = !1,
   className: m,
-  style: x,
-  children: p,
+  style: p,
+  children: x,
   ...g
-}) => /* @__PURE__ */ w(
+}) => /* @__PURE__ */ v(
   a,
   {
     className: _(j.flex, m),
-    style: x,
+    style: p,
     "data-color": t,
     "data-theme": e,
     "data-shadow": n,
@@ -36,7 +36,7 @@ import '../../assets/Flex.css';const h = "_flex_8w6x1_1", j = {
     "data-margin": c,
     "data-bleed": f,
     ...g,
-    children: p
+    children: x
   }
 );
 export {

package/dist/components/Search/Autocomplete.js

@@ -1,42 +1,45 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as b, createElement as v } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as v, createElement as x } from "react";
 import "../../index-L8X2o7IH.js";
-import { useMenu as x } from "../../hooks/useMenu.js";
+import { useMenu as A } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { AutocompleteBase as A } from "./AutocompleteBase.js";
-import { AutocompleteGroup as I } from "./AutocompleteGroup.js";
+import { AutocompleteBase as I } from "./AutocompleteBase.js";
+import { AutocompleteGroup as l } from "./AutocompleteGroup.js";
 import { AutocompleteItem as h } from "./AutocompleteItem.js";
 import "../Snackbar/useSnackbar.js";
 import { useEnterKey as k } from "../../hooks/useEnterKey.js";
-const C = ({ className: u, items: i, groups: s = {}, expanded: n, onSelect: r }) => {
-  const p = b(null);
+const C = ({ className: u, items: s, groups: i = {}, expanded: n, onSelect: r }) => {
+  const p = v(null);
   k(() => {
-    var t;
-    const e = (t = p.current) == null ? void 0 : t.querySelector('[data-active="true"]');
-    e == null || e.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
+    var e;
+    const t = (e = p.current) == null ? void 0 : e.querySelector('[data-active="true"]');
+    t == null || t.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
   });
-  const { menu: c, setActiveIndex: d } = x({
-    items: i,
-    groups: s,
+  const { menu: a, setActiveIndex: c } = A({
+    items: s,
+    groups: i,
     groupByKey: "groupId",
     keyboardEvents: !0
   });
-  return /* @__PURE__ */ o(A, { className: u, expanded: n, ref: p, children: c.map((e, t) => /* @__PURE__ */ v(I, { ...e.props, key: t }, /* @__PURE__ */ o("ul", { children: e.items.map((a, f) => {
+  return /* @__PURE__ */ m(I, { className: u, expanded: n, ref: p, children: a.map((t, e) => /* @__PURE__ */ x(l, { ...t.props, key: e }, /* @__PURE__ */ m("ul", { children: t.items.map((d, f) => {
     const {
-      active: l,
-      menuIndex: y,
-      props: { groupId: M, onClick: m, ...E }
-    } = a;
-    return /* @__PURE__ */ o("li", { tabIndex: -1, onMouseEnter: () => d(y), children: /* @__PURE__ */ o(
+      active: y,
+      menuIndex: E,
+      props: { groupId: M, onClick: o, ...b }
+    } = d;
+    return /* @__PURE__ */ m(
       h,
       {
-        ...E,
+        tabIndex: -1,
+        onMouseEnter: () => c(E),
+        ...b,
         onClick: () => {
-          m == null || m(), r == null || r();
+          o == null || o(), r == null || r();
         },
-        active: l
-      }
-    ) }, f);
+        active: y
+      },
+      f
+    );
   }) }))) });
 };
 export {

package/dist/components/Transmission/TransmissionItem.js

@@ -1,96 +1,93 @@
 "use client";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import * as f from "react";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import * as c from "react";
 import { forwardRef as h, useState as w } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
-import { ListItem as p } from "../List/ListItem.js";
+import { ListItem as s } from "../List/ListItem.js";
 import { MetaTimestamp as x } from "../Meta/MetaTimestamp.js";
 import "../Snackbar/useSnackbar.js";
-import { Typography as I } from "../Typography/Typography.js";
-import { DialogAttachments as O } from "../Dialog/DialogAttachments.js";
-import { u as S } from "../../useId-CsCRkvK3.js";
-import { S as j } from "../../ChevronRight-DUaHaWi-.js";
-import { S as _ } from "../../ChevronDown-CRAwzuD3.js";
-import { S as z } from "../../ChevronUp-H8Nuww4h.js";
-import '../../assets/TransmissionItem.css';var y = function(l, o) {
-  var r = {};
-  for (var t in l) Object.prototype.hasOwnProperty.call(l, t) && o.indexOf(t) < 0 && (r[t] = l[t]);
-  if (l != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var i = 0, t = Object.getOwnPropertySymbols(l); i < t.length; i++)
-      o.indexOf(t[i]) < 0 && Object.prototype.propertyIsEnumerable.call(l, t[i]) && (r[t[i]] = l[t[i]]);
-  return r;
+import { Typography as O } from "../Typography/Typography.js";
+import { DialogAttachments as I } from "../Dialog/DialogAttachments.js";
+import { u as j } from "../../useId-CsCRkvK3.js";
+import '../../assets/TransmissionItem.css';var _ = function(o, l) {
+  var e = {};
+  for (var t in o) Object.prototype.hasOwnProperty.call(o, t) && l.indexOf(t) < 0 && (e[t] = o[t]);
+  if (o != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i = 0, t = Object.getOwnPropertySymbols(o); i < t.length; i++)
+      l.indexOf(t[i]) < 0 && Object.prototype.propertyIsEnumerable.call(o, t[i]) && (e[t[i]] = o[t[i]]);
+  return e;
 };
-const C = h((l, o) => {
-  var { title: r, titleId: t } = l, i = y(l, ["title", "titleId"]);
-  let a = S();
-  return a = r ? t || "title-" + a : void 0, f.createElement(
+const z = h((o, l) => {
+  var { title: e, titleId: t } = o, i = _(o, ["title", "titleId"]);
+  let a = j();
+  return a = e ? t || "title-" + a : void 0, c.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": a }, i),
-    r ? f.createElement("title", { id: a }, r) : null,
-    f.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M19.638 4.417a3.25 3.25 0 0 0-4.608-.008l-9.378 9.379a.75.75 0 0 0-.191.324l-1.414 4.95a.75.75 0 0 0 .925.927l4.94-1.398a.75.75 0 0 0 .327-.191l9.39-9.391a3.25 3.25 0 0 0 .01-4.592M16.091 5.47a1.752 1.752 0 1 1 2.478 2.478l-.23.23-2.477-2.479zM14.8 6.76 6.85 14.71l-.991 3.47 3.457-.979 7.963-7.963z", clipRule: "evenodd" })
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": a }, i),
+    e ? c.createElement("title", { id: a }, e) : null,
+    c.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M19.638 4.417a3.25 3.25 0 0 0-4.608-.008l-9.378 9.379a.75.75 0 0 0-.191.324l-1.414 4.95a.75.75 0 0 0 .925.927l4.94-1.398a.75.75 0 0 0 .327-.191l9.39-9.391a3.25 3.25 0 0 0 .01-4.592M16.091 5.47a1.752 1.752 0 1 1 2.478 2.478l-.23.23-2.477-2.479zM14.8 6.76 6.85 14.71l-.991 3.47 3.457-.979 7.963-7.963z", clipRule: "evenodd" })
   );
-}), E = "_body_1m345_1", R = {
-  body: E
-}, J = ({
-  theme: l,
-  type: o,
-  loading: r,
+}), y = "_body_1m345_1", E = {
+  body: y
+}, N = ({
+  theme: o,
+  type: l,
+  loading: e,
   sender: t,
   createdAt: i,
   createdAtLabel: a,
-  title: c,
-  description: s,
-  summary: b,
-  attachments: g
+  title: f,
+  description: u,
+  summary: d,
+  attachments: b
 }) => {
-  const [m, u] = w(!1), d = () => {
-    u((v) => !v);
+  const [m, p] = w(!1), g = () => {
+    p((v) => !v);
   };
-  return (o == null ? void 0 : o.value) === "draft" ? /* @__PURE__ */ e(
-    p,
+  return (l == null ? void 0 : l.value) === "draft" ? /* @__PURE__ */ r(
+    s,
     {
       as: "button",
-      theme: l,
+      theme: o,
       variant: "dotted",
       size: "sm",
-      icon: C,
-      title: c,
-      description: s,
-      badge: { label: o == null ? void 0 : o.label },
-      linkIcon: j
+      icon: z,
+      title: f,
+      description: u,
+      badge: { label: l == null ? void 0 : l.label },
+      linkIcon: !0
     }
-  ) : /* @__PURE__ */ e(
-    p,
+  ) : /* @__PURE__ */ r(
+    s,
     {
       as: "button",
-      theme: l,
+      theme: o,
       expanded: m,
-      onClick: d,
+      collapsible: !0,
+      onClick: g,
       size: "sm",
       avatar: {
         type: t == null ? void 0 : t.type,
         imageUrl: t == null ? void 0 : t.imageUrl,
         name: t == null ? void 0 : t.name
       },
-      title: c,
-      description: m ? "" : s,
-      badge: { label: o == null ? void 0 : o.label },
-      linkIcon: m ? _ : z,
-      children: m && /* @__PURE__ */ n("div", { className: R.body, children: [
-        i && /* @__PURE__ */ n(x, { loading: r, datetime: i, size: "xs", children: [
-          t && /* @__PURE__ */ e("strong", { children: (t == null ? void 0 : t.name) + ", " }),
+      title: f,
+      description: m ? "" : u,
+      badge: { label: l == null ? void 0 : l.label },
+      children: m && /* @__PURE__ */ n("div", { className: E.body, children: [
+        i && /* @__PURE__ */ n(x, { loading: e, datetime: i, size: "xs", children: [
+          t && /* @__PURE__ */ r("strong", { children: (t == null ? void 0 : t.name) + ", " }),
           a
         ] }),
-        /* @__PURE__ */ n(I, { size: "lg", children: [
-          /* @__PURE__ */ e("p", { children: b }),
-          g && /* @__PURE__ */ e(O, { ...g })
+        /* @__PURE__ */ n(O, { size: "lg", children: [
+          /* @__PURE__ */ r("p", { children: d }),
+          b && /* @__PURE__ */ r(I, { ...b })
         ] })
       ] })
     }
   );
 };
 export {
-  J as TransmissionItem
+  N as TransmissionItem
 };

package/dist/components/index.js

@@ -72,7 +72,7 @@ import { Layout as Rr } from "./Layout/Layout.js";
 import { ActionHeader as Or } from "./LayoutAction/ActionHeader.js";
 import { ActionFooter as zr } from "./LayoutAction/ActionFooter.js";
 import { LayoutAction as jr } from "./LayoutAction/LayoutAction.js";
-import { ListItemBase as Jr } from "./List/ListItemBase.js";
+import { L as Jr } from "../ListItemBase-BVx5MDhO.js";
 import { ListItemLink as Ur } from "./List/ListItemLink.js";
 import { ListItemHeader as Wr } from "./List/ListItemHeader.js";
 import { ListItemLabel as Yr } from "./List/ListItemLabel.js";

package/dist/index.js

@@ -72,7 +72,7 @@ import { Layout as Gr } from "./components/Layout/Layout.js";
 import { ActionHeader as Or } from "./components/LayoutAction/ActionHeader.js";
 import { ActionFooter as zr } from "./components/LayoutAction/ActionFooter.js";
 import { LayoutAction as Nr } from "./components/LayoutAction/LayoutAction.js";
-import { ListItemBase as qr } from "./components/List/ListItemBase.js";
+import { L as qr } from "./ListItemBase-BVx5MDhO.js";
 import { ListItemLink as Ur } from "./components/List/ListItemLink.js";
 import { ListItemHeader as Wr } from "./components/List/ListItemHeader.js";
 import { ListItemLabel as Yr } from "./components/List/ListItemLabel.js";

package/dist/types/lib/components/Dialog/DialogListItem.stories.d.ts

@@ -3,6 +3,7 @@ import { DialogListItem, DialogListItemProps } from './DialogListItem';
 declare const meta: Meta<typeof DialogListItem>;
 export default meta;
 export declare const Default: {
+    render: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
     args: {};
 };
 export declare const GroupedAvatars: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -11,7 +12,7 @@ export declare const SeenBy: (args: DialogListItemProps) => import("react/jsx-ru
 export declare const InboxStatuses: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DraftAndSent: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ArchivedAndTrashed: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Statuses: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Statuses: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];
 declare const Loading: {
     (args: DialogListItemProps): import("react/jsx-runtime").JSX.Element;
     parameters: {
@@ -24,5 +25,5 @@ export declare const DueAt: (args: DialogListItemProps) => import("react/jsx-run
 export declare const Attachments: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TouchedBy: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TextLength: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Selectable: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Selectable: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];
+export declare const Sizes: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];

package/dist/types/lib/components/List/ListBase.stories.d.ts

@@ -4,10 +4,9 @@ declare const meta: {
     component: ({ spacing, children, ...rest }: import('./ListBase').ListBaseProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
-    args: {
-        children: import("react/jsx-runtime").JSX.Element;
-    };
+    args: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Interactive: Story;
+export declare const NonIteractive: Story;

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

@@ -25,6 +25,8 @@ export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
     label?: ReactNode | (() => ReactElement);
     /** Optional badge */
     badge?: BadgeProps | ReactNode | undefined;
+    /** Whether to display the item with a link icon */
+    linkIcon?: boolean;
 }
 export interface ListItemInputProps extends ListItemProps {
     id: string;

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

@@ -1,4 +1,4 @@
-import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ElementType, HTMLProps, KeyboardEventHandler, ReactNode } from 'react';
 import { Color } from '..';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemVariant = 'solid' | 'dotted';
@@ -6,25 +6,47 @@ export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemColor = Color;
 export type ListItemTheme = 'transparent' | 'default' | 'subtle' | 'surface' | 'base';
 export interface ListItemBaseProps {
+    /** The title of the list item. */
     title?: string;
+    /** If true, the list item is interactive and has a hover state. */
     interactive?: boolean;
+    /** The element type to render as. */
     as?: ElementType;
+    /** The URL to link to if the list item is a link. */
     href?: string;
+    /** Click event handler. */
     onClick?: () => void;
+    /** Key press event handler. */
     onKeyPress?: KeyboardEventHandler;
+    /** The tab index of the list item. */
     tabIndex?: number;
+    /** The color of the list item. */
     color?: ListItemColor;
+    /** The theme of the list item. */
     theme?: ListItemTheme;
+    /** The variant of the list item. */
     variant?: ListItemVariant;
+    /** The size of the list item. */
     size?: ListItemSize;
+    /** The shadow style of the list item. */
     shadow?: ListItemShadow;
+    /** Additional class names for the list item. */
     className?: string;
+    /** If true, the list item shows a loading state. */
     loading?: boolean;
+    /** If true, the list item is disabled. */
     disabled?: boolean;
+    /** If true, the list item is hidden. */
     hidden?: boolean;
+    /** If true, the list item is active. */
     active?: boolean;
+    /** If true, the list item is selected. */
     selected?: boolean;
+    /** If true, the list item is expanded. */
     expanded?: boolean;
+    /** Mouse enter event handler. */
+    onMouseEnter?: HTMLProps<HTMLDivElement>['onMouseEnter'];
+    /** The children elements of the list item. */
     children?: ReactNode;
 }
-export declare const ListItemBase: ({ title, interactive, as, href, onClick, onKeyPress, tabIndex, size, variant, color, theme, shadow, loading, disabled, hidden, active, selected, className, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ title, interactive, as, href, onClick, onKeyPress, tabIndex, size, variant, color, theme, shadow, loading, disabled, hidden, active, selected, className, onMouseEnter, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from '@navikt/aksel-icons';
 import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps, BadgeProps, IconProps, ListItemLinkProps, ListItemSelectProps, ListItemSize, SvgElement } from '..';
 export interface ListItemHeaderProps extends ListItemLinkProps {
@@ -9,9 +10,9 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     className?: string;
     /** Select controls */
     select?: ListItemSelectProps;
-    /** Collapsible item, sets linkIcon to "chevron down" */
+    /** Collapsible item */
     collapsible?: boolean;
-    /** Item is expanded, sets linkIcon to "chevron up" */
+    /** Item is expanded */
     expanded?: boolean;
     /** Title */
     title?: string;
@@ -23,8 +24,8 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     avatar?: AvatarProps;
     /** List item avatarGroup */
     avatarGroup?: AvatarGroupProps;
-    /** Optional icon indicating behaviour */
-    linkIcon?: SvgElement | undefined | null;
+    /** Optional chevron icon indicating behaviour */
+    chevron?: typeof ChevronDownIcon;
     /** Optional badge */
     badge?: BadgeProps | ReactNode | undefined;
     /** Custom controls */
@@ -32,4 +33,4 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Custom label */
     children?: ReactNode;
 }
-export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, avatar, avatarGroup, linkIcon, badge, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, avatar, avatarGroup, chevron, badge, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/Patterns.stories.d.ts

@@ -5,5 +5,4 @@ export default meta;
 export declare const ListOfPeople: () => import("react/jsx-runtime").JSX.Element;
 export declare const ListOfServices: () => import("react/jsx-runtime").JSX.Element;
 export declare const ListOfCategories: () => import("react/jsx-runtime").JSX.Element;
-export declare const CategoryGrid: () => import("react/jsx-runtime").JSX.Element;
 export declare const MultilevelList: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/Specimens.stories.d.ts

@@ -9,5 +9,5 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const Theme: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Size: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Theme: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element[];
+export declare const Size: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element[];

package/dist/types/lib/components/Page/Flex.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Color, Range, Shadow, Theme } from '..';
-export type FlexElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav';
+export type FlexElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav' | 'ul';
 export type FlexDirection = 'col' | 'row';
 export type FlexAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
 export type FlexJustify = 'initial' | 'start' | 'end' | 'center' | 'between';

package/dist/types/lib/components/Transmission/TransmissionItem.stories.d.ts

@@ -22,4 +22,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Attachments: Story;
+export declare const Attachments: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "main": "dist/index.js",
   "files": [
     "dist/",