@altinn/altinn-components 0.28.2 → 0.29.0

package/dist/components/Menu/MenuItem.js

@@ -1,50 +1,50 @@
-import { jsxs as M, jsx as t } from "react/jsx-runtime";
-import { MenuItemBase as b } from "./MenuItemBase.js";
-import { MenuItemLabel as g } from "./MenuItemLabel.js";
-import { MenuItemIcon as k } from "./MenuItemIcon.js";
+import { jsxs as u, jsx as o, Fragment as k } from "react/jsx-runtime";
+import { Icon as M } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
+import { MenuItemBase as b } from "./MenuItemBase.js";
+import { MenuItemLabel as y } from "./MenuItemLabel.js";
+import { MenuItemIcon as C } from "./MenuItemIcon.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as L, a as S } from "../../ChevronUp-DR4Lz2Jb.js";
-const F = ({
-  as: n = "a",
-  size: o = "md",
-  color: e,
-  theme: a,
-  collapsible: r,
-  expanded: m,
+import { S as _, a as j } from "../../ChevronUp-DR4Lz2Jb.js";
+import { S as w } from "../../ChevronRight-BbelnTke.js";
+import '../../assets/MenuItem.css';const x = "_linkIcon_1owl4_57", m = {
+  linkIcon: x
+}, J = ({
+  as: i = "a",
+  size: n = "md",
+  color: s,
+  theme: l,
+  collapsible: c,
+  expanded: r,
   icon: p,
-  iconTheme: i,
-  iconBadge: c,
-  avatar: d,
-  avatarGroup: j,
+  iconTheme: a,
+  iconBadge: h,
   title: I,
-  description: u,
-  badge: v,
-  linkText: f,
-  linkIcon: h,
-  label: l,
-  ...s
-}) => /* @__PURE__ */ M(
-  b,
-  {
-    as: n,
-    size: o,
-    theme: a,
-    badge: v,
-    linkText: f,
-    linkIcon: r && m ? L : r ? S : h,
-    color: e,
-    expanded: m,
-    ...s,
-    children: [
-      /* @__PURE__ */ t(k, { size: o, icon: p, theme: i, badge: c }),
-      /* @__PURE__ */ t(g, { title: I, description: u, size: o, children: l })
-    ]
-  }
-);
+  description: v,
+  badge: f,
+  controls: e,
+  linkIcon: d,
+  label: g,
+  ...S
+}) => {
+  const t = c ? r ? _ : j : d ? w : void 0;
+  return /* @__PURE__ */ u(b, { as: i, size: n, theme: l, color: s, expanded: r, ...S, children: [
+    /* @__PURE__ */ o(C, { size: n, icon: p, theme: a, badge: h }),
+    /* @__PURE__ */ o(y, { title: I, description: v, size: n, badge: f, children: g }),
+    /* @__PURE__ */ o("span", { className: m.controls, children: e ? /* @__PURE__ */ o("span", { style: { position: "relative" }, children: e }) : /* @__PURE__ */ o(k, { children: t && /* @__PURE__ */ o("span", { className: m.linkIcon, children: /* @__PURE__ */ o(
+      M,
+      {
+        svgElement: t,
+        style: {
+          fontSize: "1.5rem"
+        }
+      }
+    ) }) }) })
+  ] });
+};
 export {
-  F as MenuItem
+  J as MenuItem
 };

package/dist/components/Menu/MenuItemBase.js

