@altinn/altinn-components 0.28.1 → 0.28.2

package/dist/assets/Button.css

@@ -1 +1 @@
-._button_qyaf4_2{column-gap:.125em}._button_qyaf4_2[data-size=xs]{padding:0 .375rem}._button_qyaf4_2[data-size=sm]{padding:0 .5rem}._button_qyaf4_2[data-size=md]{padding:0 .625rem}._button_qyaf4_2[data-size=lg]{padding:0 .75rem}
+._button_1qqtu_1{display:inline-flex;align-items:center;column-gap:.25em;padding:.625em}._button_1qqtu_1[data-reverse=true]{flex-direction:row-reverse}

package/dist/assets/ButtonBase.css

@@ -1 +1 @@
-._button_1c0tl_1{border:1px solid;border-color:transparent;margin:0;padding:0;width:auto;overflow:visible;background:transparent;text-decoration:none;color:inherit;font:inherit;text-align:inherit;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;cursor:pointer;display:inline-flex;align-items:center;border-radius:2px}._button_1c0tl_1[data-reverse=true]{flex-direction:row-reverse}._button_1c0tl_1:disabled{opacity:.5;pointer-events:none}._button_1c0tl_1[data-size=xs]{height:2.25rem}._button_1c0tl_1[data-size=sm]{height:2.625rem}._button_1c0tl_1[data-size=md]{height:3rem}._button_1c0tl_1[data-size=lg]{height:3.5rem}._button_1c0tl_1[data-variant=solid]{background-color:var(--ds-color-base-default);border-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}._button_1c0tl_1[data-variant=solid]:hover{background-color:var(--ds-color-base-hover);border-color:var(--ds-color-base-hover)}._button_1c0tl_1[data-variant=solid]:active{background-color:var(--ds-color-base-active);border-color:var(--ds-color-base-active)}._button_1c0tl_1[data-variant=tinted]{background-color:var(--ds-color-surface-tinted);border-color:var(--ds-color-surface-tinted);border-color:var(--ds-color-base-default);color:var(--ds-color-base-surface-tinted)}._button_1c0tl_1[data-variant=tinted]:hover{background-color:var(--ds-color-surface-hover)}._button_1c0tl_1[data-variant=tinted]:active{background-color:var(--ds-color-surface-active)}._button_1c0tl_1[data-variant=outline],._button_1c0tl_1[data-variant=dotted]{border-color:var(--ds-color-base-default)}._button_1c0tl_1[data-variant=outline]{border-style:solid}._button_1c0tl_1[data-variant=dotted]{border-style:dotted}._button_1c0tl_1[data-variant=text]{border-color:transparent;color:var(--ds-color-text-subtle)}._button_1c0tl_1[data-variant=outline]:hover,._button_1c0tl_1[data-variant=dotted]:hover,._button_1c0tl_1[data-variant=text]:hover{background-color:var(--ds-color-surface-hover);color:var(--ds-color-text-default)}._button_1c0tl_1[data-variant=outline]:active,._button_1c0tl_1[data-variant=dotted]:active,._button_1c0tl_1[data-variant=text]:active{background-color:var(--ds-color-surface-active)}._button_1c0tl_1[data-variant=link]{border:none;color:var(--ds-color-text-subtle)}._button_1c0tl_1[data-variant=link]:hover{color:var(--ds-color-base-hover)}._button_1c0tl_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline));outline-offset:var(--_ds--focus, var(--ds-border-width-focus))}._button_1c0tl_1:focus-visible *{--_ds--focus: }
+._button_1pk1w_1{--dsc-button-background--active: transparent;--dsc-button-background--hover: transparent;--dsc-button-background: transparent;--dsc-button-color: inherit;--dsc-button-color--hover: inherit;--dsc-button-border-width: var(--ds-border-width-default);--dsc-button-border-style: solid;--dsc-button-border-color: transparent;--dsc-button-border-radius: 2px;--dsc-button-gap: var(--ds-size-2);--dsc-button-padding: var(--ds-size-2) var(--ds-size-4);--dsc-button-size: var(--ds-size-12);border-style:var(--dsc-button-border-style);border-width:var(--dsc-button-border-width);border-color:var(--dsc-button-border-color);border-radius:var(--dsc-button-border-radius);background:var(--dsc-button-background);color:var(--dsc-button-color);margin:0;padding:0;min-width:var(--dsc-button-size);min-height:var(--dsc-button-size);height:fit-content;justify-content:center;overflow:visible;text-decoration:none;text-align:inherit;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;cursor:pointer;display:inline-flex;align-items:center}._button_1pk1w_1:not([data-size]){font-size:inherit}._button_1pk1w_1:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:var(--ds-opacity-disabled)}._button_1pk1w_1:is(:disabled,[aria-disabled=true])[aria-busy=true]{opacity:1;cursor:progress}@media (hover: hover) and (pointer: fine){._button_1pk1w_1:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):hover{background:var(--dsc-button-background--hover);color:var(--dsc-button-color--hover)}}._button_1pk1w_1:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):active{background:var(--dsc-button-background--active)}._button_1pk1w_1[data-variant=solid]{--dsc-button-background--active: var(--ds-color-base-active);--dsc-button-background--hover: var(--ds-color-base-hover);--dsc-button-background: var(--ds-color-base-default);--dsc-button-color: var(--ds-color-base-contrast-default);--dsc-button-color--hover: var(--ds-color-base-contrast-default);--dsc-button-border-color: var(--ds-color-base-default)}._button_1pk1w_1[data-variant=outline],._button_1pk1w_1[data-variant=dotted],._button_1pk1w_1[data-variant=text]{--dsc-button-background: transparent;--dsc-button-background--active: var(--ds-color-surface-active);--dsc-button-background--hover: var(--ds-color-surface-hover);--dsc-button-color: var(--ds-color-text-subtle);--dsc-button-color--hover: var(--ds-color-text-default)}._button_1pk1w_1[data-variant=outline],._button_1pk1w_1[data-variant=dotted]{--dsc-button-border-color: var(--ds-color-border-strong)}._button_1pk1w_1[data-variant=dotted]{--dsc-button-border-style: dotted}._button_1pk1w_1[data-variant=tinted]{background-color:var(--ds-color-surface-tinted);border-color:var(--ds-color-surface-tinted);border-color:var(--ds-color-base-default);color:var(--ds-color-base-surface-tinted)}._button_1pk1w_1[data-variant=tinted]:hover{background-color:var(--ds-color-surface-hover)}._button_1pk1w_1[data-variant=tinted]:active{background-color:var(--ds-color-surface-active)}._button_1pk1w_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline));outline-offset:var(--_ds--focus, var(--ds-border-width-focus))}._button_1pk1w_1:focus-visible *{--_ds--focus: }

