@altinn/altinn-components 0.27.0 → 0.28.0

package/dist/components/List/ListItem.js

@@ -1,72 +1,69 @@
-import { jsxs as q, jsx as w } from "react/jsx-runtime";
-import { ListItemBase as z } from "./ListItemBase.js";
-import { ListItemHeader as A } from "./ListItemHeader.js";
-const F = ({
-  className: p,
-  variant: c = "solid",
-  color: r,
-  theme: m = "default",
-  shadow: e = "xs",
-  loading: o,
-  collapsible: n,
-  expanded: s,
-  size: u = "sm",
-  icon: L,
-  avatar: l,
-  avatarGroup: I,
-  title: f,
-  titleAs: j,
-  description: x,
-  badge: a,
-  linkIcon: h = !1,
-  label: t,
+import { jsxs as w, jsx as B } from "react/jsx-runtime";
+import { ListItemBase as H } from "./ListItemBase.js";
+import { ListItemHeader as b } from "./ListItemHeader.js";
+import '../../assets/ListItem.css';const k = "_item_1nwey_3", q = {
+  item: k
+}, F = ({
+  className: A,
+  color: e,
+  variant: r = "default",
+  shadow: n = "xs",
+  border: c = "none",
+  loading: m,
+  collapsible: f,
+  expanded: t,
+  size: o,
+  icon: l,
+  label: s,
+  title: a,
+  description: p,
+  badge: u,
+  linkIcon: L = !1,
   select: y,
-  selected: B,
-  controls: H,
-  children: b,
+  selected: I,
+  controls: _,
+  children: h,
   interactive: i,
-  ...d
+  id: j,
+  ...x
 }) => {
-  const k = typeof t == "function" ? t() : t;
-  return /* @__PURE__ */ q(
-    z,
+  const N = typeof s == "function" ? s() : s;
+  return /* @__PURE__ */ w(
+    H,
     {
-      variant: c,
-      color: r,
-      theme: m,
-      shadow: e,
-      selected: B,
-      expanded: s,
-      title: f,
-      loading: o,
+      className: q.item,
+      size: o,
+      color: e,
+      variant: r,
+      shadow: n,
+      border: c,
+      selected: I,
+      expanded: t,
+      loading: m,
       interactive: i,
+      id: j,
       children: [
-        /* @__PURE__ */ w(
-          A,
+        /* @__PURE__ */ B(
+          b,
           {
-            className: p,
-            color: r,
-            theme: m,
-            loading: o,
-            linkIcon: h,
-            collapsible: n,
-            expanded: s,
+            color: e,
+            loading: m,
+            linkIcon: L,
+            collapsible: f,
+            expanded: t,
             select: y,
-            size: u,
-            title: f,
-            description: x,
-            icon: L,
-            avatar: l,
-            avatarGroup: I,
-            badge: a,
-            controls: H,
-            titleAs: j,
+            title: a,
+            size: o,
+            description: p,
+            icon: l,
+            badge: u,
+            controls: _,
             interactive: i,
-            ...d,
-            children: k
+            ...x,
+            children: N
           }
         ),
-        s ? b : null
+        t ? h : null
       ]
     }
   );

package/dist/components/List/ListItemBase.js

@@ -1,46 +1,38 @@
-import { jsx as S } from "react/jsx-runtime";
-import { c as q } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemBase.css';const H = "_item_2saqu_1", f = "_interactiveSelected_2saqu_83", x = "_interactiveHidden_2saqu_87", h = "_interactive_2saqu_83", t = {
-  item: H,
-  interactiveSelected: f,
-  interactiveHidden: x,
-  interactive: h
-}, j = ({
-  as: i,
-  interactive: n = !0,
-  size: c,
-  variant: s,
-  color: r,
-  theme: e,
-  shadow: o,
-  hidden: a = !1,
-  selected: d,
-  className: v,
+import { jsx as p } from "react/jsx-runtime";
+import { c as f } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemBase.css';const x = "_base_1xkee_1", u = {
+  base: x
+}, C = ({
+  as: a,
+  interactive: e = !0,
+  size: t,
+  color: s,
+  variant: o = "default",
+  shadow: n = "none",
+  border: r = "none",
+  hidden: d = !1,
+  selected: c,
+  className: i,
   onMouseEnter: m,
-  children: _
-}) => {
-  const l = i || "li", p = e === "transparent" ? "none" : o, u = q(
-    t.item,
-    v,
-    n && t.interactive,
-    d && t.interactiveSelected,
-    a && t.interactiveHidden
-  );
-  return /* @__PURE__ */ S(
-    l,
-    {
-      className: u,
-      "data-variant": s,
-      "data-color": r,
-      "data-theme": e,
-      "data-size": c,
-      "data-shadow": p,
-      "aria-hidden": a,
-      onMouseEnter: m,
-      children: _
-    }
-  );
-};
+  id: l,
+  children: b
+}) => /* @__PURE__ */ p(
+  a || "li",
+  {
+    className: f(u.base, i),
+    "data-interactive": e,
+    "data-selected": c,
+    "data-variant": o,
+    "data-color": s,
+    "data-border": r,
+    "data-shadow": n,
+    "data-size": t,
+    "aria-hidden": d,
+    onMouseEnter: m,
+    id: l,
+    children: b
+  }
+);
 export {
-  j as ListItemBase
+  C as ListItemBase
 };

package/dist/components/List/ListItemHeader.js

@@ -1,121 +1,94 @@
-import { jsx as e, jsxs as n, Fragment as H } from "react/jsx-runtime";
-import { c as f } from "../../index-L8X2o7IH.js";
-import { useId as M, isValidElement as R } from "react";
-import { Icon as U } from "../Icon/Icon.js";
-import { Badge as V } from "../Badge/Badge.js";
+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 "../RootProvider/RootProvider.js";
-import { ListItemLink as q } from "./ListItemLink.js";
-import { ListItemLabel as A } from "./ListItemLabel.js";
-import { ListItemIcon as G } from "./ListItemIcon.js";
-import { ListItemControls as J } from "./ListItemControls.js";
-import { ListItemSelect as K } from "./ListItemSelect.js";
-import "../Search/AutocompleteBase.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 { ListItemSelect as A } from "./ListItemSelect.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as O } from "../../ChevronUp-H8Nuww4h.js";
-import { S as P } from "../../ChevronDown-CRAwzuD3.js";
-import { S as Q } from "../../ChevronRight-DUaHaWi-.js";
-import '../../assets/ListItemHeader.css';const W = "_wrapper_e1z23_1", X = "_link_e1z23_5", Y = "_linkTitle_e1z23_10", Z = "_header_e1z23_16", $ = "_content_e1z23_54", t = {
-  wrapper: W,
-  link: X,
-  linkTitle: Y,
-  header: Z,
-  content: $
-}, Ie = ({
-  as: _,
-  interactive: m = !0,
-  color: I,
-  theme: v,
+import { S as G, a as J } from "../../ChevronUp-C09jxB5F.js";
+import { S as K } from "../../ChevronRight-DUaHaWi-.js";
+import '../../assets/ListItemHeader.css';const M = "_header_hyqf4_1", O = "_label_hyqf4_27", o = {
+  header: M,
+  label: O
+}, ie = ({
+  as: d,
+  interactive: s = !0,
+  color: f,
   loading: r,
-  disabled: k,
-  collapsible: z,
+  disabled: h,
+  collapsible: I,
   linkIcon: L,
-  expanded: S,
-  select: l,
-  href: u,
-  onClick: x,
-  onKeyPress: N,
-  tabIndex: w,
-  size: s = "sm",
-  title: a,
-  description: b,
-  icon: y,
-  avatar: C,
-  active: c,
-  avatarGroup: T,
-  badge: i,
-  controls: p,
-  className: j,
-  children: B,
-  ariaLabel: E,
-  titleAs: g
+  expanded: u,
+  select: m,
+  href: v,
+  onClick: b,
+  onKeyPress: y,
+  tabIndex: S,
+  size: i,
+  title: _,
+  description: x,
+  icon: C,
+  active: a,
+  badge: t,
+  controls: l,
+  className: N,
+  children: j,
+  ariaLabel: q
 }) => {
-  const D = {
-    xs: "sm",
-    sm: "md",
-    md: "lg",
-    lg: "lg",
-    xl: "xl"
-  }, d = z ? S ? O : P : L ? Q : void 0, o = D[s], F = () => i && !r && typeof i == "object" && "label" in i ? /* @__PURE__ */ e(V, { ...i }) : R(i) ? i : null, h = M();
-  return /* @__PURE__ */ e("div", { className: t.wrapper, children: /* @__PURE__ */ n(
+  const n = I ? u ? G : J : L ? 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(
     "header",
     {
-      className: f(t.header, j),
-      "data-color": I,
-      "data-theme": v,
-      "data-interactive": m,
-      "data-size": s,
-      "data-has-active-child": c,
+      className: k(o.header, N),
+      "data-color": f,
+      "data-interactive": s,
+      "data-size": i,
+      "data-has-active-child": a,
       children: [
         /* @__PURE__ */ e(
-          q,
+          H,
           {
-            interactive: m,
-            className: f(t.link),
-            as: _,
-            href: u,
-            onClick: x,
-            onKeyPress: N,
-            tabIndex: w,
+            interactive: s,
+            as: d,
+            href: v,
+            onClick: b,
+            onKeyPress: y,
+            tabIndex: S,
             loading: r,
-            disabled: k || r,
-            active: c,
-            describedby: h,
-            children: /* @__PURE__ */ e("span", { className: t.linkTitle, children: E || a })
+            disabled: h || r,
+            active: a,
+            describedby: c,
+            children: /* @__PURE__ */ e("span", { children: q })
           }
         ),
-        /* @__PURE__ */ n("div", { className: t.content, "data-size": s, children: [
-          l && /* @__PURE__ */ e(K, { ...l, className: t.select, size: o }),
-          /* @__PURE__ */ e(
-            G,
-            {
-              loading: r,
-              size: o,
-              icon: y,
-              avatar: C,
-              avatarGroup: T
-            }
-          ),
-          /* @__PURE__ */ e(
-            A,
-            {
-              size: s,
-              loading: r,
-              title: a,
-              description: b,
-              id: h,
-              titleAs: g,
-              children: B
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(J, { className: t.controls, children: p && !r ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: p }) : /* @__PURE__ */ n(H, { children: [
-          F(),
-          d && /* @__PURE__ */ e(U, { svgElement: d, size: o })
+        m && /* @__PURE__ */ e(A, { ...m, className: o.select }),
+        /* @__PURE__ */ e(U, { loading: r, icon: C }),
+        /* @__PURE__ */ e(
+          R,
+          {
+            size: i,
+            loading: r,
+            title: _,
+            description: x,
+            id: c,
+            className: o.label,
+            children: j
+          }
+        ),
+        /* @__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" } })
         ] }) })
       ]
     }
-  ) });
+  );
 };
 export {
-  Ie as ListItemHeader
+  ie as ListItemHeader
 };

package/dist/components/List/ListItemIcon.js

@@ -1,15 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Icon as c } from "../Icon/Icon.js";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
+import { Icon as s, isIconProps as l } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
-import { IconOrAvatar as l } from "../Icon/IconOrAvatar.js";
-import "react";
+import { isAvatarProps as c, Avatar as f } from "../Avatar/Avatar.js";
+import { isAvatarGroupProps as v, AvatarGroup as _ } from "../Avatar/AvatarGroup.js";
+import { Badge as u } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-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 }) });
+import { S as N } from "../../XMark-Bv1I87Ev.js";
+import '../../assets/ListItemIcon.css';const d = "_wrapper_1q66b_1", b = "_icon_1q66b_8", g = "_avatar_1q66b_16", G = "_avatarGroup_1q66b_20", t = {
+  wrapper: d,
+  icon: b,
+  avatar: g,
+  avatarGroup: G
+};
+function w(a) {
+  return typeof a == "string" || typeof a == "number" || typeof a == "boolean" || a === null || n(a);
+}
+const z = ({ loading: a, size: m, icon: r, theme: e, badge: p }) => r ? a ? /* @__PURE__ */ o(s, { className: t.wrapper, svgElement: N, loading: !0 }) : /* @__PURE__ */ i("div", { className: t.wrapper, "data-size": m, children: [
+  c(r) && /* @__PURE__ */ o(f, { ...r, className: t.avatar }) || v(r) && /* @__PURE__ */ o(_, { ...r, className: t.avatarGroup }) || l(r) && /* @__PURE__ */ o(s, { ...r, theme: r.theme || e, className: t.icon }) || w(r) && r || /* @__PURE__ */ o(s, { theme: e, svgElement: r, className: t.icon }),
+  p && /* @__PURE__ */ o(u, { ...p, className: t.badge })
+] }) : null;
 export {
-  j as ListItemIcon
+  z as ListItemIcon
 };

package/dist/components/List/ListItemLabel.js

@@ -1,26 +1,53 @@
-import { jsx as t, jsxs as p, Fragment as _ } from "react/jsx-runtime";
-import { Skeleton as n } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const h = "_label_ktd6x_3", b = "_title_ktd6x_36", x = "_description_ktd6x_57", l = {
-  label: h,
-  title: b,
-  description: x
-}, N = ({
-  loading: s = !1,
-  size: e = "sm",
-  title: c,
-  titleAs: o = "h2",
-  weight: r = "bold",
-  description: a,
-  children: i,
-  id: d
+import { jsx as s, jsxs as u, Fragment as b } from "react/jsx-runtime";
+import { c as d } from "../../index-L8X2o7IH.js";
+import { isValidElement as h } from "react";
+import "../RootProvider/RootProvider.js";
+import { Heading as c } from "../Typography/Heading.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/ListItemLabel.css';const P = "_label_1aex5_1", x = {
+  label: P
+}, a = (r) => typeof r == "object" && r !== null && "children" in r;
+function m(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || h(r);
+}
+const y = (r) => {
+  const t = {
+    as: "h2",
+    size: "sm"
+    //    leading: "tight",
+  };
+  return a(r) ? { ...t, ...r } : m(r) ? {
+    ...t,
+    children: r
+  } : null;
+}, g = (r) => {
+  const t = {
+    as: "h3",
+    size: "xs",
+    weight: "normal",
+    variant: "subtle"
+    //    leading: "tight",
+  };
+  return a(r) ? { ...t, ...r } : m(r) ? {
+    ...t,
+    children: r
+  } : null;
+}, D = ({
+  loading: r = !1,
+  size: t,
+  title: n,
+  description: o,
+  children: l,
+  id: p,
+  className: f
 }) => {
-  const m = o;
-  return /* @__PURE__ */ t("span", { className: l.label, "data-size": e, id: d, children: i || /* @__PURE__ */ p(_, { children: [
-    /* @__PURE__ */ t(n, { loading: s, children: /* @__PURE__ */ t(m, { className: l.title, "data-size": e, "data-weight": r, children: c }) }),
-    " ",
-    a && /* @__PURE__ */ t(n, { loading: s, children: /* @__PURE__ */ t("p", { className: l.description, "data-size": e, children: a }) })
+  const e = n && y(n), i = o && g(o);
+  return /* @__PURE__ */ s("span", { className: d(x.label, f), id: p, "data-size": t, children: l || /* @__PURE__ */ u(b, { children: [
+    e && /* @__PURE__ */ s(c, { ...e, loading: r, children: e.children }),
+    i && /* @__PURE__ */ s(c, { ...i, loading: r })
   ] }) });
 };
 export {
-  N as ListItemLabel
+  D as ListItemLabel
 };

package/dist/components/List/ListItemLink.js

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

package/dist/components/List/ListItemSelect.js

@@ -1,18 +1,18 @@
-import { jsxs as c, 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 as r } from "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { CheckboxIcon as r } from "../Icon/CheckboxIcon.js";
-import '../../assets/ListItemSelect.css';const a = "_label_1nykd_1", m = "_input_1nykd_15", p = "_icon_1nykd_19", t = {
-  label: a,
-  input: m,
-  icon: p
-}, k = ({ size: n, checked: o = !1, onChange: s, className: i }) => /* @__PURE__ */ c("label", { className: l(t.label, i), "data-size": n, children: [
-  /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: s, className: t.input }),
-  /* @__PURE__ */ e(r, { hover: !0, checked: o, className: t.icon })
+import { Label as l } from "../Forms/Label.js";
+import { Input as n } from "../Forms/Input.js";
+import '../../assets/ListItemSelect.css';const i = "_select_kfgnl_1", m = "_checkbox_kfgnl_19", t = {
+  select: i,
+  checkbox: m
+}, y = ({ className: o, ...c }) => /* @__PURE__ */ s(l, { className: r(t.select, o), children: [
+  /* @__PURE__ */ e(n, { type: "checkbox", ...c, className: t.checkbox }),
+  /* @__PURE__ */ e("span", { style: { position: "absolute", opacity: 0, pointerEvents: "none" }, children: "Select" })
 ] });
 export {
-  k as ListItemSelect
+  y as ListItemSelect
 };

package/dist/components/List/index.js

@@ -5,13 +5,11 @@ import { ListItemLabel as f } from "./ListItemLabel.js";
 import { ListItemIcon as x } from "./ListItemIcon.js";
 import { ListItemControls as a } from "./ListItemControls.js";
 import { ListItemSelect as n } from "./ListItemSelect.js";
-import { ListItem as B } from "./ListItem.js";
-import { ListBase as d } from "./ListBase.js";
-import { List as C } from "./List.js";
+import { ListItem as b } from "./ListItem.js";
+import { List as k } from "./List.js";
 export {
-  C as List,
-  d as ListBase,
-  B as ListItem,
+  k as List,
+  b as ListItem,
   o as ListItemBase,
   a as ListItemControls,
   L as ListItemHeader,