@@ -1,62 +1,41 @@
-import { jsxs as a, jsx as c } from "react/jsx-runtime";
-import { c as u } from "../../index-L8X2o7IH.js";
-import { Icon as v } from "../Icon/Icon.js";
-import "react";
-import { Badge as T } from "../Badge/Badge.js";
-import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
-import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemBase.css';const B = "_item_1ejie_1", E = "_content_1ejie_45", k = "_action_1ejie_53", z = "_linkText_1ejie_60", M = "_linkIcon_1ejie_65", e = {
-  item: B,
-  content: E,
-  action: k,
-  linkText: z,
-  linkIcon: M
-}, O = ({
-  as: _,
-  color: l,
-  theme: p,
-  size: d,
-  className: h,
-  href: x,
-  onClick: n,
-  onKeyPress: i,
-  tabIndex: j = 0,
+import { jsx as m } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemBase.css';const u = "_item_1df6r_1", I = "_content_1df6r_45", o = {
+  item: u,
+  content: I
+}, z = ({
+  as: s,
+  color: c,
+  theme: d,
+  size: r,
+  className: i,
+  href: p,
+  onClick: t,
+  onKeyPress: e,
+  tabIndex: _ = 0,
   hidden: f,
-  selected: I,
-  disabled: m = !1,
-  linkIcon: o,
-  linkText: s,
-  badge: t,
-  children: N
-}) => /* @__PURE__ */ a(
-  _ || "a",
+  selected: x,
+  disabled: a = !1,
+  children: h
+}) => /* @__PURE__ */ m(
+  s || "a",
   {
-    tabIndex: m ? "-1" : j ?? 0,
-    className: u(e.item, h),
-    "data-size": d,
-    "data-color": l,
-    "data-theme": p,
+    tabIndex: a ? "-1" : _ ?? 0,
+    className: l(o.item, i),
+    "data-size": r,
+    "data-color": c,
+    "data-theme": d,
     "aria-hidden": f,
-    "aria-disabled": m,
-    "data-selected": I,
-    href: x,
-    onKeyPress: (r) => {
-      r.key === "Enter" && (n == null || n()), i == null || i(r);
+    "aria-disabled": a,
+    "data-selected": x,
+    href: p,
+    onKeyPress: (n) => {
+      n.key === "Enter" && (t == null || t()), e == null || e(n);
     },
-    onClick: n,
-    children: [
-      /* @__PURE__ */ a("div", { className: e.content, children: [
-        N,
-        t && /* @__PURE__ */ c(T, { ...t, theme: (t == null ? void 0 : t.theme) || "surface" })
-      ] }),
-      o && /* @__PURE__ */ a("div", { className: e.action, children: [
-        s && /* @__PURE__ */ c("span", { className: e.linkText, children: s }),
-        o && /* @__PURE__ */ c(v, { svgElement: o, className: e.linkIcon })
-      ] })
-    ]
+    onClick: t,
+    children: /* @__PURE__ */ m("span", { className: o.content, children: h })
   }
 );
 export {
-  O as MenuItemBase
+  z as MenuItemBase
 };

package/dist/components/Menu/MenuItemLabel.js

@@ -1,24 +1,62 @@
-import { jsx as e, jsxs as m, Fragment as d } from "react/jsx-runtime";
-import { c as p } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemLabel.css';const _ = "_label_10xs5_1", x = "_title_10xs5_19", b = "_description_10xs5_42", s = {
-  label: _,
-  title: x,
-  description: b
-}, u = ({
-  className: l,
-  size: t = "sm",
-  label: i,
-  title: n,
-  weight: c,
-  description: o,
-  children: a
-}) => {
-  const r = c || t === "lg" ? "medium" : "normal";
-  return /* @__PURE__ */ e("span", { className: p(s.label, l), "data-size": t, children: a || /* @__PURE__ */ m(d, { children: [
-    /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, "data-weight": r, children: n || i }),
-    /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: o })
+import { jsx as o, jsxs as c, Fragment as d } from "react/jsx-runtime";
+import { c as g } from "../../index-L8X2o7IH.js";
+import { isValidElement as h } from "react";
+import { Badge as b } from "../Badge/Badge.js";
+import "../RootProvider/RootProvider.js";
+import { Heading as f } from "../Typography/Heading.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuItemLabel.css';const x = "_label_mk4ho_1", y = "_title_mk4ho_20", p = {
+  label: x,
+  title: y
+}, s = (r) => typeof r == "object" && r !== null && "children" in r;
+function u(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || h(r);
+}
+const _ = (r) => {
+  const n = {
+    as: "span"
+  };
+  return s(r) ? { ...n, ...r } : u(r) ? {
+    ...n,
+    children: r
+  } : null;
+}, P = (r) => {
+  const n = {
+    as: "span",
+    weight: "normal",
+    variant: "subtle"
+  };
+  return s(r) ? { ...n, ...r } : u(r) ? {
+    ...n,
+    children: r
+  } : null;
+};
+function T(r) {
+  if (typeof r == "string")
+    return r;
+  if (s(r))
+    return r.children;
+}
+const A = ({ className: r, size: n = "sm", title: i, badge: l, description: m, children: a }) => {
+  const t = i && _(i), e = m && P(m);
+  return /* @__PURE__ */ o("span", { className: g(p.label, r), "data-size": n, children: a || /* @__PURE__ */ c(d, { children: [
+    t && /* @__PURE__ */ c(
+      f,
+      {
+        ...t,
+        className: p.title,
+        weight: t != null && t.weight || n === "lg" ? "medium" : "normal",
+        children: [
+          t.children,
+          l && /* @__PURE__ */ o(b, { ...l })
+        ]
+      }
+    ),
+    e && /* @__PURE__ */ o(f, { ...e, size: e.size || "xxs" })
   ] }) });
 };
 export {
-  u as MenuItemLabel
+  A as MenuItemLabel,
+  T as getAriaLabelFromTitle
 };

package/dist/components/Menu/MenuOption.js

@@ -1,49 +1,40 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { MenuItemBase as f } from "./MenuItemBase.js";
-import { MenuItemLabel as x } from "./MenuItemLabel.js";
+import { MenuItemBase as d } from "./MenuItemBase.js";
+import { MenuItemLabel as I } from "./MenuItemLabel.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { CheckboxIcon as N } from "../Icon/CheckboxIcon.js";
-import { RadioIcon as g } from "../Icon/RadioIcon.js";
-import '../../assets/MenuOption.css';const I = "_base_igy0i_1", d = "_label_igy0i_9", h = "_input_igy0i_18", y = "_icon_igy0i_23", o = {
-  base: I,
-  label: d,
-  input: h,
-  icon: y
-}, A = ({
-  size: e = "md",
+import { Label as M } from "../Forms/Label.js";
+import { Input as b } from "../Forms/Input.js";
+const y = ({
+  size: r = "md",
   type: t,
-  name: a,
-  value: n,
-  label: r,
-  title: m,
-  description: l,
-  badge: c,
-  checked: i = !1,
-  disabled: p,
-  onChange: b,
-  ..._
-}) => /* @__PURE__ */ u(
-  f,
-  {
-    className: o.base,
-    disabled: p,
-    selected: i,
-    size: e,
-    badge: c,
-    as: "label",
-    ..._,
-    children: [
-      /* @__PURE__ */ s("input", { className: o.input, name: a, value: n, type: t, checked: i, onChange: b }),
-      t === "checkbox" && /* @__PURE__ */ s(N, { checked: i, hover: !0, className: o.icon }),
-      t === "radio" && /* @__PURE__ */ s(g, { checked: i, hover: !0, className: o.icon }),
-      /* @__PURE__ */ s(x, { className: o.label, title: m, description: l, size: e, children: r })
-    ]
-  }
-);
+  name: e,
+  value: i,
+  label: p,
+  title: n,
+  description: s,
+  badge: f,
+  checked: m = !1,
+  disabled: l,
+  onChange: a,
+  ...u
+}) => /* @__PURE__ */ x(d, { disabled: l, selected: m, size: r, as: M, ...u, children: [
+  /* @__PURE__ */ o(
+    b,
+    {
+      size: "xs",
+      name: e,
+      value: i,
+      type: t,
+      checked: m,
+      onChange: a
+    }
+  ),
+  /* @__PURE__ */ o(I, { title: n, description: s, size: r, badge: f, children: p })
+] });
 export {
-  A as MenuOption
+  y as MenuOption
 };

package/dist/components/Menu/MenuSearch.js

@@ -1,51 +1,32 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { Icon as m } from "../Icon/Icon.js";
+import { jsx as m } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as p } from "../../MagnifyingGlass-3Ln1MufI.js";
-import { S as u } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/MenuSearch.css';const f = "_field_8g6tu_1", _ = "_icon_8g6tu_6", g = "_input_8g6tu_15", d = "_clear_8g6tu_31", t = {
-  field: f,
-  icon: _,
-  input: g,
-  clear: d
-}, I = ({
-  value: i,
+import { SearchField as c } from "../Forms/SearchField.js";
+import '../../assets/MenuSearch.css';const l = "_field_99cd6_1", p = {
+  field: l
+}, _ = ({
   name: r,
-  placeholder: s = "Search",
-  clearButtonAltText: e = "Clear search",
-  onChange: n,
-  onClear: c
-}) => /* @__PURE__ */ a("div", { className: t.field, children: [
-  /* @__PURE__ */ o(
-    "input",
-    {
-      type: "search",
-      value: i,
-      name: r,
-      placeholder: s,
-      className: t.input,
-      onChange: n,
-      autoComplete: "off"
-    }
-  ),
-  /* @__PURE__ */ o(m, { svgElement: p, className: t.icon }),
-  c && !!i && /* @__PURE__ */ o(
-    l,
-    {
-      icon: u,
-      variant: "solid",
-      size: "custom",
-      className: t.clear,
-      onClick: c,
-      iconAltText: e
-    }
-  )
-] });
+  value: e,
+  placeholder: i = "Search",
+  clearButtonAltText: o = "Clear search",
+  onChange: t,
+  onClear: s
+}) => /* @__PURE__ */ m(
+  c,
+  {
+    size: "xs",
+    name: r,
+    value: e,
+    placeholder: i,
+    onChange: t,
+    onClear: s,
+    clearButtonAltText: o,
+    className: p.field
+  }
+);
 export {
-  I as MenuSearch
+  _ as MenuSearch
 };

