@owp/core 2.5.8 → 2.5.9

package/dist/features/themePreview/components/ThemePreviewControls.js

@@ -1,71 +1,73 @@
-var L = Object.defineProperty;
-var h = (e, a) => L(e, "name", { value: a, configurable: !0 });
-import { jsxs as p, jsx as o } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { ButtonBase as R, Typography as b, Paper as $, TextField as A, MenuItem as F, FormControlLabel as V, Checkbox as H, Divider as Y } from "@mui/material";
-import { useState as Z, useMemo as M } from "react";
-import { ThemePreviewColorField as U } from "./ThemePreviewColorField.js";
-import { getThemePreviewPresetOptionsByMode as q, THEME_PREVIEW_CUSTOM_PRESET_KEY as D, getThemePreviewPaletteValue as W, isThemePreviewCustomSection as J } from "../utils/themePreviewSettings.js";
-import { themePreviewFieldGroupsBySection as Q, themePreviewSectionOptions as _ } from "../utils/themePreviewDefinitions.js";
-import { deriveThemePreviewPaletteGroupValues as X } from "../utils/color.js";
-function O(e) {
-  return e.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (a) => a.toUpperCase());
+var oe = Object.defineProperty;
+var s = (r, d) => oe(r, "name", { value: d, configurable: !0 });
+import { jsx as o, jsxs as m } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { ButtonBase as te, Typography as g, Paper as $, TextField as L, MenuItem as S, Divider as le, Box as ne, IconButton as ae, FormControlLabel as ie, Checkbox as se } from "@mui/material";
+import de from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/RestartAltOutlined.js";
+import { ThemeProvider as ce, createTheme as he } from "@mui/material/styles";
+import { useState as ue, useMemo as A } from "react";
+import { ThemePreviewColorField as _ } from "./ThemePreviewColorField.js";
+import { getThemePreviewPresetOptionsByMode as me, THEME_PREVIEW_CUSTOM_PRESET_KEY as O, isThemePreviewCustomSection as fe, getThemePreviewPaletteValue as G } from "../utils/themePreviewSettings.js";
+import { themePreviewFieldGroupsBySection as pe, themePreviewSectionOptions as q } from "../utils/themePreviewDefinitions.js";
+import { deriveThemePreviewPaletteGroupValues as be } from "../utils/color.js";
+function Ce(r) {
+  return r.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (d) => d.toUpperCase());
 }
