@altinn/altinn-components 0.15.5 → 0.17.0

package/dist/components/Header/HeaderLogo.js

@@ -1,21 +1,20 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { c as n } from "../../index-L8X2o7IH.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { c as i } from "../../index-L8X2o7IH.js";
 import { ButtonBase as e } from "../Button/ButtonBase.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { DigdirLogomark as c } from "./DigdirLogomark.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import "../Icon/SvgIcon.js";
 import '../../assets/HeaderLogo.css';const a = "_logo_y48xn_1", x = "_symbol_y48xn_8", y = "_riksSymbol_y48xn_14", _ = "_text_y48xn_20", o = {
   logo: a,
   symbol: x,
   riksSymbol: y,
   text: _
-}, j = ({ className: s, as: m = "a", title: r = "Altinn", href: l = "/" }) => /* @__PURE__ */ i(e, { as: m, className: n(o.logo, s), href: l, children: [
+}, h = ({ className: s, as: m = "a", title: r = "Altinn", href: l = "/" }) => /* @__PURE__ */ n(e, { as: m, className: i(o.logo, s), href: l, children: [
   /* @__PURE__ */ t(c, { className: o.symbol }),
   /* @__PURE__ */ t("span", { className: o.text, children: r })
 ] });
 export {
-  j as HeaderLogo
+  h as HeaderLogo
 };

package/dist/components/Icon/Icon.js

@@ -1,19 +1,13 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-import { SvgIcon as h } from "./SvgIcon.js";
-import { iconsMap as e } from "./iconsMap.js";
+import { jsx as o } from "react/jsx-runtime";
+import { c as i } from "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { Skeleton as u } from "../Skeleton/Skeleton.js";
+import { Skeleton as p } from "../Skeleton/Skeleton.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Icon.css';const v = "_icon_3p8he_1", s = {
-  icon: v
-}, z = ({ loading: p, name: o, size: m, color: l, theme: f, variant: d = "outline", className: t }) => {
-  var n, c;
-  const i = ((n = e[o]) == null ? void 0 : n[d]) ?? ((c = e[o]) == null ? void 0 : c.outline);
-  return i ? /* @__PURE__ */ r(u, { loading: p, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": m, "data-color": l, "data-theme": f, className: a([s.icon], t), children: /* @__PURE__ */ r(h, { svgIconComponent: i, "aria-label": o }) }) }) : /* @__PURE__ */ r("span", { className: a([s.icon], t), "aria-label": o });
-};
+import '../../assets/Icon.css';const l = "_icon_3p8he_1", n = {
+  icon: l
+}, j = ({ loading: a, altText: c, svgElement: r, size: e, color: s, theme: m, className: t }) => r ? /* @__PURE__ */ o(p, { loading: a, variant: "circle", children: /* @__PURE__ */ o("span", { "data-size": e, "data-color": s, "data-theme": m, className: i([n.icon], t), children: /* @__PURE__ */ o(r, { "aria-hidden": "true", "alt-label": c }) }) }) : /* @__PURE__ */ o("span", { className: i([n.icon], t) });
 export {
-  z as Icon
+  j as Icon
 };

package/dist/components/Icon/IconOrAvatar.js

@@ -1,27 +1,25 @@
 import { jsx as o } from "react/jsx-runtime";
-import { isValidElement as p } from "react";
-import { Icon as s } from "./Icon.js";
-import "./SvgIcon.js";
+import { isValidElement as n } from "react";
+import { Icon as i } from "./Icon.js";
 import "../../index-L8X2o7IH.js";
-import { Avatar as n } from "../Avatar/Avatar.js";
-import { AvatarGroup as u } from "../Avatar/AvatarGroup.js";
+import { Avatar as s } from "../Avatar/Avatar.js";
+import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const I = ({ size: i, icon: r, iconTheme: f, avatar: t, avatarGroup: m }) => {
-  if (!r && !t && !m)
+function u(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || n(r);
+}
+const l = (r) => r.svgElement !== void 0, x = ({ size: r, icon: t, iconTheme: f, avatar: e, avatarGroup: m }) => {
+  if (!t && !e && !m)
     return null;
-  if (r) {
-    if (p(r))
-      return r;
-    const e = typeof r == "string" ? { name: r } : r;
-    return /* @__PURE__ */ o(s, { ...e, theme: (e == null ? void 0 : e.theme) || f, size: i });
-  }
   if (t)
-    return /* @__PURE__ */ o(n, { ...t, size: t.size || i });
+    return l(t) ? /* @__PURE__ */ o(i, { theme: t.theme || f, size: t.size || r, ...t }) : u(t) ? t : /* @__PURE__ */ o(i, { svgElement: t, theme: f, size: r });
+  if (e)
+    return /* @__PURE__ */ o(s, { ...e, size: e.size || r });
   if (m)
-    return /* @__PURE__ */ o(u, { ...m, size: m.size || i });
+    return /* @__PURE__ */ o(p, { ...m, size: m.size || r });
 };
 export {
-  I as IconOrAvatar
+  x as IconOrAvatar
 };

package/dist/components/Icon/index.js

@@ -1,16 +1,12 @@
 import { Icon as e } from "./Icon.js";
-import { SvgIcon as p } from "./SvgIcon.js";
-import { CheckboxIcon as x } from "./CheckboxIcon.js";
-import { RadioIcon as m } from "./RadioIcon.js";
-import { ProgressIcon as I } from "./ProgressIcon.js";
-import { iconsMap as s } from "./iconsMap.js";
-import { IconOrAvatar as i } from "./IconOrAvatar.js";
+import { CheckboxIcon as t } from "./CheckboxIcon.js";
+import { RadioIcon as f } from "./RadioIcon.js";
+import { ProgressIcon as n } from "./ProgressIcon.js";
+import { IconOrAvatar as I } from "./IconOrAvatar.js";
 export {
-  x as CheckboxIcon,
+  t as CheckboxIcon,
   e as Icon,
-  i as IconOrAvatar,
-  I as ProgressIcon,
-  m as RadioIcon,
-  p as SvgIcon,
-  s as iconsMap
+  I as IconOrAvatar,
+  n as ProgressIcon,
+  f as RadioIcon
 };

package/dist/components/Layout/Layout.js

@@ -7,26 +7,25 @@ import { LayoutSidebar as x } from "./LayoutSidebar.js";
 import { Footer as j } from "../Footer/Footer.js";
 import { Header as B } from "../Header/Header.js";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import { useRootContext as C } from "../RootProvider/RootProvider.js";
 import { Menu as F } from "../Menu/Menu.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const G = ({ color: n, theme: c = "subtle", header: u, footer: r, sidebar: o, content: t = {}, children: f }) => {
-  const { currentId: l } = C();
-  return /* @__PURE__ */ p(y, { color: n, theme: c, currentId: l, children: [
+const E = ({ color: n, theme: c = "subtle", header: u, footer: l, sidebar: o, content: t = {}, children: f }) => {
+  const { currentId: r } = C();
+  return /* @__PURE__ */ p(y, { color: n, theme: c, currentId: r, children: [
     u && /* @__PURE__ */ m(B, { ...u }),
-    /* @__PURE__ */ p(h, { currentId: l, children: [
+    /* @__PURE__ */ p(h, { currentId: r, children: [
       o && /* @__PURE__ */ p(x, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
         (o == null ? void 0 : o.menu) && /* @__PURE__ */ m(F, { ...o == null ? void 0 : o.menu }),
         o == null ? void 0 : o.children
       ] }),
       /* @__PURE__ */ m(L, { color: t == null ? void 0 : t.color, children: f })
     ] }),
-    r && /* @__PURE__ */ m(j, { ...r })
+    l && /* @__PURE__ */ m(j, { ...l })
   ] });
 };
 export {
-  G as Layout
+  E as Layout
 };

package/dist/components/LayoutAction/ActionHeader.js

@@ -1,27 +1,38 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
-import { IconButton as d } from "../Button/IconButton.js";
+import { IconButton as c } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as c } from "../Typography/Heading.js";
+import { Heading as l } from "../Typography/Heading.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ActionHeader.css';const l = "_header_1tian_1", p = "_title_1tian_34", h = "_dismiss_1tian_40", t = {
-  header: l,
-  title: p,
-  dismiss: h
-}, v = ({
+import { S as p } from "../../XMark-Bv1I87Ev.js";
+import '../../assets/ActionHeader.css';const h = "_header_1tian_1", _ = "_title_1tian_34", f = "_dismiss_1tian_40", t = {
+  header: h,
+  title: _,
+  dismiss: f
+}, H = ({
   color: i,
   theme: e,
   hidden: r = !1,
   title: a,
   dismissable: o = !0,
-  onDismiss: m
-}) => /* @__PURE__ */ n("header", { className: t.header, "aria-hidden": r, "data-color": i, "data-theme": e, children: [
-  /* @__PURE__ */ s(c, { size: "sm", className: t.title, children: a }),
-  o && /* @__PURE__ */ s(d, { icon: "x-mark", color: i, variant: "solid", onClick: m, className: t.dismiss })
+  dismissIconAltText: m = "Close",
+  onDismiss: n
+}) => /* @__PURE__ */ d("header", { className: t.header, "aria-hidden": r, "data-color": i, "data-theme": e, children: [
+  /* @__PURE__ */ s(l, { size: "sm", className: t.title, children: a }),
+  o && /* @__PURE__ */ s(
+    c,
+    {
+      icon: p,
+      color: i,
+      variant: "solid",
+      onClick: n,
+      className: t.dismiss,
+      iconAltText: m
+    }
+  )
 ] });
 export {
-  v as ActionHeader
+  H as ActionHeader
 };

package/dist/components/LayoutAction/LayoutAction.js

@@ -1,6 +1,5 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
@@ -9,7 +8,7 @@ import { ActionHeader as f } from "./ActionHeader.js";
 import { ActionFooter as u } from "./ActionFooter.js";
 import "../Snackbar/useSnackbar.js";
 import { PageMenu as x } from "../Page/PageMenu.js";
-const M = ({
+const H = ({
   color: r = "accent",
   theme: t = "base",
   hidden: i,
@@ -34,5 +33,5 @@ const M = ({
   /* @__PURE__ */ o(u, { hidden: i, children: m && /* @__PURE__ */ o(x, { ...m, theme: t, color: r }) })
 ] });
 export {
-  M as LayoutAction
+  H as LayoutAction
 };

package/dist/components/List/List.js

@@ -1,20 +1,19 @@
 import { jsx as f } from "react/jsx-runtime";
 import { createElement as l } from "react";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as m } from "./ListItem.js";
-import { ListBase as a } from "./ListBase.js";
+import { ListItem as a } from "./ListItem.js";
+import { ListBase as h } from "./ListBase.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const k = ({ defaultItemSize: o, defaultItemTheme: p, defaultItemColor: s, items: t = [], ...c }) => /* @__PURE__ */ f(a, { ...c, children: t.map((r, n) => /* @__PURE__ */ l(
-  m,
+const k = ({ defaultItemSize: o, defaultItemTheme: p, defaultItemColor: s, items: c = [], ...n }) => /* @__PURE__ */ f(h, { ...n, children: c.map((r, t) => /* @__PURE__ */ l(
+  a,
   {
     ...r,
     size: (r == null ? void 0 : r.size) || o,
     color: (r == null ? void 0 : r.color) || s,
     theme: (r == null ? void 0 : r.theme) || p,
-    key: "item" + n
+    key: `item-${r.id ?? t}`
   }
 )) });
 export {

package/dist/components/List/ListBase.js

@@ -1,12 +1,11 @@
 import { jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as m } from "../Page/Flex.js";
-const a = ({ spacing: o = 2, children: r, ...t }) => /* @__PURE__ */ i(m, { direction: "col", spacing: o, ...t, children: r });
+const a = ({ spacing: o = 2, children: r, ...t }) => /* @__PURE__ */ i(m, { direction: "col", spacing: o, as: "ul", ...t, children: r });
 export {
   a as ListBase
 };

package/dist/components/List/ListItem.js

@@ -1,110 +1,113 @@
-import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import { ListItemBase as p } from "./ListItemBase.js";
-import { ListItemHeader as b } from "./ListItemHeader.js";
-const J = ({
-  className: I,
-  variant: L = "solid",
+import { jsx as r, jsxs as R } from "react/jsx-runtime";
+import { s as x, L as c } from "../../ListItemBase-BVx5MDhO.js";
+import { ListItemHeader as B } from "./ListItemHeader.js";
+import { S as U } from "../../ChevronRight-DUaHaWi-.js";
+import { S as k } from "../../ChevronUp-H8Nuww4h.js";
+import { S as l } from "../../ChevronDown-CRAwzuD3.js";
+const K = ({
+  className: o,
+  variant: v = "solid",
   color: f,
-  theme: u = "default",
-  shadow: k = "xs",
-  loading: n,
-  collapsible: q,
-  expanded: i,
-  size: h = "sm",
-  icon: v,
-  avatar: j,
-  avatarGroup: o,
-  title: r,
-  description: s,
-  badge: x,
-  linkIcon: w = "chevron-right",
-  label: t,
+  theme: p = "default",
+  shadow: S = "xs",
+  loading: e,
+  collapsible: D,
+  expanded: m,
+  size: t = "sm",
+  icon: u,
+  avatar: L,
+  avatarGroup: I,
+  title: i,
+  description: C,
+  badge: j,
+  linkIcon: H = !1,
+  label: h,
   select: y,
-  controls: c,
-  children: A,
-  ...m
+  controls: n,
+  children: N,
+  ...s
 }) => {
-  const B = q ? i ? "chevron-up" : "chevron-down" : w, H = typeof t == "function" ? t() : t;
-  return i ? /* @__PURE__ */ C(
-    p,
+  const a = D ? m ? k : l : void 0, d = typeof h == "function" ? h() : h;
+  return m ? /* @__PURE__ */ r("li", { className: x.item, children: /* @__PURE__ */ R(
+    c,
     {
       interactive: !1,
-      variant: L,
+      variant: v,
       color: f,
-      theme: u,
-      shadow: k,
-      expanded: i,
-      title: r,
-      loading: n,
+      theme: p,
+      shadow: S,
+      expanded: m,
+      title: i,
+      loading: e,
       children: [
-        /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ r(
+          c,
           {
             theme: "transparent",
-            interactive: !c,
-            size: h,
+            interactive: !n,
+            size: t,
             color: f,
-            loading: n,
-            title: r,
-            ...m,
-            children: /* @__PURE__ */ e(
-              b,
+            loading: e,
+            title: i,
+            ...s,
+            children: /* @__PURE__ */ r(
+              B,
               {
-                className: I,
-                loading: n,
+                className: o,
+                loading: e,
                 select: y,
-                size: h,
-                title: r,
-                description: s,
-                icon: v,
-                avatar: j,
-                avatarGroup: o,
-                badge: x,
-                linkIcon: B,
-                controls: c,
-                ...m,
-                children: H
+                size: t,
+                title: i,
+                description: C,
+                icon: u,
+                avatar: L,
+                avatarGroup: I,
+                badge: j,
+                chevron: a,
+                controls: n,
+                ...s,
+                children: d
               }
             )
           }
         ),
-        A
+        N
       ]
     }
-  ) : /* @__PURE__ */ e(
-    p,
+  ) }) : /* @__PURE__ */ r("li", { className: x.item, children: /* @__PURE__ */ r(
+    c,
     {
-      interactive: !c,
-      variant: L,
+      interactive: !n,
+      variant: v,
       color: f,
-      theme: u,
-      shadow: k,
-      expanded: i,
-      loading: n,
-      title: r,
-      ...m,
-      children: /* @__PURE__ */ e(
-        b,
+      theme: p,
+      shadow: S,
+      expanded: m,
+      loading: e,
+      title: i,
+      ...s,
+      children: /* @__PURE__ */ r(
+        B,
         {
-          className: I,
-          loading: n,
+          className: o,
+          loading: e,
           select: y,
-          size: h,
-          title: r,
-          description: s,
-          icon: v,
-          avatar: j,
-          avatarGroup: o,
-          badge: x,
-          linkIcon: B,
-          controls: c,
-          ...m,
-          children: H
+          size: t,
+          title: i,
+          description: C,
+          icon: u,
+          avatar: L,
+          avatarGroup: I,
+          badge: j,
+          chevron: a ?? (H ? U : void 0),
+          controls: n,
+          ...s,
+          children: d
         }
       )
     }
-  );
+  ) });
 };
 export {
-  J as ListItem
+  K as ListItem
 };

package/dist/components/List/ListItemBase.js

@@ -1,80 +1,6 @@
-import { jsx as w } from "react/jsx-runtime";
-import { c as x } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemBase.css';const B = "_item_bqpwx_1", E = "_interactive_bqpwx_53", I = "_interactiveSelected_bqpwx_95", L = "_interactiveHidden_bqpwx_99", t = {
-  item: B,
-  interactive: E,
-  interactiveSelected: I,
-  interactiveHidden: L
-}, F = ({
-  title: S,
-  interactive: f = !0,
-  as: q,
-  href: u,
-  onClick: a,
-  onKeyPress: e,
-  tabIndex: H,
-  size: c,
-  variant: d,
-  color: s,
-  theme: i,
-  shadow: h,
-  loading: n,
-  disabled: r,
-  hidden: o = !1,
-  active: v = !1,
-  selected: m,
-  className: p,
-  children: _
-}) => {
-  const l = i === "transparent" ? "none" : h;
-  if (f) {
-    const z = x(
-      t.item,
-      t.interactive,
-      p,
-      m && t.interactiveSelected,
-      o && t.interactiveHidden
-    );
-    return /* @__PURE__ */ w(
-      q || "button",
-      {
-        "aria-label": S,
-        className: z,
-        "data-variant": d,
-        "data-color": s,
-        "data-theme": i,
-        "data-size": c,
-        "data-shadow": l,
-        "data-active": v,
-        href: u,
-        onKeyPress: (b) => {
-          b.key === "Enter" && (a == null || a()), e == null || e(b);
-        },
-        onClick: a,
-        tabIndex: H,
-        "aria-disabled": r || n,
-        disabled: r || n,
-        children: _
-      }
-    );
-  }
-  const j = x(t.item, p, m && t.interactiveSelected);
-  return /* @__PURE__ */ w(
-    "article",
-    {
-      className: j,
-      "data-variant": d,
-      "data-color": s,
-      "data-theme": i,
-      "data-size": c,
-      "data-shadow": l,
-      "data-active": v,
-      "aria-hidden": o,
-      "aria-disabled": r || n,
-      children: _
-    }
-  );
-};
+import "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import { L as e } from "../../ListItemBase-BVx5MDhO.js";
 export {
-  F as ListItemBase
+  e as ListItemBase
 };