@altinn/altinn-components 0.14.3 → 0.15.1

package/dist/components/List/ListItemHeader.js

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

package/dist/components/List/ListItemIcon.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
+import { Avatar as l } from "../Avatar/Avatar.js";
+import { AvatarGroup as u } from "../Avatar/AvatarGroup.js";
+import { Icon as i } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+const y = ({ loading: e, size: t = "sm", icon: r, avatar: o, avatarGroup: p, children: f }) => {
+  if (!r && !o && !p && !f)
+    return null;
+  if (e)
+    return /* @__PURE__ */ m(i, { name: "x-mark", size: t, loading: !0 });
+  if (r)
+    return n(r) ? r : /* @__PURE__ */ m(i, { ...typeof r == "string" ? { name: r } : r, size: t });
+  if (o)
+    return /* @__PURE__ */ m(l, { ...o, size: t });
+  if (p)
+    return /* @__PURE__ */ m(u, { ...p, size: t });
+};
+export {
+  y as ListItemIcon
+};

package/dist/components/List/ListItemLabel.js

@@ -1,13 +1,13 @@
 import { jsx as e, jsxs as r, Fragment as o } from "react/jsx-runtime";
-import { Skeleton as a } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const d = "_label_1qlgj_3", m = "_title_1qlgj_44", p = "_description_1qlgj_52", l = {
+import { Skeleton as c } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemLabel.css';const d = "_label_1qlgj_3", m = "_title_1qlgj_44", _ = "_description_1qlgj_52", l = {
   label: d,
   title: m,
-  description: p
-}, b = ({ loading: s = !1, size: t = "sm", title: c, description: n, children: i }) => /* @__PURE__ */ e("span", { className: l.label, "data-size": t, children: i || /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ e("h2", { className: l.title, "data-size": t, children: /* @__PURE__ */ e(a, { loading: s, children: c }) }),
+  description: _
+}, b = ({ loading: s = !1, size: t = "sm", title: n, description: a, children: i }) => /* @__PURE__ */ e("span", { className: l.label, "data-size": t, children: i || /* @__PURE__ */ r(o, { children: [
+  /* @__PURE__ */ e("h2", { className: l.title, "data-size": t, children: /* @__PURE__ */ e(c, { loading: s, children: n }) }),
   " ",
-  /* @__PURE__ */ e("p", { className: l.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: s, children: n }) })
+  a && /* @__PURE__ */ e("p", { className: l.description, "data-size": t, children: /* @__PURE__ */ e(c, { loading: s, children: a }) })
 ] }) });
 export {
   b as ListItemLabel

package/dist/components/List/ListItemLink.js

@@ -1,35 +1,37 @@
-import { jsx as c } from "react/jsx-runtime";
-import { c as x } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemLink.css';const _ = "_link_4l8am_1", b = {
-  link: _
-}, j = ({
-  size: n,
-  as: s,
-  loading: e,
-  disabled: i,
-  selected: r,
-  href: o,
+import { jsx as m } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemLink.css';const u = "_link_g93r9_1", x = "_interactive_g93r9_22", i = {
+  link: u,
+  interactive: x
+}, L = ({
+  interactive: o = !1,
+  size: e,
+  as: _,
+  loading: d,
+  disabled: p,
+  selected: v,
+  href: f,
   onClick: t,
   onKeyPress: a,
-  tabIndex: p,
-  className: d,
-  children: l
-}) => /* @__PURE__ */ c(
-  s || "button",
+  tabIndex: l,
+  className: n,
+  children: r
+}) => o ? /* @__PURE__ */ m(
+  _ || "button",
   {
-    className: x(b.link, d),
-    href: o,
-    onKeyPress: (m) => {
-      m.key === "Enter" && (t == null || t()), a == null || a(m);
+    className: c(i.link, i.interactive, n),
+    href: f,
+    onKeyPress: (s) => {
+      s.key === "Enter" && (t == null || t()), a == null || a(s);
     },
     onClick: t,
-    tabIndex: p,
-    "aria-disabled": e || i,
-    "aria-selected": r,
-    "data-size": n,
-    children: l
+    tabIndex: l,
+    "aria-disabled": d || p,
+    "aria-selected": v,
+    "data-size": e,
+    children: r
   }
-);
+) : /* @__PURE__ */ m("div", { className: c(i.link, n), "data-size": e, children: r });
 export {
-  j as ListItemLink
+  L as ListItemLink
 };

