@altinn/altinn-components 0.28.1 → 0.29.0

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
 };

package/dist/components/Searchbar/Searchbar.js

@@ -2,10 +2,10 @@ import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { SearchbarBase as f } from "./SearchbarBase.js";
-import { SearchField as s } from "./SearchField.js";
+import { SearchbarBase as a } from "./SearchbarBase.js";
+import { SearchbarField as f } from "./SearchbarField.js";
 import "./AutocompleteBase.js";
-import { Autocomplete as a } from "./Autocomplete.js";
+import { Autocomplete as s } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
 const B = ({
   className: i,
@@ -14,9 +14,9 @@ const B = ({
   onClose: m,
   tabIndex: p,
   ...c
-}) => /* @__PURE__ */ e(f, { className: i, expanded: o, autocomplete: !!r, children: [
-  /* @__PURE__ */ t(s, { ...c, expanded: o, onClose: m, tabIndex: p }),
-  r && /* @__PURE__ */ t(a, { ...r, expanded: o, onSelect: m })
+}) => /* @__PURE__ */ e(a, { className: i, expanded: o, autocomplete: !!r, children: [
+  /* @__PURE__ */ t(f, { ...c, expanded: o, onClose: m, tabIndex: p }),
+  r && /* @__PURE__ */ t(s, { ...r, expanded: o, onSelect: m })
 ] });
 export {
   B as Searchbar

package/dist/components/Searchbar/{SearchField.js → SearchbarField.js}

@@ -9,7 +9,7 @@ import "./AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as N } from "../../MagnifyingGlass-3Ln1MufI.js";
 import { S as l } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchField.css';const v = "_field_ljqfn_1", T = "_icon_ljqfn_10", A = "_input_ljqfn_17", K = "_dismiss_ljqfn_41", M = "_clear_ljqfn_47", s = {
+import '../../assets/SearchbarField.css';const v = "_field_ljqfn_1", T = "_icon_ljqfn_10", A = "_input_ljqfn_17", K = "_dismiss_ljqfn_41", M = "_clear_ljqfn_47", s = {
   field: v,
   icon: T,
   input: A,
@@ -25,9 +25,9 @@ import '../../assets/SearchField.css';const v = "_field_ljqfn_1", T = "_icon_ljq
   clearButtonAltText: _ = "Clear search",
   onFocus: h,
   onBlur: x,
-  onChange: j,
-  onClear: y,
-  onClose: b,
+  onChange: b,
+  onClear: j,
+  onClose: y,
   onEnter: i,
   tabIndex: q
 }) => {
@@ -44,7 +44,7 @@ import '../../assets/SearchField.css';const v = "_field_ljqfn_1", T = "_icon_ljq
         onBlur: x,
         name: f,
         value: a,
-        onChange: j,
+        onChange: b,
         placeholder: u,
         className: s.input,
         onKeyUp: S,
@@ -64,7 +64,7 @@ import '../../assets/SearchField.css';const v = "_field_ljqfn_1", T = "_icon_ljq
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: y,
+        onClick: j,
         dataTestId: "search-button-clear",
         iconAltText: _
       }
@@ -74,7 +74,7 @@ import '../../assets/SearchField.css';const v = "_field_ljqfn_1", T = "_icon_ljq
         icon: l,
         variant: "text",
         className: s.dismiss,
-        onClick: b,
+        onClick: y,
         dataTestId: "search-button-close",
         iconAltText: d
       }
@@ -82,5 +82,5 @@ import '../../assets/SearchField.css';const v = "_field_ljqfn_1", T = "_icon_ljq
   ] });
 };
 export {
-  H as SearchField
+  H as SearchbarField
 };

package/dist/components/Searchbar/index.js

@@ -1,23 +1,23 @@
 import { Searchbar as r } from "./Searchbar.js";
 import { SearchbarBase as m } from "./SearchbarBase.js";
