@altinn/altinn-components 0.10.4 → 0.11.0

package/dist/components/List/ListItemBase.js

@@ -1,18 +1,18 @@
 import { jsx as c } from "react/jsx-runtime";
-import '../../assets/ListItemBase.css';const p = "_item_1grve_1", x = {
+import '../../assets/ListItemBase.css';const p = "_item_7qmbp_1", x = {
   item: p
-}, v = ({
+}, _ = ({
   size: e,
   variant: t = "solid",
   color: a = "neutral",
   shadow: s = "xs",
   loading: i,
-  disabled: r,
-  hidden: d = !1,
+  disabled: d,
+  hidden: r = !1,
   active: n = !1,
   selected: l,
-  expanded: o,
-  children: m
+  expanded: m,
+  children: o
 }) => /* @__PURE__ */ c(
   "article",
   {
@@ -22,13 +22,13 @@ import '../../assets/ListItemBase.css';const p = "_item_1grve_1", x = {
     "data-size": e,
     "data-shadow": a === "transparent" ? "none" : s,
     "data-active": n,
-    "aria-hidden": d,
-    "aria-disabled": r || i,
+    "aria-hidden": r,
+    "aria-disabled": d || i,
     "aria-selected": l,
-    "aria-expanded": o,
-    children: m
+    "aria-expanded": m,
+    children: o
   }
 );
 export {
-  v as ListItemBase
+  _ as ListItemBase
 };

package/dist/components/List/ListItemControls.js

@@ -1,19 +1,19 @@
-import { jsx as n, jsxs as e, Fragment as m } from "react/jsx-runtime";
-import { Badge as i } from "../Badge/Badge.js";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
-import { Icon as _ } from "../Icon/Icon.js";
+import { jsx as o, jsxs as e, Fragment as i } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import { Badge as _ } from "../Badge/Badge.js";
+import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
+import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import "../../index-L8X2o7IH.js";
-import '../../assets/ListItemControls.css';const p = "_controls_n31lc_1", x = "_linkText_n31lc_11", k = "_linkIcon_n31lc_16", o = {
-  controls: p,
-  linkText: x,
-  linkIcon: k
-}, h = ({ badge: s, linkText: c, linkIcon: r, menu: t, children: l }) => /* @__PURE__ */ n("div", { className: o.controls, "data-menu": t && !0, children: l || /* @__PURE__ */ e(m, { children: [
-  s && /* @__PURE__ */ n(i, { ...s }),
-  c && /* @__PURE__ */ n("span", { className: o.linkText, children: c }),
-  r && /* @__PURE__ */ n(_, { name: r, className: o.linkIcon }),
-  t && /* @__PURE__ */ n(a, { ...t, className: o.menu })
+import '../../assets/ListItemControls.css';const k = "_controls_n31lc_1", f = "_linkText_n31lc_11", I = "_linkIcon_n31lc_16", n = {
+  controls: k,
+  linkText: f,
+  linkIcon: I
+}, C = ({ className: m, badge: s, linkText: t, linkIcon: c, menu: r, children: l }) => /* @__PURE__ */ o("div", { className: a(n.controls, m), children: l || /* @__PURE__ */ e(i, { children: [
+  s && /* @__PURE__ */ o(_, { ...s }),
+  t && /* @__PURE__ */ o("span", { className: n.linkText, children: t }),
+  c && /* @__PURE__ */ o(x, { name: c, className: n.linkIcon }),
+  r && /* @__PURE__ */ o(p, { ...r, size: "sm", className: n.menu })
 ] }) });
 export {
-  h as ListItemControls
+  C as ListItemControls
 };

package/dist/components/List/ListItemHeader.js

@@ -1,64 +1,64 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { c as y } from "../../index-L8X2o7IH.js";
-import { ListItemControls as C } from "./ListItemControls.js";
-import { ListItemLabel as H } from "./ListItemLabel.js";
+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 { ListItemMenu as A } from "./ListItemMenu.js";
-import { ListItemSelect as B } from "./ListItemSelect.js";
-import '../../assets/ListItemHeader.css';const D = "_header_16s1f_1", E = "_link_16s1f_8", a = {
-  header: D,
-  link: E
-}, T = ({
-  as: c,
-  loading: e,
-  disabled: p,
-  select: o,
-  href: f,
-  onClick: L,
-  onKeyPress: d,
-  tabIndex: h,
+import { ListItemSelect as A } from "./ListItemSelect.js";
+import '../../assets/ListItemHeader.css';const B = "_header_10vuh_1", D = "_link_10vuh_8", E = "_controls_10vuh_42", e = {
+  header: B,
+  link: D,
+  controls: E
+}, R = ({
+  as: a,
+  loading: o,
+  disabled: l,
+  select: s,
+  href: h,
+  onClick: d,
+  onKeyPress: p,
+  tabIndex: L,
   collapsible: m,
-  expanded: i,
-  size: t = "sm",
-  title: l,
+  expanded: n,
+  size: r = "sm",
+  title: _,
   description: I,
-  icon: k,
-  avatar: _,
-  avatarGroup: x,
-  linkIcon: j,
-  linkText: u,
-  badge: v,
-  menu: s,
-  controls: M,
-  className: N,
-  children: b
+  icon: f,
+  avatar: k,
+  avatarGroup: u,
+  linkIcon: v,
+  linkText: x,
+  badge: N,
+  menu: b,
+  controls: j,
+  className: w,
+  children: y
 }) => {
-  const w = m && i ? "chevron-up" : m ? "chevron-down" : j;
-  return /* @__PURE__ */ n("header", { className: a.header, "data-size": t, "aria-expanded": i, children: [
-    o && /* @__PURE__ */ r(B, { ...o, size: t }),
-    /* @__PURE__ */ n(
+  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: y(a.link, N),
-        as: c,
-        href: f,
-        onClick: L,
-        onKeyPress: d,
-        tabIndex: h,
-        loading: e,
-        disabled: p,
-        size: t,
+        className: H(e.link, w),
+        as: a,
+        href: h,
+        onClick: d,
+        onKeyPress: p,
+        tabIndex: L,
+        loading: o,
+        disabled: l || o,
+        size: r,
         children: [
-          /* @__PURE__ */ r(q, { loading: e, size: t, icon: k, avatar: _, avatarGroup: x }),
-          /* @__PURE__ */ r(H, { loading: e, size: t, title: l, description: I, children: b }),
-          /* @__PURE__ */ r(C, { linkIcon: w, linkText: u, badge: v })
+          /* @__PURE__ */ t(q, { loading: o, size: r, icon: f, avatar: k, avatarGroup: u }),
+          /* @__PURE__ */ t(M, { loading: o, size: r, title: _, description: I, children: y }),
+          /* @__PURE__ */ t(i, { linkIcon: C, linkText: x, badge: N })
         ]
       }
     ),
-    s && /* @__PURE__ */ r(A, { ...s }) || M
+    /* @__PURE__ */ t(i, { className: e.controls, menu: b, children: j })
   ] });
 };
 export {
-  T as ListItemHeader
+  R as ListItemHeader
 };

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_5sijq_3", m = "_title_5sijq_27", p = "_description_5sijq_34", s = {
-  label: d,
-  title: m,
+import { jsx as e, jsxs as n, Fragment as o } from "react/jsx-runtime";
+import { Skeleton as r } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemLabel.css';const m = "_label_eum9r_3", d = "_title_eum9r_41", p = "_description_eum9r_49", s = {
+  label: m,
+  title: d,
   description: p
-}, b = ({ loading: i = !1, size: t = "sm", title: c, description: n, children: l }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: l || /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(a, { loading: i, children: c }) }),
+}, b = ({ loading: l = !1, size: t = "sm", title: a, description: c, children: i }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: i || /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(r, { loading: l, children: a }) }),
   " ",
-  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: i, children: n }) })
+  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(r, { loading: l, children: c }) })
 ] }) });
 export {
   b as ListItemLabel

package/dist/components/Menu/MenuItemMedia.js

@@ -4,9 +4,9 @@ import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
 import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemMedia.css';const f = "_media_1n26h_1", u = "_icon_1n26h_21", e = {
+import '../../assets/MenuItemMedia.css';const f = "_media_1kkjg_1", g = "_icon_1kkjg_21", e = {
   media: f,
-  icon: u
+  icon: g
 }, m = {
   avatar: {
     xs: "xs",
@@ -20,9 +20,9 @@ import '../../assets/MenuItemMedia.css';const f = "_media_1n26h_1", u = "_icon_1
     md: "sm",
     lg: "md"
   }
-}, A = ({ size: t = "sm", color: n, icon: s, avatar: o, avatarGroup: r, children: i }) => !s && !o && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": t, "data-color": s ? n : null, children: [
-  s && /* @__PURE__ */ a(x, { name: s, variant: n === "strong" ? "solid" : "outline", className: e.icon }) || o && /* @__PURE__ */ a(l, { ...o, size: m == null ? void 0 : m.avatar[t] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[t] }),
-  i
+}, A = ({ size: t = "sm", color: i, icon: s, avatar: o, avatarGroup: r, children: n }) => !s && !o && !r && !n ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": t, "data-color": s ? i : null, children: [
+  s && /* @__PURE__ */ a(x, { name: s, variant: i === "strong" ? "solid" : "outline", className: e.icon }) || o && /* @__PURE__ */ a(l, { ...o, size: m == null ? void 0 : m.avatar[t] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[t] }),
+  n
 ] });
 export {
   A as MenuItemMedia

package/dist/components/Page/Article.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Section as i } from "./Section.js";
-const a = ({ theme: r = "article", children: t, ...o }) => /* @__PURE__ */ e(i, { as: "article", theme: r, ...o, children: t });
+import { jsx as o } from "react/jsx-runtime";
+import { Section as e } from "./Section.js";
+const m = ({ children: r, ...t }) => /* @__PURE__ */ o(e, { as: "article", ...t, children: r });
 export {
-  a as Article
+  m as Article
 };