package/dist/components/List/ListItemSelect.js

@@ -1,19 +1,19 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { c as l } from "../../index-L8X2o7IH.js";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-import { CheckboxIcon as r } from "../Icon/CheckboxIcon.js";
-import '../../assets/ListItemSelect.css';const a = "_label_1vv8z_1", m = "_input_1vv8z_32", p = "_icon_1vv8z_37", t = {
-  label: a,
-  input: m,
-  icon: p
-}, I = ({ size: i, checked: o = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: l(t.label, c), "data-size": i, children: [
-  /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: s, className: t.input, tabIndex: -1 }),
-  /* @__PURE__ */ e(r, { hover: !0, checked: o, className: t.icon })
+import { CheckboxIcon as p } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const r = "_label_l4npz_1", a = "_input_l4npz_15", m = "_icon_l4npz_20", t = {
+  label: r,
+  input: a,
+  icon: m
+}, N = ({ size: n, checked: o = !1, onChange: i, className: l }) => /* @__PURE__ */ s("label", { className: c(t.label, l), "data-size": n, children: [
+  /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: i, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ e(p, { hover: !0, checked: o, className: t.icon })
 ] });
 export {
-  I as ListItemSelect
+  N as ListItemSelect
 };

package/dist/components/List/index.js

@@ -1,22 +1,22 @@
 import { ListItemBase as o } from "./ListItemBase.js";
 import { ListItemLink as m } from "./ListItemLink.js";
-import { ListItemHeader as i } from "./ListItemHeader.js";
+import { ListItemHeader as L } from "./ListItemHeader.js";
 import { ListItemLabel as f } from "./ListItemLabel.js";
-import { ListItemMedia as x } from "./ListItemMedia.js";
+import { ListItemIcon as x } from "./ListItemIcon.js";
 import { ListItemControls as a } from "./ListItemControls.js";
-import { ListItemSelect as d } from "./ListItemSelect.js";
+import { ListItemSelect as n } from "./ListItemSelect.js";
 import { ListItem as B } from "./ListItem.js";
-import { ListBase as c } from "./ListBase.js";
+import { ListBase as d } from "./ListBase.js";
 import { List as C } from "./List.js";
 export {
   C as List,
-  c as ListBase,
+  d as ListBase,
   B as ListItem,
   o as ListItemBase,
   a as ListItemControls,
-  i as ListItemHeader,
+  L as ListItemHeader,
+  x as ListItemIcon,
   f as ListItemLabel,
   m as ListItemLink,
-  x as ListItemMedia,
-  d as ListItemSelect
+  n as ListItemSelect
 };

package/dist/components/Menu/Menu.js

@@ -1,24 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
-import { MenuBase as i } from "./MenuBase.js";
-import { MenuItems as p } from "./MenuItems.js";
+import { MenuBase as f } from "./MenuBase.js";
+import { MenuItems as M } from "./MenuItems.js";
 const d = ({
   color: e,
-  theme: m,
-  defaultItemColor: o,
-  defaultItemTheme: t = "default",
-  defaultItemSize: n = "sm",
-  groups: s,
-  items: u = [],
-  search: f
-}) => /* @__PURE__ */ r(i, { color: e, theme: m, children: /* @__PURE__ */ r(
-  p,
+  theme: o,
+  defaultItemColor: m,
+  defaultItemTheme: t,
+  defaultItemSize: n,
+  defaultIconTheme: i,
+  groups: p,
+  items: s = [],
+  search: u
+}) => /* @__PURE__ */ r(f, { color: e, theme: o, children: /* @__PURE__ */ r(
+  M,
   {
-    search: f,
-    items: u,
-    groups: s,
+    search: u,
+    items: s,
+    groups: p,
     defaultItemSize: n,
-    defaultItemColor: o,
-    defaultItemTheme: t
+    defaultItemColor: m,
+    defaultItemTheme: t,
+    defaultIconTheme: i
   }
 ) });
 export {

package/dist/components/Menu/MenuBase.js

@@ -1,18 +1,18 @@
 import { jsx as m } from "react/jsx-runtime";
 import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuBase.css';const c = "_menu_njba2_1", p = "_list_njba2_13", u = "_item_njba2_19", i = {
-  menu: c,
+import '../../assets/MenuBase.css';const i = "_menu_njba2_1", p = "_list_njba2_13", u = "_item_njba2_19", r = {
+  menu: i,
   list: p,
   item: u
-}, C = ({ as: n = "nav", theme: t, className: e, children: o }) => /* @__PURE__ */ m(n, { className: a(i.menu, e), "data-theme": t, role: "menu", children: o }), d = ({ as: n = "ul", role: t = "group", expanded: e, className: o, children: s }) => /* @__PURE__ */ m(n, { className: a(i.list, o), role: t, "aria-expanded": e, children: s }), x = ({
+}, d = ({ as: n = "nav", color: t, theme: e, className: o, children: s }) => /* @__PURE__ */ m(n, { className: a(r.menu, o), "data-color": t, "data-theme": e, role: "menu", children: s }), C = ({ as: n = "ul", role: t = "group", expanded: e, className: o, children: s }) => /* @__PURE__ */ m(n, { className: a(r.list, o), role: t, "aria-expanded": e, children: s }), x = ({
   as: n = "li",
   role: t = "presentation",
   expanded: e,
   className: o,
   children: s
-}) => /* @__PURE__ */ m(n, { className: a(i.item, o), role: t, "aria-expanded": e, children: s });
+}) => /* @__PURE__ */ m(n, { className: a(r.item, o), role: t, "aria-expanded": e, children: s });
 export {
-  C as MenuBase,
-  d as MenuList,
+  d as MenuBase,
+  C as MenuList,
   x as MenuListItem
 };

package/dist/components/Menu/MenuItem.js

@@ -1,55 +1,68 @@
-import { jsxs as k, jsx as m } from "react/jsx-runtime";
-import { MenuItemBase as L } from "./MenuItemBase.js";
-import { MenuItemLabel as j } from "./MenuItemLabel.js";
-import { MenuItemMedia as v } from "./MenuItemMedia.js";
-const y = ({
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { MenuItemBase as v } from "./MenuItemBase.js";
+import { MenuItemLabel as L } from "./MenuItemLabel.js";
+import { MenuItemIcon as S } from "./MenuItemIcon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import "../Icon/SvgIcon.js";
+const g = {
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "xl"
+}, G = ({
   as: t = "a",
-  size: n = "sm",
-  color: c,
-  theme: o,
-  collapsible: r,
-  expanded: e,
-  icon: i,
-  iconVariant: p,
-  avatar: a,
-  avatarGroup: I,
-  title: u,
-  description: l,
+  size: o = "md",
+  color: i,
+  theme: e,
+  collapsible: m,
+  expanded: r,
+  icon: p,
+  iconTheme: c,
+  iconBadge: s,
+  avatar: I,
+  avatarGroup: l,
+  title: a,
+  description: u,
   badge: M,
-  alertBadge: f,
-  linkText: s,
-  linkIcon: b,
-  label: d,
-  ...h
-}) => /* @__PURE__ */ k(
-  L,
-  {
-    as: t,
-    size: n,
-    theme: o,
-    badge: M,
-    linkText: s,
-    linkIcon: r && e ? "chevron-up" : r ? "chevron-down" : b,
-    color: c,
-    expanded: e,
-    ...h,
-    children: [
-      /* @__PURE__ */ m(
-        v,
-        {
-          theme: o,
-          badge: f,
-          size: n,
-          icon: i,
-          iconVariant: p,
-          avatar: a,
-          avatarGroup: I
-        }
-      ),
-      /* @__PURE__ */ m(j, { title: u, description: l, size: n, children: d })
-    ]
-  }
-);
+  linkText: d,
+  linkIcon: f,
+  label: h,
+  ...x
+}) => {
+  const b = m && r ? "chevron-up" : m ? "chevron-down" : f, j = g[o];
+  return /* @__PURE__ */ k(
+    v,
+    {
+      as: t,
+      size: o,
+      theme: e,
+      badge: M,
+      linkText: d,
+      linkIcon: b,
+      color: i,
+      expanded: r,
+      ...x,
+      children: [
+        /* @__PURE__ */ n(
+          S,
+          {
+            size: j,
+            icon: p,
+            iconTheme: c,
+            iconBadge: s,
+            avatar: I,
+            avatarGroup: l
+          }
+        ),
+        /* @__PURE__ */ n(L, { title: a, description: u, size: o, children: h })
+      ]
+    }
+  );
+};
 export {
-  y as MenuItem
+  G as MenuItem
 };

package/dist/components/Menu/MenuItemBase.js

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import { c as j } from "../../index-L8X2o7IH.js";
 import { Icon as B } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
@@ -7,62 +7,62 @@ import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import { Badge as k } from "../Badge/Badge.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemBase.css';const z = "_item_1imot_1", E = "_content_1imot_41", M = "_action_1imot_49", b = "_linkText_1imot_56", g = "_linkIcon_1imot_61", t = {
+import '../../assets/MenuItemBase.css';const z = "_item_18cbi_1", E = "_content_18cbi_45", M = "_action_18cbi_53", b = "_linkText_18cbi_60", q = "_linkIcon_18cbi_65", e = {
   item: z,
   content: E,
   action: M,
   linkText: b,
-  linkIcon: g
-}, Q = ({
+  linkIcon: q
+}, R = ({
   as: l,
-  color: d,
-  theme: _,
-  size: p,
-  className: x,
-  href: f,
+  color: _,
+  theme: p,
+  size: d,
+  className: f,
+  href: x,
   onClick: a,
-  onKeyPress: e,
+  onKeyPress: n,
   tabIndex: h = 0,
   hidden: I,
   disabled: m = !1,
   active: N = !1,
   selected: u = !1,
   expanded: v = !1,
-  linkIcon: n,
-  linkText: c,
-  badge: s,
+  linkIcon: i,
+  linkText: s,
+  badge: t,
   children: T
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ c(
   l || "a",
   {
     role: "menuitem",
     tabIndex: m ? "-1" : h ?? 0,
-    className: j(t.item, x),
-    "data-size": p,
-    "data-color": d,
-    "data-theme": _,
+    className: j(e.item, f),
+    "data-size": d,
+    "data-color": _,
+    "data-theme": p,
     "data-active": N,
     "aria-hidden": I,
     "aria-expanded": v,
     "aria-disabled": m,
     "aria-selected": u,
-    href: f,
+    href: x,
     onKeyPress: (r) => {
-      r.key === "Enter" && (a == null || a()), e == null || e(r);
+      r.key === "Enter" && (a == null || a()), n == null || n(r);
     },
     onClick: a,
     children: [
-      /* @__PURE__ */ o("div", { className: t.content, children: [
+      /* @__PURE__ */ c("div", { className: e.content, children: [
         T,
-        s && /* @__PURE__ */ i(k, { ...s })
+        t && /* @__PURE__ */ o(k, { ...t, theme: (t == null ? void 0 : t.theme) || "surface" })
       ] }),
-      n && /* @__PURE__ */ o("div", { className: t.action, children: [
-        c && /* @__PURE__ */ i("span", { className: t.linkText, children: c }),
-        n && /* @__PURE__ */ i(B, { name: n, className: t.linkIcon })
+      i && /* @__PURE__ */ c("div", { className: e.action, children: [
+        s && /* @__PURE__ */ o("span", { className: e.linkText, children: s }),
+        i && /* @__PURE__ */ o(B, { name: i, className: e.linkIcon })
       ] })
     ]
   }
 );
 export {
-  Q as MenuItemBase
+  R as MenuItemBase
 };

package/dist/components/Menu/MenuItemIcon.js

@@ -0,0 +1,27 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { IconOrAvatar as f } from "../Icon/IconOrAvatar.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { Badge as _ } from "../Badge/Badge.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuItemIcon.css';const a = "_icon_14zf3_1", l = "_badge_14zf3_8", e = {
+  icon: a,
+  badge: l
+}, y = ({
+  size: i,
+  icon: o,
+  iconTheme: c,
+  iconBadge: t,
+  avatar: r,
+  avatarGroup: m,
+  children: s
+}) => !o && !r && !m && !s ? null : /* @__PURE__ */ p("span", { className: e.icon, children: [
+  s || /* @__PURE__ */ n(f, { size: i, icon: o, iconTheme: c, avatar: r, avatarGroup: m }),
+  t && /* @__PURE__ */ n(_, { ...t, className: e.badge })
+] });
+export {
+  y as MenuItemIcon
+};