package/dist/assets/ButtonIcon.css

@@ -1 +1 @@
-._icon_n7bze_1{display:flex;align-items:center;justify-content:center}._icon_n7bze_1[data-size=xs]{font-size:1.25rem}._icon_n7bze_1[data-size=sm]{font-size:1.375rem}._icon_n7bze_1[data-size=md]{font-size:1.5rem}._icon_n7bze_1[data-size=lg]{font-size:1.625rem}
+._icon_1wozs_1{display:flex;align-items:center;justify-content:center;font-size:1em}._icon_1wozs_1[data-size=xs]{font-size:.875rem}._icon_1wozs_1[data-size=sm]{font-size:1rem}._icon_1wozs_1[data-size=md]{font-size:1.125rem}._icon_1wozs_1[data-size=lg]{font-size:1.25rem}._icon_1wozs_1 svg,._icon_1wozs_1 img{display:block;width:1em;height:1em;font-size:1.5em}

package/dist/assets/ComboButton.css

@@ -1 +1 @@
-._button_d26a8_1{display:inline-flex;flex-direction:row;align-items:center}._divider_d26a8_7{align-self:stretch;border-left:1px solid currentColor;width:1px;margin:.375rem 0}._primary_d26a8_14,._secondary_d26a8_15{display:inline-flex;align-items:center;border:none}._primary_d26a8_14[data-size=xs],._secondary_d26a8_15[data-size=xs]{padding:0 .375rem}._primary_d26a8_14[data-size=sm],._secondary_d26a8_15[data-size=sm]{padding:0 .5rem}._primary_d26a8_14[data-size=md],._secondary_d26a8_15[data-size=md]{padding:0 .625rem}._primary_d26a8_14[data-size=lg],._secondary_d26a8_15[data-size=lg]{padding:0 .75rem}
+._button_kd2d3_1{display:inline-flex;flex-direction:row;align-items:center}._divider_kd2d3_7{align-self:stretch;border-left:1px solid currentColor;width:1px;margin:.375rem 0}._primary_kd2d3_14,._secondary_kd2d3_15{display:inline-flex;align-items:center;border-width:0;margin:-1px;padding:0 .5em}

package/dist/assets/ListItemHeader.css

@@ -1 +1 @@
-._header_hyqf4_1{--dsc-item-spacing: .5em;position:relative;width:100%;min-height:var(--dsc-item-height);display:flex;align-items:center;justify-content:space-between;background:var(--dsc-item-background);column-gap:var(--dsc-item-spacing);padding-right:var(--dsc-item-px);padding-left:var(--dsc-item-px)}._header_hyqf4_1[data-interactive=true]{cursor:pointer}._header_hyqf4_1[data-interactive=true]:hover{background:var(--dsc-item-background--hover)}._header_hyqf4_1[data-interactive=true]:hover ._label_hyqf4_27 h2{text-decoration:underline}._header_hyqf4_1[data-has-active-child=true]{background-color:var(--ds-color-background-tinted)}
+._header_1rjb2_1{--dsc-item-spacing: .5em;position:relative;width:100%;min-height:var(--dsc-item-height);display:flex;align-items:center;justify-content:space-between;background:var(--dsc-item-background);column-gap:var(--dsc-item-spacing);padding-right:var(--dsc-item-px);padding-left:var(--dsc-item-px)}._header_1rjb2_1[data-interactive=true]{cursor:pointer}._header_1rjb2_1[data-interactive=true]:hover{background:var(--dsc-item-background--hover)}._header_1rjb2_1[data-interactive=true]:hover ._label_1rjb2_27 h2{text-decoration:underline}._header_1rjb2_1[data-has-active-child=true]{background-color:var(--ds-color-background-tinted)}._linkIcon_1rjb2_35{flex-shrink:0;min-width:1.5em;min-height:2em;display:flex;align-items:center;justify-content:center;pointer-events:none}

package/dist/components/Button/Button.js

@@ -1,55 +1,60 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
-import { ButtonBase as e } from "./ButtonBase.js";
-import { ButtonIcon as x } from "./ButtonIcon.js";
-import { ButtonLabel as y } from "./ButtonLabel.js";
-import '../../assets/Button.css';const N = "_button_qyaf4_2", n = {
-  button: N
-}, I = ({
-  variant: a = "solid",
-  color: r,
-  size: t = "md",
-  selected: s = !1,
-  icon: l,
-  href: m,
-  label: i,
-  children: b,
-  className: u,
-  loading: p,
-  loadingText: f = "Loading ...",
-  ariaLabel: B,
-  ...c
-}) => p ? /* @__PURE__ */ o(
-  e,
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import { c as b } from "../../index-L8X2o7IH.js";
+import "react";
+import { ButtonBase as d } from "./ButtonBase.js";
+import { ButtonLabel as B } from "./ButtonLabel.js";
+import { ButtonIcon as q } from "./ButtonIcon.js";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/Button.css';const y = "_button_1qqtu_1", a = {
+  button: y
+}, C = ({
+  variant: r = "solid",
+  color: n,
+  size: s,
+  selected: m = !1,
+  icon: u,
+  iconSize: x,
+  href: i,
+  label: p,
+  labelSize: o,
+  children: c,
+  className: e,
+  loading: _,
+  ariaLabel: h,
+  ...f
+}) => _ ? /* @__PURE__ */ t(
+  d,
   {
-    variant: a,
+    variant: r,
     "aria-busy": !0,
-    color: r,
-    size: t,
-    selected: s,
-    href: m,
-    className: d(n.button, u),
-    ...c,
+    color: n,
+    size: s,
+    selected: m,
+    href: i,
+    className: b(a.button, e),
+    ...f,
     disabled: !0,
-    children: /* @__PURE__ */ o("span", { className: n.label, "data-size": t, children: /* @__PURE__ */ o("span", { className: n.loading, children: f }) })
+    children: /* @__PURE__ */ t(B, { size: o, children: c || p })
   }
-) : /* @__PURE__ */ h(
-  e,
+) : /* @__PURE__ */ j(
+  d,
   {
-    variant: a,
-    color: r,
-    size: t,
-    ariaLabel: B,
-    selected: s,
-    href: m,
-    className: d(n.button, u),
-    ...c,
+    variant: r,
+    color: n,
+    size: s,
+    ariaLabel: h,
+    selected: m,
+    href: i,
+    className: b(a.button, e),
+    ...f,
     children: [
-      l && /* @__PURE__ */ o(x, { size: t, icon: l }),
-      /* @__PURE__ */ o(y, { size: t, children: b || i })
+      u && /* @__PURE__ */ t(q, { icon: u, size: x || o }),
+      /* @__PURE__ */ t(B, { size: o, children: c || p })
     ]
   }
 );
 export {
-  I as Button
+  C as Button
 };

