@recursica/mantine-adapter 0.10.0 → 0.12.0

package/dist/mantine-adapter.js

@@ -1,7 +1,7 @@
-import { jsx as o, jsxs as D, Fragment as so } from "react/jsx-runtime";
-import j, { forwardRef as f, useId as qo, useEffect as Oo } from "react";
-import { Accordion as no, Avatar as Yo, Badge as Ho, Breadcrumbs as Ko, Button as Uo, Card as co, Input as vo, Box as Co, Checkbox as go, Chip as Zo, Container as Qo, Select as Xo, Flex as Jo, Group as oe, Loader as ee, Radio as xo, Stack as te, Switch as wo, CheckIcon as re, CloseIcon as se, Text as ae, Textarea as ne, Title as ce } from "@mantine/core";
-const ie = [
+import { jsx as e, jsxs as E, Fragment as ie } from "react/jsx-runtime";
+import B, { forwardRef as $, useId as no, useEffect as lo } from "react";
+import { Accordion as ye, Avatar as co, Badge as io, Breadcrumbs as po, Button as mo, Card as he, Input as Ae, Box as Ce, Checkbox as Se, Chip as uo, Container as _o, Select as bo, Flex as yo, Group as ho, Loader as fo, Menu as q, Radio as Te, Stack as No, Switch as Ie, CheckIcon as $o, CloseIcon as vo, Text as Co, Textarea as go, Title as xo } from "@mantine/core";
+const wo = [
   "className",
   "classNames",
   "style",
@@ -45,7 +45,7 @@ const ie = [
   "mih",
   "mah"
   // Dimensions
-], le = /* @__PURE__ */ new Set([
+], Po = /* @__PURE__ */ new Set([
   "m",
   "my",
   "mx",
@@ -60,7 +60,7 @@ const ie = [
   "left",
   "bottom",
   "right"
-]), fo = {
+]), Pe = {
   "rec-none": "var(--recursica_brand_dimensions_general_none)",
   "rec-sm": "var(--recursica_brand_dimensions_general_sm)",
   "rec-default": "var(--recursica_brand_dimensions_general_default)",
@@ -69,420 +69,418 @@ const ie = [
   "rec-xl": "var(--recursica_brand_dimensions_general_xl)",
   "rec-2xl": "var(--recursica_brand_dimensions_general_2xl)"
 };
-function N(e, t) {
-  if (t)
-    return e;
-  const s = { ...e };
-  for (const c of ie)
-    c in s && delete s[c];
-  for (const [c, a] of Object.entries(s))
-    typeof a == "string" && a.startsWith("rec-") && le.has(c) && a in fo && (s[c] = fo[a]);
-  return s;
+function v(r, o) {
+  if (o)
+    return r;
+  const n = { ...r };
+  for (const s of wo)
+    s in n && delete n[s];
+  for (const [s, t] of Object.entries(n))
+    typeof t == "string" && t.startsWith("rec-") && Po.has(s) && t in Pe && (n[s] = Pe[t]);
+  return n;
 }
-const de = "Accordion-module__root___Dem6d", pe = "Accordion-module__item___7ryVk", _e = "Accordion-module__noDivider___Ni2tT", me = "Accordion-module__control___b4wgX", ue = "Accordion-module__label___Ss7uW", be = "Accordion-module__chevron___i-HVZ", he = "Accordion-module__iconLeftWrapper___5oLen", $e = "Accordion-module__panel___Wx50w", fe = "Accordion-module__content___PEM9t", Y = {
-  root: de,
-  item: pe,
-  noDivider: _e,
-  control: me,
-  label: ue,
-  chevron: be,
-  iconLeftWrapper: he,
-  panel: $e,
-  content: fe
-}, Po = function({
-  variant: t = "unstyled",
-  overStyled: s = !1,
-  ...c
+const Wo = "Accordion-module__root___Dem6d", ko = "Accordion-module__item___7ryVk", Ao = "Accordion-module__noDivider___Ni2tT", So = "Accordion-module__control___b4wgX", To = "Accordion-module__label___Ss7uW", Io = "Accordion-module__chevron___i-HVZ", Lo = "Accordion-module__iconLeftWrapper___5oLen", Ro = "Accordion-module__panel___Wx50w", Oo = "Accordion-module__content___PEM9t", H = {
+  root: Wo,
+  item: ko,
+  noDivider: Ao,
+  control: So,
+  label: To,
+  chevron: Io,
+  iconLeftWrapper: Lo,
+  panel: Ro,
+  content: Oo
+}, Le = function({
+  variant: o = "unstyled",
+  overStyled: n = !1,
+  ...s
 }) {
-  const a = N(c, s), n = {
-    root: Y.root,
-    item: Y.item,
-    control: Y.control,
-    label: Y.label,
-    chevron: Y.chevron,
-    panel: Y.panel,
-    content: Y.content
-  }, l = a.classNames;
-  if (l && typeof l == "object" && !Array.isArray(l)) {
-    const i = l;
-    Object.keys(i).forEach((r) => {
-      n[r] ? n[r] = `${n[r]} ${i[r]}` : n[r] = i[r];
+  const t = v(s, n), a = {
+    root: H.root,
+    item: H.item,
+    control: H.control,
+    label: H.label,
+    chevron: H.chevron,
+    panel: H.panel,
+    content: H.content
+  }, c = t.classNames;
+  if (c && typeof c == "object" && !Array.isArray(c)) {
+    const d = c;
+    Object.keys(d).forEach((i) => {
+      a[i] ? a[i] = `${a[i]} ${d[i]}` : a[i] = d[i];
     });
   }
-  const d = a.className;
-  return /* @__PURE__ */ o(
-    no,
+  const l = t.className;
+  return /* @__PURE__ */ e(
+    ye,
     {
-      variant: t,
-      className: d,
-      classNames: n,
-      ...a
+      variant: o,
+      className: l,
+      classNames: a,
+      ...t
     }
   );
 };
-Po.displayName = "Accordion";
-const Wo = f(function({ title: t, leftIcon: s, divider: c = !0, children: a, overStyled: n = !1, ...l }, d) {
-  const i = N(l, n), r = i.className, p = [c ? void 0 : Y.noDivider, r].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ o(
-    no.Item,
+Le.displayName = "Accordion";
+const Re = $(function({ title: o, leftIcon: n, divider: s = !0, children: t, overStyled: a = !1, ...c }, l) {
+  const d = v(c, a), i = d.className, p = [s ? void 0 : H.noDivider, i].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ e(
+    ye.Item,
     {
-      ref: d,
+      ref: l,
       className: p,
-      ...i,
-      children: t ? /* @__PURE__ */ D(so, { children: [
-        /* @__PURE__ */ o(uo, { leftIcon: s, children: t }),
-        /* @__PURE__ */ o(bo, { children: a })
-      ] }) : a
+      ...d,
+      children: o ? /* @__PURE__ */ E(ie, { children: [
+        /* @__PURE__ */ e(ge, { leftIcon: n, children: o }),
+        /* @__PURE__ */ e(xe, { children: t })
+      ] }) : t
     }
   );
 });
-Wo.displayName = "AccordionItem";
-const uo = f(function({ leftIcon: t, children: s, overStyled: c = !1, ...a }, n) {
-  const l = N(a, c), d = l.className;
-  return /* @__PURE__ */ o(
-    no.Control,
+Re.displayName = "AccordionItem";
+const ge = $(function({ leftIcon: o, children: n, overStyled: s = !1, ...t }, a) {
+  const c = v(t, s), l = c.className;
+  return /* @__PURE__ */ e(
+    ye.Control,
     {
-      ref: n,
-      className: d,
-      icon: t ? /* @__PURE__ */ o("span", { className: Y.iconLeftWrapper, "aria-hidden": !0, children: t }) : void 0,
-      ...l,
-      children: s
+      ref: a,
+      className: l,
+      icon: o ? /* @__PURE__ */ e("span", { className: H.iconLeftWrapper, "aria-hidden": !0, children: o }) : void 0,
+      ...c,
+      children: n
     }
   );
 });
-uo.displayName = "AccordionControl";
-const bo = f(function({ overStyled: t = !1, ...s }, c) {
-  const a = N(s, t), n = a.className;
-  return /* @__PURE__ */ o(
-    no.Panel,
+ge.displayName = "AccordionControl";
+const xe = $(function({ overStyled: o = !1, ...n }, s) {
+  const t = v(n, o), a = t.className;
+  return /* @__PURE__ */ e(
+    ye.Panel,
     {
-      ref: c,
-      className: n,
-      ...a
+      ref: s,
+      className: a,
+      ...t
     }
   );
 });
-bo.displayName = "AccordionPanel";
-const ho = Po;
-ho.Item = Wo;
-ho.Control = uo;
-ho.Panel = bo;
-const Ne = "Avatar-module__root___fXu-J", ye = "Avatar-module__iconWrapper___ojly2", ve = "Avatar-module__textWrapper___zp-jD", Ce = "Avatar-module__image___ieqGp", ge = "Avatar-module__placeholder___IDW7-", G = {
-  root: Ne,
-  iconWrapper: ye,
-  textWrapper: ve,
-  image: Ce,
-  placeholder: ge
-}, xe = f(function({
-  size: t = "default",
-  variant: s = "solid",
-  icon: c,
-  className: a,
-  classNames: n,
-  children: l,
-  style: d,
-  src: i,
-  ...r
+xe.displayName = "AccordionPanel";
+const we = Le;
+we.Item = Re;
+we.Control = ge;
+we.Panel = xe;
+const zo = "Avatar-module__root___fXu-J", Mo = "Avatar-module__iconWrapper___ojly2", Fo = "Avatar-module__textWrapper___zp-jD", Eo = "Avatar-module__image___ieqGp", Bo = "Avatar-module__placeholder___IDW7-", V = {
+  root: zo,
+  iconWrapper: Mo,
+  textWrapper: Fo,
+  image: Eo,
+  placeholder: Bo
+}, jo = $(function({
+  size: o = "default",
+  variant: n = "solid",
+  icon: s,
+  className: t,
+  classNames: a,
+  children: c,
+  style: l,
+  src: d,
+  ...i
 }, p) {
-  const m = {
+  const u = {
     solid: "filled",
     outline: "outline",
     ghost: "transparent"
-  }, u = {
+  }, y = {
     default: "md",
     small: "sm",
     large: "lg"
   };
-  let _ = "text";
-  i ? _ = "image" : c && (_ = "icon");
-  const h = {
-    root: G.root,
-    image: G.image,
-    placeholder: G.placeholder
+  let m = "text";
+  d ? m = "image" : s && (m = "icon");
+  const _ = {
+    root: V.root,
+    image: V.image,
+    placeholder: V.placeholder
   };
-  if (n && typeof n == "object" && !Array.isArray(n)) {
-    const b = n;
-    h.root = b.root ? `${G.root} ${b.root}` : G.root, h.image = b.image ? `${G.image} ${b.image}` : G.image, h.placeholder = b.placeholder ? `${G.placeholder} ${b.placeholder}` : G.placeholder;
+  if (a && typeof a == "object" && !Array.isArray(a)) {
+    const h = a;
+    _.root = h.root ? `${V.root} ${h.root}` : V.root, _.image = h.image ? `${V.image} ${h.image}` : V.image, _.placeholder = h.placeholder ? `${V.placeholder} ${h.placeholder}` : V.placeholder;
   }
-  return /* @__PURE__ */ o(
-    Yo,
+  return /* @__PURE__ */ e(
+    co,
     {
       ref: p,
-      className: a,
-      classNames: h,
-      variant: m[s],
-      size: u[t],
-      style: d,
-      src: i,
-      "data-variant": s,
-      "data-size": t,
-      "data-style": _,
-      ...r,
-      children: c != null ? /* @__PURE__ */ o("span", { className: G.iconWrapper, "aria-hidden": !0, children: c }) : l != null ? /* @__PURE__ */ o("span", { className: G.textWrapper, children: l }) : void 0
+      className: t,
+      classNames: _,
+      variant: u[n],
+      size: y[o],
+      style: l,
+      src: d,
+      "data-variant": n,
+      "data-size": o,
+      "data-style": m,
+      ...i,
+      children: s != null ? /* @__PURE__ */ e("span", { className: V.iconWrapper, "aria-hidden": !0, children: s }) : c != null ? /* @__PURE__ */ e("span", { className: V.textWrapper, children: c }) : void 0
     }
   );
 });
-xe.displayName = "Avatar";
-const we = "Badge-module__root___5osNT", q = {
-  root: we
-}, Pe = f(function({ variant: t = "primary-color", overStyled: s = !1, ...c }, a) {
-  const n = N(c, s), l = {
-    root: q.root,
-    section: q.section,
-    label: q.label
-  }, d = n.classNames;
-  if (d && typeof d == "object" && !Array.isArray(d)) {
-    const p = d;
-    l.root = p.root ? `${q.root} ${p.root}` : q.root, l.section = p.section ?? q.section, l.label = p.label ?? q.label;
+jo.displayName = "Avatar";
+const Do = "Badge-module__root___5osNT", Y = {
+  root: Do
+}, Vo = $(function({ variant: o = "primary-color", overStyled: n = !1, ...s }, t) {
+  const a = v(s, n), c = {
+    root: Y.root,
+    section: Y.section,
+    label: Y.label
+  }, l = a.classNames;
+  if (l && typeof l == "object" && !Array.isArray(l)) {
+    const p = l;
+    c.root = p.root ? `${Y.root} ${p.root}` : Y.root, c.section = p.section ?? Y.section, c.label = p.label ?? Y.label;
   }
-  const i = n.className, r = i ? `${q.root} ${i}` : q.root;
-  return /* @__PURE__ */ o(
-    Ho,
+  const d = a.className, i = d ? `${Y.root} ${d}` : Y.root;
+  return /* @__PURE__ */ e(
+    io,
     {
-      ref: a,
+      ref: t,
       variant: "filled",
-      "data-variant": t,
-      ...n,
-      className: r,
-      classNames: l
+      "data-variant": o,
+      ...a,
+      className: i,
+      classNames: c
     }
   );
 });
-Pe.displayName = "Badge";
-const We = "Breadcrumb-module__root___x-9ln", ke = "Breadcrumb-module__separator___qrUX-", K = {
-  root: We,
-  separator: ke
-}, Ae = f(
-  function({ overStyled: t = !1, separator: s = ">", ...c }, a) {
-    const n = N(
-      { separator: s, ...c },
-      t
-    ), l = {
-      root: K.root,
-      separator: K.separator
-    }, d = n.classNames;
-    if (d && typeof d == "object" && !Array.isArray(d)) {
-      const p = d;
-      l.root = p.root ? `${K.root} ${p.root}` : K.root, l.separator = p.separator ? `${K.separator} ${p.separator}` : K.separator;
+Vo.displayName = "Badge";
+const Go = "Breadcrumb-module__root___x-9ln", qo = "Breadcrumb-module__separator___qrUX-", U = {
+  root: Go,
+  separator: qo
+}, Yo = $(
+  function({ overStyled: o = !1, separator: n = ">", ...s }, t) {
+    const a = v(
+      { separator: n, ...s },
+      o
+    ), c = {
+      root: U.root,
+      separator: U.separator
+    }, l = a.classNames;
+    if (l && typeof l == "object" && !Array.isArray(l)) {
+      const p = l;
+      c.root = p.root ? `${U.root} ${p.root}` : U.root, c.separator = p.separator ? `${U.separator} ${p.separator}` : U.separator;
     }
-    const i = n.className, r = i ? `${K.root} ${i}` : K.root;
-    return /* @__PURE__ */ o(
-      Ko,
+    const d = a.className, i = d ? `${U.root} ${d}` : U.root;
+    return /* @__PURE__ */ e(
+      po,
       {
-        ref: a,
-        ...n,
-        className: r,
-        classNames: l
+        ref: t,
+        ...a,
+        className: i,
+        classNames: c
       }
     );
   }
 );
-Ae.displayName = "Breadcrumb";
-const Re = "Button-module__root___Q2R8-", Se = "Button-module__label___UJ3Zt", Te = "Button-module__labelText___rFV5p", ze = "Button-module__iconWrapper___uEKPa", Ie = "Button-module__section___f2mKr", M = {
-  root: Re,
-  label: Se,
-  labelText: Te,
-  iconWrapper: ze,
-  section: Ie
+Yo.displayName = "Breadcrumb";
+const Zo = "Button-module__root___Q2R8-", Ho = "Button-module__label___UJ3Zt", Ko = "Button-module__labelText___rFV5p", Uo = "Button-module__iconWrapper___uEKPa", Xo = "Button-module__section___f2mKr", G = {
+  root: Zo,
+  label: Ho,
+  labelText: Ko,
+  iconWrapper: Uo,
+  section: Xo
 };
-function Fe(e) {
-  return e == null || e === "" ? !1 : typeof e == "string" ? e.trim() !== "" : !0;
+function Qo(r) {
+  return r == null || r === "" ? !1 : typeof r == "string" ? r.trim() !== "" : !0;
 }
-const Le = f(
+const Jo = $(
   function({
-    variant: t = "solid",
-    size: s = "default",
-    icon: c,
-    children: a,
-    overStyled: n = !1,
-    ...l
-  }, d) {
-    const i = {
+    variant: o = "solid",
+    size: n = "default",
+    icon: s,
+    children: t,
+    overStyled: a = !1,
+    ...c
+  }, l) {
+    const d = {
       solid: "filled",
       outline: "outline",
       text: "subtle"
-    }, r = {
+    }, i = {
       default: "md",
       small: "sm"
-    }, p = N(l, n), m = p;
-    delete m.fullWidth;
-    const u = !!c || !!m.leftSection, _ = !!m.rightSection, h = (u || _) && !Fe(a);
-    typeof process < "u" && process.env.NODE_ENV !== "production" && h && !m["aria-label"] && console.warn(
+    }, p = v(c, a), u = p;
+    delete u.fullWidth;
+    const y = !!s || !!u.leftSection, m = !!u.rightSection, _ = (y || m) && !Qo(t);
+    typeof process < "u" && process.env.NODE_ENV !== "production" && _ && !u["aria-label"] && console.warn(
       '[Recursica Button] Icon-only buttons must provide an accessible name. Pass aria-label (e.g. aria-label="Submit").'
     );
-    const b = {
-      root: M.root,
-      section: M.section,
-      label: M.label
-    }, C = m.classNames;
+    const h = {
+      root: G.root,
+      section: G.section,
+      label: G.label
+    }, C = u.classNames;
     if (C && typeof C == "object" && !Array.isArray(C)) {
-      const x = C;
-      b.root = x.root ? `${M.root} ${x.root}` : M.root, b.section = x.section ?? M.section, b.label = x.label ?? M.label;
+      const b = C;
+      h.root = b.root ? `${G.root} ${b.root}` : G.root, h.section = b.section ?? G.section, h.label = b.label ?? G.label;
     }
-    const $ = m.className, g = $ ? `${M.root} ${$}` : M.root;
-    return /* @__PURE__ */ o(
-      Uo,
+    const f = u.className, g = f ? `${G.root} ${f}` : G.root;
+    return /* @__PURE__ */ e(
+      mo,
       {
-        ref: d,
+        ref: l,
         className: g,
-        classNames: b,
-        variant: i[t],
-        size: r[s],
-        leftSection: c != null ? /* @__PURE__ */ o("span", { className: M.iconWrapper, "aria-hidden": !0, children: c }) : void 0,
-        "data-variant": t,
-        "data-size": s,
-        ...h ? { "data-icon-only": "" } : {},
+        classNames: h,
+        variant: d[o],
+        size: i[n],
+        leftSection: s != null ? /* @__PURE__ */ e("span", { className: G.iconWrapper, "aria-hidden": !0, children: s }) : void 0,
+        "data-variant": o,
+        "data-size": n,
+        ..._ ? { "data-icon-only": "" } : {},
         ...p,
-        children: /* @__PURE__ */ o("span", { className: M.labelText, children: a })
+        children: /* @__PURE__ */ e("span", { className: G.labelText, children: t })
       }
     );
   }
 );
-Le.displayName = "Button";
-const Be = "Card-module__root___c9KvZ", je = "Card-module__header___PTXf2", Ee = "Card-module__footer___Mu-JC", Ge = "Card-module__section___BRT8H", Me = "Card-module__content___oFIQa", H = {
-  root: Be,
-  header: je,
-  footer: Ee,
-  section: Ge,
-  content: Me
-}, ko = f(function({ overStyled: t = !1, ...s }, c) {
-  const a = N(s, t), n = {
-    root: H.root
-  }, l = a.classNames;
-  if (l && typeof l == "object" && !Array.isArray(l)) {
-    const i = l;
-    Object.keys(i).forEach((r) => {
-      n[r] ? n[r] = `${n[r]} ${i[r]}` : n[r] = i[r];
+Jo.displayName = "Button";
+const et = "Card-module__root___c9KvZ", ot = "Card-module__header___PTXf2", tt = "Card-module__footer___Mu-JC", rt = "Card-module__section___BRT8H", at = "Card-module__content___oFIQa", K = {
+  root: et,
+  header: ot,
+  footer: tt,
+  section: rt,
+  content: at
+}, Oe = $(function({ overStyled: o = !1, ...n }, s) {
+  const t = v(n, o), a = {
+    root: K.root
+  }, c = t.classNames;
+  if (c && typeof c == "object" && !Array.isArray(c)) {
+    const d = c;
+    Object.keys(d).forEach((i) => {
+      a[i] ? a[i] = `${a[i]} ${d[i]}` : a[i] = d[i];
     });
   }
-  const d = a.className;
-  return /* @__PURE__ */ o(
-    co,
+  const l = t.className;
+  return /* @__PURE__ */ e(
+    he,
     {
-      ref: c,
-      className: d,
-      classNames: n,
-      ...a
+      ref: s,
+      className: l,
+      classNames: a,
+      ...t
     }
   );
 });
-ko.displayName = "Card";
-const Ao = f(
-  function({ overStyled: t = !1, ...s }, c) {
-    const a = N(s, t), n = a.className;
-    return /* @__PURE__ */ o(
-      co.Section,
+Oe.displayName = "Card";
+const ze = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
+      he.Section,
       {
-        ref: c,
-        className: n ? `${H.section} ${n}` : H.section,
-        ...a
+        ref: s,
+        className: a ? `${K.section} ${a}` : K.section,
+        ...t
       }
     );
   }
 );
-Ao.displayName = "CardSection";
-const Ro = f(
-  function({ overStyled: t = !1, ...s }, c) {
-    const a = N(s, t), n = a.className;
-    return /* @__PURE__ */ o(
-      co.Section,
+ze.displayName = "CardSection";
+const Me = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
+      he.Section,
       {
-        ref: c,
-        className: n ? `${H.header} ${n}` : H.header,
-        ...a
+        ref: s,
+        className: a ? `${K.header} ${a}` : K.header,
+        ...t
       }
     );
   }
 );
-Ro.displayName = "CardHeader";
-const So = f(
-  function({ overStyled: t = !1, ...s }, c) {
-    const a = N(s, t), n = a.className;
-    return /* @__PURE__ */ o(
-      co.Section,
+Me.displayName = "CardHeader";
+const Fe = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
+      he.Section,
       {
-        ref: c,
-        className: n ? `${H.footer} ${n}` : H.footer,
-        ...a
+        ref: s,
+        className: a ? `${K.footer} ${a}` : K.footer,
+        ...t
       }
     );
   }
 );
-So.displayName = "CardFooter";
-const To = f(
-  function({ overStyled: t = !1, ...s }, c) {
-    const a = N(s, t), n = a.className;
-    return /* @__PURE__ */ o(
+Fe.displayName = "CardFooter";
+const Ee = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: c,
-        className: n ? `${H.content} ${n}` : H.content,
-        ...a
+        ref: s,
+        className: a ? `${K.content} ${a}` : K.content,
+        ...t
       }
     );
   }
 );
-To.displayName = "CardContent";
-const io = ko;
-io.Section = Ao;
-io.Header = Ro;
-io.Footer = So;
-io.Content = To;
-const De = "Label-module__root___e6HXZ", Ve = "Label-module__labelText___rieFR", qe = "Label-module__required___Ggrzc", Oe = "Label-module__optionalText___Y2yun", Ye = "Label-module__actionAreaWrapper___ELoZK", He = "Label-module__editIconWrapper___NG2xW", E = {
-  root: De,
-  labelText: Ve,
-  required: qe,
-  optionalText: Oe,
-  actionAreaWrapper: Ye,
-  editIconWrapper: He
-}, zo = f(function({
-  formLayout: t = "stacked",
-  labelSize: s = "default",
-  labelAlignment: c,
-  required: a = !1,
-  labelOptionalText: n,
-  labelWithEditIcon: l,
-  labelActionArea: d,
-  onLabelEditClick: i,
-  children: r,
-  overStyled: p = !1,
-  ...m
+Ee.displayName = "CardContent";
+const fe = Oe;
+fe.Section = ze;
+fe.Header = Me;
+fe.Footer = Fe;
+fe.Content = Ee;
+const st = "Label-module__root___e6HXZ", nt = "Label-module__labelText___rieFR", lt = "Label-module__required___Ggrzc", ct = "Label-module__optionalText___Y2yun", it = "Label-module__actionAreaWrapper___ELoZK", dt = "Label-module__editIconWrapper___NG2xW", D = {
+  root: st,
+  labelText: nt,
+  required: lt,
+  optionalText: ct,
+  actionAreaWrapper: it,
+  editIconWrapper: dt
+}, Be = $(function({
+  labelSize: o = "default",
+  labelAlignment: n,
+  required: s = !1,
+  labelOptionalText: t,
+  labelWithEditIcon: a,
+  labelActionArea: c,
+  onLabelEditClick: l,
+  children: d,
+  overStyled: i = !1,
+  ...p
 }, u) {
-  const _ = c || (t === "side-by-side" ? "right" : "left");
-  let h;
-  a || (n === !0 ? h = "optional" : n && (h = n));
-  const b = N(m, p), C = b, $ = {
-    label: E.root,
-    required: E.required
-  }, g = C.classNames;
-  if (g && typeof g == "object" && !Array.isArray(g)) {
-    const k = g;
-    $.label = k.label ? `${E.root} ${k.label}` : E.root, $.required = k.required ? `${E.required} ${k.required}` : E.required;
+  const y = n || "left";
+  let m;
+  s || (t === !0 ? m = "optional" : t && (m = t));
+  const _ = v(p, i), h = _, C = {
+    label: D.root,
+    required: D.required
+  }, f = h.classNames;
+  if (f && typeof f == "object" && !Array.isArray(f)) {
+    const P = f;
+    C.label = P.label ? `${D.root} ${P.label}` : D.root, C.required = P.required ? `${D.required} ${P.required}` : D.required;
   }
-  const x = C.className, W = x ? `${E.root} ${x}` : E.root;
-  return /* @__PURE__ */ D(
-    vo.Label,
+  const g = h.className, b = g ? `${D.root} ${g}` : D.root;
+  return /* @__PURE__ */ E(
+    Ae.Label,
     {
       ref: u,
-      className: W,
-      classNames: $,
-      "data-layout": t,
-      "data-size": s,
-      "data-alignment": _,
-      required: a && !l,
-      ...b,
+      className: b,
+      classNames: C,
+      "data-size": o,
+      "data-alignment": y,
+      required: s && !a,
+      ..._,
       children: [
-        /* @__PURE__ */ o("span", { className: E.labelText, children: r }),
-        h && /* @__PURE__ */ o("span", { className: E.optionalText, children: typeof h == "string" ? `(${h})` : h }),
-        d ? /* @__PURE__ */ o("span", { className: E.actionAreaWrapper, children: d }) : l ? /* @__PURE__ */ o(
+        /* @__PURE__ */ e("span", { className: D.labelText, children: d }),
+        m && /* @__PURE__ */ e("span", { className: D.optionalText, children: typeof m == "string" ? `(${m})` : m }),
+        c ? /* @__PURE__ */ e("span", { className: D.actionAreaWrapper, children: c }) : a ? /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            className: E.editIconWrapper,
-            "data-replaces-asterisk": a ? "true" : void 0,
-            onClick: i,
+            className: D.editIconWrapper,
+            "data-replaces-asterisk": s ? "true" : void 0,
+            onClick: l,
             "aria-label": "Edit",
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ e(
               "svg",
               {
                 width: "16",
@@ -490,7 +488,7 @@ const De = "Label-module__root___e6HXZ", Ve = "Label-module__labelText___rieFR",
                 viewBox: "0 0 16 16",
                 fill: "none",
                 xmlns: "http://www.w3.org/2000/svg",
-                children: /* @__PURE__ */ o(
+                children: /* @__PURE__ */ e(
                   "path",
                   {
                     d: "M11.5303 2.46967C11.8232 2.17678 12.2981 2.17678 12.591 2.46967L13.5303 3.40898C13.8232 3.70188 13.8232 4.17675 13.5303 4.46964L5.61288 12.3871C5.45268 12.5473 5.24434 12.6483 5.01809 12.6766L2.39534 13.0044C2.10091 13.0412 1.83856 12.7789 1.87538 12.4845L2.2032 9.86175C2.23147 9.63551 2.3325 9.42716 2.4927 9.26696L11.5303 2.46967Z",
@@ -507,12 +505,48 @@ const De = "Label-module__root___e6HXZ", Ve = "Label-module__labelText___rieFR",
     }
   );
 });
-zo.displayName = "Label";
-const Ke = "AssistiveElement-module__root___WhQ43", Ue = "AssistiveElement-module__textWrapper___sfy5E", Ze = "AssistiveElement-module__iconWrapper___gObRF", po = {
-  root: Ke,
-  textWrapper: Ue,
-  iconWrapper: Ze
-}, Qe = () => /* @__PURE__ */ D(
+Be.displayName = "Label";
+const pt = "FormControlLayout-module__root___yNDhZ", mt = "FormControlLayout-module__leftSection___GBM1r", ut = "FormControlLayout-module__rightSection___bcL4v", pe = {
+  root: pt,
+  leftSection: mt,
+  rightSection: ut
+}, X = $(function({
+  formLayout: o = "stacked",
+  labelSize: n = "default",
+  controlMaxWidth: s,
+  controlMinWidth: t,
+  leftSection: a,
+  children: c,
+  className: l,
+  style: d,
+  ...i
+}, p) {
+  const u = l ? `${pe.root} ${l}` : pe.root, m = a != null || o === "side-by-side";
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ref: p,
+      className: u,
+      "data-form-layout": o,
+      style: {
+        ...d,
+        ...s ? { "--form-control-max-width": s } : {},
+        ...t ? { "--form-control-min-width": t } : {}
+      },
+      ...i,
+      children: [
+        m && /* @__PURE__ */ e("div", { className: pe.leftSection, "data-size": n, children: a }),
+        /* @__PURE__ */ e("div", { className: pe.rightSection, children: c })
+      ]
+    }
+  );
+});
+X.displayName = "FormControlLayout";
+const _t = "AssistiveElement-module__root___WhQ43", bt = "AssistiveElement-module__textWrapper___sfy5E", yt = "AssistiveElement-module__iconWrapper___gObRF", $e = {
+  root: _t,
+  textWrapper: bt,
+  iconWrapper: yt
+}, ht = () => /* @__PURE__ */ E(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -523,12 +557,12 @@ const Ke = "AssistiveElement-module__root___WhQ43", Ue = "AssistiveElement-modul
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ o("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ o("path", { d: "M12 16v-4" }),
-      /* @__PURE__ */ o("path", { d: "M12 8h.01" })
+      /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ e("path", { d: "M12 16v-4" }),
+      /* @__PURE__ */ e("path", { d: "M12 8h.01" })
     ]
   }
-), Xe = () => /* @__PURE__ */ D(
+), ft = () => /* @__PURE__ */ E(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -539,271 +573,430 @@ const Ke = "AssistiveElement-module__root___WhQ43", Ue = "AssistiveElement-modul
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ o("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-      /* @__PURE__ */ o("path", { d: "M12 9v4" }),
-      /* @__PURE__ */ o("path", { d: "M12 17h.01" })
+      /* @__PURE__ */ e("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+      /* @__PURE__ */ e("path", { d: "M12 9v4" }),
+      /* @__PURE__ */ e("path", { d: "M12 17h.01" })
     ]
   }
-), mo = f(function({
-  assistiveVariant: t = "help",
-  assistiveWithIcon: s = !0,
-  children: c,
-  className: a,
-  overStyled: n = !1,
-  ...l
-}, d) {
-  const r = N(l, n), p = po.root, m = a ? `${p} ${a}` : p, u = t === "error" ? Xe : Qe;
-  return /* @__PURE__ */ D(
+), ve = $(function({
+  assistiveVariant: o = "help",
+  assistiveWithIcon: n = !0,
+  children: s,
+  className: t,
+  overStyled: a = !1,
+  ...c
+}, l) {
+  const i = v(c, a), p = $e.root, u = t ? `${p} ${t}` : p, y = o === "error" ? ft : ht;
+  return /* @__PURE__ */ E(
     "div",
     {
-      ref: d,
-      className: m,
-      "data-variant": t,
-      style: r.style,
-      ...r,
+      ref: l,
+      className: u,
+      "data-variant": o,
+      style: i.style,
+      ...i,
       children: [
-        s && /* @__PURE__ */ o("span", { className: po.iconWrapper, children: /* @__PURE__ */ o(u, {}) }),
-        /* @__PURE__ */ o("span", { className: po.textWrapper, children: c })
+        n && /* @__PURE__ */ e("span", { className: $e.iconWrapper, children: /* @__PURE__ */ e(y, {}) }),
+        /* @__PURE__ */ e("span", { className: $e.textWrapper, children: s })
       ]
     }
   );
 });
-mo.displayName = "AssistiveElement";
-const Je = "FormControlWrapper-module__root___c-UHo", ot = "FormControlWrapper-module__labelSection___hxSY4", et = "FormControlWrapper-module__inputSection___HenXk", _o = {
-  root: Je,
-  labelSection: ot,
-  inputSection: et
-}, V = f(function({
-  formLayout: t,
-  labelSize: s,
-  labelAlignment: c,
-  labelOptionalText: a,
-  labelWithEditIcon: n,
-  labelActionArea: l,
-  onLabelEditClick: d,
-  label: i,
-  description: r,
+ve.displayName = "AssistiveElement";
+const Nt = "FormControlWrapper-module__inputSection___HenXk", We = {
+  inputSection: Nt
+}, ue = $(function({
+  formLayout: o,
+  labelSize: n,
+  labelAlignment: s,
+  labelOptionalText: t,
+  labelWithEditIcon: a,
+  labelActionArea: c,
+  onLabelEditClick: l,
+  label: d,
+  description: i,
   assistiveText: p,
-  assistiveWithIcon: m = !0,
-  controlMaxWidth: u,
-  controlMinWidth: _,
-  error: h,
-  required: b,
+  assistiveWithIcon: u = !0,
+  controlMaxWidth: y,
+  controlMinWidth: m,
+  error: _,
+  required: h,
   withAsterisk: C,
-  id: $,
+  id: f,
   children: g,
-  className: x,
-  overStyled: W = !1,
-  labelElement: k,
+  className: b,
+  overStyled: P = !1,
+  labelElement: N,
   // Extracted safely preventing bleeding into HTML domains
   ...z
-}, S) {
-  const I = qo(), y = $ || `recursica-fc-${I}`, T = p || r, R = T ? `${y}-assistive` : void 0, A = h ? `${y}-error` : void 0, X = N(z, W), B = x || X.className, $o = _o.root, Do = B ? `${$o} ${B}` : $o, Vo = j.isValidElement(g) ? j.cloneElement(
+}, L) {
+  const A = no(), R = f || `recursica-fc-${A}`, O = p || i, S = O ? `${R}-assistive` : void 0, T = _ ? `${R}-error` : void 0, I = v(z, P), Q = b || I.className, de = We.root, j = Q ? `${de} ${Q}` : de, ao = B.isValidElement(g) ? B.cloneElement(
     g,
     {
-      ...T && !g.props["aria-describedby"] ? { "aria-describedby": R } : {},
-      ...h && !g.props["aria-errormessage"] ? { "aria-errormessage": A } : {}
+      ...O && !g.props["aria-describedby"] ? { "aria-describedby": S } : {},
+      ..._ && !g.props["aria-errormessage"] ? { "aria-errormessage": T } : {}
     }
-  ) : g;
-  return /* @__PURE__ */ D(
-    Co,
+  ) : g, so = d ? /* @__PURE__ */ e(
+    Be,
     {
-      ref: S,
-      className: Do,
-      "data-form-layout": t || "stacked",
-      "data-form-alignment": c || "left",
-      style: {
-        ...X.style || {},
-        ...u ? { "--form-control-max-width": u } : {},
-        ..._ ? { "--form-control-min-width": _ } : {}
-      },
-      ...X,
-      children: [
-        i && /* @__PURE__ */ o("div", { className: _o.labelSection, children: /* @__PURE__ */ o(
-          zo,
+      id: R,
+      labelAlignment: s,
+      labelOptionalText: t,
+      labelWithEditIcon: a,
+      labelActionArea: c,
+      onLabelEditClick: l,
+      required: C ?? h,
+      ...N === "div" ? { as: "div" } : {},
+      children: d
+    }
+  ) : void 0;
+  return /* @__PURE__ */ e(
+    X,
+    {
+      ref: L,
+      className: j,
+      formLayout: o,
+      labelSize: n,
+      controlMaxWidth: y,
+      controlMinWidth: m,
+      leftSection: so,
+      ...I,
+      children: /* @__PURE__ */ E("div", { className: We.inputSection, children: [
+        ao,
+        _ && /* @__PURE__ */ e(
+          ve,
           {
-            id: y,
-            formLayout: t,
-            labelSize: s,
-            labelAlignment: c,
-            labelOptionalText: a,
-            labelWithEditIcon: n,
-            labelActionArea: l,
-            onLabelEditClick: d,
-            required: C ?? b,
-            ...k === "div" ? { as: "div" } : {},
-            children: i
+            id: T,
+            assistiveVariant: "error",
+            assistiveWithIcon: u,
+            children: _
           }
-        ) }),
-        /* @__PURE__ */ D("div", { className: _o.inputSection, children: [
-          Vo,
-          h && /* @__PURE__ */ o(
-            mo,
-            {
-              id: A,
-              assistiveVariant: "error",
-              assistiveWithIcon: m,
-              children: h
-            }
-          ),
-          !h && T && /* @__PURE__ */ o(
-            mo,
-            {
-              id: R,
-              assistiveVariant: "help",
-              assistiveWithIcon: m,
-              children: T
-            }
-          )
-        ] })
-      ]
+        ),
+        !_ && O && /* @__PURE__ */ e(
+          ve,
+          {
+            id: S,
+            assistiveVariant: "help",
+            assistiveWithIcon: u,
+            children: O
+          }
+        )
+      ] })
     }
   );
 });
-V.displayName = "FormControlWrapper";
-const tt = "Checkbox-module__groupRoot___cBS0o", rt = "Checkbox-module__root___mY3qk", st = "Checkbox-module__body___5yC7q", at = "Checkbox-module__inner___rTke4", nt = "Checkbox-module__input___2kt-h", ct = "Checkbox-module__icon___-O7i6", it = "Checkbox-module__labelWrapper___GpZkr", lt = "Checkbox-module__label___cwRtI", w = {
-  groupRoot: tt,
-  root: rt,
-  body: st,
-  inner: at,
-  input: nt,
-  icon: ct,
-  labelWrapper: it,
-  label: lt
-}, Io = f(
-  function({
-    overStyled: t = !1,
-    formLayout: s = "stacked",
-    // Label Wrappers
-    labelSize: c,
-    labelAlignment: a,
-    labelOptionalText: n,
-    labelWithEditIcon: l,
-    onLabelEditClick: d,
-    // Base Mantine Extracted Attributes
-    label: i,
-    description: r,
-    assistiveText: p,
-    assistiveWithIcon: m,
-    error: u,
-    required: _,
-    withAsterisk: h,
-    id: b,
-    className: C,
-    style: $,
-    children: g,
-    readOnly: x,
-    readOnlyComponent: W,
-    ...k
-  }, z) {
-    const S = N(k, t), I = S;
-    return delete I.size, x && W ? /* @__PURE__ */ o(
-      V,
+ue.displayName = "FormControlWrapper";
+const $t = "_root_1qhn7_3", vt = "_contents_1qhn7_18", oe = {
+  root: $t,
+  contents: vt
+}, Ct = $(function({ layer: r, contentsOnly: o, children: n, className: s, style: t, ...a }, c) {
+  const l = o ? s ? `${oe.root} ${oe.contents} ${s}` : `${oe.root} ${oe.contents}` : s ? `${oe.root} ${s}` : oe.root;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: c,
+      className: l,
+      style: t,
+      ...o ? {} : { "data-recursica-layer": String(r) },
+      ...a,
+      children: n
+    }
+  );
+});
+Ct.displayName = "Layer";
+const _e = ({ emptyText: r = "N/A" }) => /* @__PURE__ */ e(B.Fragment, { children: r });
+_e.displayName = "EmptyValueRenderer";
+_e.check = (r) => r == null || r === "" || Array.isArray(r) && r.length === 0;
+const ke = "data-recursica-theme";
+function Vr({
+  children: r,
+  theme: o = "light"
+}) {
+  return lo(() => {
+    const n = document.documentElement;
+    return n.setAttribute(ke, o), () => {
+      n.removeAttribute(ke);
+    };
+  }, [o]), /* @__PURE__ */ e(ie, { children: r });
+}
+const gt = "ReadOnlyField-module__textField___qKn25", be = {
+  textField: gt
+}, me = ({
+  value: r,
+  overStyled: o = !1,
+  ...n
+}) => {
+  const s = v(n, o), t = s.className;
+  return /* @__PURE__ */ e(
+    Ce,
+    {
+      component: "p",
+      className: t ? `${be.textField} ${t}` : be.textField,
+      ...s,
+      children: r != null ? B.isValidElement(r) ? r : Array.isArray(r) ? r.join(", ") : String(r) : ""
+    }
+  );
+};
+me.displayName = "ReadOnlyTextField";
+const je = $(
+  function({ value: o, type: n = "text", emptyValueComponent: s, overStyled: t = !1, ...a }, c) {
+    let l = null;
+    const d = v(a, t), i = s || _e, u = (i.check ? i.check(o) : _e.check(o)) ? /* @__PURE__ */ e(i, { value: o }) : o;
+    switch (n) {
+      case "boolean":
+        l = /* @__PURE__ */ e(
+          me,
+          {
+            value: o === !0 ? "True" : o === !1 ? "False" : u,
+            overStyled: t
+          }
+        );
+        break;
+      case "switch":
+        l = /* @__PURE__ */ e(
+          me,
+          {
+            value: o === !0 ? "On" : o === !1 ? "Off" : u,
+            overStyled: t
+          }
+        );
+        break;
+      case "text":
+      default:
+        l = /* @__PURE__ */ e(
+          me,
+          {
+            value: u,
+            overStyled: t
+          }
+        );
+        break;
+    }
+    return /* @__PURE__ */ e(
+      ue,
       {
-        className: C,
-        style: $,
-        controlMaxWidth: "var(--recursica_ui-kit_components_checkbox-item_properties_max-width)",
-        controlMinWidth: void 0,
+        ref: c,
         overStyled: t,
-        labelElement: "div",
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        description: r,
-        assistiveText: p,
-        assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        children: W
+        ...d,
+        children: l
       }
-    ) : /* @__PURE__ */ o(
-      V,
+    );
+  }
+);
+je.displayName = "ReadOnlyField";
+const ee = $(function({
+  readOnly: o,
+  readOnlyComponent: n,
+  readOnlyType: s = "text",
+  readOnlyValue: t,
+  readOnlyNativeProps: a,
+  emptyValueComponent: c,
+  activeComponent: l,
+  overStyled: d,
+  onLabelEditClick: i,
+  ...p
+}, u) {
+  return o ? n ? /* @__PURE__ */ e(
+    ue,
+    {
+      ref: u,
+      ...p,
+      onLabelEditClick: i,
+      overStyled: d,
+      children: /* @__PURE__ */ e(n, { ...a })
+    }
+  ) : /* @__PURE__ */ e(
+    je,
+    {
+      ref: u,
+      type: s,
+      value: t,
+      emptyValueComponent: c,
+      onLabelEditClick: i,
+      overStyled: d,
+      ...p
+    }
+  ) : /* @__PURE__ */ e(
+    ue,
+    {
+      ref: u,
+      ...p,
+      onLabelEditClick: i,
+      overStyled: d,
+      children: l
+    }
+  );
+});
+ee.displayName = "WithReadOnlyWrapper";
+const xt = "Checkbox-module__groupRoot___cBS0o", wt = "Checkbox-module__root___mY3qk", Pt = "Checkbox-module__body___5yC7q", Wt = "Checkbox-module__inner___rTke4", kt = "Checkbox-module__input___2kt-h", At = "Checkbox-module__icon___-O7i6", St = "Checkbox-module__labelWrapper___GpZkr", Tt = "Checkbox-module__label___cwRtI", W = {
+  groupRoot: xt,
+  root: wt,
+  body: Pt,
+  inner: Wt,
+  input: kt,
+  icon: At,
+  labelWrapper: St,
+  label: Tt
+}, De = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      formLayout: t = "stacked",
+      // Label Wrappers
+      labelSize: a,
+      labelAlignment: c,
+      labelOptionalText: l,
+      labelWithEditIcon: d,
+      onLabelEditClick: i,
+      // Base Mantine Extracted Attributes
+      label: p,
+      description: u,
+      assistiveText: y,
+      assistiveWithIcon: m,
+      error: _,
+      required: h,
+      withAsterisk: C,
+      id: f,
+      className: g,
+      style: b,
+      children: P,
+      readOnly: N,
+      readOnlyComponent: z,
+      emptyValueComponent: L,
+      value: A,
+      defaultValue: R,
+      ...O
+    } = o, S = v(O, s), T = S;
+    return delete T.size, /* @__PURE__ */ e(
+      ee,
       {
-        className: C,
-        style: $,
+        className: g,
+        style: b,
         controlMaxWidth: "var(--recursica_ui-kit_components_checkbox-item_properties_max-width)",
         controlMinWidth: void 0,
-        overStyled: t,
+        overStyled: s,
         labelElement: "div",
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        description: r,
-        assistiveText: p,
+        formLayout: t,
+        labelSize: a,
+        labelAlignment: c,
+        labelOptionalText: l,
+        labelWithEditIcon: d,
+        onLabelEditClick: i,
+        label: p,
+        description: u,
+        assistiveText: y,
         assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        children: /* @__PURE__ */ o(
-          go.Group,
+        error: _,
+        required: h,
+        withAsterisk: C,
+        id: f,
+        readOnly: N && !!z,
+        readOnlyComponent: z,
+        emptyValueComponent: L,
+        readOnlyType: "text",
+        readOnlyValue: A !== void 0 ? A : R,
+        readOnlyNativeProps: o,
+        activeComponent: /* @__PURE__ */ e(
+          Se.Group,
           {
-            ref: z,
+            ref: n,
             ...S,
-            children: /* @__PURE__ */ o("div", { className: w.groupRoot, "data-layout": s, children: j.Children.map(g, (y) => j.isValidElement(y) ? j.cloneElement(y, {
-              disabled: x || y.props.disabled
-            }) : y) })
+            disabled: N || T.disabled,
+            value: A,
+            defaultValue: R,
+            children: /* @__PURE__ */ e("div", { className: W.groupRoot, "data-layout": t, children: B.Children.map(P, (x) => B.isValidElement(x) ? B.cloneElement(x, {
+              disabled: N || x.props.disabled
+            }) : x) })
           }
         )
       }
     );
   }
 );
-Io.displayName = "CheckboxGroup";
-const Fo = f(
-  function({ overStyled: t = !1, readOnly: s, readOnlyComponent: c, disabled: a, ...n }, l) {
-    const d = N(n, t), i = d;
-    if (delete i.size, delete i.color, delete i.radius, delete i.variant, delete i.iconColor, s && c)
-      return /* @__PURE__ */ o(so, { children: c });
-    const r = {
-      root: w.root,
-      body: w.body,
-      inner: w.inner,
-      input: w.input,
-      icon: w.icon,
-      labelWrapper: w.labelWrapper,
-      label: w.label
-    }, p = i.classNames;
-    if (p && typeof p == "object" && !Array.isArray(p)) {
-      const _ = p;
-      r.root = _.root ? `${w.root} ${_.root}` : w.root, r.body = _.body ? `${w.body} ${_.body}` : w.body, r.inner = _.inner ? `${w.inner} ${_.inner}` : w.inner, r.input = _.input ? `${w.input} ${_.input}` : w.input, r.icon = _.icon ? `${w.icon} ${_.icon}` : w.icon, r.labelWrapper = _.labelWrapper ? `${w.labelWrapper} ${_.labelWrapper}` : w.labelWrapper, r.label = _.label ? `${w.label} ${_.label}` : w.label;
+De.displayName = "CheckboxGroup";
+const Ve = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      readOnly: t,
+      readOnlyComponent: a,
+      disabled: c,
+      formLayout: l,
+      labelSize: d,
+      controlMaxWidth: i,
+      controlMinWidth: p,
+      ...u
+    } = o, y = v(u, s), m = y;
+    delete m.size, delete m.color, delete m.radius, delete m.variant, delete m.iconColor;
+    const _ = {
+      root: W.root,
+      body: W.body,
+      inner: W.inner,
+      input: W.input,
+      icon: W.icon,
+      labelWrapper: W.labelWrapper,
+      label: W.label
+    }, h = m.classNames;
+    if (h && typeof h == "object" && !Array.isArray(h)) {
+      const b = h;
+      _.root = b.root ? `${W.root} ${b.root}` : W.root, _.body = b.body ? `${W.body} ${b.body}` : W.body, _.inner = b.inner ? `${W.inner} ${b.inner}` : W.inner, _.input = b.input ? `${W.input} ${b.input}` : W.input, _.icon = b.icon ? `${W.icon} ${b.icon}` : W.icon, _.labelWrapper = b.labelWrapper ? `${W.labelWrapper} ${b.labelWrapper}` : W.labelWrapper, _.label = b.label ? `${W.label} ${b.label}` : W.label;
+    }
+    const C = m.className, f = C ? `${W.root} ${C}` : W.root;
+    if (t && a) {
+      const b = !!(m.checked ?? m.defaultChecked), N = /* @__PURE__ */ e(
+        a,
+        {
+          ...o,
+          checked: b,
+          label: m.label
+        }
+      );
+      return l ? /* @__PURE__ */ e(
+        X,
+        {
+          formLayout: l,
+          labelSize: d,
+          controlMaxWidth: i,
+          controlMinWidth: p,
+          children: N
+        }
+      ) : /* @__PURE__ */ e(ie, { children: N });
     }
-    const m = i.className, u = m ? `${w.root} ${m}` : w.root;
-    return /* @__PURE__ */ o(
-      go,
+    const g = /* @__PURE__ */ e(
+      Se,
       {
-        ref: l,
-        className: u,
-        classNames: r,
-        disabled: s || a,
-        ...d
+        ref: n,
+        className: f,
+        classNames: _,
+        disabled: t || c,
+        ...y
       }
     );
+    return l ? /* @__PURE__ */ e(
+      X,
+      {
+        formLayout: l,
+        labelSize: d,
+        controlMaxWidth: i,
+        controlMinWidth: p,
+        children: g
+      }
+    ) : g;
   }
 );
-Fo.displayName = "Checkbox";
-Fo.Group = Io;
-const dt = "Chip-module__root___f5pFk", pt = "Chip-module__label___Ov9pg", _t = "Chip-module__mantineIconWrapper___KLSz6", mt = "Chip-module__innerWrapper___EnrTF", ut = "Chip-module__children___zbRAR", bt = "Chip-module__leadingIcon___JBtjQ", ht = "Chip-module__removeIcon___pVju-", F = {
-  root: dt,
-  label: pt,
-  mantineIconWrapper: _t,
-  innerWrapper: mt,
-  children: ut,
-  leadingIcon: bt,
-  removeIcon: ht
+Ve.displayName = "Checkbox";
+Ve.Group = De;
+const It = "Chip-module__root___f5pFk", Lt = "Chip-module__label___Ov9pg", Rt = "Chip-module__mantineIconWrapper___KLSz6", Ot = "Chip-module__innerWrapper___EnrTF", zt = "Chip-module__children___zbRAR", Mt = "Chip-module__leadingIcon___JBtjQ", Ft = "Chip-module__removeIcon___pVju-", M = {
+  root: It,
+  label: Lt,
+  mantineIconWrapper: Rt,
+  innerWrapper: Ot,
+  children: zt,
+  leadingIcon: Mt,
+  removeIcon: Ft
 };
-function $t(e) {
-  return /* @__PURE__ */ D(
+function Et(r) {
+  return /* @__PURE__ */ E(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -815,320 +1008,202 @@ function $t(e) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      ...e,
+      ...r,
       children: [
-        /* @__PURE__ */ o("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ o("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   );
 }
-const ft = f(function({
-  error: t = !1,
-  icon: s,
-  onRemove: c,
-  removeLabel: a = "Remove",
-  children: n,
-  overStyled: l = !1,
-  ...d
-}, i) {
-  const r = N(d, l), p = r, m = {
-    root: F.root,
-    label: F.label,
-    input: F.input,
-    iconWrapper: F.mantineIconWrapper,
-    checkIcon: F.checkIcon
-  }, u = p.classNames;
-  if (u && typeof u == "object" && !Array.isArray(u)) {
-    const $ = u;
-    m.root = $.root ? `${F.root} ${$.root}` : F.root, m.label = $.label ? `${F.label} ${$.label}` : F.label;
+const Bt = $(function({
+  error: o = !1,
+  icon: n,
+  onRemove: s,
+  removeLabel: t = "Remove",
+  children: a,
+  overStyled: c = !1,
+  ...l
+}, d) {
+  const i = v(l, c), p = i, u = {
+    root: M.root,
+    label: M.label,
+    input: M.input,
+    iconWrapper: M.mantineIconWrapper,
+    checkIcon: M.checkIcon
+  }, y = p.classNames;
+  if (y && typeof y == "object" && !Array.isArray(y)) {
+    const f = y;
+    u.root = f.root ? `${M.root} ${f.root}` : M.root, u.label = f.label ? `${M.label} ${f.label}` : M.label;
   }
-  const _ = p.className, h = _ ? `${F.root} ${_}` : F.root;
-  return /* @__PURE__ */ o(
-    Zo,
+  const m = p.className, _ = m ? `${M.root} ${m}` : M.root;
+  return /* @__PURE__ */ e(
+    uo,
     {
-      ref: i,
-      className: h,
-      classNames: m,
-      ...(t ? "" : void 0) !== void 0 ? { "data-error": "" } : {},
-      ...!n && (!!s || !!c) ? { "data-icon-only": "" } : {},
-      ...r,
-      children: /* @__PURE__ */ D("span", { className: F.innerWrapper, children: [
-        s && /* @__PURE__ */ o("span", { className: F.leadingIcon, "aria-hidden": !0, children: s }),
-        /* @__PURE__ */ o("span", { className: F.children, children: n }),
-        c && /* @__PURE__ */ o(
+      ref: d,
+      className: _,
+      classNames: u,
+      ...(o ? "" : void 0) !== void 0 ? { "data-error": "" } : {},
+      ...!a && (!!n || !!s) ? { "data-icon-only": "" } : {},
+      ...i,
+      children: /* @__PURE__ */ E("span", { className: M.innerWrapper, children: [
+        n && /* @__PURE__ */ e("span", { className: M.leadingIcon, "aria-hidden": !0, children: n }),
+        /* @__PURE__ */ e("span", { className: M.children, children: a }),
+        s && /* @__PURE__ */ e(
           "span",
           {
             role: "button",
-            className: F.removeIcon,
-            onClick: ($) => {
-              $.preventDefault(), $.stopPropagation(), c($);
+            className: M.removeIcon,
+            onClick: (f) => {
+              f.preventDefault(), f.stopPropagation(), s(f);
             },
-            "aria-label": a,
-            onKeyDown: ($) => {
-              ($.key === "Enter" || $.key === " ") && ($.preventDefault(), $.stopPropagation(), c(
-                $
+            "aria-label": t,
+            onKeyDown: (f) => {
+              (f.key === "Enter" || f.key === " ") && (f.preventDefault(), f.stopPropagation(), s(
+                f
               ));
             },
             tabIndex: 0,
-            children: /* @__PURE__ */ o($t, {})
+            children: /* @__PURE__ */ e(Et, {})
           }
         )
       ] })
     }
   );
 });
-ft.displayName = "Chip";
-const Nt = "Container-module__root___UVssr", J = {
-  root: Nt
-}, yt = f(
-  function({ children: t, size: s, overStyled: c = !1, ...a }, n) {
-    const l = N(a, c), d = l, i = {
+Bt.displayName = "Chip";
+const jt = "Container-module__root___UVssr", ae = {
+  root: jt
+}, Dt = $(
+  function({ children: o, size: n, overStyled: s = !1, ...t }, a) {
+    const c = v(t, s), l = c, d = {
       "rec-sm": "sm",
       "rec-default": "md",
       "rec-md": "md",
       "rec-lg": "lg",
       "rec-xl": "xl",
       "rec-2xl": "xl"
-    }, r = typeof s == "string" && i[s] ? i[s] : s, p = {
-      root: J.root
-    }, m = d.classNames;
-    if (m && typeof m == "object" && !Array.isArray(m)) {
-      const h = m;
-      p.root = h.root ? `${J.root} ${h.root}` : J.root;
+    }, i = typeof n == "string" && d[n] ? d[n] : n, p = {
+      root: ae.root
+    }, u = l.classNames;
+    if (u && typeof u == "object" && !Array.isArray(u)) {
+      const _ = u;
+      p.root = _.root ? `${ae.root} ${_.root}` : ae.root;
     }
-    const u = d.className, _ = u ? `${J.root} ${u}` : J.root;
-    return /* @__PURE__ */ o(
-      Qo,
+    const y = l.className, m = y ? `${ae.root} ${y}` : ae.root;
+    return /* @__PURE__ */ e(
+      _o,
       {
-        ref: n,
-        size: r,
-        className: _,
+        ref: a,
+        size: i,
+        className: m,
         classNames: p,
-        ...l,
-        children: t
+        ...c,
+        children: o
       }
     );
   }
 );
-yt.displayName = "Container";
-const hr = (e) => /* @__PURE__ */ o("div", { ...e, children: "DatePicker" }), vt = "_root_1qhn7_3", Ct = "_contents_1qhn7_18", U = {
-  root: vt,
-  contents: Ct
-}, gt = f(function({ layer: e, contentsOnly: t, children: s, className: c, style: a, ...n }, l) {
-  const d = t ? c ? `${U.root} ${U.contents} ${c}` : `${U.root} ${U.contents}` : c ? `${U.root} ${c}` : U.root;
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      ref: l,
-      className: d,
-      style: a,
-      ...t ? {} : { "data-recursica-layer": String(e) },
-      ...n,
-      children: s
-    }
-  );
-});
-gt.displayName = "Layer";
-const ao = ({ emptyText: e = "N/A" }) => /* @__PURE__ */ o(j.Fragment, { children: e });
-ao.displayName = "EmptyValueRenderer";
-ao.check = (e) => e == null || e === "" || Array.isArray(e) && e.length === 0;
-const No = "data-recursica-theme";
-function $r({
-  children: e,
-  theme: t = "light"
-}) {
-  return Oo(() => {
-    const s = document.documentElement;
-    return s.setAttribute(No, t), () => {
-      s.removeAttribute(No);
-    };
-  }, [t]), /* @__PURE__ */ o(so, { children: e });
-}
-const xt = "ReadOnlyField-module__textField___qKn25", yo = {
-  textField: xt
-}, Lo = ({
-  value: e,
-  overStyled: t = !1,
-  ...s
-}) => {
-  const c = N(s, t), a = c.className;
-  return /* @__PURE__ */ o(
-    Co,
-    {
-      component: "p",
-      className: a ? `${yo.textField} ${a}` : yo.textField,
-      ...c,
-      children: e != null ? j.isValidElement(e) ? e : String(e) : ""
-    }
-  );
-};
-Lo.displayName = "ReadOnlyTextField";
-const Bo = f(
-  function({ value: t, type: s = "text", emptyValueComponent: c, overStyled: a = !1, ...n }, l) {
-    let d = null;
-    const i = N(n, a), r = c || ao, m = (r.check ? r.check(t) : ao.check(t)) ? /* @__PURE__ */ o(r, { value: t }) : t;
-    switch (s) {
-      case "text":
-      default:
-        d = /* @__PURE__ */ o(
-          Lo,
-          {
-            value: m,
-            overStyled: a
-          }
-        );
-        break;
-    }
-    return /* @__PURE__ */ o(
-      V,
-      {
-        ref: l,
-        overStyled: a,
-        ...i,
-        children: d
-      }
-    );
-  }
-);
-Bo.displayName = "ReadOnlyField";
-const lo = f(function({
-  readOnly: t,
-  readOnlyComponent: s,
-  readOnlyType: c = "text",
-  readOnlyValue: a,
-  activeComponent: n,
-  overStyled: l,
-  onLabelEditClick: d,
-  ...i
-}, r) {
-  return t ? s ? /* @__PURE__ */ o(
-    V,
-    {
-      ref: r,
-      ...i,
-      onLabelEditClick: d,
-      overStyled: l,
-      children: s
-    }
-  ) : /* @__PURE__ */ o(
-    Bo,
-    {
-      ref: r,
-      type: c,
-      value: a,
-      onLabelEditClick: d,
-      overStyled: l,
-      ...i
-    }
-  ) : /* @__PURE__ */ o(
-    V,
-    {
-      ref: r,
-      ...i,
-      onLabelEditClick: d,
-      overStyled: l,
-      children: n
-    }
-  );
-});
-lo.displayName = "WithReadOnlyWrapper";
-const wt = "Dropdown-module__root___uVyL0", Pt = "Dropdown-module__input___dK4dN", Wt = "Dropdown-module__section___j3MRB", kt = "Dropdown-module__dropdown___gG-Sw", At = "Dropdown-module__option___nAGU-", L = {
-  root: wt,
-  input: Pt,
-  section: Wt,
-  dropdown: kt,
-  option: At
-}, Rt = f(
-  function({
-    overStyled: t = !1,
-    formLayout: s = "stacked",
-    containerWidth: c,
-    // Label & Wrapper Maps
-    labelSize: a,
-    labelAlignment: n,
-    labelOptionalText: l,
-    labelWithEditIcon: d,
-    onLabelEditClick: i,
-    label: r,
-    assistiveText: p,
-    assistiveWithIcon: m,
-    error: u,
-    required: _,
-    withAsterisk: h,
-    id: b,
-    className: C,
-    style: $,
-    disabled: g,
-    readOnly: x,
-    readOnlyComponent: W,
-    value: k,
-    defaultValue: z,
-    data: S,
-    ...I
-  }, y) {
-    const T = N(I, t), R = T;
-    delete R.size, delete R.variant, delete R.radius;
-    const A = {
-      wrapper: L.root,
+Dt.displayName = "Container";
+const Gr = (r) => /* @__PURE__ */ e("div", { ...r, children: "DatePicker" }), Vt = "Dropdown-module__root___uVyL0", Gt = "Dropdown-module__input___dK4dN", qt = "Dropdown-module__section___j3MRB", Yt = "Dropdown-module__dropdown___gG-Sw", Zt = "Dropdown-module__option___nAGU-", F = {
+  root: Vt,
+  input: Gt,
+  section: qt,
+  dropdown: Yt,
+  option: Zt
+}, Ht = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      formLayout: t = "stacked",
+      containerWidth: a,
+      // Label & Wrapper Maps
+      labelSize: c,
+      labelAlignment: l,
+      labelOptionalText: d,
+      labelWithEditIcon: i,
+      onLabelEditClick: p,
+      label: u,
+      assistiveText: y,
+      assistiveWithIcon: m,
+      error: _,
+      required: h,
+      withAsterisk: C,
+      id: f,
+      className: g,
+      style: b,
+      disabled: P,
+      readOnly: N,
+      readOnlyComponent: z,
+      emptyValueComponent: L,
+      value: A,
+      defaultValue: R,
+      data: O,
+      ...S
+    } = o, T = v(S, s), x = T;
+    delete x.size, delete x.variant, delete x.radius;
+    const I = {
+      wrapper: F.root,
       // The nested Input internal relative wrapper bounding box
-      input: L.input,
-      section: L.section,
-      dropdown: L.dropdown,
-      option: L.option
-    }, Q = R.classNames;
+      input: F.input,
+      section: F.section,
+      dropdown: F.dropdown,
+      option: F.option
+    }, Q = x.classNames;
     if (Q && typeof Q == "object" && !Array.isArray(Q)) {
-      const B = Q;
-      A.wrapper = B.wrapper ? `${L.root} ${B.wrapper}` : L.root, A.input = B.input ? `${L.input} ${B.input}` : L.input, A.section = B.section ? `${L.section} ${B.section}` : L.section, A.dropdown = B.dropdown ? `${L.dropdown} ${B.dropdown}` : L.dropdown, A.option = B.option ? `${L.option} ${B.option}` : L.option;
+      const j = Q;
+      I.wrapper = j.wrapper ? `${F.root} ${j.wrapper}` : F.root, I.input = j.input ? `${F.input} ${j.input}` : F.input, I.section = j.section ? `${F.section} ${j.section}` : F.section, I.dropdown = j.dropdown ? `${F.dropdown} ${j.dropdown}` : F.dropdown, I.option = j.option ? `${F.option} ${j.option}` : F.option;
     }
-    const X = {
-      ...$ || {},
-      width: c || "100%"
+    const de = {
+      ...b || {},
+      width: a || "100%"
     };
-    return /* @__PURE__ */ o(
-      lo,
+    return /* @__PURE__ */ e(
+      ee,
       {
-        className: C,
-        style: X,
+        className: g,
+        style: de,
         controlMaxWidth: "var(--recursica_ui-kit_components_dropdown_properties_max-width)",
         controlMinWidth: "var(--recursica_ui-kit_components_dropdown_properties_min-width)",
-        overStyled: t,
-        formLayout: s,
-        labelSize: a,
-        labelAlignment: n,
-        labelOptionalText: l,
-        labelWithEditIcon: d,
-        onLabelEditClick: i,
-        label: r,
-        assistiveText: p,
+        overStyled: s,
+        formLayout: t,
+        labelSize: c,
+        labelAlignment: l,
+        labelOptionalText: d,
+        labelWithEditIcon: i,
+        onLabelEditClick: p,
+        label: u,
+        assistiveText: y,
         assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        readOnly: x,
-        readOnlyComponent: W,
+        error: _,
+        required: h,
+        withAsterisk: C,
+        id: f,
+        readOnly: N,
+        readOnlyComponent: z,
+        emptyValueComponent: L,
         readOnlyType: "text",
-        readOnlyValue: k !== void 0 ? String(k) : z ? String(z) : void 0,
+        readOnlyValue: A !== void 0 ? String(A) : R ? String(R) : void 0,
+        readOnlyNativeProps: o,
         activeComponent: (
           /* Naked Select execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
-          /* @__PURE__ */ o(
-            Xo,
+          /* @__PURE__ */ e(
+            bo,
             {
-              ref: y,
-              classNames: A,
-              disabled: g,
-              value: k,
-              defaultValue: z,
-              data: S || [],
+              ref: n,
+              classNames: I,
+              disabled: P,
+              value: A,
+              defaultValue: R,
+              data: O || [],
               label: void 0,
               description: void 0,
               error: void 0,
               required: void 0,
               withAsterisk: void 0,
               wrapperProps: {
-                "data-disabled": g ? "true" : void 0,
-                "data-error": u ? "true" : void 0
+                "data-disabled": P ? "true" : void 0,
+                "data-error": _ ? "true" : void 0
               },
               ...T
             }
@@ -1138,489 +1213,714 @@ const wt = "Dropdown-module__root___uVyL0", Pt = "Dropdown-module__input___dK4dN
     );
   }
 );
-Rt.displayName = "Dropdown";
-const fr = (e) => /* @__PURE__ */ o("div", { ...e, children: "FileInput" }), Nr = (e) => /* @__PURE__ */ o("div", { ...e, children: "FileUpload" }), St = "Flex-module__root___yYser", oo = {
-  root: St
-}, Tt = f(function({ children: t, overStyled: s = !1, gap: c = "rec-default", ...a }, n) {
-  const l = N({ ...a, gap: c }, s), d = l, i = {
-    root: oo.root
-  }, r = d.classNames;
-  if (r && typeof r == "object" && !Array.isArray(r)) {
-    const u = r;
-    i.root = u.root ? `${oo.root} ${u.root}` : oo.root;
+Ht.displayName = "Dropdown";
+const qr = (r) => /* @__PURE__ */ e("div", { ...r, children: "FileInput" }), Yr = (r) => /* @__PURE__ */ e("div", { ...r, children: "FileUpload" }), Kt = "Flex-module__root___yYser", se = {
+  root: Kt
+}, Ut = $(function({ children: o, overStyled: n = !1, gap: s = "rec-default", ...t }, a) {
+  const c = v({ ...t, gap: s }, n), l = c, d = {
+    root: se.root
+  }, i = l.classNames;
+  if (i && typeof i == "object" && !Array.isArray(i)) {
+    const y = i;
+    d.root = y.root ? `${se.root} ${y.root}` : se.root;
   }
-  const p = d.className, m = p ? `${oo.root} ${p}` : oo.root;
-  return /* @__PURE__ */ o(
-    Jo,
+  const p = l.className, u = p ? `${se.root} ${p}` : se.root;
+  return /* @__PURE__ */ e(
+    yo,
     {
-      ref: n,
-      className: m,
-      classNames: i,
-      ...l,
-      children: t
+      ref: a,
+      className: u,
+      classNames: d,
+      ...c,
+      children: o
     }
   );
 });
-Tt.displayName = "Flex";
-const zt = "Group-module__root___ftO64", eo = {
-  root: zt
-}, It = f(function({ children: t, overStyled: s = !1, gap: c = "rec-default", ...a }, n) {
-  const l = N({ ...a, gap: c }, s), d = l, i = {
-    root: eo.root
-  }, r = d.classNames;
-  if (r && typeof r == "object" && !Array.isArray(r)) {
-    const u = r;
-    i.root = u.root ? `${eo.root} ${u.root}` : eo.root;
+Ut.displayName = "Flex";
+const Xt = "Group-module__root___ftO64", ne = {
+  root: Xt
+}, Qt = $(function({ children: o, overStyled: n = !1, gap: s = "rec-default", ...t }, a) {
+  const c = v({ ...t, gap: s }, n), l = c, d = {
+    root: ne.root
+  }, i = l.classNames;
+  if (i && typeof i == "object" && !Array.isArray(i)) {
+    const y = i;
+    d.root = y.root ? `${ne.root} ${y.root}` : ne.root;
   }
-  const p = d.className, m = p ? `${eo.root} ${p}` : eo.root;
-  return /* @__PURE__ */ o(
-    oe,
+  const p = l.className, u = p ? `${ne.root} ${p}` : ne.root;
+  return /* @__PURE__ */ e(
+    ho,
     {
-      ref: n,
-      className: m,
-      classNames: i,
-      ...l,
-      children: t
+      ref: a,
+      className: u,
+      classNames: d,
+      ...c,
+      children: o
     }
   );
 });
-It.displayName = "Group";
-const yr = (e) => /* @__PURE__ */ o("div", { ...e, children: "HoverCard" }), vr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Link" }), Ft = "Loader-module__root___6iYOP", to = {
-  root: Ft
-}, Lt = f(function({ variant: t = "oval", size: s = "default", overStyled: c = !1, ...a }, n) {
-  const d = {
+Qt.displayName = "Group";
+const Zr = (r) => /* @__PURE__ */ e("div", { ...r, children: "HoverCard" }), Hr = (r) => /* @__PURE__ */ e("div", { ...r, children: "Link" }), Jt = "Loader-module__root___6iYOP", le = {
+  root: Jt
+}, er = $(function({ variant: o = "oval", size: n = "default", overStyled: s = !1, ...t }, a) {
+  const l = {
     sm: "small",
     md: "default",
     lg: "large",
     small: "small",
     default: "default",
     large: "large"
-  }[s] || "default", i = N(a, c), r = {
-    root: to.root
-  }, p = i.classNames;
+  }[n] || "default", d = v(t, s), i = {
+    root: le.root
+  }, p = d.classNames;
   if (p && typeof p == "object" && !Array.isArray(p)) {
-    const _ = p;
-    r.root = _.root ? `${to.root} ${_.root}` : to.root;
+    const m = p;
+    i.root = m.root ? `${le.root} ${m.root}` : le.root;
   }
-  const m = i.className, u = m ? `${to.root} ${m}` : to.root;
-  return /* @__PURE__ */ o(
-    ee,
+  const u = d.className, y = u ? `${le.root} ${u}` : le.root;
+  return /* @__PURE__ */ e(
+    fo,
     {
-      ref: n,
-      type: t,
-      "data-variant": t,
-      "data-size": d,
-      ...i,
-      className: u,
-      classNames: r
+      ref: a,
+      type: o,
+      "data-variant": o,
+      "data-size": l,
+      ...d,
+      className: y,
+      classNames: i
     }
   );
 });
-Lt.displayName = "Loader";
-const Cr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Menu" }), gr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Modal" }), xr = (e) => /* @__PURE__ */ o("div", { ...e, children: "NumberInput" }), wr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Pagination" }), Pr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Panel" }), Wr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Popover" }), Bt = "Radio-module__groupRoot___bfUii", jt = "Radio-module__root___kAjTD", Et = "Radio-module__body___q2Wpj", Gt = "Radio-module__inner___QaTBB", Mt = "Radio-module__radio___MfgN-", Dt = "Radio-module__icon___DWznm", Vt = "Radio-module__labelWrapper___dB0Gi", qt = "Radio-module__label___vAFIP", P = {
-  groupRoot: Bt,
-  root: jt,
-  body: Et,
-  inner: Gt,
-  radio: Mt,
-  icon: Dt,
-  labelWrapper: Vt,
-  label: qt
-}, jo = f(
-  function({
-    overStyled: t = !1,
-    formLayout: s = "stacked",
-    // Label Wrappers
-    labelSize: c,
-    labelAlignment: a,
-    labelOptionalText: n,
-    labelWithEditIcon: l,
-    onLabelEditClick: d,
-    // Base Mantine Extracted Attributes
-    label: i,
-    description: r,
-    assistiveText: p,
-    assistiveWithIcon: m,
-    error: u,
-    required: _,
-    withAsterisk: h,
-    id: b,
-    className: C,
-    style: $,
-    children: g,
-    readOnly: x,
-    readOnlyComponent: W,
-    ...k
-  }, z) {
-    const S = N(k, t), I = S;
-    return delete I.size, x && W ? /* @__PURE__ */ o(
-      V,
+er.displayName = "Loader";
+const or = "Menu-module__dropdown___j4xuA", tr = "Menu-module__item___NMXha", rr = "Menu-module__itemLabel___zvcqC", ar = "Menu-module__itemSection___pRIcn", sr = "Menu-module__divider___wPiNq", nr = "Menu-module__label___4FBGa", lr = "Menu-module__chevron___hEEiy", J = {
+  dropdown: or,
+  item: tr,
+  itemLabel: rr,
+  itemSection: ar,
+  divider: sr,
+  label: nr,
+  chevron: lr
+}, Ge = function({ overStyled: o = !1, ...n }) {
+  const s = v(n, o), t = {
+    dropdown: J.dropdown,
+    item: J.item,
+    itemLabel: J.itemLabel,
+    itemSection: J.itemSection,
+    divider: J.divider,
+    label: J.label,
+    chevron: J.chevron
+  }, a = s.classNames;
+  if (a && typeof a == "object" && !Array.isArray(a)) {
+    const c = a;
+    Object.keys(c).forEach((l) => {
+      t[l] ? t[l] = `${t[l]} ${c[l]}` : t[l] = c[l];
+    });
+  }
+  return /* @__PURE__ */ e(
+    q,
+    {
+      classNames: t,
+      ...s
+    }
+  );
+};
+Ge.displayName = "Menu";
+const qe = function(o) {
+  return /* @__PURE__ */ e(q.Target, { ...o });
+};
+qe.displayName = "MenuTarget";
+const Ye = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
+      q.Dropdown,
       {
-        className: C,
-        style: $,
-        controlMaxWidth: "var(--recursica_ui-kit_components_radio-button-item_properties_max-width)",
-        controlMinWidth: void 0,
-        overStyled: t,
-        labelElement: "div",
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        description: r,
-        assistiveText: p,
-        assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        children: W
+        ref: s,
+        className: a,
+        ...t
+      }
+    );
+  }
+);
+Ye.displayName = "MenuDropdown";
+const Ze = $(function({ overStyled: o = !1, ...n }, s) {
+  const t = v(n, o), a = t;
+  o || delete a.color;
+  const c = a.className;
+  return /* @__PURE__ */ e(
+    q.Item,
+    {
+      ref: s,
+      className: c,
+      ...t
+    }
+  );
+});
+Ze.displayName = "MenuItem";
+const He = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
+      q.Divider,
+      {
+        ref: s,
+        className: a,
+        ...t
+      }
+    );
+  }
+);
+He.displayName = "MenuDivider";
+const Ke = $(function({ overStyled: o = !1, ...n }, s) {
+  const t = v(n, o), a = t.className;
+  return /* @__PURE__ */ e(
+    q.Label,
+    {
+      ref: s,
+      className: a,
+      ...t
+    }
+  );
+});
+Ke.displayName = "MenuLabel";
+const Ue = function(o) {
+  return /* @__PURE__ */ e(q.Sub, { ...o });
+};
+Ue.displayName = "MenuSub";
+const Xe = function(o) {
+  return /* @__PURE__ */ e(q.Sub.Target, { ...o });
+};
+Xe.displayName = "MenuSubTarget";
+const Qe = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t;
+    o || delete a.color;
+    const c = a.className;
+    return /* @__PURE__ */ e(
+      q.Sub.Item,
+      {
+        ref: s,
+        className: c,
+        ...t
       }
-    ) : /* @__PURE__ */ o(
-      V,
+    );
+  }
+);
+Qe.displayName = "MenuSubItem";
+const Je = $(
+  function({ overStyled: o = !1, ...n }, s) {
+    const t = v(n, o), a = t.className;
+    return /* @__PURE__ */ e(
+      q.Sub.Dropdown,
       {
-        className: C,
-        style: $,
+        ref: s,
+        className: a,
+        ...t
+      }
+    );
+  }
+);
+Je.displayName = "MenuSubDropdown";
+const Ne = Ue;
+Ne.Target = Xe;
+Ne.Item = Qe;
+Ne.Dropdown = Je;
+const re = Ge;
+re.Target = qe;
+re.Dropdown = Ye;
+re.Item = Ze;
+re.Divider = He;
+re.Label = Ke;
+re.Sub = Ne;
+const Kr = (r) => /* @__PURE__ */ e("div", { ...r, children: "Modal" }), Ur = (r) => /* @__PURE__ */ e("div", { ...r, children: "NumberInput" }), Xr = (r) => /* @__PURE__ */ e("div", { ...r, children: "Pagination" }), Qr = (r) => /* @__PURE__ */ e("div", { ...r, children: "Panel" }), Jr = (r) => /* @__PURE__ */ e("div", { ...r, children: "Popover" }), cr = "Radio-module__groupRoot___bfUii", ir = "Radio-module__root___kAjTD", dr = "Radio-module__body___q2Wpj", pr = "Radio-module__inner___QaTBB", mr = "Radio-module__radio___MfgN-", ur = "Radio-module__icon___DWznm", _r = "Radio-module__labelWrapper___dB0Gi", br = "Radio-module__label___vAFIP", k = {
+  groupRoot: cr,
+  root: ir,
+  body: dr,
+  inner: pr,
+  radio: mr,
+  icon: ur,
+  labelWrapper: _r,
+  label: br
+}, eo = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      formLayout: t = "stacked",
+      // Label Wrappers
+      labelSize: a,
+      labelAlignment: c,
+      labelOptionalText: l,
+      labelWithEditIcon: d,
+      onLabelEditClick: i,
+      // Base Mantine Extracted Attributes
+      label: p,
+      description: u,
+      assistiveText: y,
+      assistiveWithIcon: m,
+      error: _,
+      required: h,
+      withAsterisk: C,
+      id: f,
+      className: g,
+      style: b,
+      children: P,
+      readOnly: N,
+      readOnlyComponent: z,
+      emptyValueComponent: L,
+      value: A,
+      defaultValue: R,
+      ...O
+    } = o, S = v(O, s), T = S;
+    return delete T.size, /* @__PURE__ */ e(
+      ee,
+      {
+        className: g,
+        style: b,
         controlMaxWidth: "var(--recursica_ui-kit_components_radio-button-item_properties_max-width)",
         controlMinWidth: void 0,
-        overStyled: t,
+        overStyled: s,
         labelElement: "div",
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        description: r,
-        assistiveText: p,
+        formLayout: t,
+        labelSize: a,
+        labelAlignment: c,
+        labelOptionalText: l,
+        labelWithEditIcon: d,
+        onLabelEditClick: i,
+        label: p,
+        description: u,
+        assistiveText: y,
         assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        children: /* @__PURE__ */ o(
-          xo.Group,
+        error: _,
+        required: h,
+        withAsterisk: C,
+        id: f,
+        readOnly: N && !!z,
+        readOnlyComponent: z,
+        emptyValueComponent: L,
+        readOnlyType: "text",
+        readOnlyValue: A !== void 0 ? A : R,
+        readOnlyNativeProps: o,
+        activeComponent: /* @__PURE__ */ e(
+          Te.Group,
           {
-            ref: z,
+            ref: n,
             ...S,
-            children: /* @__PURE__ */ o("div", { className: P.groupRoot, "data-layout": s, children: j.Children.map(g, (y) => j.isValidElement(y) ? j.cloneElement(y, {
-              disabled: x || y.props.disabled
-            }) : y) })
+            disabled: N || T.disabled,
+            value: A,
+            defaultValue: R,
+            children: /* @__PURE__ */ e("div", { className: k.groupRoot, "data-layout": t, children: B.Children.map(P, (x) => B.isValidElement(x) ? B.cloneElement(x, {
+              disabled: N || x.props.disabled
+            }) : x) })
           }
         )
       }
     );
   }
 );
-jo.displayName = "RadioGroup";
-const Ot = ({ className: e, style: t }) => /* @__PURE__ */ o(
+eo.displayName = "RadioGroup";
+const yr = ({ className: r, style: o }) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
     fill: "currentColor",
-    className: e,
-    style: t,
-    children: /* @__PURE__ */ o("circle", { cx: "8", cy: "8", r: "5" })
+    className: r,
+    style: o,
+    children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "5" })
   }
-), Eo = f(function({ overStyled: t = !1, readOnly: s, readOnlyComponent: c, disabled: a, ...n }, l) {
-  const d = N(n, t), i = d;
-  if (delete i.size, delete i.color, delete i.radius, delete i.variant, delete i.iconColor, s && c)
-    return /* @__PURE__ */ o(so, { children: c });
-  const r = {
-    root: P.root,
-    body: P.body,
-    inner: P.inner,
-    radio: P.radio,
-    icon: P.icon,
-    labelWrapper: P.labelWrapper,
-    label: P.label
-  }, p = i.classNames;
-  if (p && typeof p == "object" && !Array.isArray(p)) {
-    const _ = p;
-    r.root = _.root ? `${P.root} ${_.root}` : P.root, r.body = _.body ? `${P.body} ${_.body}` : P.body, r.inner = _.inner ? `${P.inner} ${_.inner}` : P.inner, r.radio = _.radio ? `${P.radio} ${_.radio}` : P.radio, r.icon = _.icon ? `${P.icon} ${_.icon}` : P.icon, r.labelWrapper = _.labelWrapper ? `${P.labelWrapper} ${_.labelWrapper}` : P.labelWrapper, r.label = _.label ? `${P.label} ${_.label}` : P.label;
-  }
-  const m = i.className, u = m ? `${P.root} ${m}` : P.root;
-  return /* @__PURE__ */ o(
-    xo,
-    {
-      ref: l,
-      icon: Ot,
-      className: u,
-      classNames: r,
-      disabled: s || a,
-      ...d
+), oo = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      readOnly: t,
+      readOnlyComponent: a,
+      disabled: c,
+      formLayout: l,
+      labelSize: d,
+      controlMaxWidth: i,
+      controlMinWidth: p,
+      ...u
+    } = o, y = v(u, s), m = y;
+    delete m.size, delete m.color, delete m.radius, delete m.variant, delete m.iconColor;
+    const _ = {
+      root: k.root,
+      body: k.body,
+      inner: k.inner,
+      radio: k.radio,
+      icon: k.icon,
+      labelWrapper: k.labelWrapper,
+      label: k.label
+    }, h = m.classNames;
+    if (h && typeof h == "object" && !Array.isArray(h)) {
+      const b = h;
+      _.root = b.root ? `${k.root} ${b.root}` : k.root, _.body = b.body ? `${k.body} ${b.body}` : k.body, _.inner = b.inner ? `${k.inner} ${b.inner}` : k.inner, _.radio = b.radio ? `${k.radio} ${b.radio}` : k.radio, _.icon = b.icon ? `${k.icon} ${b.icon}` : k.icon, _.labelWrapper = b.labelWrapper ? `${k.labelWrapper} ${b.labelWrapper}` : k.labelWrapper, _.label = b.label ? `${k.label} ${b.label}` : k.label;
     }
-  );
-});
-Eo.displayName = "Radio";
-Eo.Group = jo;
-const kr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Search" }), Ar = (e) => /* @__PURE__ */ o("div", { ...e, children: "SegmentedControl" }), Rr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Slider" }), Yt = "Stack-module__root___NUN-x", ro = {
-  root: Yt
-}, Ht = f(function({ children: t, overStyled: s = !1, gap: c = "rec-default", ...a }, n) {
-  const l = N({ ...a, gap: c }, s), d = l, i = {
-    root: ro.root
-  }, r = d.classNames;
-  if (r && typeof r == "object" && !Array.isArray(r)) {
-    const u = r;
-    i.root = u.root ? `${ro.root} ${u.root}` : ro.root;
+    const C = m.className, f = C ? `${k.root} ${C}` : k.root;
+    if (t && a) {
+      const b = !!(m.checked ?? m.defaultChecked), N = /* @__PURE__ */ e(
+        a,
+        {
+          ...o,
+          checked: b,
+          label: m.label
+        }
+      );
+      return l ? /* @__PURE__ */ e(
+        X,
+        {
+          formLayout: l,
+          labelSize: d,
+          controlMaxWidth: i,
+          controlMinWidth: p,
+          children: N
+        }
+      ) : /* @__PURE__ */ e(ie, { children: N });
+    }
+    const g = /* @__PURE__ */ e(
+      Te,
+      {
+        ref: n,
+        icon: yr,
+        className: f,
+        classNames: _,
+        disabled: t || c,
+        ...y
+      }
+    );
+    return l ? /* @__PURE__ */ e(
+      X,
+      {
+        formLayout: l,
+        labelSize: d,
+        controlMaxWidth: i,
+        controlMinWidth: p,
+        children: g
+      }
+    ) : g;
   }
-  const p = d.className, m = p ? `${ro.root} ${p}` : ro.root;
-  return /* @__PURE__ */ o(
-    te,
+);
+oo.displayName = "Radio";
+oo.Group = eo;
+const hr = ({ checked: r, label: o }) => /* @__PURE__ */ E(
+  Ce,
+  {
+    component: "span",
+    className: be.textField,
+    style: { display: "inline-flex", gap: "8px", alignItems: "baseline" },
+    children: [
+      o && /* @__PURE__ */ E("span", { style: { fontWeight: 500 }, children: [
+        o,
+        ":"
+      ] }),
+      /* @__PURE__ */ e("span", { children: r ? "On" : "Off" })
+    ]
+  }
+);
+hr.displayName = "ReadOnlySwitchField";
+const fr = ({ checked: r, label: o }) => /* @__PURE__ */ E(
+  Ce,
+  {
+    component: "span",
+    className: be.textField,
+    style: { display: "inline-flex", gap: "8px", alignItems: "baseline" },
+    children: [
+      o && /* @__PURE__ */ E("span", { style: { fontWeight: 500 }, children: [
+        o,
+        ":"
+      ] }),
+      /* @__PURE__ */ e("span", { children: r ? "True" : "False" })
+    ]
+  }
+);
+fr.displayName = "ReadOnlyBooleanField";
+const ea = (r) => /* @__PURE__ */ e("div", { ...r, children: "Search" }), oa = (r) => /* @__PURE__ */ e("div", { ...r, children: "SegmentedControl" }), ta = (r) => /* @__PURE__ */ e("div", { ...r, children: "Slider" }), Nr = "Stack-module__root___NUN-x", ce = {
+  root: Nr
+}, $r = $(function({ children: o, overStyled: n = !1, gap: s = "rec-default", ...t }, a) {
+  const c = v({ ...t, gap: s }, n), l = c, d = {
+    root: ce.root
+  }, i = l.classNames;
+  if (i && typeof i == "object" && !Array.isArray(i)) {
+    const y = i;
+    d.root = y.root ? `${ce.root} ${y.root}` : ce.root;
+  }
+  const p = l.className, u = p ? `${ce.root} ${p}` : ce.root;
+  return /* @__PURE__ */ e(
+    No,
     {
-      ref: n,
-      className: m,
-      classNames: i,
-      ...l,
-      children: t
+      ref: a,
+      className: u,
+      classNames: d,
+      ...c,
+      children: o
     }
   );
 });
-Ht.displayName = "Stack";
-const Sr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Stepper" }), Kt = "Switch-module__root___Y5Ydi", Ut = "Switch-module__body___Sw9Wr", Zt = "Switch-module__track___7ObdZ", Qt = "Switch-module__thumb___-FTeK", Xt = "Switch-module__labelWrapper___YSOwx", Jt = "Switch-module__label___LrH7V", or = "Switch-module__thumbIconWrapper___sCY-1", er = "Switch-module__checkIcon___ZBAQN", tr = "Switch-module__closeIcon___bLLGw", rr = "Switch-module__groupRoot___-Uepi", v = {
-  root: Kt,
-  body: Ut,
-  track: Zt,
-  thumb: Qt,
-  labelWrapper: Xt,
-  label: Jt,
-  thumbIconWrapper: or,
-  checkIcon: er,
-  closeIcon: tr,
-  groupRoot: rr
-}, Go = f(
-  function({
-    overStyled: t = !1,
-    formLayout: s = "stacked",
-    // Label Wrappers
-    labelSize: c,
-    labelAlignment: a,
-    labelOptionalText: n,
-    labelWithEditIcon: l,
-    onLabelEditClick: d,
-    // Base Mantine Extracted Attributes
-    label: i,
-    description: r,
-    assistiveText: p,
-    assistiveWithIcon: m,
-    error: u,
-    required: _,
-    withAsterisk: h,
-    id: b,
-    className: C,
-    style: $,
-    children: g,
-    readOnly: x,
-    readOnlyComponent: W,
-    ...k
-  }, z) {
-    const S = N(k, t), I = S;
-    return delete I.size, x && W ? /* @__PURE__ */ o(
-      V,
+$r.displayName = "Stack";
+const ra = (r) => /* @__PURE__ */ e("div", { ...r, children: "Stepper" }), vr = "Switch-module__root___Y5Ydi", Cr = "Switch-module__body___Sw9Wr", gr = "Switch-module__track___7ObdZ", xr = "Switch-module__thumb___-FTeK", wr = "Switch-module__labelWrapper___YSOwx", Pr = "Switch-module__label___LrH7V", Wr = "Switch-module__thumbIconWrapper___sCY-1", kr = "Switch-module__checkIcon___ZBAQN", Ar = "Switch-module__closeIcon___bLLGw", Sr = "Switch-module__groupRoot___-Uepi", w = {
+  root: vr,
+  body: Cr,
+  track: gr,
+  thumb: xr,
+  labelWrapper: wr,
+  label: Pr,
+  thumbIconWrapper: Wr,
+  checkIcon: kr,
+  closeIcon: Ar,
+  groupRoot: Sr
+}, to = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      formLayout: t = "stacked",
+      // Label Wrappers
+      labelSize: a,
+      labelAlignment: c,
+      labelOptionalText: l,
+      labelWithEditIcon: d,
+      onLabelEditClick: i,
+      // Base Mantine Extracted Attributes
+      label: p,
+      description: u,
+      assistiveText: y,
+      assistiveWithIcon: m,
+      error: _,
+      required: h,
+      withAsterisk: C,
+      id: f,
+      className: g,
+      style: b,
+      children: P,
+      readOnly: N,
+      readOnlyComponent: z,
+      emptyValueComponent: L,
+      value: A,
+      defaultValue: R,
+      ...O
+    } = o, S = v(O, s), T = S;
+    return delete T.size, /* @__PURE__ */ e(
+      ee,
       {
-        className: C,
-        style: $,
-        controlMaxWidth: "var(--recursica_ui-kit_components_switch_properties_max-width)",
-        controlMinWidth: void 0,
-        overStyled: t,
-        labelElement: "div",
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        description: r,
-        assistiveText: p,
-        assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        children: W
-      }
-    ) : /* @__PURE__ */ o(
-      V,
-      {
-        className: C,
-        style: $,
+        className: g,
+        style: b,
         controlMaxWidth: "var(--recursica_ui-kit_components_switch_properties_max-width)",
         controlMinWidth: void 0,
-        overStyled: t,
+        overStyled: s,
         labelElement: "div",
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        description: r,
-        assistiveText: p,
+        formLayout: t,
+        labelSize: a,
+        labelAlignment: c,
+        labelOptionalText: l,
+        labelWithEditIcon: d,
+        onLabelEditClick: i,
+        label: p,
+        description: u,
+        assistiveText: y,
         assistiveWithIcon: m,
-        error: u,
-        required: _,
-        withAsterisk: h,
-        id: b,
-        children: /* @__PURE__ */ o(
-          wo.Group,
+        error: _,
+        required: h,
+        withAsterisk: C,
+        id: f,
+        readOnly: N && !!z,
+        readOnlyComponent: z,
+        emptyValueComponent: L,
+        readOnlyType: "text",
+        readOnlyValue: A !== void 0 ? A : R,
+        readOnlyNativeProps: o,
+        activeComponent: /* @__PURE__ */ e(
+          Ie.Group,
           {
-            ref: z,
+            ref: n,
             ...S,
-            children: /* @__PURE__ */ o("div", { className: v.groupRoot, "data-layout": s, children: j.Children.map(g, (y) => j.isValidElement(y) ? j.cloneElement(y, {
-              disabled: x || y.props.disabled
-            }) : y) })
+            disabled: N || T.disabled,
+            value: A,
+            defaultValue: R,
+            children: /* @__PURE__ */ e("div", { className: w.groupRoot, children: B.Children.map(P, (x) => B.isValidElement(x) ? B.cloneElement(x, {
+              disabled: N || x.props.disabled
+            }) : x) })
           }
         )
       }
     );
   }
 );
-Go.displayName = "SwitchGroup";
-const Mo = f(function({
-  overStyled: t = !1,
-  readOnly: s,
-  readOnlyComponent: c,
-  disabled: a,
-  thumbIcon: n,
-  ...l
-}, d) {
-  const i = N(l, t), r = i;
-  if (delete r.size, delete r.color, delete r.radius, delete r.variant, s && c)
-    return /* @__PURE__ */ o(so, { children: c });
-  const p = {
-    root: v.root,
-    body: v.body,
-    track: v.track,
-    thumb: v.thumb,
-    trackLabel: v.trackLabel,
-    labelWrapper: v.labelWrapper,
-    label: v.label
-  }, m = r.classNames;
-  if (m && typeof m == "object" && !Array.isArray(m)) {
-    const b = m;
-    p.root = b.root ? `${v.root} ${b.root}` : v.root, p.body = b.body ? `${v.body} ${b.body}` : v.body, p.track = b.track ? `${v.track} ${b.track}` : v.track, p.thumb = b.thumb ? `${v.thumb} ${b.thumb}` : v.thumb, p.trackLabel = b.trackLabel ? `${v.trackLabel} ${b.trackLabel}` : v.trackLabel, p.labelWrapper = b.labelWrapper ? `${v.labelWrapper} ${b.labelWrapper}` : v.labelWrapper, p.label = b.label ? `${v.label} ${b.label}` : v.label;
-  }
-  const u = r.className, _ = u ? `${v.root} ${u}` : v.root, h = /* @__PURE__ */ D("div", { className: v.thumbIconWrapper, children: [
-    /* @__PURE__ */ o(re, { className: v.checkIcon }),
-    /* @__PURE__ */ o(se, { className: v.closeIcon })
-  ] });
-  return /* @__PURE__ */ o(
-    wo,
-    {
-      ref: d,
-      className: _,
-      classNames: p,
-      disabled: s || a,
-      thumbIcon: n ?? h,
-      ...i
+to.displayName = "SwitchGroup";
+const ro = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      readOnly: t,
+      readOnlyComponent: a,
+      disabled: c,
+      thumbIcon: l,
+      formLayout: d,
+      labelSize: i,
+      controlMaxWidth: p,
+      controlMinWidth: u,
+      ...y
+    } = o, m = v(y, s), _ = m;
+    delete _.size, delete _.color, delete _.radius, delete _.variant;
+    const h = {
+      root: w.root,
+      body: w.body,
+      track: w.track,
+      thumb: w.thumb,
+      trackLabel: w.trackLabel,
+      labelWrapper: w.labelWrapper,
+      label: w.label
+    }, C = _.classNames;
+    if (C && typeof C == "object" && !Array.isArray(C)) {
+      const N = C;
+      h.root = N.root ? `${w.root} ${N.root}` : w.root, h.body = N.body ? `${w.body} ${N.body}` : w.body, h.track = N.track ? `${w.track} ${N.track}` : w.track, h.thumb = N.thumb ? `${w.thumb} ${N.thumb}` : w.thumb, h.trackLabel = N.trackLabel ? `${w.trackLabel} ${N.trackLabel}` : w.trackLabel, h.labelWrapper = N.labelWrapper ? `${w.labelWrapper} ${N.labelWrapper}` : w.labelWrapper, h.label = N.label ? `${w.label} ${N.label}` : w.label;
     }
-  );
-});
-Mo.displayName = "Switch";
-Mo.Group = Go;
-const Tr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Table" }), zr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Tabs" }), sr = f(function({ overStyled: t = !1, variant: s = "body", ...c }, a) {
-  const n = N(c, t), l = n.className, d = `recursica_brand_typography_${s}`, i = l ? `${d} ${l}` : d;
-  return /* @__PURE__ */ o(
-    ae,
+    const f = _.className, g = f ? `${w.root} ${f}` : w.root;
+    if (t && a) {
+      const N = !!(_.checked ?? _.defaultChecked), L = /* @__PURE__ */ e(
+        a,
+        {
+          ...o,
+          checked: N,
+          label: _.label
+        }
+      );
+      return d ? /* @__PURE__ */ e(
+        X,
+        {
+          formLayout: d,
+          labelSize: i,
+          controlMaxWidth: p,
+          controlMinWidth: u,
+          children: L
+        }
+      ) : /* @__PURE__ */ e(ie, { children: L });
+    }
+    const b = /* @__PURE__ */ E("div", { className: w.thumbIconWrapper, children: [
+      /* @__PURE__ */ e($o, { className: w.checkIcon }),
+      /* @__PURE__ */ e(vo, { className: w.closeIcon })
+    ] }), P = /* @__PURE__ */ e(
+      Ie,
+      {
+        ref: n,
+        className: g,
+        classNames: h,
+        disabled: t || c,
+        thumbIcon: l ?? b,
+        ...m
+      }
+    );
+    return d ? /* @__PURE__ */ e(
+      X,
+      {
+        formLayout: d,
+        labelSize: i,
+        controlMaxWidth: p,
+        controlMinWidth: u,
+        children: P
+      }
+    ) : P;
+  }
+);
+ro.displayName = "Switch";
+ro.Group = to;
+const aa = (r) => /* @__PURE__ */ e("div", { ...r, children: "Table" }), sa = (r) => /* @__PURE__ */ e("div", { ...r, children: "Tabs" }), Tr = $(function({ overStyled: o = !1, variant: n = "body", ...s }, t) {
+  const a = v(s, o), c = a.className, l = `recursica_brand_typography_${n}`, d = c ? `${l} ${c}` : l;
+  return /* @__PURE__ */ e(
+    Co,
     {
-      ref: a,
-      className: i,
-      ...n
+      ref: t,
+      className: d,
+      ...a
     }
   );
 });
-sr.displayName = "Text";
-const ar = "TextArea-module__root___3dyeu", nr = "TextArea-module__input___8l36v", Z = {
-  root: ar,
-  input: nr
-}, cr = f(
-  function({
-    overStyled: t = !1,
-    formLayout: s = "stacked",
-    // Label & Wrapper Maps
-    labelSize: c,
-    labelAlignment: a,
-    labelOptionalText: n,
-    labelWithEditIcon: l,
-    onLabelEditClick: d,
-    label: i,
-    assistiveText: r,
-    assistiveWithIcon: p,
-    error: m,
-    required: u,
-    withAsterisk: _,
-    id: h,
-    className: b,
-    style: C,
-    disabled: $,
-    readOnly: g,
-    readOnlyComponent: x,
-    value: W,
-    defaultValue: k,
-    ...z
-  }, S) {
-    const I = N(z, t), y = I;
-    delete y.size, delete y.variant, delete y.radius;
+Tr.displayName = "Text";
+const Ir = "TextArea-module__root___3dyeu", Lr = "TextArea-module__input___8l36v", te = {
+  root: Ir,
+  input: Lr
+}, Rr = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      formLayout: t = "stacked",
+      // Label & Wrapper Maps
+      labelSize: a,
+      labelAlignment: c,
+      labelOptionalText: l,
+      labelWithEditIcon: d,
+      onLabelEditClick: i,
+      label: p,
+      assistiveText: u,
+      assistiveWithIcon: y,
+      error: m,
+      required: _,
+      withAsterisk: h,
+      id: C,
+      className: f,
+      style: g,
+      disabled: b,
+      readOnly: P,
+      readOnlyComponent: N,
+      emptyValueComponent: z,
+      value: L,
+      defaultValue: A,
+      ...R
+    } = o, O = v(R, s), S = O;
+    delete S.size, delete S.variant, delete S.radius;
     const T = {
-      wrapper: Z.root,
+      wrapper: te.root,
       // The nested Input internal relative wrapper bounding box
-      input: Z.input
-    }, R = y.classNames;
-    if (R && typeof R == "object" && !Array.isArray(R)) {
-      const A = R;
-      T.wrapper = A.wrapper ? `${Z.root} ${A.wrapper}` : Z.root, T.input = A.input ? `${Z.input} ${A.input}` : Z.input;
+      input: te.input
+    }, x = S.classNames;
+    if (x && typeof x == "object" && !Array.isArray(x)) {
+      const I = x;
+      T.wrapper = I.wrapper ? `${te.root} ${I.wrapper}` : te.root, T.input = I.input ? `${te.input} ${I.input}` : te.input;
     }
-    return /* @__PURE__ */ o(
-      lo,
+    return /* @__PURE__ */ e(
+      ee,
       {
-        className: b,
-        style: C,
+        className: f,
+        style: g,
         controlMaxWidth: "var(--recursica_ui-kit_components_text-field_properties_max-width)",
         controlMinWidth: "var(--recursica_ui-kit_components_text-field_properties_min-width)",
-        overStyled: t,
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        assistiveText: r,
-        assistiveWithIcon: p,
+        overStyled: s,
+        formLayout: t,
+        labelSize: a,
+        labelAlignment: c,
+        labelOptionalText: l,
+        labelWithEditIcon: d,
+        onLabelEditClick: i,
+        label: p,
+        assistiveText: u,
+        assistiveWithIcon: y,
         error: m,
-        required: u,
-        withAsterisk: _,
-        id: h,
-        readOnly: g,
-        readOnlyComponent: x,
+        required: _,
+        withAsterisk: h,
+        id: C,
+        readOnly: P,
+        readOnlyComponent: N,
+        emptyValueComponent: z,
         readOnlyType: "text",
-        readOnlyValue: W !== void 0 ? W : k,
+        readOnlyValue: L !== void 0 ? L : A,
+        readOnlyNativeProps: o,
         activeComponent: (
           /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
-          /* @__PURE__ */ o(
-            ne,
+          /* @__PURE__ */ e(
+            go,
             {
-              ref: S,
+              ref: n,
               classNames: T,
-              disabled: $,
-              value: W,
-              defaultValue: k,
+              disabled: b,
+              value: L,
+              defaultValue: A,
               label: void 0,
               description: void 0,
               error: void 0,
               required: void 0,
               withAsterisk: void 0,
               wrapperProps: {
-                "data-disabled": $ ? "true" : void 0,
+                "data-disabled": b ? "true" : void 0,
                 "data-error": m ? "true" : void 0
               },
-              ...I
+              ...O
             }
           )
         )
@@ -1628,89 +1928,92 @@ const ar = "TextArea-module__root___3dyeu", nr = "TextArea-module__input___8l36v
     );
   }
 );
-cr.displayName = "TextArea";
-const ir = "TextField-module__root___2ZYkG", lr = "TextField-module__input___RL-My", dr = "TextField-module__section___bCIJ0", O = {
-  root: ir,
-  input: lr,
-  section: dr
-}, pr = f(
-  function({
-    overStyled: t = !1,
-    formLayout: s = "stacked",
-    // Label & Wrapper Maps
-    labelSize: c,
-    labelAlignment: a,
-    labelOptionalText: n,
-    labelWithEditIcon: l,
-    onLabelEditClick: d,
-    label: i,
-    assistiveText: r,
-    assistiveWithIcon: p,
-    error: m,
-    required: u,
-    withAsterisk: _,
-    id: h,
-    className: b,
-    style: C,
-    disabled: $,
-    readOnly: g,
-    readOnlyComponent: x,
-    value: W,
-    defaultValue: k,
-    ...z
-  }, S) {
-    const I = N(z, t), y = I;
-    delete y.size, delete y.variant, delete y.radius;
+Rr.displayName = "TextArea";
+const Or = "TextField-module__root___2ZYkG", zr = "TextField-module__input___RL-My", Mr = "TextField-module__section___bCIJ0", Z = {
+  root: Or,
+  input: zr,
+  section: Mr
+}, Fr = $(
+  function(o, n) {
+    const {
+      overStyled: s = !1,
+      formLayout: t = "stacked",
+      // Label & Wrapper Maps
+      labelSize: a,
+      labelAlignment: c,
+      labelOptionalText: l,
+      labelWithEditIcon: d,
+      onLabelEditClick: i,
+      label: p,
+      assistiveText: u,
+      assistiveWithIcon: y,
+      error: m,
+      required: _,
+      withAsterisk: h,
+      id: C,
+      className: f,
+      style: g,
+      disabled: b,
+      readOnly: P,
+      readOnlyComponent: N,
+      emptyValueComponent: z,
+      value: L,
+      defaultValue: A,
+      ...R
+    } = o, O = v(R, s), S = O;
+    delete S.size, delete S.variant, delete S.radius;
     const T = {
-      wrapper: O.root,
+      wrapper: Z.root,
       // The nested Input internal relative wrapper bounding box
-      input: O.input,
-      section: O.section
-    }, R = y.classNames;
-    if (R && typeof R == "object" && !Array.isArray(R)) {
-      const A = R;
-      T.wrapper = A.wrapper ? `${O.root} ${A.wrapper}` : O.root, T.input = A.input ? `${O.input} ${A.input}` : O.input, T.section = A.section ? `${O.section} ${A.section}` : O.section;
+      input: Z.input,
+      section: Z.section
+    }, x = S.classNames;
+    if (x && typeof x == "object" && !Array.isArray(x)) {
+      const I = x;
+      T.wrapper = I.wrapper ? `${Z.root} ${I.wrapper}` : Z.root, T.input = I.input ? `${Z.input} ${I.input}` : Z.input, T.section = I.section ? `${Z.section} ${I.section}` : Z.section;
     }
-    return /* @__PURE__ */ o(
-      lo,
+    return /* @__PURE__ */ e(
+      ee,
       {
-        className: b,
-        style: C,
+        className: f,
+        style: g,
         controlMaxWidth: "var(--recursica_ui-kit_components_text-field_properties_max-width)",
         controlMinWidth: "var(--recursica_ui-kit_components_text-field_properties_min-width)",
-        overStyled: t,
-        formLayout: s,
-        labelSize: c,
-        labelAlignment: a,
-        labelOptionalText: n,
-        labelWithEditIcon: l,
-        onLabelEditClick: d,
-        label: i,
-        assistiveText: r,
-        assistiveWithIcon: p,
+        overStyled: s,
+        formLayout: t,
+        labelSize: a,
+        labelAlignment: c,
+        labelOptionalText: l,
+        labelWithEditIcon: d,
+        onLabelEditClick: i,
+        label: p,
+        assistiveText: u,
+        assistiveWithIcon: y,
         error: m,
-        required: u,
-        withAsterisk: _,
-        id: h,
-        readOnly: g,
-        readOnlyComponent: x,
+        required: _,
+        withAsterisk: h,
+        id: C,
+        readOnly: P,
+        readOnlyComponent: N,
+        emptyValueComponent: z,
         readOnlyType: "text",
-        readOnlyValue: W !== void 0 ? W : k,
+        readOnlyValue: L !== void 0 ? L : A,
+        readOnlyNativeProps: o,
         activeComponent: (
           /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
-          /* @__PURE__ */ o(
-            vo,
+          /* @__PURE__ */ e(
+            Ae,
             {
-              ref: S,
+              ref: n,
               classNames: T,
-              disabled: $,
-              value: W,
-              defaultValue: k,
+              disabled: b,
+              value: L,
+              defaultValue: A,
               wrapperProps: {
-                "data-disabled": $ ? "true" : void 0,
+                "data-disabled": b ? "true" : void 0,
                 "data-error": m ? "true" : void 0
               },
-              ...I
+              ...O
             }
           )
         )
@@ -1718,80 +2021,83 @@ const ir = "TextField-module__root___2ZYkG", lr = "TextField-module__input___RL-
     );
   }
 );
-pr.displayName = "TextField";
-const Ir = (e) => /* @__PURE__ */ o("div", { ...e, children: "TimePicker" }), Fr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Timeline" }), _r = f(function({ overStyled: t = !1, order: s = 1, ...c }, a) {
-  const n = N(c, t), l = n.className, d = `recursica_brand_typography_h${s}`, i = l ? `${d} ${l}` : d;
-  return /* @__PURE__ */ o(
-    ce,
+Fr.displayName = "TextField";
+const na = (r) => /* @__PURE__ */ e("div", { ...r, children: "TimePicker" }), la = (r) => /* @__PURE__ */ e("div", { ...r, children: "Timeline" }), Er = $(function({ overStyled: o = !1, order: n = 1, ...s }, t) {
+  const a = v(s, o), c = a.className, l = `recursica_brand_typography_h${n}`, d = c ? `${l} ${c}` : l;
+  return /* @__PURE__ */ e(
+    xo,
     {
-      ref: a,
-      order: s,
-      className: i,
-      ...n
+      ref: t,
+      order: n,
+      className: d,
+      ...a
     }
   );
 });
-_r.displayName = "Title";
-const Lr = (e) => /* @__PURE__ */ o("div", { ...e, children: "Toast" }), Br = (e) => /* @__PURE__ */ o("div", { ...e, children: "Tooltip" }), jr = (e) => /* @__PURE__ */ o("div", { ...e, children: "TransferList" });
+Er.displayName = "Title";
+const ca = (r) => /* @__PURE__ */ e("div", { ...r, children: "Toast" }), ia = (r) => /* @__PURE__ */ e("div", { ...r, children: "Tooltip" }), da = (r) => /* @__PURE__ */ e("div", { ...r, children: "TransferList" });
 export {
-  ho as Accordion,
-  uo as AccordionControl,
-  Wo as AccordionItem,
-  bo as AccordionPanel,
-  xe as Avatar,
-  Pe as Badge,
-  Ae as Breadcrumb,
-  Le as Button,
-  io as Card,
-  To as CardContent,
-  So as CardFooter,
-  Ro as CardHeader,
-  Ao as CardSection,
-  Fo as Checkbox,
-  Io as CheckboxGroup,
-  ft as Chip,
-  yt as Container,
-  hr as DatePicker,
-  Rt as Dropdown,
-  ao as EmptyValueRenderer,
-  fr as FileInput,
-  Nr as FileUpload,
-  Tt as Flex,
-  It as Group,
-  yr as HoverCard,
-  zo as Label,
-  gt as Layer,
-  vr as Link,
-  Lt as Loader,
-  Cr as Menu,
-  gr as Modal,
-  xr as NumberInput,
-  wr as Pagination,
-  Pr as Panel,
-  Wr as Popover,
-  Eo as Radio,
-  jo as RadioGroup,
-  Bo as ReadOnlyField,
-  Lo as ReadOnlyTextField,
-  $r as RecursicaThemeProvider,
-  kr as Search,
-  Ar as SegmentedControl,
-  Rr as Slider,
-  Ht as Stack,
-  Sr as Stepper,
-  Mo as Switch,
-  Go as SwitchGroup,
-  Tr as Table,
-  zr as Tabs,
-  sr as Text,
-  cr as TextArea,
-  pr as TextField,
-  Ir as TimePicker,
-  Fr as Timeline,
-  _r as Title,
-  Lr as Toast,
-  Br as Tooltip,
-  jr as TransferList,
-  lo as WithReadOnlyWrapper
+  we as Accordion,
+  ge as AccordionControl,
+  Re as AccordionItem,
+  xe as AccordionPanel,
+  jo as Avatar,
+  Vo as Badge,
+  Yo as Breadcrumb,
+  Jo as Button,
+  fe as Card,
+  Ee as CardContent,
+  Fe as CardFooter,
+  Me as CardHeader,
+  ze as CardSection,
+  Ve as Checkbox,
+  De as CheckboxGroup,
+  Bt as Chip,
+  Dt as Container,
+  Gr as DatePicker,
+  Ht as Dropdown,
+  _e as EmptyValueRenderer,
+  qr as FileInput,
+  Yr as FileUpload,
+  Ut as Flex,
+  X as FormControlLayout,
+  Qt as Group,
+  Zr as HoverCard,
+  Be as Label,
+  Ct as Layer,
+  Hr as Link,
+  er as Loader,
+  re as Menu,
+  Kr as Modal,
+  Ur as NumberInput,
+  Xr as Pagination,
+  Qr as Panel,
+  Jr as Popover,
+  oo as Radio,
+  eo as RadioGroup,
+  fr as ReadOnlyBooleanField,
+  je as ReadOnlyField,
+  hr as ReadOnlySwitchField,
+  me as ReadOnlyTextField,
+  Vr as RecursicaThemeProvider,
+  ea as Search,
+  oa as SegmentedControl,
+  ta as Slider,
+  $r as Stack,
+  ra as Stepper,
+  ro as Switch,
+  to as SwitchGroup,
+  aa as Table,
+  sa as Tabs,
+  Tr as Text,
+  Rr as TextArea,
+  Fr as TextField,
+  na as TimePicker,
+  la as Timeline,
+  Er as Title,
+  ca as Toast,
+  ia as Tooltip,
+  da as TransferList,
+  ee as WithReadOnlyWrapper
 };
 //# sourceMappingURL=mantine-adapter.js.map