package/dist/components/Menu/index.js

@@ -1,26 +1,27 @@
-import { MenuItemBase as r } from "./MenuItemBase.js";
-import { MenuItemLabel as m } from "./MenuItemLabel.js";
-import { MenuItemIcon as u } from "./MenuItemIcon.js";
-import { MenuItem as M } from "./MenuItem.js";
-import { MenuInputField as x } from "./MenuInputField.js";
-import { MenuOption as a } from "./MenuOption.js";
-import { MenuSearch as i } from "./MenuSearch.js";
-import { MenuHeader as c } from "./MenuHeader.js";
-import { MenuItems as l } from "./MenuItems.js";
-import { MenuBase as b, MenuList as h, MenuListItem as F } from "./MenuBase.js";
-import { Menu as O } from "./Menu.js";
+import { MenuItemBase as o } from "./MenuItemBase.js";
+import { MenuItemLabel as m, getAriaLabelFromTitle as n } from "./MenuItemLabel.js";
+import { MenuItemIcon as p } from "./MenuItemIcon.js";
+import { MenuItem as f } from "./MenuItem.js";
+import { MenuInputField as I } from "./MenuInputField.js";
+import { MenuOption as i } from "./MenuOption.js";
+import { MenuSearch as l } from "./MenuSearch.js";
+import { MenuHeader as b } from "./MenuHeader.js";
+import { MenuItems as d } from "./MenuItems.js";
+import { MenuBase as F, MenuList as g, MenuListItem as h } from "./MenuBase.js";
+import { Menu as H } from "./Menu.js";
 export {
-  O as Menu,
-  b as MenuBase,
-  c as MenuHeader,
-  x as MenuInputField,
-  M as MenuItem,
-  r as MenuItemBase,
-  u as MenuItemIcon,
+  H as Menu,
+  F as MenuBase,
+  b as MenuHeader,
+  I as MenuInputField,
+  f as MenuItem,
+  o as MenuItemBase,
+  p as MenuItemIcon,
   m as MenuItemLabel,
-  l as MenuItems,
-  h as MenuList,
-  F as MenuListItem,
-  a as MenuOption,
-  i as MenuSearch
+  d as MenuItems,
+  g as MenuList,
+  h as MenuListItem,
+  i as MenuOption,
+  l as MenuSearch,
+  n as getAriaLabelFromTitle
 };