package/dist/components/Page/Breadcrumbs.js

@@ -0,0 +1,22 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { Icon as e } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { BreadcrumbsLink as n } from "./BreadcrumbsLink.js";
+import '../../assets/Breadcrumbs.css';const a = "_list_8q7kr_1", p = "_item_8q7kr_12", _ = "_icon_8q7kr_18", i = {
+  list: a,
+  item: p,
+  icon: _
+}, g = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: i.list, children: t.map((l, o) => {
+  const { label: s, ...c } = l;
+  return (t == null ? void 0 : t.length) > o + 1 ? /* @__PURE__ */ m("li", { className: i.item, children: [
+    /* @__PURE__ */ r(n, { ...c, children: s }),
+    /* @__PURE__ */ r(e, { name: "arrow-right", className: i.icon })
+  ] }, o) : /* @__PURE__ */ r("li", { className: i.item, children: /* @__PURE__ */ r(n, { ...c, as: "span", children: s }) }, o);
+}) });
+export {
+  g as Breadcrumbs
+};

package/dist/components/Page/BreadcrumbsLink.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
+import '../../assets/BreadcrumbsLink.css';const m = "_link_znbj7_1", k = {
+  link: m
+}, x = ({
+  as: o,
+  className: s,
+  disabled: n = !1,
+  selected: e,
+  tabIndex: r = 0,
+  label: t,
+  children: a,
+  ...c
+}) => /* @__PURE__ */ i(
+  o || "a",
+  {
+    tabIndex: r,
+    "aria-selected": e,
+    "aria-disabled": n,
+    disabled: n,
+    className: l(k.link, s),
+    ...c,
+    children: a || t
+  }
+);
+export {
+  x as BreadcrumbsLink
+};