-h(O, "getThemePreviewFieldClusterLabel");
-function ee(e) {
-  const a = e.find((u) => u.path.endsWith(".main")), m = e.find((u) => u.path.endsWith(".light")), s = e.find((u) => u.path.endsWith(".dark")), i = e.find((u) => u.path.endsWith(".contrastText"));
-  return !a || !m && !s && !i ? null : {
-    mainPath: a.path,
-    lightPath: m == null ? void 0 : m.path,
-    darkPath: s == null ? void 0 : s.path,
-    contrastTextPath: i == null ? void 0 : i.path
+s(Ce, "getThemePreviewFieldClusterLabel");
+function ve(r) {
+  const d = r.find((p) => p.path.endsWith(".main")), b = r.find((p) => p.path.endsWith(".light")), f = r.find((p) => p.path.endsWith(".dark")), c = r.find((p) => p.path.endsWith(".contrastText"));
+  return !d || !b && !f && !c ? null : {
+    mainPath: d.path,
+    lightPath: b == null ? void 0 : b.path,
+    darkPath: f == null ? void 0 : f.path,
+    contrastTextPath: c == null ? void 0 : c.path
   };
 }
-h(ee, "getThemePreviewAutoDerivedFieldPaths");
-function re(e) {
-  const a = e.reduce(
-    (t, c) => {
-      const n = c.path.split(".")[0] ?? "";
-      return n && (t[n] || (t[n] = []), t[n].push(c)), t;
+s(ve, "getThemePreviewAutoDerivedFieldPaths");
+function xe(r) {
+  const d = r.reduce(
+    (t, h) => {
+      const n = h.path.split(".")[0] ?? "";
+      return n && (t[n] || (t[n] = []), t[n].push(h)), t;
     },
     {}
-  ), m = Object.fromEntries(
-    Object.entries(a).map(([t, c]) => [
+  ), b = Object.fromEntries(
+    Object.entries(d).map(([t, h]) => [
       t,
-      c.length
+      h.length
     ])
-  ), s = new Set(
-    Object.entries(m).filter(([, t]) => t > 1).map(([t]) => t)
-  ), i = e.some(
-    (t) => !s.has(t.path.split(".")[0] ?? "")
+  ), f = new Set(
+    Object.entries(b).filter(([, t]) => t > 1).map(([t]) => t)
+  ), c = r.some(
+    (t) => !f.has(t.path.split(".")[0] ?? "")
   );
-  if (!(s.size > 1 || i))
-    return e.map((t) => ({
+  if (!(f.size > 1 || c))
+    return r.map((t) => ({
       key: t.path,
       fields: [t]
     }));
-  const C = /* @__PURE__ */ new Set();
-  return e.reduce((t, c) => {
-    const n = c.path.split(".")[0] ?? "";
-    if (!s.has(n))
+  const B = /* @__PURE__ */ new Set();
+  return r.reduce((t, h) => {
+    const n = h.path.split(".")[0] ?? "";
+    if (!f.has(n))
       return t.push({
-        key: c.path,
-        fields: [c]
+        key: h.path,
+        fields: [h]
       }), t;
-    if (C.has(n))
+    if (B.has(n))
       return t;
-    C.add(n);
-    const y = a[n] ?? [c];
+    B.add(n);
+    const F = d[n] ?? [h];
     return t.push({
       key: n,
-      label: O(n),
-      fields: y,
-      autoDerivedFieldPaths: ee(y) ?? void 0
+      label: Ce(n),
+      fields: F,
+      autoDerivedFieldPaths: ve(F) ?? void 0
     }), t;
   }, []);
 }
-h(re, "getThemePreviewFieldClusters");
-const te = Object.fromEntries(
-  _.map((e) => [e.key, e])
+s(xe, "getThemePreviewFieldClusters");
+const ge = Object.fromEntries(
+  q.map((r) => [r.key, r])
 ), x = {
   active: {
     backgroundColor: "#1ea3e6",
@@ -79,46 +81,279 @@ const te = Object.fromEntries(
     descriptionColor: "#6b7280",
     textColor: "#111827"
   }
-}, K = "#d8dee8", oe = "#d1d7e0", le = "#f8fafc", ne = "#ffffff", ae = "#111827";
-function pe({
-  activeSection: e,
-  presetOptions: a,
-  selectedMode: m,
-  selectedPresetKey: s,
-  settings: i,
-  onSectionChange: u,
-  onPaletteValueChange: C,
-  onPaletteValuesChange: t,
-  onPresetKeyChange: c,
-  onPresetModeChange: n
+}, T = "#d8dee8", ke = "#d1d7e0", Pe = "#f8fafc", D = "#ffffff", k = "#111827", P = "#6b7280", Y = "#ffffff", J = "#cbd5e1", ye = "#94a3b8", E = "#1ea3e6", Z = "#111827", we = "#f8fafc", Te = "#f8fafc", Be = he({
+  palette: {
+    mode: "light",
+    background: {
+      default: D,
+      paper: D
+    },
+    divider: T,
+    primary: {
+      main: E
+    },
+    secondary: {
+      main: E
+    },
+    text: {
+      primary: k,
+      secondary: P
+    }
+  },
+  typography: {
+    htmlFontSize: 10,
+    fontSize: 13,
+    body1: {
+      fontSize: "1.3rem"
+    },
+    body2: {
+      fontSize: "1.3rem"
+    }
+  }
+}), Fe = {
+  color: k,
+  "& .MuiFormHelperText-root": {
+    color: P
+  },
+  "& .MuiInputAdornment-root": {
+    color: P
+  },
+  "& .MuiInputLabel-root": {
+    color: P
+  },
+  "& .MuiInputLabel-root.Mui-focused": {
+    color: k
+  },
+  "& .MuiInputBase-input": {
+    color: k
+  },
+  "& .MuiOutlinedInput-root": {
+    backgroundColor: Y,
+    color: k,
+    "& fieldset": {
+      borderColor: J
+    },
+    "&:hover fieldset": {
+      borderColor: ye
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: E,
+      borderWidth: 1
+    }
+  },
+  "& .MuiSelect-icon": {
+    color: P
+  },
+  "& .MuiButton-outlined": {
+    backgroundColor: Y,
+    borderColor: Z,
+    color: k,
+    "&:hover": {
+      backgroundColor: we,
+      borderColor: Z
+    }
+  },
+  "& .MuiCheckbox-root": {
+    color: P
+  },
+  "& .MuiCheckbox-root.Mui-checked": {
+    color: E
+  },
+  "& .MuiDivider-root": {
+    borderColor: T
+  }
+};
+function Ge({
+  activeSection: r,
+  presetOptions: d,
+  selectedMode: b,
+  selectedPresetKey: f,
+  settings: c,
+  resetVersion: p,
+  onSectionChange: B,
+  onPaletteValueChange: t,
+  onPaletteValuesChange: h,
+  onPaletteValueReset: n,
+  onPaletteValuesReset: F,
+  onPresetKeyChange: Q,
+  onPresetModeChange: V
 }) {
-  const [y, z] = Z({}), w = !J(e), v = w ? e : null, I = M(
-    () => w && v ? q(a, v, m) : [],
-    [w, a, v, m]
-  ), j = Q[e], G = M(
-    () => j.map((r) => ({
-      ...r,
-      fieldClusters: re(r.fields)
+  const [X, ee] = ue({}), M = !fe(r), C = M ? r : null, re = A(
+    () => M && C ? me(d, C, b) : [],
+    [M, d, C, b]
+  ), R = pe[r], N = A(
+    () => R.map((e) => ({
+      ...e,
+      fieldClusters: xe(e.fields)
     })),
-    [j]
-  ), N = te[e], S = /* @__PURE__ */ h((r, l, T) => {
-    const P = W(i, r, "common.white") || "#FFFFFF", d = W(i, r, "common.black") || "#111827", g = X(T, {
-      whiteTextColor: P,
-      blackTextColor: d
+    [R]
+  ), H = A(() => {
+    if (r !== "table")
+      return [
+        {
+          key: r,
+          fieldGroups: N
+        }
+      ];
+    const e = /* @__PURE__ */ new Set(["tableFieldHeader", "tableFieldCell"]), l = N.filter(
+      (u) => e.has(u.key)
+    ), i = N.filter(
+      (u) => !e.has(u.key)
+    );
+    return [
+      {
+        key: "table-field",
+        label: "Field Table",
+        fieldGroups: l
+      },
+      {
+        key: "table-base",
+        label: "Table",
+        fieldGroups: i
+      }
+    ].filter((u) => u.fieldGroups.length > 0);
+  }, [r, N]), W = ge[r], K = /* @__PURE__ */ s((e, l, i) => {
+    const u = G(c, e, "common.white") || "#FFFFFF", y = G(c, e, "common.black") || "#111827", a = be(i, {
+      whiteTextColor: u,
+      blackTextColor: y
     });
-    return g ? [
-      l.lightPath ? { path: l.lightPath, value: g.light } : null,
-      l.darkPath ? { path: l.darkPath, value: g.dark } : null,
-      l.contrastTextPath ? { path: l.contrastTextPath, value: g.contrastText } : null
-    ].filter((f) => !!f) : [];
-  }, "getAutoDerivedUpdates");
-  return /* @__PURE__ */ p("div", { className: "flex h-full min-h-0 flex-col gap-16", children: [
-    /* @__PURE__ */ o("div", { className: "grid grid-cols-2 gap-12", children: _.map((r) => {
-      const l = r.key === e;
+    return a ? [
+      l.lightPath ? { path: l.lightPath, value: a.light } : null,
+      l.darkPath ? { path: l.darkPath, value: a.dark } : null,
+      l.contrastTextPath ? { path: l.contrastTextPath, value: a.contrastText } : null
+    ].filter((j) => !!j) : [];
+  }, "getAutoDerivedUpdates"), U = /* @__PURE__ */ s((e) => {
+    const l = e.fieldClusters.flatMap(
+      (i) => i.fields.map((u) => u.path)
+    );
+    return /* @__PURE__ */ m("div", { className: "flex flex-col gap-12", children: [
+      e.label ? /* @__PURE__ */ m("div", { className: "flex items-center justify-between gap-8", children: [
+        /* @__PURE__ */ o(g, { variant: "subtitle1", fontWeight: 700, children: e.label }),
+        /* @__PURE__ */ o(
+          ae,
+          {
+            size: "small",
+            "aria-label": `${e.label} reset`,
+            onClick: /* @__PURE__ */ s(() => {
+              F(l);
+            }, "onClick"),
+            sx: {
+              border: `1px solid ${J}`,
+              borderRadius: 1,
+              color: P,
+              p: 0.5
+            },
+            children: /* @__PURE__ */ o(de, { sx: { fontSize: 18 } })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ o("div", { className: "grid gap-12", children: e.fieldClusters.map((i) => {
+        if (!i.label)
+          return i.fields.map((v) => /* @__PURE__ */ o(
+            _,
+            {
+              definition: v,
+              resetVersion: p,
+              sectionKey: r,
+              settings: c,
+              onChange: t,
+              onReset: n
+            },
+            v.path
+          ));
+        const u = `${r}:${e.key}:${i.key}`, y = !!X[u], a = i.autoDerivedFieldPaths, j = !!(a && C);
+        return /* @__PURE__ */ m(
+          $,
+          {
+            variant: "outlined",
+            sx: {
+              backgroundColor: Pe,
+              borderColor: ke,
+              display: "flex",
+              flexDirection: "column",
+              gap: 1.5,
+              p: 1.5
+            },
+            children: [
+              /* @__PURE__ */ m("div", { className: "flex items-start justify-between gap-12", children: [
+                /* @__PURE__ */ o(g, { variant: "body2", fontWeight: 700, children: i.label }),
+                j ? /* @__PURE__ */ o(
+                  ie,
+                  {
+                    className: "m-0",
+                    control: /* @__PURE__ */ o(
+                      se,
+                      {
+                        size: "small",
+                        checked: y,
+                        onChange: /* @__PURE__ */ s((v) => {
+                          const I = v.target.checked;
+                          ee((w) => ({
+                            ...w,
+                            [u]: I
+                          })), !I && (!C || !a || h(
+                            K(
+                              C,
+                              a,
+                              G(
+                                c,
+                                r,
+                                a.mainPath
+                              )
+                            )
+                          ));
+                        }, "onChange")
+                      }
+                    ),
+                    label: /* @__PURE__ */ o(g, { variant: "caption", color: "text.secondary", children: "Edit derived colors" })
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ o("div", { className: "grid gap-12", children: i.fields.map((v) => {
+                const I = a && C ? !y && v.path !== a.mainPath : !1;
+                return /* @__PURE__ */ o(
+                  _,
+                  {
+                    disabled: I,
+                    definition: v,
+                    resetVersion: p,
+                    sectionKey: r,
+                    settings: c,
+                    onChange: /* @__PURE__ */ s((w, z) => {
+                      if (!a || !C || y || w !== a.mainPath) {
+                        t(w, z);
+                        return;
+                      }
+                      h(
+                        [
+                          { path: w, value: z },
+                          ...K(
+                            C,
+                            a,
+                            z
+                          )
+                        ]
+                      );
+                    }, "onChange"),
+                    onReset: n
+                  },
+                  v.path
+                );
+              }) })
+            ]
+          },
+          i.key
+        );
+      }) })
+    ] }, e.key);
+  }, "renderFieldGroup");
+  return /* @__PURE__ */ o(ce, { theme: Be, children: /* @__PURE__ */ m(ne, { sx: Fe, className: "flex h-full min-h-0 flex-col gap-16", children: [
+    /* @__PURE__ */ o("div", { className: "grid grid-cols-2 gap-12", children: q.map((e) => {
+      const l = e.key === r;
       return /* @__PURE__ */ o(
-        R,
+        te,
         {
-          onClick: /* @__PURE__ */ h(() => u(r.key), "onClick"),
+          onClick: /* @__PURE__ */ s(() => B(e.key), "onClick"),
           className: "w-full rounded-lg text-left",
           sx: {
             alignItems: "flex-start",
@@ -127,180 +362,103 @@ function pe({
             color: l ? x.active.textColor : x.inactive.textColor,
             p: 2
           },
-          children: /* @__PURE__ */ p("div", { className: "flex w-full flex-col gap-4", children: [
-            /* @__PURE__ */ o(b, { variant: "subtitle1", fontWeight: 600, children: r.label }),
-            r.description ? /* @__PURE__ */ o(
-              b,
+          children: /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-4", children: [
+            /* @__PURE__ */ o(g, { variant: "subtitle1", fontWeight: 600, children: e.label }),
+            e.description ? /* @__PURE__ */ o(
+              g,
               {
                 variant: "body2",
                 sx: {
                   color: l ? x.active.descriptionColor : x.inactive.descriptionColor
                 },
-                children: r.description
+                children: e.description
               }
             ) : null
           ] })
         },
-        r.key
+        e.key
       );
     }) }),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ m(
       $,
       {
         className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg",
         sx: {
-          backgroundColor: ne,
-          border: `1px solid ${K}`,
+          backgroundColor: D,
+          border: `1px solid ${T}`,
           boxShadow: "none"
         },
         children: [
-          /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-20 py-16", children: /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 flex-col gap-14", children: [
-            /* @__PURE__ */ o(b, { variant: "h6", sx: { color: ae }, children: N == null ? void 0 : N.label }),
-            w ? /* @__PURE__ */ p("div", { className: "grid gap-12 md:grid-cols-2", children: [
-              /* @__PURE__ */ p(
-                A,
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-20 py-16", children: /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 flex-col gap-14", children: [
+            /* @__PURE__ */ o(g, { variant: "h6", sx: { color: k }, children: W == null ? void 0 : W.label }),
+            M ? /* @__PURE__ */ m("div", { className: "grid gap-12 md:grid-cols-2", children: [
+              /* @__PURE__ */ m(
+                L,
                 {
                   select: !0,
                   label: "Mode",
-                  value: m,
-                  onChange: /* @__PURE__ */ h((r) => {
-                    n(r.target.value);
+                  value: b,
+                  onChange: /* @__PURE__ */ s((e) => {
+                    V(e.target.value);
                   }, "onChange"),
                   children: [
-                    /* @__PURE__ */ o(F, { value: "light", children: "light" }),
-                    /* @__PURE__ */ o(F, { value: "dark", children: "dark" })
+                    /* @__PURE__ */ o(S, { value: "light", children: "light" }),
+                    /* @__PURE__ */ o(S, { value: "dark", children: "dark" })
                   ]
                 }
               ),
-              /* @__PURE__ */ p(
-                A,
+              /* @__PURE__ */ m(
+                L,
                 {
                   select: !0,
                   label: "Preset",
-                  value: s,
-                  onChange: /* @__PURE__ */ h((r) => {
-                    c(r.target.value);
+                  value: f,
+                  onChange: /* @__PURE__ */ s((e) => {
+                    Q(e.target.value);
                   }, "onChange"),
                   children: [
-                    s === D ? /* @__PURE__ */ o(F, { value: D, children: "custom" }) : null,
-                    I.map((r) => /* @__PURE__ */ o(F, { value: r.key, children: r.label }, r.key))
+                    f === O ? /* @__PURE__ */ o(S, { value: O, children: "custom" }) : null,
+                    re.map((e) => /* @__PURE__ */ o(S, { value: e.key, children: e.label }, e.key))
                   ]
                 }
               )
             ] }) : null
           ] }) }),
           /* @__PURE__ */ o(
-            Y,
+            le,
             {
               sx: {
-                borderColor: K
+                borderColor: T
               }
             }
           ),
-          /* @__PURE__ */ o("div", { className: "flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto px-20 py-20", children: G.map((r) => /* @__PURE__ */ p("div", { className: "flex flex-col gap-12", children: [
-            r.label ? /* @__PURE__ */ o(b, { variant: "subtitle1", fontWeight: 700, children: r.label }) : null,
-            /* @__PURE__ */ o("div", { className: "grid gap-12", children: r.fieldClusters.map((l) => {
-              if (!l.label)
-                return l.fields.map((f) => /* @__PURE__ */ o(
-                  U,
-                  {
-                    definition: f,
-                    sectionKey: e,
-                    settings: i,
-                    onChange: C
-                  },
-                  f.path
-                ));
-              const T = `${e}:${r.key}:${l.key}`, P = !!y[T], d = l.autoDerivedFieldPaths, g = !!(d && v);
-              return /* @__PURE__ */ p(
-                $,
-                {
-                  variant: "outlined",
-                  sx: {
-                    backgroundColor: le,
-                    borderColor: oe,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 1.5,
-                    p: 1.5
-                  },
-                  children: [
-                    /* @__PURE__ */ p("div", { className: "flex items-start justify-between gap-12", children: [
-                      /* @__PURE__ */ o(b, { variant: "body2", fontWeight: 700, children: l.label }),
-                      g ? /* @__PURE__ */ o(
-                        V,
-                        {
-                          className: "m-0",
-                          control: /* @__PURE__ */ o(
-                            H,
-                            {
-                              size: "small",
-                              checked: P,
-                              onChange: /* @__PURE__ */ h((f) => {
-                                const B = f.target.checked;
-                                z((k) => ({
-                                  ...k,
-                                  [T]: B
-                                })), !B && (!v || !d || t(
-                                  S(
-                                    v,
-                                    d,
-                                    W(
-                                      i,
-                                      e,
-                                      d.mainPath
-                                    )
-                                  )
-                                ));
-                              }, "onChange")
-                            }
-                          ),
-                          label: /* @__PURE__ */ o(b, { variant: "caption", color: "text.secondary", children: "Edit derived colors" })
-                        }
-                      ) : null
-                    ] }),
-                    /* @__PURE__ */ o("div", { className: "grid gap-12", children: l.fields.map((f) => {
-                      const B = d && v ? !P && f.path !== d.mainPath : !1;
-                      return /* @__PURE__ */ o(
-                        U,
-                        {
-                          disabled: B,
-                          definition: f,
-                          sectionKey: e,
-                          settings: i,
-                          onChange: /* @__PURE__ */ h((k, E) => {
-                            if (!d || !v || P || k !== d.mainPath) {
-                              C(k, E);
-                              return;
-                            }
-                            t(
-                              [
-                                { path: k, value: E },
-                                ...S(
-                                  v,
-                                  d,
-                                  E
-                                )
-                              ]
-                            );
-                          }, "onChange")
-                        },
-                        f.path
-                      );
-                    }) })
-                  ]
-                },
-                l.key
-              );
-            }) })
-          ] }, r.key)) })
+          /* @__PURE__ */ o("div", { className: "flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto px-20 py-20", children: H.map((e) => r === "table" && H.length > 1 ? /* @__PURE__ */ m(
+            $,
+            {
+              variant: "outlined",
+              sx: {
+                backgroundColor: Te,
+                borderColor: T,
+                boxShadow: "none",
+                display: "flex",
+                flexDirection: "column",
+                gap: 2,
+                p: 2
+              },
+              children: [
+                e.label ? /* @__PURE__ */ o(g, { variant: "subtitle1", fontWeight: 700, children: e.label }) : null,
+                /* @__PURE__ */ o("div", { className: "grid gap-20", children: e.fieldGroups.map(U) })
+              ]
+            },
+            e.key
+          ) : e.fieldGroups.map(U)) })
         ]
       }
     )
-  ] });
+  ] }) });
 }
-h(pe, "ThemePreviewControls");
+s(Ge, "ThemePreviewControls");
 export {
-  pe as ThemePreviewControls
+  Ge as ThemePreviewControls
 };
 //# sourceMappingURL=ThemePreviewControls.js.map