package/dist/components/Button/ButtonBase.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { c as i } from "../../index-L8X2o7IH.js";
-import '../../assets/ButtonBase.css';const p = "_button_1c0tl_1", f = {
+import '../../assets/ButtonBase.css';const p = "_button_1pk1w_1", f = {
   button: p
 }, B = ({
   as: a,

package/dist/components/Button/ButtonIcon.js

@@ -1,13 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as i } from "../../index-L8X2o7IH.js";
-import { Icon as m } from "../Icon/Icon.js";
-import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import { isValidElement as c } from "react";
+import { isIconProps as p, Icon as s } from "../Icon/Icon.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ButtonIcon.css';const s = "_icon_n7bze_1", e = {
-  icon: s
-}, u = ({ className: t, size: n, icon: r, iconAltText: c }) => /* @__PURE__ */ o("span", { className: i(e.icon, t), "data-size": n, children: /* @__PURE__ */ o(m, { svgElement: r, altText: c }) });
+import '../../assets/ButtonIcon.css';const a = "_icon_1wozs_1", r = {
+  icon: a
+};
+function l(o) {
+  return typeof o == "string" || typeof o == "number" || typeof o == "boolean" || o === null || c(o);
+}
+const _ = ({ icon: o, size: n, iconAltText: e, className: i }) => /* @__PURE__ */ t("span", { className: m(r.wrapper, i), "data-size": n, "aria-label": e, children: p(o) && /* @__PURE__ */ t(s, { ...o, className: r.icon }) || l(o) && o || /* @__PURE__ */ t(s, { svgElement: o, className: r.icon }) });
 export {
-  u as ButtonIcon
+  _ as ButtonIcon
 };

package/dist/components/Button/ComboButton.js

@@ -1,42 +1,58 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { c as y } from "../../index-L8X2o7IH.js";
-import { ButtonBase as t } from "./ButtonBase.js";
-import { ButtonIcon as b } from "./ButtonIcon.js";
-import { ButtonLabel as f } from "./ButtonLabel.js";
-import '../../assets/ComboButton.css';const v = "_button_d26a8_1", x = "_divider_d26a8_7", B = "_primary_d26a8_14", N = "_secondary_d26a8_15", a = {
-  button: v,
-  divider: x,
-  primary: B,
-  secondary: N
-}, L = ({
-  variant: n = "solid",
-  color: s,
-  size: o = "md",
-  selected: d = !1,
-  icon: c,
-  children: i,
-  className: m,
-  ariaLabel: e,
-  onLabelClick: l,
-  onIconClick: _,
-  iconAltText: p
-}) => /* @__PURE__ */ u(
-  t,
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { c as k } from "../../index-L8X2o7IH.js";
+import "react";
+import { ButtonBase as s } from "./ButtonBase.js";
+import { ButtonLabel as v } from "./ButtonLabel.js";
+import { ButtonIcon as x } from "./ButtonIcon.js";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/ComboButton.css';const B = "_button_kd2d3_1", h = "_divider_kd2d3_7", N = "_primary_kd2d3_14", C = "_secondary_kd2d3_15", r = {
+  button: B,
+  divider: h,
+  primary: N,
+  secondary: C
+}, E = ({
+  variant: a = "solid",
+  color: n,
+  size: t,
+  selected: e = !1,
+  icon: i,
+  iconSize: m,
+  iconAltText: c,
+  label: p,
+  labelSize: d,
+  children: l,
+  className: _,
+  ariaLabel: u,
+  onLabelClick: y,
+  onIconClick: b
+}) => /* @__PURE__ */ f(
+  s,
   {
     as: "div",
-    size: o,
-    variant: n,
-    color: s,
-    selected: d,
-    className: y(a.button, m),
+    size: t,
+    variant: a,
+    color: n,
+    selected: e,
+    className: k(r.button, _),
     tabIndex: -1,
     children: [
-      /* @__PURE__ */ r(t, { ariaLabel: e, size: o, onClick: l, className: a.primary, children: /* @__PURE__ */ r(f, { size: o, children: i }) }),
-      /* @__PURE__ */ r("span", { "data-size": o, className: a.divider }),
-      /* @__PURE__ */ r(t, { size: o, onClick: _, className: a.secondary, ariaLabel: p, children: /* @__PURE__ */ r(b, { icon: c, size: o }) })
+      /* @__PURE__ */ o(s, { ariaLabel: u, size: t, onClick: y, className: r.primary, children: /* @__PURE__ */ o(v, { size: d, children: l || p }) }),
+      /* @__PURE__ */ o("span", { "data-size": t, className: r.divider }),
+      /* @__PURE__ */ o(
+        s,
+        {
+          onClick: b,
+          className: r.secondary,
+          ariaLabel: c,
+          size: m || d,
+          children: i && /* @__PURE__ */ o(x, { icon: i })
+        }
+      )
     ]
   }
 );
 export {
-  L as ComboButton
+  E as ComboButton
 };

package/dist/components/Button/IconButton.js

@@ -1,34 +1,36 @@
 import { jsx as o } from "react/jsx-runtime";
-import { c as l } from "../../index-L8X2o7IH.js";
-import { ButtonBase as b } from "./ButtonBase.js";
-import { ButtonIcon as d } from "./ButtonIcon.js";
-import '../../assets/IconButton.css';const p = "_button_hmev5_1", f = {
-  button: p
-}, I = ({
-  variant: n = "solid",
-  size: t = "md",
-  icon: r,
-  color: s,
+import "../../index-L8X2o7IH.js";
+import "react";
+import { ButtonBase as l } from "./ButtonBase.js";
+import { ButtonIcon as u } from "./ButtonIcon.js";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+const z = ({
+  variant: r = "solid",
+  size: i,
+  icon: t,
   iconSize: m,
-  className: a,
-  selected: c,
-  onClick: e,
-  dataTestId: i,
-  iconAltText: u
+  iconAltText: p,
+  color: e,
+  className: n,
+  selected: a,
+  onClick: s,
+  dataTestId: d
 }) => /* @__PURE__ */ o(
-  b,
+  l,
   {
-    variant: n,
-    color: s,
-    size: t,
-    className: l(f.button, a),
-    onClick: e,
-    selected: c,
-    "data-testid": i,
-    "aria-label": u,
-    children: /* @__PURE__ */ o(d, { icon: r, size: m || t })
+    variant: r,
+    color: e,
+    size: i,
+    className: n,
+    onClick: s,
+    selected: a,
+    "data-testid": d,
+    "aria-label": p,
+    children: t && /* @__PURE__ */ o(u, { icon: t, size: m })
   }
 );
 export {
-  I as IconButton
+  z as IconButton
 };

package/dist/components/Header/HeaderButton.js

@@ -5,9 +5,9 @@ import { Avatar as I } from "../Avatar/Avatar.js";
 import { AvatarGroup as y } from "../Avatar/AvatarGroup.js";
 import { Badge as f } from "../Badge/Badge.js";
 import { ButtonBase as u } from "../Button/ButtonBase.js";
-import { Icon as b } from "../Icon/Icon.js";
 import * as _ from "react";
 import { forwardRef as v } from "react";
+import { Icon as b } from "../Icon/Icon.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";

package/dist/components/Icon/Icon.js

@@ -1,34 +1,33 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { c as n } from "../../index-L8X2o7IH.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
 import "react";
 import { Skeleton as _ } from "../Skeleton/Skeleton.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Icon.css';const f = "_icon_2h14f_1", g = "_shape_2h14f_9", v = "_svg_2h14f_15", N = "_image_2h14f_16", a = {
-  icon: f,
-  shape: g,
-  svg: v,
-  image: N
-}, z = (s) => typeof s == "object" && s !== null && ("svgElement" in s || "iconUrl" in s), E = ({
+import '../../assets/Icon.css';const d = "_icon_2h14f_1", f = "_shape_2h14f_9", g = "_svg_2h14f_15", v = "_image_2h14f_16", a = {
+  icon: d,
+  shape: f,
+  svg: g,
+  image: v
+}, y = (s) => typeof s == "object" && s !== null && ("svgElement" in s || "iconUrl" in s), z = ({
   loading: s,
-  altText: r,
-  svgElement: c,
-  variant: i = "fill",
-  size: o,
-  color: m,
-  theme: l,
+  altText: n,
+  svgElement: r,
+  size: i,
+  color: o,
+  theme: m,
   iconUrl: p,
   className: t,
-  style: h
-}) => c ? /* @__PURE__ */ e("span", { "data-size": o, "data-color": m, "data-theme": l, className: n(a.icon, t), style: h, children: /* @__PURE__ */ d(_, { loading: s, variant: "circle", className: a.shape, children: [
+  style: l
+}) => r ? /* @__PURE__ */ e("span", { "data-size": i, "data-color": o, "data-theme": m, className: c(a.icon, t), style: l, children: /* @__PURE__ */ h(_, { loading: s, variant: "circle", className: a.shape, children: [
   /* @__PURE__ */ e("span", { className: a.shape }),
-  /* @__PURE__ */ e(c, { "aria-hidden": "true", "alt-label": r, "data-variant": i, className: a.svg })
-] }) }) : p ? /* @__PURE__ */ e("span", { "data-size": o, "data-color": m, "data-theme": l, className: n(a.icon, t), style: h, children: /* @__PURE__ */ d(_, { loading: s, variant: "circle", className: a.shape, children: [
+  /* @__PURE__ */ e(r, { "aria-hidden": "true", "alt-label": n, className: a.svg })
+] }) }) : p ? /* @__PURE__ */ e("span", { "data-size": i, "data-color": o, "data-theme": m, className: c(a.icon, t), style: l, children: /* @__PURE__ */ h(_, { loading: s, variant: "circle", className: a.shape, children: [
   /* @__PURE__ */ e("span", { className: a.shape }),
-  /* @__PURE__ */ e("img", { src: p, alt: r, className: a.image, "data-variant": i })
-] }) }) : /* @__PURE__ */ e("span", { className: n(a.icon, t) });
+  /* @__PURE__ */ e("img", { src: p, alt: n, className: a.image })
+] }) }) : /* @__PURE__ */ e("span", { className: c(a.icon, t) });
 export {
-  E as Icon,
-  z as isIconProps
+  z as Icon,
+  y as isIconProps
 };

package/dist/components/Icon/IconOrAvatar.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { isValidElement as p } from "react";
-import { Icon as i } from "./Icon.js";
+import { Icon as n } from "./Icon.js";
 import "../../index-L8X2o7IH.js";
 import { Avatar as f } from "../Avatar/Avatar.js";
 import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
@@ -8,25 +8,25 @@ import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as l } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/IconOrAvatar.css';const u = "_icon_1ez59_1", v = "_avatar_1ez59_2", _ = "_avatarGroup_1ez59_6", e = {
+import '../../assets/IconOrAvatar.css';const u = "_icon_1ez59_1", _ = "_avatar_1ez59_2", v = "_avatarGroup_1ez59_6", e = {
   icon: u,
-  avatar: v,
-  avatarGroup: _
+  avatar: _,
+  avatarGroup: v
 };
 function g(r) {
   return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || p(r);
 }
-const N = (r) => r.svgElement !== void 0 || r.iconUrl !== void 0, S = ({ loading: r, size: m, icon: t, iconTheme: s, avatar: n, avatarGroup: a }) => {
-  if (!t && !n && !a)
+const N = (r) => r.svgElement !== void 0 || r.iconUrl !== void 0, S = ({ loading: r, size: i, icon: t, iconTheme: a, avatar: s, avatarGroup: m }) => {
+  if (!t && !s && !m)
     return null;
   if (r)
-    return /* @__PURE__ */ o(i, { className: e.icon, svgElement: l, loading: !0 });
+    return /* @__PURE__ */ o(n, { className: e.icon, svgElement: l, loading: !0 });
   if (t)
-    return N(t) ? /* @__PURE__ */ o(i, { className: e.icon, theme: t.theme || s, variant: "contain", ...t }) : g(t) ? t : /* @__PURE__ */ o(i, { className: e.icon, svgElement: t, variant: "contain", theme: s });
-  if (n)
-    return /* @__PURE__ */ o(f, { ...n, size: n.size || m, className: e.avatar });
-  if (a)
-    return /* @__PURE__ */ o(c, { ...a, className: e.avatarGroup });
+    return N(t) ? /* @__PURE__ */ o(n, { className: e.icon, theme: t.theme || a, ...t }) : g(t) ? t : /* @__PURE__ */ o(n, { className: e.icon, svgElement: t, theme: a });
+  if (s)
+    return /* @__PURE__ */ o(f, { ...s, size: s.size || i, className: e.avatar });
+  if (m)
+    return /* @__PURE__ */ o(c, { ...m, className: e.avatarGroup });
 };
 export {
   S as IconOrAvatar

package/dist/components/List/ListItemHeader.js

@@ -1,94 +1,101 @@
-import { jsxs as p, jsx as e, Fragment as E } from "react/jsx-runtime";
-import { c as k } from "../../index-L8X2o7IH.js";
-import { useId as w, isValidElement as z } from "react";
-import { Icon as D } from "../Icon/Icon.js";
-import { Badge as F } from "../Badge/Badge.js";
+import { jsxs as l, jsx as e, Fragment as E } from "react/jsx-runtime";
+import { c as w } from "../../index-L8X2o7IH.js";
+import { useId as z, isValidElement as D } from "react";
+import { Icon as F } from "../Icon/Icon.js";
+import { Badge as H } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as H } from "./ListItemLink.js";
-import { ListItemLabel as R } from "./ListItemLabel.js";
-import { ListItemIcon as U } from "./ListItemIcon.js";
-import { ListItemControls as V } from "./ListItemControls.js";
+import { ListItemLink as R } from "./ListItemLink.js";
+import { ListItemLabel as U } from "./ListItemLabel.js";
+import { ListItemIcon as V } from "./ListItemIcon.js";
+import { ListItemControls as q } from "./ListItemControls.js";
 import { ListItemSelect as A } from "./ListItemSelect.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as G, a as J } from "../../ChevronUp-DR4Lz2Jb.js";
 import { S as K } from "../../ChevronRight-BbelnTke.js";
-import '../../assets/ListItemHeader.css';const M = "_header_hyqf4_1", O = "_label_hyqf4_27", o = {
+import '../../assets/ListItemHeader.css';const M = "_header_1rjb2_1", O = "_label_1rjb2_27", P = "_linkIcon_1rjb2_35", o = {
   header: M,
-  label: O
-}, ie = ({
-  as: d,
-  interactive: s = !0,
-  color: h,
-  loading: r,
+  label: O,
+  linkIcon: P
+}, ne = ({
+  as: c,
+  interactive: p = !0,
+  color: d,
+  loading: t,
   disabled: f,
-  collapsible: I,
-  linkIcon: v,
-  expanded: L,
-  select: m,
-  href: b,
-  onClick: u,
-  onKeyPress: y,
-  tabIndex: S,
+  collapsible: h,
+  linkIcon: I,
+  expanded: v,
+  select: s,
+  href: L,
+  onClick: _,
+  onKeyPress: b,
+  tabIndex: u,
   size: i,
-  title: _,
-  description: x,
-  icon: C,
-  active: a,
-  badge: t,
-  controls: l,
+  title: S,
+  description: j,
+  icon: k,
+  active: m,
+  badge: r,
+  controls: n,
   className: N,
-  children: j,
-  ariaLabel: q
+  children: x,
+  ariaLabel: y
 }) => {
-  const n = I ? L ? G : J : v ? K : void 0, B = () => t && !r && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(F, { ...t }) : z(t) ? t : null, c = w();
-  return /* @__PURE__ */ p(
+  const a = h ? v ? G : J : I ? K : void 0, C = () => r && !t && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(H, { ...r }) : D(r) ? r : null, B = z();
+  return /* @__PURE__ */ l(
     "header",
     {
-      className: k(o.header, N),
-      "data-color": h,
-      "data-interactive": s,
+      className: w(o.header, N),
+      "data-color": d,
+      "data-interactive": p,
       "data-size": i,
-      "data-has-active-child": a,
+      "data-has-active-child": m,
       children: [
         /* @__PURE__ */ e(
-          H,
+          R,
           {
-            interactive: s,
-            as: d,
-            href: b,
-            onClick: u,
-            onKeyPress: y,
-            tabIndex: S,
-            loading: r,
-            disabled: f || r,
-            active: a,
-            describedby: c,
-            children: /* @__PURE__ */ e("span", { children: q })
+            as: c,
+            href: L,
+            onClick: _,
+            onKeyPress: b,
+            tabIndex: u,
+            loading: t,
+            disabled: f || t,
+            active: m,
+            ariaLabel: y
           }
         ),
-        m && /* @__PURE__ */ e(A, { ...m, className: o.select }),
-        /* @__PURE__ */ e(U, { loading: r, icon: C }),
+        s && /* @__PURE__ */ e(A, { ...s, className: o.select }),
+        /* @__PURE__ */ e(V, { loading: t, icon: k }),
         /* @__PURE__ */ e(
-          R,
+          U,
           {
             size: i,
-            loading: r,
-            title: _,
-            description: x,
-            id: c,
+            loading: t,
+            title: S,
+            description: j,
+            id: B,
             className: o.label,
-            children: j
+            children: x
           }
         ),
-        /* @__PURE__ */ e(V, { className: o.controls, children: l && !r ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: l }) : /* @__PURE__ */ p(E, { children: [
-          B(),
-          n && /* @__PURE__ */ e(D, { svgElement: n, style: { fontSize: "1.5rem" } })
+        /* @__PURE__ */ e(q, { className: o.controls, children: n && !t ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: n }) : /* @__PURE__ */ l(E, { children: [
+          C(),
+          a && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
+            F,
+            {
+              svgElement: a,
+              style: {
+                fontSize: "1.5rem"
+              }
+            }
+          ) })
         ] }) })
       ]
     }
   );
 };
 export {
-  ie as ListItemHeader
+  ne as ListItemHeader
 };

package/dist/components/List/ListItemLink.js

@@ -1,37 +1,37 @@
-import { jsx as d } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemLink.css';const x = "_link_18ajm_1", i = {
-  link: x
-}, u = ({
-  interactive: e = !1,
-  as: o,
-  loading: p,
-  disabled: f,
-  selected: l,
-  href: v,
+import { jsx as i } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemLink.css';const u = "_link_18ajm_1", s = {
+  link: u
+}, h = ({
+  as: c,
+  loading: l,
+  disabled: p,
+  selected: v,
+  href: f,
   onClick: t,
   onKeyPress: a,
   className: r,
-  children: m,
-  active: b,
-  describedby: n
-}) => e ? /* @__PURE__ */ d(
-  o || "div",
-  {
-    className: c(i.link, i.interactive, r),
-    href: v,
-    onKeyPress: (s) => {
-      s.key === "Enter" && (t == null || t()), a == null || a(s);
-    },
-    onClick: t,
-    "data-interactive": e,
-    "aria-disabled": p || f,
-    "aria-selected": l,
-    "aria-describedby": n,
-    "data-active": b,
-    children: m
-  }
-) : /* @__PURE__ */ d("div", { className: c(i.link, r), "aria-describedby": n, children: m });
+  active: o,
+  ariaLabel: e
+}) => {
+  const n = c || "div";
+  return n === "div" ? /* @__PURE__ */ i("div", { className: m(s.link, r), children: /* @__PURE__ */ i("span", { children: e }) }) : /* @__PURE__ */ i(
+    n,
+    {
+      className: m(s.link, r),
+      href: f,
+      onKeyPress: (d) => {
+        d.key === "Enter" && (t == null || t()), a == null || a(d);
+      },
+      onClick: t,
+      "data-interactive": "true",
+      "aria-disabled": l || p,
+      "aria-selected": v,
+      "aria-label": e,
+      "data-active": o
+    }
+  );
+};
 export {
-  u as ListItemLink
+  h as ListItemLink
 };

package/dist/components/Profile/AccountListItem.js

@@ -1,18 +1,18 @@
 "use client";
-import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import * as c from "react";
 import { forwardRef as m } from "react";
-import { Badge as y } from "../Badge/Badge.js";
-import { ContextMenu as O } from "../ContextMenu/ContextMenu.js";
-import { ListItemControls as w } from "../List/ListItemControls.js";
-import { ListItem as h } from "../List/ListItem.js";
+import { Badge as O } from "../Badge/Badge.js";
+import { ContextMenu as w } from "../ContextMenu/ContextMenu.js";
+import { ListItemControls as h } from "../List/ListItemControls.js";
+import { ListItem as I } from "../List/ListItem.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as I } from "../Page/Flex.js";
+import { Flex as j } from "../Page/Flex.js";
 import { u as d } from "../../useId-BVFxCjkq.js";
-var j = function(t, o) {
+var x = function(t, o) {
   var l = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (l[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -20,8 +20,8 @@ var j = function(t, o) {
       o.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const x = m((t, o) => {
-  var { title: l, titleId: e } = t, r = j(t, ["title", "titleId"]);
+const E = m((t, o) => {
+  var { title: l, titleId: e } = t, r = x(t, ["title", "titleId"]);
   let i = d();
   return i = l ? e || "title-" + i : void 0, c.createElement(
     "svg",
@@ -30,7 +30,7 @@ const x = m((t, o) => {
     c.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 4.969c1.399-1.242 2.776-1.844 4.125-1.844 1.519 0 2.823.763 3.905 1.845 2.373 2.372 2.207 6.354-1 9.56l-6.5 6.5-.53-.53-.53.53-6.5-6.5c-3.207-3.206-3.373-7.188-1-9.56C5.05 3.888 6.356 3.125 7.875 3.125c1.349 0 2.726.602 4.125 1.844M12 20.5l-.53.53a.75.75 0 0 0 1.06 0zm0-1.06 5.97-5.97c2.793-2.794 2.627-5.812 1-7.44-.919-.918-1.864-1.405-2.845-1.405s-2.177.487-3.595 1.905a.75.75 0 0 1-1.06 0C10.05 5.112 8.856 4.625 7.874 4.625S5.948 5.112 5.03 6.03c-1.627 1.628-1.793 4.646 1 7.44z", clipRule: "evenodd" })
   );
 });
-var E = function(t, o) {
+var S = function(t, o) {
   var l = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (l[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -38,8 +38,8 @@ var E = function(t, o) {
       o.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const S = m((t, o) => {
-  var { title: l, titleId: e } = t, r = E(t, ["title", "titleId"]);
+const _ = m((t, o) => {
+  var { title: l, titleId: e } = t, r = S(t, ["title", "titleId"]);
   let i = d();
   return i = l ? e || "title-" + i : void 0, c.createElement(
     "svg",
@@ -47,7 +47,7 @@ const S = m((t, o) => {
     l ? c.createElement("title", { id: i }, l) : null,
     c.createElement("path", { fill: "currentColor", d: "M12 4.969c1.399-1.242 2.776-1.844 4.125-1.844 1.519 0 2.823.763 3.905 1.845 2.373 2.372 2.206 6.354-1 9.56l-6.5 6.5a.75.75 0 0 1-1.06 0l-6.5-6.5c-3.207-3.206-3.373-7.188-1-9.56C5.05 3.888 6.355 3.125 7.874 3.125c1.349 0 2.726.602 4.125 1.844" })
   );
-}), $ = ({
+}), q = ({
   size: t,
   expanded: o,
   type: l,
@@ -59,28 +59,30 @@ const S = m((t, o) => {
   contextMenu: f,
   favouriteLabel: p,
   children: u,
-  ...g
+  interactive: g,
+  ...b
 }) => {
-  const b = /* @__PURE__ */ v(w, { children: [
-    /* @__PURE__ */ n(I, { align: "center", spacing: 2, style: { position: "relative", fontSize: "1.25rem" }, children: a ? /* @__PURE__ */ n(y, { color: l === "group" ? "neutral" : l, children: a }) : s ? /* @__PURE__ */ n(S, { "aria-label": p }) : /* @__PURE__ */ n(x, { "aria-hidden": !0 }) }),
-    f && /* @__PURE__ */ n(O, { ...f, size: "sm" })
+  const v = /* @__PURE__ */ y(h, { children: [
+    /* @__PURE__ */ n(j, { align: "center", spacing: 2, style: { position: "relative", fontSize: "1.25rem" }, children: a ? /* @__PURE__ */ n(O, { color: l === "group" ? "neutral" : l, children: a }) : s ? /* @__PURE__ */ n(_, { "aria-label": p }) : /* @__PURE__ */ n(E, { "aria-hidden": !0 }) }),
+    f && /* @__PURE__ */ n(w, { ...f, size: "sm" })
   ] });
   return /* @__PURE__ */ n(
-    h,
+    I,
     {
-      ...g,
+      ...b,
       size: t,
       icon: e,
       title: r,
       description: o ? void 0 : i,
       expanded: o,
       selected: o,
-      badge: !o && b,
+      badge: !o && v,
       linkIcon: !0,
+      interactive: g,
       children: u
     }
   );
 };
 export {
-  $ as AccountListItem
+  q as AccountListItem
 };

package/dist/types/lib/components/Button/Button.d.ts

@@ -1,10 +1,10 @@
-import { SvgElement } from '../Icon';
-import { ButtonBaseProps } from './ButtonBase';
+import { ButtonBaseProps, ButtonIconProps, ButtonSize } from '..';
 export interface ButtonProps extends Partial<ButtonBaseProps> {
-    icon?: SvgElement;
+    icon?: ButtonIconProps['icon'];
+    iconSize?: ButtonSize;
     ariaLabel?: string;
     loading?: boolean;
-    loadingText?: string;
     label?: string;
+    labelSize?: ButtonSize;
 }
-export declare const Button: ({ variant, color, size, selected, icon, href, label, children, className, loading, loadingText, ariaLabel, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, color, size, selected, icon, iconSize, href, label, labelSize, children, className, loading, ariaLabel, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ variant, color, size, selected, icon, href, label, children, className, loading, loadingText, ariaLabel, ...rest }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ variant, color, size, selected, icon, iconSize, href, label, labelSize, children, className, loading, ariaLabel, ...rest }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -17,6 +17,7 @@ export declare const Text: Story;
 export declare const Loading: Story;
 export declare const Disabled: Story;
 export declare const Sizes: (args: Story) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelSize: (args: Story) => import("react/jsx-runtime").JSX.Element;
 export declare const Variants: (args: Story) => import("react/jsx-runtime").JSX.Element;
 export declare const ToolbarButtons: (args: Story) => import("react/jsx-runtime").JSX.Element;
 export declare const Specimens: (args: Story) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/ButtonIcon.d.ts

@@ -1,9 +1,9 @@
-import { SvgElement } from '../Icon';
-import { ButtonSize } from './ButtonBase';
+import { ButtonSize, IconProps, SvgElement } from '..';
 export interface ButtonIconProps {
-    icon: SvgElement;
-    size: ButtonSize;
+    icon: IconProps | SvgElement;
     iconAltText?: string;
+    size?: ButtonSize;
+    altText?: string;
     className?: string;
 }
-export declare const ButtonIcon: ({ className, size, icon, iconAltText }: ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonIcon: ({ icon, size, iconAltText, className }: ButtonIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/ButtonLabel.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { ButtonSize } from './ButtonBase';
 export interface ButtonLabelProps {
-    size: ButtonSize;
+    size?: ButtonSize;
     className?: string;
-    children: ReactNode;
+    children?: ReactNode;
 }
 export declare const ButtonLabel: ({ className, size, children }: ButtonLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/ComboButton.d.ts

@@ -1,12 +1,14 @@
 import { MouseEventHandler } from 'react';
-import { SvgElement } from '../Icon';
-import { ButtonBaseProps } from './ButtonBase';
+import { ButtonBaseProps, ButtonIconProps, ButtonSize } from '..';
 export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
-    icon: SvgElement;
+    icon: ButtonIconProps['icon'];
+    iconSize?: ButtonSize;
     iconAltText?: string;
     ariaLabel?: string;
     onIconClick?: MouseEventHandler<HTMLButtonElement>;
     onLabelClick?: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
+    label?: string;
+    labelSize?: ButtonSize;
 }
-export declare const ComboButton: ({ variant, color, size, selected, icon, children, className, ariaLabel, onLabelClick, onIconClick, iconAltText, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboButton: ({ variant, color, size, selected, icon, iconSize, iconAltText, label, labelSize, children, className, ariaLabel, onLabelClick, onIconClick, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/IconButton.d.ts

@@ -1,8 +1,7 @@
 import { MouseEventHandler } from 'react';
-import { SvgElement } from '../Icon';
-import { ButtonColor, ButtonSize, ButtonVariant } from './ButtonBase';
+import { ButtonColor, ButtonIconProps, ButtonSize, ButtonVariant } from '..';
 export interface IconButtonProps {
-    icon: SvgElement;
+    icon: ButtonIconProps['icon'];
     iconAltText: string;
     color?: ButtonColor;
     size?: ButtonSize;
@@ -13,4 +12,4 @@ export interface IconButtonProps {
     onClick?: MouseEventHandler;
     dataTestId?: string;
 }
-export declare const IconButton: ({ variant, size, icon, color, iconSize, className, selected, onClick, dataTestId, iconAltText, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ variant, size, icon, iconSize, iconAltText, color, className, selected, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Icon/Icon.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from 'react';
 import { Color, Size, Theme } from '..';
 export type SvgElement = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-export type IconVariant = 'fill' | 'contain' | 'custom';
 export type IconSize = Size | undefined;
 export type IconColor = Color;
 export type IconTheme = Theme;
@@ -10,7 +9,6 @@ export interface IconProps {
     iconUrl?: string;
     altText?: string;
     loading?: boolean;
-    variant?: IconVariant;
     size?: IconSize;
     color?: IconColor;
     theme?: IconTheme;
@@ -18,4 +16,4 @@ export interface IconProps {
     style?: CSSProperties;
 }
 export declare const isIconProps: (icon: unknown) => icon is IconProps;
-export declare const Icon: ({ loading, altText, svgElement: SvgElement, variant, size, color, theme, iconUrl, className, style, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ loading, altText, svgElement: SvgElement, size, color, theme, iconUrl, className, style, }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -31,4 +31,27 @@ export interface ListItemInputProps extends ListItemProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * `ListItem` is a compound component that combines `ListItemBase` and `ListItemHeader`
+ * to render a stylized, optionally interactive list item with support for various visual states
+ * such as loading, selection, and expansion. It supports customization of appearance through variants,
+ * shadows, borders, and iconography.
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.id] - Unique identifier for the list item.
+ * @param {'default' | 'subtle' | 'tinted'} [props.variant='default'] - Visual style variant of the item.
+ * @param {string} [props.className] - Custom class name for additional styling.
+ * @param {boolean} [props.loading] - Whether to show a loading placeholder.
+ * @param {ReactNode | () => ReactElement} [props.label] - Custom label, can be a node or a function returning a ReactElement.
+ * @param {ReactNode} [props.title] - Title content of the item.
+ * @param {ReactNode} [props.description] - Optional description beneath the title.
+ * @param {string} [props.ariaLabel] - ARIA label used for accessibility, defaults to `title` if not provided.
+ * @param {ReactNode} [props.icon] - Icon element displayed alongside the content.
+ * @param {ReactNode} [props.badge] - Optional badge displayed near the title.
+ * @param {boolean} [props.linkIcon=false] - Whether to display a link icon.
+ * @param {...ListItemBaseProps} props - Additional props inherited from `ListItemBase` for layout and interaction.
+ * @param {...ListItemHeaderProps} props - Additional props inherited from `ListItemHeader` for header controls and behavior.
+ *
+ * @returns {ReactElement} Rendered ListItem component.
+ */
+export declare const ListItem: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => ReactElement;

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
     parameters: {};
     args: {
         id: string;

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

@@ -1,17 +1,15 @@
-import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ElementType, KeyboardEventHandler } from 'react';
 export interface ListItemLinkProps {
-    interactive?: boolean;
     as?: ElementType;
     href?: string;
     onClick?: () => void;
     onKeyPress?: KeyboardEventHandler;
+    ariaLabel?: string;
     tabIndex?: number;
     loading?: boolean;
     disabled?: boolean;
     selected?: boolean;
     className?: string;
-    children?: ReactNode;
     active?: boolean;
-    describedby?: string;
 }
-export declare const ListItemLink: ({ interactive, as, loading, disabled, selected, href, onClick, onKeyPress, className, children, active, describedby, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemLink: ({ as, loading, disabled, selected, href, onClick, onKeyPress, className, active, ariaLabel, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
     parameters: {};
     args: {
         id: string;

package/dist/types/lib/components/Menu/MenuItem.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps, BadgeProps, SvgElement } from '..';
-import { MenuItemColor, MenuItemIconProps, MenuItemSize, MenuItemTheme } from './';
+import { MenuItemColor, MenuItemIconProps, MenuItemLabelProps, MenuItemSize, MenuItemTheme } from './';
 export interface MenuItemProps {
     id: string;
     type?: string;
@@ -18,8 +18,8 @@ export interface MenuItemProps {
     selected?: boolean;
     disabled?: boolean;
     groupId?: string | number;
-    title?: string;
-    description?: string;
+    title?: MenuItemLabelProps['title'];
+    description?: MenuItemLabelProps['description'];
     icon?: MenuItemIconProps['icon'];
     iconTheme?: MenuItemIconProps['theme'];
     iconBadge?: MenuItemIconProps['badge'];

package/dist/types/lib/components/Profile/AccountListItem.d.ts

@@ -9,4 +9,4 @@ export interface AccountListItemProps extends ListItemProps {
     label?: string;
     favouriteLabel?: string;
 }
-export declare const AccountListItem: ({ size, expanded, type, icon, title, description, label, favourite, contextMenu, favouriteLabel, children, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountListItem: ({ size, expanded, type, icon, title, description, label, favourite, contextMenu, favouriteLabel, children, interactive, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Profile/AccountListItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ size, expanded, type, icon, title, description, label, favourite, contextMenu, favouriteLabel, children, ...item }: import('./AccountListItem').AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ size, expanded, type, icon, title, description, label, favourite, contextMenu, favouriteLabel, children, interactive, ...item }: import('./AccountListItem').AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -48,7 +48,6 @@ declare const meta: {
         href?: string | undefined;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
-        describedby?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/types/lib/components/Settings/SettingsItem.stories.d.ts

@@ -38,7 +38,6 @@ declare const meta: {
         href?: string | undefined;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
-        describedby?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

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

@@ -19,7 +19,6 @@ declare const meta: {
         children?: React.ReactNode | (() => React.ReactElement);
         border?: import('..').ListItemBorder | undefined;
         loading?: boolean | undefined;
-        variant?: import('..').ListItemVariant | undefined;
         size?: import('..').ListItemSize | undefined;
         color?: import('..').ListItemColor | undefined;
         className?: string | undefined;
@@ -27,6 +26,7 @@ declare const meta: {
         as?: React.ElementType | undefined;
         label?: React.ReactNode | (() => React.ReactElement);
         select?: import('..').ListItemSelectProps | undefined;
+        variant?: import('..').ListItemVariant | undefined;
         hidden?: boolean | undefined;
         expanded?: boolean | undefined;
         active?: boolean | undefined;
@@ -44,7 +44,6 @@ declare const meta: {
         collapsible?: boolean | undefined;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
-        describedby?: string | undefined;
     };
 };
 export default meta;

package/package.json

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

package/dist/assets/IconButton.css

@@ -1 +0,0 @@
-._button_hmev5_1{display:flex;align-items:center;justify-content:center;border-radius:2px}._button_hmev5_1[data-size=xs]{width:2.25rem;height:2.25rem}._button_hmev5_1[data-size=sm]{width:2.625rem;height:2.625rem}._button_hmev5_1[data-size=md]{width:3rem;height:3rem}._button_hmev5_1[data-size=lg]{width:3.5rem;height:3.5rem}