package/dist/components/Page/Flex.js

@@ -0,0 +1,42 @@
+import { jsx as g } from "react/jsx-runtime";
+import { c as _ } from "../../index-L8X2o7IH.js";
+import '../../assets/Flex.css';const h = "_flex_18d8p_1", j = {
+  flex: h
+}, C = ({
+  as: a = "div",
+  theme: t = "inherit",
+  color: n = "transparent",
+  direction: e = "col",
+  reverse: o = !1,
+  align: i = "initial",
+  justify: s = "initial",
+  spacing: d = "none",
+  padding: r = "none",
+  margin: l = "none",
+  inset: c = !1,
+  className: f,
+  style: m,
+  children: p,
+  ...x
+}) => /* @__PURE__ */ g(
+  a,
+  {
+    className: _(j.flex, f),
+    style: m,
+    "data-theme": t,
+    "data-color": n,
+    "data-direction": e,
+    "data-reverse": o,
+    "data-align": i,
+    "data-justify": s,
+    "data-spacing": d,
+    "data-padding": r,
+    "data-margin": l,
+    "data-inset": c,
+    ...x,
+    children: p
+  }
+);
+export {
+  C as Flex
+};

package/dist/components/Page/Grid.js

@@ -0,0 +1,34 @@
+import { jsx as p } from "react/jsx-runtime";
+import { c as g } from "../../index-L8X2o7IH.js";
+import '../../assets/Grid.css';const l = "_grid_o95ym_1", f = {
+  grid: l
+}, v = ({
+  as: a = "div",
+  theme: t = "inherit",
+  color: n = "transparent",
+  cols: o = "1-2-3",
+  reverse: r = !1,
+  spacing: e = "none",
+  padding: d = "none",
+  margin: s = "none",
+  className: i,
+  style: c,
+  children: m
+}) => /* @__PURE__ */ p(
+  a,
+  {
+    className: g(f.grid, i),
+    style: c,
+    "data-theme": t,
+    "data-color": n,
+    "data-cols": o,
+    "data-reverse": r,
+    "data-spacing": e,
+    "data-padding": d,
+    "data-margin": s,
+    children: m
+  }
+);
+export {
+  v as Grid
+};

