@altinn/altinn-components 0.56.7 → 0.56.9

package/dist/components/Page/AccordionSection.js

@@ -3,14 +3,15 @@ import "../../index-p1eeF8LQ.js";
 import "react";
 import { Typography as e } from "../Typography/Typography.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { PageDetails as n } from "./PageDetails.js";
 import { Section as c } from "./Section.js";
-const x = ({ items: o }) => /* @__PURE__ */ r(c, { children: o?.map((t) => {
+const S = ({ items: o }) => /* @__PURE__ */ r(c, { children: o?.map((t) => {
   const { id: i, title: m, children: p } = t;
   return /* @__PURE__ */ r(n, { summary: m, children: /* @__PURE__ */ r(e, { children: p }) }, i);
 }) });
 export {
-  x as AccordionSection
+  S as AccordionSection
 };

package/dist/components/Page/Breadcrumbs.js

@@ -4,6 +4,7 @@ import "../../index-p1eeF8LQ.js";
 import { Icon as f } from "../Icon/Icon.js";
 import s, { forwardRef as p } from "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { BreadcrumbsLink as c } from "./BreadcrumbsLink.js";
@@ -29,7 +30,7 @@ const h = p((e, n) => {
   list: _,
   item: b,
   icon: g
-}, N = ({ items: e = [] }) => /* @__PURE__ */ i("ul", { className: a.list, children: e.map((n, r) => {
+}, P = ({ items: e = [] }) => /* @__PURE__ */ i("ul", { className: a.list, children: e.map((n, r) => {
   const { label: t, ...l } = n;
   return e?.length > r + 1 ? /* @__PURE__ */ m("li", { className: a.item, children: [
     /* @__PURE__ */ i(c, { ...l, children: t }),
@@ -37,5 +38,5 @@ const h = p((e, n) => {
   ] }, r) : /* @__PURE__ */ i("li", { className: a.item, children: /* @__PURE__ */ i(c, { ...l, as: "span", children: t }) }, r);
 }) });
 export {
-  N as Breadcrumbs
+  P as Breadcrumbs
 };

package/dist/components/Page/ContactButtons.js

@@ -5,9 +5,10 @@ import { Button as l } from "../Button/Button.js";
 import { ButtonIcon as a } from "../Button/ButtonIcon.js";
 import { ButtonLabel as s } from "../Button/ButtonLabel.js";
 import { ButtonGroup as f } from "../Button/ButtonGroup.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-const G = ({ items: t }) => /* @__PURE__ */ o(f, { children: t.map((r, n) => {
+const I = ({ items: t }) => /* @__PURE__ */ o(f, { children: t.map((r, n) => {
   const { as: i, href: m, onClick: p, icon: e, label: c } = r;
   return /* @__PURE__ */ u(l, { as: i, href: m, onClick: p, variant: "outline", children: [
     /* @__PURE__ */ o(a, { icon: e }),
@@ -15,5 +16,5 @@ const G = ({ items: t }) => /* @__PURE__ */ o(f, { children: t.map((r, n) => {
   ] }, n);
 }) });
 export {
-  G as ContactButtons
+  I as ContactButtons
 };

package/dist/components/Page/ContactSection.js

@@ -4,35 +4,36 @@ import "react";
 import { Typography as a } from "../Typography/Typography.js";
 import { Heading as s } from "../Typography/Heading.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as g } from "./Section.js";
 import { ContactButtons as h } from "./ContactButtons.js";
-const B = ({
+const H = ({
   variant: r = "inline",
-  theme: t,
+  theme: n,
   color: p,
-  typographyProps: c,
+  typographyProps: m,
   title: i,
-  description: m,
+  description: c,
   children: e,
-  items: n
+  items: t
 }) => /* @__PURE__ */ d(
   g,
   {
     direction: "col",
-    theme: t,
+    theme: n,
     color: p,
     padding: r === "card" ? "page" : 0,
     shadow: r === "card" ? "xs" : "none",
     spacing: 4,
     children: [
       i && /* @__PURE__ */ o(s, { size: "lg", children: i }),
-      /* @__PURE__ */ o(a, { ...c, children: e || /* @__PURE__ */ o("p", { children: m }) }),
-      n && /* @__PURE__ */ o(h, { items: n })
+      /* @__PURE__ */ o(a, { ...m, children: e || /* @__PURE__ */ o("p", { children: c }) }),
+      t && /* @__PURE__ */ o(h, { items: t })
     ]
   }
 );
 export {
-  B as ContactSection
+  H as ContactSection
 };

package/dist/components/Page/PageMenu.js

@@ -2,14 +2,15 @@ import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as n } from "../Menu/MenuItem.js";
+import { MenuItem as s } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/PageMenu.css';const o = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", e = {
-  menu: o,
+import '../../assets/PageMenu.css';const n = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", e = {
+  menu: n,
   list: l,
   item: a
-}, f = ({ theme: i, color: r, items: s = [] }) => /* @__PURE__ */ t("nav", { "data-theme": i, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: s.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...m, className: e.item }) }, m.id)) }) });
+}, x = ({ theme: i, color: r, items: o = [] }) => /* @__PURE__ */ t("nav", { "data-theme": i, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: o.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(s, { ...m, className: e.item }) }, m.id)) }) });
 export {
-  f as PageMenu
+  x as PageMenu
 };

package/dist/components/Page/PageNav.js

@@ -3,6 +3,7 @@ import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import a, { forwardRef as c } from "react";
 import { Button as f } from "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as m } from "./Flex.js";
@@ -27,7 +28,7 @@ const b = c((t, o) => {
   );
 }), g = "_controls_9bu1z_7", v = {
   controls: g
-}, E = ({
+}, P = ({
   color: t,
   padding: o,
   breadcrumbs: l,
@@ -44,5 +45,5 @@ const b = c((t, o) => {
   r && /* @__PURE__ */ i("div", { className: v.controls, children: r })
 ] });
 export {
-  E as PageNav
+  P as PageNav
 };

package/dist/components/Page/Section.js

@@ -2,19 +2,20 @@ import { jsx as m } from "react/jsx-runtime";
 import { c as n } from "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as p } from "./Flex.js";
 import '../../assets/Section.css';const l = "_section_1w6kc_1", a = {
   section: l
-}, w = ({
+}, y = ({
   as: o = "section",
   direction: t = "col",
   align: i = "initial",
   variant: c,
-  className: s,
-  children: e,
-  ...r
+  className: r,
+  children: s,
+  ...e
 }) => /* @__PURE__ */ m(
   p,
   {
@@ -22,11 +23,11 @@ import '../../assets/Section.css';const l = "_section_1w6kc_1", a = {
     align: i,
     direction: t,
     theme: c,
-    className: n(a.section, s),
-    ...r,
-    children: e
+    className: n(a.section, r),
+    ...e,
+    children: s
   }
 );
 export {
-  w as Section
+  y as Section
 };

package/dist/components/ResourceListItem/ResourceListItem.js

@@ -1,18 +1,19 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as s } from "../List/ListItem.js";
-const h = ({
+const u = ({
   ownerName: t,
   resourceName: i,
   ownerLogoUrlAlt: r,
   ownerLogoUrl: m,
   titleAs: o = "h3",
-  ...e
-}) => /* @__PURE__ */ p(
+  ...p
+}) => /* @__PURE__ */ e(
   s,
   {
     icon: {
@@ -23,9 +24,9 @@ const h = ({
     },
     title: { children: i, as: o },
     description: t,
-    ...e
+    ...p
   }
 );
 export {
-  h as ResourceListItem
+  u as ResourceListItem
 };

package/dist/components/RootProvider/RootProvider.js

@@ -4,6 +4,7 @@ import { createContext as p, useState as a, useContext as C } from "react";
 import { useEscapeKey as g } from "../../hooks/useEscapeKey.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
+import "react-dom";
 import { SnackbarProvider as x } from "../Snackbar/useSnackbar.js";
 const f = {
   currentId: "",
@@ -16,7 +17,7 @@ const f = {
     console.warn("setPreviousId called outside of RootProvider context");
   },
   languageCode: "nb"
-}, I = p(f), E = ({ children: n, initialValue: e, debug: s, languageCode: t }) => {
+}, I = p(f), S = ({ children: n, initialValue: e, debug: s, languageCode: t }) => {
   const [u, d] = a(e?.currentId || ""), [c, r] = a(e?.previousId || "");
   return /* @__PURE__ */ l(
     I.Provider,
@@ -32,7 +33,7 @@ const f = {
       children: /* @__PURE__ */ l(x, { children: n })
     }
   );
-}, S = () => {
+}, $ = () => {
   const n = C(I);
   if (!n)
     throw new Error("useRootContext must be used within a RootProvider.");
@@ -55,6 +56,6 @@ const f = {
   };
 };
 export {
-  E as RootProvider,
-  S as useRootContext
+  S as RootProvider,
+  $ as useRootContext
 };

package/dist/components/Search/SearchItem.js

@@ -4,17 +4,18 @@ import "react";
 import { Heading as m } from "../Typography/Heading.js";
 import "../Button/Button.js";
 import { Byline as l } from "../Byline/Byline.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { ListItemBase as p } from "../List/ListItemBase.js";
 import { ListItemHeader as c } from "../List/ListItemHeader.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/SearchItem.css';const h = "_item_kjtr0_1", d = {
   item: h
-}, B = ({ color: o = "neutral", size: s, title: r, summary: i, owner: e, category: g, ...a }) => /* @__PURE__ */ t(p, { className: d.item, color: o, size: s, children: /* @__PURE__ */ n(c, { ...a, children: [
-  r && /* @__PURE__ */ t(m, { as: "h2", size: "lg", weight: "bold", children: r }),
-  e && /* @__PURE__ */ t(l, { avatar: e, children: e?.name }),
+}, H = ({ color: o = "neutral", size: s, title: e, summary: i, owner: r, category: g, ...a }) => /* @__PURE__ */ t(p, { className: d.item, color: o, size: s, children: /* @__PURE__ */ n(c, { ...a, children: [
+  e && /* @__PURE__ */ t(m, { as: "h2", size: "lg", weight: "bold", children: e }),
+  r && /* @__PURE__ */ t(l, { avatar: r, children: r?.name }),
   i && /* @__PURE__ */ t(m, { as: "h3", size: "sm", variant: "subtle", weight: "normal", style: { marginTop: ".5em" }, children: i })
 ] }) });
 export {
-  B as SearchItem
+  H as SearchItem
 };

package/dist/components/Searchbar/Autocomplete.js

@@ -3,6 +3,7 @@ import { useRef as B, Fragment as C } from "react";
 import "../../index-p1eeF8LQ.js";
 import { useMenu as P } from "../../hooks/useMenu.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { MenuList as k } from "../Menu/MenuList.js";
 import { MenuListItem as y } from "../Menu/MenuListItem.js";
@@ -11,7 +12,7 @@ import { MenuListHeading as F } from "../Menu/MenuListHeading.js";
 import { AutocompleteBase as H } from "./AutocompleteBase.js";
 import { AutocompleteItem as K } from "./AutocompleteItem.js";
 import "../Snackbar/useSnackbar.js";
-const V = ({
+const W = ({
   className: u,
   items: c,
   id: d,
@@ -52,5 +53,5 @@ const V = ({
   }) }) });
 };
 export {
-  V as Autocomplete
+  W as Autocomplete
 };

package/dist/components/Searchbar/AutocompleteItem.js

@@ -3,13 +3,14 @@ import { Badge as n } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { MenuItem as e } from "../Menu/MenuItem.js";
 import { QueryLabel as l } from "./QueryLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/AutocompleteItem.css';const s = "_item_4v2ol_1", f = {
+import '../../assets/AutocompleteItem.css';const s = "_item_4v2ol_1", p = {
   item: s
-}, B = ({
+}, L = ({
   role: o = "menuitem",
   params: c,
   badge: m,
@@ -32,12 +33,12 @@ import '../../assets/AutocompleteItem.css';const s = "_item_4v2ol_1", f = {
     ...i,
     role: o,
     label: u,
-    className: f.item,
+    className: p.item,
     controls: m && /* @__PURE__ */ t(n, { ...m }),
     size: r || "md",
     linkIcon: !0
   }
 ) : /* @__PURE__ */ t(e, { ...i, role: o, controls: m && /* @__PURE__ */ t(n, { ...m }), size: r, linkIcon: !0 });
 export {
-  B as AutocompleteItem
+  L as AutocompleteItem
 };

package/dist/components/Searchbar/Searchbar.js

@@ -3,12 +3,13 @@ import { useState as g } from "react";
 import "../../index-p1eeF8LQ.js";
 import { useIsDesktop as h } from "../../hooks/useIsDesktop.js";
 import "../Button/Button.js";
+import "react-dom";
 import { useRootContext as I } from "../RootProvider/RootProvider.js";
 import { SearchbarBase as T } from "./SearchbarBase.js";
 import { SearchbarField as A } from "./SearchbarField.js";
 import { Autocomplete as B } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
-const N = ({
+const R = ({
   className: l,
   autocomplete: e,
   expanded: r = !1,
@@ -61,5 +62,5 @@ const N = ({
   );
 };
 export {
-  N as Searchbar
+  R as Searchbar
 };

package/dist/components/Searchbar/SearchbarField.js

@@ -4,6 +4,7 @@ import { c as S } from "../../index-p1eeF8LQ.js";
 import { useRef as N } from "react";
 import { Icon as v } from "../Icon/Icon.js";
 import { Button as o } from "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as z } from "../../MagnifyingGlass-bwVhw07z.js";
@@ -14,15 +15,15 @@ import '../../assets/SearchbarField.css';const E = "_field_uxhly_1", K = "_icon_
   input: j,
   clear: I,
   dismiss: M
-}, w = ({
+}, A = ({
   className: c,
   expanded: a,
   name: n = "q",
   value: i,
   placeholder: m = "Search",
   closeButtonAltText: u = "Close search",
-  clearButtonAltText: d = "Clear search",
-  onFocus: p,
+  clearButtonAltText: p = "Clear search",
+  onFocus: d,
   onBlur: f,
   onChange: h,
   onClear: _,
@@ -39,7 +40,7 @@ import '../../assets/SearchbarField.css';const E = "_field_uxhly_1", K = "_icon_
       "input",
       {
         ref: s,
-        onFocus: p,
+        onFocus: d,
         onBlur: f,
         name: n,
         value: i,
@@ -70,7 +71,7 @@ import '../../assets/SearchbarField.css';const E = "_field_uxhly_1", K = "_icon_
         className: t.clear,
         onClick: _,
         "data-testid": "search-button-clear",
-        "aria-label": d,
+        "aria-label": p,
         children: /* @__PURE__ */ e(l, {})
       }
     ) || a && /* @__PURE__ */ e(
@@ -88,5 +89,5 @@ import '../../assets/SearchbarField.css';const E = "_field_uxhly_1", K = "_icon_
   ] });
 };
 export {
-  w as SearchbarField
+  A as SearchbarField
 };

package/dist/components/Settings/BookmarksSettingsItem.js

@@ -4,6 +4,7 @@ import { useState as b } from "react";
 import { Button as d } from "../Button/Button.js";
 import { ButtonGroup as h } from "../Button/ButtonGroup.js";
 import { ContextMenu as z } from "../ContextMenu/ContextMenu.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { QueryLabel as k } from "../Searchbar/QueryLabel.js";
 import { TextField as C } from "../Forms/TextField.js";
@@ -11,7 +12,7 @@ import "../Snackbar/useSnackbar.js";
 import { SettingsItemBase as G } from "./SettingsItemBase.js";
 import { SettingsModal as j } from "./SettingsModal.js";
 import { S as M } from "../../MagnifyingGlass-bwVhw07z.js";
-const N = ({
+const O = ({
   id: u,
   icon: m = M,
   loading: x,
@@ -83,5 +84,5 @@ const N = ({
   );
 };
 export {
-  N as BookmarksSettingsItem
+  O as BookmarksSettingsItem
 };

package/dist/components/Settings/BookmarksSettingsList.js

@@ -4,6 +4,7 @@ import "../../index-p1eeF8LQ.js";
 import { Typography as h } from "../Typography/Typography.js";
 import { Heading as f } from "../Typography/Heading.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { Divider as k } from "../Divider/Divider.js";
 import { List as x } from "../List/List.js";
@@ -11,14 +12,14 @@ import "../Snackbar/useSnackbar.js";
 import { Flex as F } from "../Page/Flex.js";
 import { SettingsSection as S } from "./SettingsSection.js";
 import { BookmarksSettingsItem as u } from "./BookmarksSettingsItem.js";
-const $ = ({
+const q = ({
   loading: e,
   title: n,
   description: m,
   items: t,
   untitled: l = "Untitled bookmark",
-  expandedId: d,
-  onToggle: p
+  expandedId: p,
+  onToggle: d
 }) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ o(f, { size: "lg", children: n }),
   t.length > 0 && /* @__PURE__ */ i(F, { direction: "col", spacing: 4, children: [
@@ -31,8 +32,8 @@ const $ = ({
           key: r.id,
           title: r?.title || l,
           loading: e || r.loading,
-          onToggle: () => p?.(r.id),
-          expanded: d === r.id
+          onToggle: () => d?.(r.id),
+          expanded: p === r.id
         }
       )
     ] }, r.id)) }) }),
@@ -40,5 +41,5 @@ const $ = ({
   ] })
 ] });
 export {
-  $ as BookmarksSettingsList
+  q as BookmarksSettingsList
 };

package/dist/components/Settings/SettingsItem.js

@@ -2,17 +2,18 @@ import { jsx as e } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import { useState as s } from "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { Input as f } from "../Forms/Input.js";
 import "../Snackbar/useSnackbar.js";
 import { SettingsItemBase as i } from "./SettingsItemBase.js";
 import { SettingsModal as v } from "./SettingsModal.js";
-const C = ({
+const B = ({
   loading: c,
   variant: o = "default",
   id: a = "settings",
-  name: u,
-  checked: m,
+  name: m,
+  checked: u,
   onChange: d,
   modalProps: l,
   children: h,
@@ -51,9 +52,9 @@ const C = ({
               type: "checkbox",
               role: "switch",
               "aria-labelledby": a,
-              name: u,
+              name: m,
               value: t?.value,
-              checked: m,
+              checked: u,
               onChange: d,
               style: { marginRight: "0.5em" }
             }
@@ -102,5 +103,5 @@ const C = ({
   }
 };
 export {
-  C as SettingsItem
+  B as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -2,6 +2,7 @@ import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { ListItemBase as f } from "../List/ListItemBase.js";
 import { ListItemHeader as I } from "../List/ListItemHeader.js";
@@ -11,38 +12,38 @@ import '../../assets/SettingsItemBase.css';const k = "_item_lk1g7_1", N = "_labe
   item: k,
   label: N,
   header: j
-}, z = ({
-  ref: s,
+}, A = ({
+  ref: i,
   loading: t,
-  color: i,
+  color: s,
   size: l,
   expanded: r,
   icon: o,
   label: c,
   title: n,
   value: _,
-  description: b,
-  children: h,
-  highlightWords: p,
+  description: p,
+  children: b,
+  highlightWords: h,
   ...m
 }) => {
   const L = m.ariaLabel;
-  return /* @__PURE__ */ d(f, { ref: s, className: e.item, color: i, size: l, expanded: r, children: [
+  return /* @__PURE__ */ d(f, { ref: i, className: e.item, color: s, size: l, expanded: r, children: [
     /* @__PURE__ */ a(I, { ...m, loading: t, ariaLabel: L, className: e.header, icon: o, children: /* @__PURE__ */ a(
       g,
       {
         loading: t,
-        highlightWords: p,
+        highlightWords: h,
         className: e.label,
         title: n,
         value: _,
-        description: b,
+        description: p,
         children: c
       }
     ) }),
-    r && h
+    r && b
   ] });
 };
 export {
-  z as SettingsItemBase
+  A as SettingsItemBase
 };

package/dist/components/Settings/SettingsList.js

@@ -4,6 +4,7 @@ import "../../index-p1eeF8LQ.js";
 import { useMenu as f } from "../../hooks/useMenu.js";
 import { Heading as u } from "../Typography/Heading.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { Divider as h } from "../Divider/Divider.js";
 import { List as y } from "../List/List.js";
@@ -11,7 +12,7 @@ import "../Snackbar/useSnackbar.js";
 import { Flex as S } from "../Page/Flex.js";
 import { SettingsItem as v } from "./SettingsItem.js";
 import { SettingsSection as j } from "./SettingsSection.js";
-const M = ({ items: s, groups: p = {}, sortGroupBy: n }) => {
+const q = ({ items: s, groups: p = {}, sortGroupBy: n }) => {
   const { menu: c } = f({
     items: s,
     groups: p,
@@ -34,5 +35,5 @@ const M = ({ items: s, groups: p = {}, sortGroupBy: n }) => {
   }) });
 };
 export {
-  M as SettingsList
+  q as SettingsList
 };

package/dist/components/Settings/SettingsModal.js

@@ -5,12 +5,13 @@ import { Button as M } from "../Button/Button.js";
 import { ButtonIcon as k } from "../Button/ButtonIcon.js";
 import { ButtonLabel as x } from "../Button/ButtonLabel.js";
 import { ButtonGroup as g } from "../Button/ButtonGroup.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { ModalBase as j } from "../Modal/ModalBase.js";
 import { ModalHeader as y } from "../Modal/ModalHeader.js";
 import { ModalBody as E } from "../Modal/ModalBody.js";
-const C = ({
+const D = ({
   icon: n,
   title: p,
   description: c,
@@ -41,5 +42,5 @@ const C = ({
   ] })
 ] });
 export {
-  C as SettingsModal
+  D as SettingsModal
 };