@altinn/altinn-components 0.13.3 → 0.14.0

package/dist/components/Menu/MenuItemBase.js

@@ -1,63 +1,68 @@
-import { jsxs as i, jsx as c } from "react/jsx-runtime";
-import { c as v } from "../../index-L8X2o7IH.js";
-import { Badge as T } from "../Badge/Badge.js";
-import { Icon as j } from "../Icon/Icon.js";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { c as j } from "../../index-L8X2o7IH.js";
+import { Icon as B } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/MenuItemBase.css';const B = "_item_uwh99_1", k = "_content_uwh99_41", z = "_action_uwh99_49", E = "_linkText_uwh99_56", M = "_linkIcon_uwh99_61", b = "_media_uwh99_81", t = {
-  item: B,
-  content: k,
-  action: z,
-  linkText: E,
-  linkIcon: M,
-  media: b
-}, H = ({
-  as: d,
-  size: _,
-  color: l,
-  className: h,
-  href: p,
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { Badge as k } from "../Badge/Badge.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuItemBase.css';const z = "_item_1imot_1", E = "_content_1imot_41", M = "_action_1imot_49", b = "_linkText_1imot_56", g = "_linkIcon_1imot_61", t = {
+  item: z,
+  content: E,
+  action: M,
+  linkText: b,
+  linkIcon: g
+}, Q = ({
+  as: l,
+  color: d,
+  theme: _,
+  size: p,
+  className: x,
+  href: f,
   onClick: a,
   onKeyPress: e,
-  tabIndex: u = 0,
-  hidden: x,
-  disabled: o = !1,
-  active: f = !1,
-  selected: w = !1,
-  expanded: I = !1,
+  tabIndex: h = 0,
+  hidden: I,
+  disabled: m = !1,
+  active: N = !1,
+  selected: u = !1,
+  expanded: v = !1,
   linkIcon: n,
-  linkText: m,
+  linkText: c,
   badge: s,
-  children: N
-}) => /* @__PURE__ */ i(
-  d || "a",
+  children: T
+}) => /* @__PURE__ */ o(
+  l || "a",
   {
     role: "menuitem",
-    tabIndex: o ? "-1" : u ?? 0,
-    className: v(t.item, h),
-    "data-size": _,
-    "data-color": l,
-    "data-active": f,
-    "aria-hidden": x,
-    "aria-expanded": I,
-    "aria-disabled": o,
-    "aria-selected": w,
-    href: p,
+    tabIndex: m ? "-1" : h ?? 0,
+    className: j(t.item, x),
+    "data-size": p,
+    "data-color": d,
+    "data-theme": _,
+    "data-active": N,
+    "aria-hidden": I,
+    "aria-expanded": v,
+    "aria-disabled": m,
+    "aria-selected": u,
+    href: f,
     onKeyPress: (r) => {
       r.key === "Enter" && (a == null || a()), e == null || e(r);
     },
     onClick: a,
     children: [
-      /* @__PURE__ */ i("div", { className: t.content, children: [
-        N,
-        s && /* @__PURE__ */ c(T, { ...s })
+      /* @__PURE__ */ o("div", { className: t.content, children: [
+        T,
+        s && /* @__PURE__ */ i(k, { ...s })
       ] }),
-      n && /* @__PURE__ */ i("div", { className: t.action, children: [
-        m && /* @__PURE__ */ c("span", { className: t.linkText, children: m }),
-        n && /* @__PURE__ */ c(j, { name: n, className: t.linkIcon })
+      n && /* @__PURE__ */ o("div", { className: t.action, children: [
+        c && /* @__PURE__ */ i("span", { className: t.linkText, children: c }),
+        n && /* @__PURE__ */ i(B, { name: n, className: t.linkIcon })
       ] })
     ]
   }
 );
 export {
-  H as MenuItemBase
+  Q as MenuItemBase
 };

package/dist/components/Menu/MenuItemLabel.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as o, Fragment as c } from "react/jsx-runtime";
-import '../../assets/MenuItemLabel.css';const r = "_label_1ohd5_1", d = "_title_1ohd5_7", _ = "_description_1ohd5_35", s = {
-  label: r,
-  title: d,
-  description: _
-}, p = ({ size: t = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: a || /* @__PURE__ */ o(c, { children: [
-  /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, children: n || l }),
-  /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: i })
+import { jsx as e, jsxs as c, Fragment as r } from "react/jsx-runtime";
+import '../../assets/MenuItemLabel.css';const o = "_label_iwl5m_1", m = "_title_iwl5m_7", d = "_description_iwl5m_31", s = {
+  label: o,
+  title: m,
+  description: d
+}, p = ({ size: t = "sm", label: a, title: i, description: n, children: l }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: l || /* @__PURE__ */ c(r, { children: [
+  /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, children: i || a }),
+  /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: n })
 ] }) });
 export {
   p as MenuItemLabel

package/dist/components/Menu/MenuItemMedia.js

@@ -1,18 +1,18 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Icon as c } from "../Icon/Icon.js";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Badge as p } from "../Badge/Badge.js";
-import { Avatar as x } from "../Avatar/Avatar.js";
-import { AvatarGroup as _ } from "../Avatar/AvatarGroup.js";
+import { Avatar as _ } from "../Avatar/Avatar.js";
+import { AvatarGroup as g } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
+import { Badge as f } from "../Badge/Badge.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemMedia.css';const g = "_media_rtso6_1", u = "_icon_rtso6_22", f = "_badge_rtso6_55", i = {
-  media: g,
-  icon: u,
-  badge: f
+import '../../assets/MenuItemMedia.css';const u = "_media_16d9z_1", b = "_icon_16d9z_22", v = "_badge_16d9z_30", a = {
+  media: u,
+  icon: b,
+  badge: v
 }, m = {
   avatar: {
     xs: "xs",
@@ -26,19 +26,25 @@ import '../../assets/MenuItemMedia.css';const g = "_media_rtso6_1", u = "_icon_r
     md: "sm",
     lg: "md"
   }
-}, q = ({
-  size: s = "sm",
-  color: e,
-  icon: o,
-  avatar: r,
-  avatarGroup: a,
-  badge: d,
-  children: n
-}) => !o && !r && !a && !n ? null : /* @__PURE__ */ l("div", { className: i.media, "data-size": s, "data-color": o ? e : null, children: [
-  o && /* @__PURE__ */ t(c, { name: o, variant: e === "strong" ? "solid" : "outline", className: i.icon }) || r && /* @__PURE__ */ t(x, { ...r, size: m == null ? void 0 : m.avatar[s] }) || a && /* @__PURE__ */ t(_, { ...a, size: m == null ? void 0 : m.avatarGroup[s] }),
-  n,
-  d && /* @__PURE__ */ t(p, { className: i.badge, color: "alert", size: "xs", ...d })
-] });
+}, w = ({
+  theme: n,
+  size: e = "sm",
+  icon: t,
+  iconVariant: c,
+  avatar: s,
+  avatarGroup: o,
+  badge: i,
+  children: d
+}) => {
+  if (!t && !s && !o && !d)
+    return null;
+  const l = (s || o) && "transparent" || t && n;
+  return /* @__PURE__ */ p("div", { className: a.media, "data-theme": l, "data-size": e, children: [
+    t && /* @__PURE__ */ r(x, { name: t, variant: c, className: a.icon }) || s && /* @__PURE__ */ r(_, { ...s, size: m == null ? void 0 : m.avatar[e] }) || o && /* @__PURE__ */ r(g, { ...o, size: m == null ? void 0 : m.avatarGroup[e] }),
+    d,
+    i && /* @__PURE__ */ r(f, { className: a.badge, variant: "strong", color: "alert", size: "xs", ...i })
+  ] });
+};
 export {
-  q as MenuItemMedia
+  w as MenuItemMedia
 };