package/dist/components/Page/PageHeader.js

@@ -1,19 +1,20 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as a } from "../Typography/Heading.js";
+import { Heading as d } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemMedia as d } from "../List/ListItemMedia.js";
-import { Section as e } from "./Section.js";
-const u = ({ title: o, icon: m, avatar: t, avatarGroup: p, children: n, ...s }) => /* @__PURE__ */ r(e, { as: "header", spacing: "md", ...s, children: [
-  /* @__PURE__ */ r(e, { flex: "row", align: "center", spacing: "md", children: [
-    /* @__PURE__ */ i(d, { avatar: t, avatarGroup: p, icon: m, size: "lg" }),
-    /* @__PURE__ */ i(a, { size: "lg", children: o })
+import { ListItemMedia as s } from "../List/ListItemMedia.js";
+import { Section as a } from "./Section.js";
+import { Flex as c } from "./Flex.js";
+const F = ({ title: e, icon: o, avatar: m, avatarGroup: t, children: p, ...n }) => /* @__PURE__ */ r(a, { as: "header", spacing: "md", ...n, children: [
+  /* @__PURE__ */ r(c, { direction: "row", align: "center", spacing: "md", children: [
+    /* @__PURE__ */ i(s, { avatar: m, avatarGroup: t, icon: o, size: "lg" }),
+    /* @__PURE__ */ i(d, { size: "xl", children: e })
   ] }),
-  n
+  p
 ] });
 export {
-  u as PageHeader
+  F as PageHeader
 };

package/dist/components/Page/PageNav.js

@@ -1,30 +1,33 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Button as s } from "../Button/Button.js";
+import { Button as m } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { ContextMenu as l } from "../ContextMenu/ContextMenu.js";
-import { Section as c } from "./Section.js";
-import '../../assets/PageNav.css';const a = "_nav_9bu1z_1", m = "_controls_9bu1z_7", p = {
-  nav: a,
-  controls: m
-}, g = ({
-  padding: n = "none",
+import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { Flex as c } from "./Flex.js";
+import { Breadcrumbs as p } from "./Breadcrumbs.js";
+import '../../assets/PageNav.css';const f = "_nav_9bu1z_1", v = "_controls_9bu1z_7", d = {
+  nav: f,
+  controls: v
+}, F = ({
+  padding: i = "none",
+  margin: s = "none",
+  breadcrumbs: e,
   backButton: o = {
     as: "a",
     label: "Back"
   },
-  menu: r,
-  children: i
-}) => /* @__PURE__ */ e(c, { flex: "row", align: "center", justify: "between", padding: n, children: [
-  /* @__PURE__ */ t(s, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
-  /* @__PURE__ */ e("div", { className: p.controls, children: [
-    i,
-    r && /* @__PURE__ */ t(l, { ...r })
+  menu: n,
+  children: l
+}) => /* @__PURE__ */ t(c, { as: "nav", direction: "row", align: "center", justify: "between", padding: i, margin: s, children: [
+  e ? /* @__PURE__ */ r(p, { items: e }) : /* @__PURE__ */ r(m, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
+  /* @__PURE__ */ t("div", { className: d.controls, children: [
+    l,
+    n && /* @__PURE__ */ r(a, { ...n })
   ] })
 ] });
 export {
-  g as PageNav
+  F as PageNav
 };

package/dist/components/Page/Section.js

@@ -1,42 +1,13 @@
-import { jsx as x } from "react/jsx-runtime";
-import { c as h } from "../../index-L8X2o7IH.js";
-import '../../assets/Section.css';const _ = "_section_1qkfl_1", j = {
-  section: _
-}, k = ({
-  as: a = "section",
-  theme: t = "inherit",
-  color: n = "transparent",
-  flex: e = "col",
-  reverse: o = !1,
-  align: s = "initial",
-  justify: i = "initial",
-  padding: c = "none",
-  spacing: d = "none",
-  margin: r = "none",
-  shadow: l = "none",
-  inset: m = !1,
-  className: p,
-  style: f,
-  children: g
-}) => /* @__PURE__ */ x(
-  a,
-  {
-    className: h(j.section, p),
-    style: f,
-    "data-flex": e,
-    "data-reverse": o,
-    "data-align": s,
-    "data-justify": i,
-    "data-theme": t,
-    "data-color": n,
-    "data-inset": m,
-    "data-padding": c,
-    "data-spacing": d,
-    "data-margin": r,
-    "data-shadow": l,
-    children: g
-  }
-);
+import { jsx as e } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { Flex as n } from "./Flex.js";
+import '../../assets/Section.css';const a = "_section_167jj_1", p = {
+  section: a
+}, g = ({ as: o = "section", className: t, bg: s, shadow: i, children: r, ...c }) => /* @__PURE__ */ e(n, { as: o, "data-bg": s, "data-shadow": i, className: m(p.section, t), ...c, children: r });
 export {
-  k as Section
+  g as Section
 };

package/dist/components/Page/index.js

@@ -1,16 +1,20 @@
-import { PageBase as r } from "./PageBase.js";
-import { PageNav as a } from "./PageNav.js";
-import { PageHeader as m } from "./PageHeader.js";
-import { SectionHeader as x } from "./SectionHeader.js";
-import { SectionFooter as i } from "./SectionFooter.js";
-import { Article as n } from "./Article.js";
-import { Section as S } from "./Section.js";
+import { PageBase as o } from "./PageBase.js";
+import { PageNav as t } from "./PageNav.js";
+import { PageHeader as f } from "./PageHeader.js";
+import { Article as a } from "./Article.js";
+import { Section as d } from "./Section.js";
+import { Flex as g } from "./Flex.js";
+import { Grid as B } from "./Grid.js";
+import { Breadcrumbs as b } from "./Breadcrumbs.js";
+import { BreadcrumbsLink as n } from "./BreadcrumbsLink.js";
 export {
-  n as Article,
-  r as PageBase,
-  m as PageHeader,
-  a as PageNav,
-  S as Section,
-  i as SectionFooter,
-  x as SectionHeader
+  a as Article,
+  b as Breadcrumbs,
+  n as BreadcrumbsLink,
+  g as Flex,
+  B as Grid,
+  o as PageBase,
+  f as PageHeader,
+  t as PageNav,
+  d as Section
 };