package/dist/components/Page/Flex.js

@@ -1,6 +1,6 @@
 import { jsx as b } from "react/jsx-runtime";
 import { c as h } from "../../index-L8X2o7IH.js";
-import '../../assets/Flex.css';const j = "_flex_144b4_1", u = {
+import '../../assets/Flex.css';const j = "_flex_1b3x8_1", u = {
   flex: j
 }, C = ({
   as: a = "div",
@@ -16,15 +16,15 @@ import '../../assets/Flex.css';const j = "_flex_144b4_1", u = {
   padding: c,
   margin: f,
   bleed: m = !1,
-  className: p,
-  style: x,
+  className: x,
+  style: p,
   children: g,
   ..._
 }) => /* @__PURE__ */ b(
   a,
   {
-    className: h(u.flex, p),
-    style: x,
+    className: h(u.flex, x),
+    style: p,
     "data-size": e,
     "data-color": t,
     "data-theme": n,

package/dist/components/Page/Grid.js

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

package/dist/components/Page/Section.js

@@ -1,11 +1,13 @@
-import { jsx as m } from "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
+import { jsx as r } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as p } from "./Flex.js";
-const j = ({ as: o = "section", direction: r = "col", children: t, ...i }) => /* @__PURE__ */ m(p, { as: o, direction: r, ...i, children: t });
+import { Flex as n } from "./Flex.js";
+import '../../assets/Section.css';const p = "_section_1w6kc_1", l = {
+  section: p
+}, u = ({ as: o = "section", direction: t = "col", variant: c, className: s, children: e, ...i }) => /* @__PURE__ */ r(n, { as: o, direction: t, theme: c, className: m(l.section, s), ...i, children: e });
 export {
-  j as Section
+  u as Section
 };

package/dist/components/Page/index.js

@@ -1,30 +1,28 @@
 import { PageBase as e } from "./PageBase.js";
 import { PageNav as m } from "./PageNav.js";
-import { PageMenu as x } from "./PageMenu.js";
+import { PageMenu as a } from "./PageMenu.js";
 import { PageTabs as p } from "./PageTabs.js";
-import { PageHeader as n } from "./PageHeader.js";
-import { PageDetails as g } from "./PageDetails.js";
-import { Flex as P } from "./Flex.js";
-import { Grid as u } from "./Grid.js";
-import { Breadcrumbs as b } from "./Breadcrumbs.js";
-import { BreadcrumbsLink as l } from "./BreadcrumbsLink.js";
-import { Section as k } from "./Section.js";
-import { ContactSection as A } from "./ContactSection.js";
-import { ContactButtons as F } from "./ContactButtons.js";
-import { AccordionSection as H } from "./AccordionSection.js";
+import { PageDetails as n } from "./PageDetails.js";
+import { Flex as s } from "./Flex.js";
+import { Grid as P } from "./Grid.js";
+import { Breadcrumbs as u } from "./Breadcrumbs.js";
+import { BreadcrumbsLink as b } from "./BreadcrumbsLink.js";
+import { Section as l } from "./Section.js";
+import { ContactSection as k } from "./ContactSection.js";
+import { ContactButtons as A } from "./ContactButtons.js";
+import { AccordionSection as F } from "./AccordionSection.js";
 export {
-  H as AccordionSection,
-  b as Breadcrumbs,
-  l as BreadcrumbsLink,
-  F as ContactButtons,
-  A as ContactSection,
-  P as Flex,
-  u as Grid,
+  F as AccordionSection,
+  u as Breadcrumbs,
+  b as BreadcrumbsLink,
+  A as ContactButtons,
+  k as ContactSection,
+  s as Flex,
+  P as Grid,
   e as PageBase,
-  g as PageDetails,
-  n as PageHeader,
-  x as PageMenu,
+  n as PageDetails,
+  a as PageMenu,
   m as PageNav,
   p as PageTabs,
-  k as Section
+  l as Section
 };