package/dist/components/Menu/MenuItems.js

@@ -1,74 +1,77 @@
 "use client";
-import { jsxs as a, jsx as i, Fragment as L } from "react/jsx-runtime";
-import { Fragment as k } from "react";
+import { jsxs as d, jsx as m, Fragment as k } from "react/jsx-runtime";
+import { Fragment as B } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { useMenu as B } from "../../hooks/useMenu.js";
+import { useMenu as E } from "../../hooks/useMenu.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { MenuItem as E } from "./MenuItem.js";
-import { MenuSearch as G } from "./MenuSearch.js";
-import { MenuHeader as H } from "./MenuHeader.js";
-import { MenuList as K, MenuListItem as d } from "./MenuBase.js";
 import "../RootProvider/RootProvider.js";
+import { MenuItem as G } from "./MenuItem.js";
+import { MenuSearch as H } from "./MenuSearch.js";
+import { MenuHeader as K } from "./MenuHeader.js";
+import { MenuList as S, MenuListItem as c } from "./MenuBase.js";
 import "../Snackbar/useSnackbar.js";
-const S = ({
+const _ = ({
   level: l = 0,
-  expanded: v,
-  search: o,
-  items: b,
-  groups: f = {},
-  defaultItemColor: x,
+  expanded: b,
+  search: f,
+  items: y,
+  groups: o = {},
+  defaultItemColor: h,
+  defaultItemTheme: x,
   defaultItemSize: M
 }) => {
-  const { menu: h } = B({
-    items: b,
-    groups: f,
+  const { menu: I } = E({
+    items: y,
+    groups: o,
     groupByKey: "groupId",
     keyboardEvents: !1
   });
-  return /* @__PURE__ */ a(K, { expanded: v, children: [
-    o && /* @__PURE__ */ i(G, { ...o }),
-    h.map((t, s) => {
-      const n = (t == null ? void 0 : t.props) || {}, { title: I, divider: y = !0 } = n, F = h[s + 1];
-      return /* @__PURE__ */ a(k, { children: [
-        (l > 0 || s) && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
-        I && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(H, { title: I }) }),
-        t == null ? void 0 : t.items.filter((r) => {
-          var m;
-          return !((m = r.props) != null && m.hidden);
-        }).map((r, m) => {
-          const { active: j } = r, { groupId: _, ...e } = r.props || {}, { expanded: c } = e, z = t == null ? void 0 : t.items[m + 1];
-          return /* @__PURE__ */ a(d, { role: "presentation", expanded: c, children: [
-            /* @__PURE__ */ i(
-              E,
+  return /* @__PURE__ */ d(S, { expanded: b, children: [
+    f && /* @__PURE__ */ m(H, { ...f }),
+    I.map((n, r) => {
+      const t = (n == null ? void 0 : n.props) || {}, { title: v, divider: F = !0 } = t, j = I[r + 1];
+      return /* @__PURE__ */ d(B, { children: [
+        (l > 0 || r) && F ? /* @__PURE__ */ m(c, { role: "separator" }) : "",
+        v && /* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(K, { title: v }) }),
+        n == null ? void 0 : n.items.filter((a) => {
+          var i;
+          return !((i = a.props) != null && i.hidden);
+        }).map((a, i) => {
+          const { active: z } = a, { groupId: $, ...e } = a.props || {}, { expanded: s } = e, L = n == null ? void 0 : n.items[i + 1];
+          return /* @__PURE__ */ d(c, { role: "presentation", expanded: s, children: [
+            /* @__PURE__ */ m(
+              G,
               {
                 ...e,
-                color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || x,
-                size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || M,
-                active: j,
+                color: (e == null ? void 0 : e.color) || (t == null ? void 0 : t.defaultItemColor) || h,
+                theme: (e == null ? void 0 : e.theme) || (t == null ? void 0 : t.defaultItemTheme) || x,
+                size: (e == null ? void 0 : e.size) || (t == null ? void 0 : t.defaultItemSize) || M,
+                active: z,
                 tabIndex: e != null && e.disabled ? -1 : 0
               }
             ),
-            c && (e == null ? void 0 : e.items) && /* @__PURE__ */ a(L, { children: [
-              /* @__PURE__ */ i(
-                S,
+            s && (e == null ? void 0 : e.items) && /* @__PURE__ */ d(k, { children: [
+              /* @__PURE__ */ m(
+                _,
                 {
-                  expanded: c,
+                  expanded: s,
                   level: l + 1,
                   items: e == null ? void 0 : e.items,
-                  groups: f,
-                  defaultItemColor: x,
+                  groups: o,
+                  defaultItemColor: h,
+                  defaultItemTheme: x,
                   defaultItemSize: M
                 }
               ),
-              (F || z) && /* @__PURE__ */ i(d, { role: "separator", as: "div" })
+              (j || L) && /* @__PURE__ */ m(c, { role: "separator", as: "div" })
             ] })
-          ] }, m);
+          ] }, i);
         })
-      ] }, s);
+      ] }, r);
     })
   ] });
 };
 export {
-  S as MenuItems
+  _ as MenuItems
 };

package/dist/components/Menu/MenuOption.js

@@ -1,32 +1,36 @@
-import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItemBase as b } from "./MenuItemBase.js";
+import { MenuItemLabel as f } from "./MenuItemLabel.js";
+import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-import { CheckboxIcon as b } from "../Icon/CheckboxIcon.js";
-import { RadioIcon as f } from "../Icon/RadioIcon.js";
-import { MenuItemBase as d } from "./MenuItemBase.js";
-import { MenuItemLabel as x } from "./MenuItemLabel.js";
-import '../../assets/MenuOption.css';const I = "_label_dg58p_1", N = "_input_dg58p_5", g = "_icon_dg58p_10", t = {
+import { CheckboxIcon as v } from "../Icon/CheckboxIcon.js";
+import { RadioIcon as x } from "../Icon/RadioIcon.js";
+import '../../assets/MenuOption.css';const I = "_label_cv7w3_1", N = "_input_cv7w3_5", h = "_icon_cv7w3_10", r = {
   label: I,
   input: N,
-  icon: g
-}, O = ({
-  size: r = "sm",
-  type: e,
-  name: s,
-  value: i,
-  label: l,
-  title: a,
-  description: m,
+  icon: h
+}, A = ({
+  size: n = "sm",
+  type: i,
+  name: m,
+  value: e,
+  label: s,
+  title: l,
+  description: a,
   badge: c,
   checked: o = !1,
   disabled: p,
   onChange: u
-}) => /* @__PURE__ */ _(d, { className: t.label, disabled: p, selected: o, size: r, badge: c, as: "label", children: [
-  /* @__PURE__ */ n("input", { className: t.input, name: s, value: i, type: e, checked: o, onChange: u }),
-  e === "checkbox" && /* @__PURE__ */ n(b, { checked: o, hover: !0, className: t.icon }),
-  e === "radio" && /* @__PURE__ */ n(f, { checked: o, hover: !0, className: t.icon }),
-  /* @__PURE__ */ n(x, { title: a, description: m, size: r, children: l })
+}) => /* @__PURE__ */ _(b, { className: r.label, disabled: p, selected: o, size: n, badge: c, as: "label", children: [
+  /* @__PURE__ */ t("input", { className: r.input, name: m, value: e, type: i, checked: o, onChange: u }),
+  i === "checkbox" && /* @__PURE__ */ t(v, { checked: o, hover: !0, className: r.icon }),
+  i === "radio" && /* @__PURE__ */ t(x, { checked: o, hover: !0, className: r.icon }),
+  /* @__PURE__ */ t(f, { title: l, description: a, size: n, children: s })
 ] });
 export {
-  O as MenuOption
+  A as MenuOption
 };

package/dist/components/Menu/MenuSearch.js

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { Icon as a } from "../Icon/Icon.js";
+import { Icon as r } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
@@ -7,36 +7,26 @@ import "../Autocomplete/AutocompleteBase.js";
 import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py0_7", _ = "_input_10py0_16", f = "_clear_10py0_33", o = {
-  field: p,
-  icon: l,
-  input: _,
-  clear: f
-}, v = ({ value: c, name: n, placeholder: s = "Søk", onChange: r, onClear: t }) => /* @__PURE__ */ e("div", { className: o.field, children: [
+import '../../assets/MenuSearch.css';const l = "_field_15uca_1", p = "_icon_15uca_6", u = "_input_15uca_15", _ = "_clear_15uca_31", o = {
+  field: l,
+  icon: p,
+  input: u,
+  clear: _
+}, v = ({ value: t, name: n, placeholder: s = "Søk", onChange: a, onClear: c }) => /* @__PURE__ */ e("div", { className: o.field, children: [
   /* @__PURE__ */ i(
     "input",
     {
       type: "search",
-      value: c,
+      value: t,
       name: n,
       placeholder: s,
       className: o.input,
-      onChange: r,
+      onChange: a,
       autoComplete: "off"
     }
   ),
-  /* @__PURE__ */ i(a, { name: "magnifying-glass", className: o.icon }),
-  t && /* @__PURE__ */ i(
-    m,
-    {
-      icon: "x-mark",
-      color: "secondary",
-      variant: "solid",
-      size: "custom",
-      className: o.clear,
-      onClick: t
-    }
-  )
+  /* @__PURE__ */ i(r, { name: "magnifying-glass", className: o.icon }),
+  c && /* @__PURE__ */ i(m, { icon: "x-mark", variant: "solid", size: "custom", className: o.clear, onClick: c })
 ] });
 export {
   v as MenuSearch

package/dist/components/Meta/MetaItemBase.js

@@ -1,9 +1,9 @@
-import { jsx as _ } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
-import '../../assets/MetaItemBase.css';const v = "_item_suzps_1", x = "_reverse_suzps_27", e = {
-  item: v,
+import { jsx as v } from "react/jsx-runtime";
+import { c as _ } from "../../index-L8X2o7IH.js";
+import '../../assets/MetaItemBase.css';const d = "_item_1qvb3_1", x = "_reverse_1qvb3_27", e = {
+  item: d,
   reverse: x
-}, f = ({
+}, q = ({
   as: t,
   reverse: s,
   variant: r = "text",
@@ -14,7 +14,7 @@ import '../../assets/MetaItemBase.css';const v = "_item_suzps_1", x = "_reverse_
   className: c,
   children: i,
   ...p
-}) => /* @__PURE__ */ _(
+}) => /* @__PURE__ */ v(
   t || "span",
   {
     "data-size": a,
@@ -22,11 +22,11 @@ import '../../assets/MetaItemBase.css';const v = "_item_suzps_1", x = "_reverse_
     "data-variant": r,
     "data-progress": m,
     dateTime: n,
-    className: d(e.item, { [e.reverse]: s }, c),
+    className: _(e.item, { [e.reverse]: s }, c),
     ...p,
     children: i
   }
 );
 export {
-  f as MetaItemBase
+  q as MetaItemBase
 };

package/dist/components/Page/Breadcrumbs.js

@@ -6,18 +6,18 @@ import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { BreadcrumbsLink as m } from "./BreadcrumbsLink.js";
-import '../../assets/Breadcrumbs.css';const a = "_list_8q7kr_1", p = "_item_8q7kr_12", _ = "_icon_8q7kr_18", i = {
+import { BreadcrumbsLink as c } from "./BreadcrumbsLink.js";
+import '../../assets/Breadcrumbs.css';const a = "_list_tknjf_1", p = "_item_tknjf_12", _ = "_icon_tknjf_18", i = {
   list: a,
   item: p,
   icon: _
-}, j = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: i.list, children: t.map((n, o) => {
-  const { label: s, ...c } = n;
+}, B = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: i.list, children: t.map((m, o) => {
+  const { label: n, ...s } = m;
   return (t == null ? void 0 : t.length) > o + 1 ? /* @__PURE__ */ l("li", { className: i.item, children: [
-    /* @__PURE__ */ r(m, { ...c, children: s }),
+    /* @__PURE__ */ r(c, { ...s, children: n }),
     /* @__PURE__ */ r(e, { name: "arrow-right", className: i.icon })
-  ] }, o) : /* @__PURE__ */ r("li", { className: i.item, children: /* @__PURE__ */ r(m, { ...c, as: "span", children: s }) }, o);
+  ] }, o) : /* @__PURE__ */ r("li", { className: i.item, children: /* @__PURE__ */ r(c, { ...s, as: "span", children: n }) }, o);
 }) });
 export {
-  j as Breadcrumbs
+  B as Breadcrumbs
 };

package/dist/components/Page/BreadcrumbsLink.js

@@ -1,6 +1,6 @@
 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 = {
+import '../../assets/BreadcrumbsLink.css';const m = "_link_afpoj_1", p = {
   link: m
 }, x = ({
   as: o,
@@ -18,7 +18,7 @@ import '../../assets/BreadcrumbsLink.css';const m = "_link_znbj7_1", k = {
     "aria-selected": e,
     "aria-disabled": n,
     disabled: n,
-    className: l(k.link, s),
+    className: l(p.link, s),
     ...c,
     children: a || t
   }

package/dist/components/Page/Flex.js

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