-import { SearchField as f } from "./SearchField.js";
+import { SearchbarField as f } from "./SearchbarField.js";
 import { AutocompleteBase as a } from "./AutocompleteBase.js";
 import { AutocompleteGroup as u } from "./AutocompleteGroup.js";
 import { Autocomplete as s } from "./Autocomplete.js";
-import { AutocompleteItem as A } from "./AutocompleteItem.js";
-import { ScopeListItem as b } from "./ScopeListItem.js";
+import { AutocompleteItem as b } from "./AutocompleteItem.js";
+import { ScopeListItem as I } from "./ScopeListItem.js";
 import { SuggestListItem as i } from "./SuggestListItem.js";
 import { QueryItem as g, QueryLabel as y } from "./QueryLabel.js";
 export {
   s as Autocomplete,
   a as AutocompleteBase,
   u as AutocompleteGroup,
-  A as AutocompleteItem,
+  b as AutocompleteItem,
   g as QueryItem,
   y as QueryLabel,
-  b as ScopeListItem,
-  f as SearchField,
+  I as ScopeListItem,
   r as Searchbar,
   m as SearchbarBase,
+  f as SearchbarField,
   i as SuggestListItem
 };

package/dist/components/Settings/SettingsItem.js

@@ -1,37 +1,34 @@
-import { jsxs as s, jsx as e, Fragment as o } from "react/jsx-runtime";
+import { jsxs as L, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { ListItemBase as g } from "../List/ListItemBase.js";
-import { ListItemHeader as x } from "../List/ListItemHeader.js";
-import { ListItemLabel as _ } from "../List/ListItemLabel.js";
-import { Heading as i } from "../Typography/Heading.js";
+import { ListItemBase as _ } from "../List/ListItemBase.js";
+import { ListItemHeader as f } from "../List/ListItemHeader.js";
+import { ListItemLabel as h } from "../List/ListItemLabel.js";
+import { getAriaLabelFromTitle as j } from "../Menu/MenuItemLabel.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItem.css';const f = "_item_jqpsx_1", L = "_label_jqpsx_12", t = {
-  item: f,
-  label: L
-}, F = ({
-  color: n,
-  size: h,
-  expanded: a,
-  icon: c,
-  label: p,
-  title: r,
-  value: m,
-  description: l,
-  children: d,
-  ...b
-}) => /* @__PURE__ */ s(g, { className: t.item, color: n, size: h, expanded: a, children: [
-  /* @__PURE__ */ e(x, { ariaLabel: r, ...b, className: t.header, icon: c, children: /* @__PURE__ */ e(_, { className: t.label, children: r && m ? /* @__PURE__ */ s(o, { children: [
-    /* @__PURE__ */ e(i, { as: "h3", size: "xs", variant: "subtle", weight: "normal", children: r }),
-    /* @__PURE__ */ e(i, { weight: "normal", size: "sm", children: m })
-  ] }) : r ? /* @__PURE__ */ s(o, { children: [
-    /* @__PURE__ */ e(i, { weight: "normal", size: "sm", children: r || m }),
-    l && /* @__PURE__ */ e(i, { as: "h3", size: "xs", variant: "subtle", weight: "normal", children: l })
-  ] }) : p }) }),
-  a && d
-] });
+import '../../assets/SettingsItem.css';const x = "_item_jqpsx_1", I = "_label_jqpsx_12", t = {
+  item: x,
+  label: I
+}, S = ({
+  color: s,
+  size: a,
+  expanded: e,
+  icon: o,
+  label: l,
+  title: m,
+  value: c,
+  description: p,
+  children: n,
+  ...r
+}) => {
+  const b = r.ariaLabel || j(m);
+  return /* @__PURE__ */ L(_, { className: t.item, color: s, size: a, expanded: e, children: [
+    /* @__PURE__ */ i(f, { ...r, ariaLabel: b, className: t.header, icon: o, children: /* @__PURE__ */ i(h, { className: t.label, title: m, value: c, description: p, children: l }) }),
+    e && n
+  ] });
+};
 export {
-  F as SettingsItem
+  S as SettingsItem
 };