@owp/core 2.5.62 → 2.5.63

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

@@ -1,74 +1,79 @@
-var ae = Object.defineProperty;
-var s = (r, d) => ae(r, "name", { value: d, configurable: !0 });
-import { jsx as o, jsxs as h } 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 { Divider as Z, MenuItem as W, ButtonBase as se, Typography as x, Paper as A, TextField as q, Box as de, IconButton as ce, FormControlLabel as ue, Checkbox as he } from "@mui/material";
-import me 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 { createTheme as fe, ThemeProvider as pe } from "@mui/material/styles";
-import { useState as be, useRef as Ce, useMemo as B, useEffect as ge } from "react";
-import { toolbarCuratedPresetKeys as ve, designSystemPresetKeys as xe } from "../configs/presets.js";
-import { ThemePreviewColorField as J } from "./ThemePreviewColorField.js";
-import { getThemePreviewPresetOptionsByMode as ye, THEME_PREVIEW_CUSTOM_PRESET_KEY as O, isThemePreviewCustomSection as ke, getThemePreviewPaletteValue as R } from "../utils/themePreviewSettings.js";
-import { themePreviewFieldGroupsBySection as Pe, themePreviewSectionOptions as ee } from "../utils/themePreviewDefinitions.js";
-import { deriveThemePreviewPaletteGroupValues as we } from "../utils/color.js";
-function Te(r) {
-  return r.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (d) => d.toUpperCase());
-}
-s(Te, "getThemePreviewFieldClusterLabel");
+var se = Object.defineProperty;
+var d = (r, a) => se(r, "name", { value: a, 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 { Divider as q, MenuItem as z, ButtonBase as de, Typography as x, Paper as G, TextField as J, Box as ce, IconButton as ue, FormControlLabel as he, Checkbox as me } from "@mui/material";
+import fe 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 { createTheme as pe, ThemeProvider as be } from "@mui/material/styles";
+import { useState as Ce, useRef as ge, useMemo as B, useEffect as ve } from "react";
+import { toolbarCuratedPresetKeys as xe, designSystemPresetKeys as Pe } from "../configs/presets.js";
+import { ThemePreviewColorField as O } from "./ThemePreviewColorField.js";
+import { getThemePreviewPresetOptionsByMode as ke, THEME_PREVIEW_CUSTOM_PRESET_KEY as Q, isThemePreviewCustomSection as ye, getThemePreviewPaletteValue as M } from "../utils/themePreviewSettings.js";
+import { themePreviewFieldGroupsBySection as we, themePreviewSectionOptions as re } from "../utils/themePreviewDefinitions.js";
+import { deriveThemePreviewPaletteGroupValues as Te } from "../utils/color.js";
 function Be(r) {
-  const d = r.find((f) => f.path.endsWith(".main")), p = r.find((f) => f.path.endsWith(".light")), m = r.find((f) => f.path.endsWith(".dark")), c = r.find((f) => f.path.endsWith(".contrastText"));
-  return !d || !p && !m && !c ? null : {
-    mainPath: d.path,
-    lightPath: p == null ? void 0 : p.path,
-    darkPath: m == null ? void 0 : m.path,
-    contrastTextPath: c == null ? void 0 : c.path
-  };
+  return r.replace(/\./g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/\b[a-z]/g, (a) => a.toUpperCase());
 }
-s(Be, "getThemePreviewAutoDerivedFieldPaths");
+d(Be, "getThemePreviewFieldClusterLabel");
+function K(r) {
+  const [a, c] = r.split(".");
+  return a === "button" && c ? `${a}.${c}` : a ?? "";
+}
+d(K, "getThemePreviewFieldClusterPrefix");
 function Me(r) {
-  const d = r.reduce(
-    (t, u) => {
-      const i = u.path.split(".")[0] ?? "";
-      return i && (t[i] || (t[i] = []), t[i].push(u)), t;
+  const a = r.find((p) => p.path.endsWith(".main")), c = r.find((p) => p.path.endsWith(".light")), f = r.find((p) => p.path.endsWith(".dark")), u = r.find((p) => p.path.endsWith(".contrastText"));
+  return !a || !c && !f && !u ? null : {
+    mainPath: a.path,
+    lightPath: c == null ? void 0 : c.path,
+    darkPath: f == null ? void 0 : f.path,
+    contrastTextPath: u == null ? void 0 : u.path
+  };
+}
+d(Me, "getThemePreviewAutoDerivedFieldPaths");
+function Fe(r) {
+  const a = r.reduce(
+    (t, h) => {
+      const i = K(h.path);
+      return i && (t[i] || (t[i] = []), t[i].push(h)), t;
     },
     {}
-  ), p = Object.fromEntries(
-    Object.entries(d).map(([t, u]) => [
+  ), c = Object.fromEntries(
+    Object.entries(a).map(([t, h]) => [
       t,
-      u.length
+      h.length
     ])
-  ), m = new Set(
-    Object.entries(p).filter(([, t]) => t > 1).map(([t]) => t)
-  ), c = r.some(
-    (t) => !m.has(t.path.split(".")[0] ?? "")
+  ), f = new Set(
+    Object.entries(c).filter(([, t]) => t > 1).map(([t]) => t)
+  ), u = r.some(
+    (t) => !f.has(K(t.path))
   );
-  if (!(m.size > 1 || c))
+  if (!(f.size > 1 || u))
     return r.map((t) => ({
       key: t.path,
       fields: [t]
     }));
-  const F = /* @__PURE__ */ new Set();
-  return r.reduce((t, u) => {
-    const i = u.path.split(".")[0] ?? "";
-    if (!m.has(i))
+  const S = /* @__PURE__ */ new Set();
+  return r.reduce((t, h) => {
+    const i = K(h.path);
+    if (!f.has(i))
       return t.push({
-        key: u.path,
-        fields: [u]
+        key: h.path,
+        fields: [h]
       }), t;
-    if (F.has(i))
+    if (S.has(i))
       return t;
-    F.add(i);
-    const S = d[i] ?? [u];
+    S.add(i);
+    const E = a[i] ?? [h];
     return t.push({
       key: i,
-      label: Te(i),
-      fields: S,
-      autoDerivedFieldPaths: Be(S) ?? void 0
+      label: Be(i),
+      fields: E,
+      autoDerivedFieldPaths: Me(E) ?? void 0
     }), t;
   }, []);
 }
-s(Me, "getThemePreviewFieldClusters");
-const Fe = Object.fromEntries(
-  ee.map((r) => [r.key, r])
+d(Fe, "getThemePreviewFieldClusters");
+const Se = Object.fromEntries(
+  re.map((r) => [r.key, r])
 ), g = {
   active: {
     backgroundColor: "#1ea3e6",
@@ -82,25 +87,25 @@ const Fe = Object.fromEntries(
     descriptionColor: "#6b7280",
     textColor: "#111827"
   }
-}, M = "#d8dee8", Se = "#d1d7e0", Ee = "#f8fafc", D = "#ffffff", y = "#111827", v = "#6b7280", Q = "#ffffff", re = "#cbd5e1", Ne = "#94a3b8", z = "#1ea3e6", V = "#111827", Ie = "#f8fafc", We = "#f8fafc", ze = `특별한 경우가 아니면 연동 색상 편집은 권장하지 않습니다.
+}, F = "#d8dee8", Ee = "#d1d7e0", Ne = "#f8fafc", D = "#ffffff", P = "#111827", v = "#6b7280", V = "#ffffff", oe = "#cbd5e1", Ie = "#94a3b8", $ = "#1ea3e6", X = "#111827", We = "#f8fafc", ze = "#f8fafc", $e = `특별한 경우가 아니면 연동 색상 편집은 권장하지 않습니다.
 
 Primary Main 값을 선택하면 Light, Dark, Contrast 값이 자동으로 채워집니다.
-특수한 디자인 조정이 필요한 경우에만 직접 편집하세요.`, je = fe({
+특수한 디자인 조정이 필요한 경우에만 직접 편집하세요.`, je = pe({
   palette: {
     mode: "light",
     background: {
       default: D,
       paper: D
     },
-    divider: M,
+    divider: F,
     primary: {
-      main: z
+      main: $
     },
     secondary: {
-      main: z
+      main: $
     },
     text: {
-      primary: y,
+      primary: P,
       secondary: v
     }
   },
@@ -114,8 +119,8 @@ Primary Main 값을 선택하면 Light, Dark, Contrast 값이 자동으로 채
       fontSize: "1.3rem"
     }
   }
-}), Ke = {
-  color: y,
+}), Le = {
+  color: P,
   "& .MuiFormHelperText-root": {
     color: v
   },
@@ -126,22 +131,22 @@ Primary Main 값을 선택하면 Light, Dark, Contrast 값이 자동으로 채
     color: v
   },
   "& .MuiInputLabel-root.Mui-focused": {
-    color: y
+    color: P
   },
   "& .MuiInputBase-input": {
-    color: y
+    color: P
   },
   "& .MuiOutlinedInput-root": {
-    backgroundColor: Q,
-    color: y,
+    backgroundColor: V,
+    color: P,
     "& fieldset": {
-      borderColor: re
+      borderColor: oe
     },
     "&:hover fieldset": {
-      borderColor: Ne
+      borderColor: Ie
     },
     "&.Mui-focused fieldset": {
-      borderColor: z,
+      borderColor: $,
       borderWidth: 1
     }
   },
@@ -149,71 +154,71 @@ Primary Main 값을 선택하면 Light, Dark, Contrast 값이 자동으로 채
     color: v
   },
   "& .MuiButton-outlined": {
-    backgroundColor: Q,
-    borderColor: V,
-    color: y,
+    backgroundColor: V,
+    borderColor: X,
+    color: P,
     "&:hover": {
-      backgroundColor: Ie,
-      borderColor: V
+      backgroundColor: We,
+      borderColor: X
     }
   },
   "& .MuiCheckbox-root": {
     color: v
   },
   "& .MuiCheckbox-root.Mui-checked": {
-    color: z
+    color: $
   },
   "& .MuiDivider-root": {
-    borderColor: M
+    borderColor: F
   }
-}, Le = /* @__PURE__ */ new Set([
-  ...ve,
-  ...xe
-]), X = /* @__PURE__ */ new Set(["tableFieldHeader", "tableFieldCell"]);
-function Je({
+}, Ae = /* @__PURE__ */ new Set([
+  ...xe,
+  ...Pe
+]), ee = /* @__PURE__ */ new Set(["tableFieldHeader", "tableFieldCell"]);
+function Oe({
   activeSection: r,
-  presetOptions: d,
-  selectedMode: p,
-  selectedPresetKey: m,
-  settings: c,
-  resetVersion: f,
-  onSectionChange: F,
+  presetOptions: a,
+  selectedMode: c,
+  selectedPresetKey: f,
+  settings: u,
+  resetVersion: p,
+  onSectionChange: S,
   onPaletteValueChange: t,
-  onPaletteValuesChange: u,
+  onPaletteValuesChange: h,
   onPaletteValueReset: i,
-  onPaletteValuesReset: S,
-  onPresetKeyChange: oe,
-  onPresetModeChange: te
+  onPaletteValuesReset: E,
+  onPresetKeyChange: te,
+  onPresetModeChange: le
 }) {
-  const [le, ne] = be({}), j = Ce(null), E = !ke(r), b = E ? r : null, N = B(
-    () => E && b ? ye(d, b, p) : [],
-    [E, d, b, p]
-  ), G = B(
+  const [ne, ae] = Ce({}), j = ge(null), N = !ye(r), C = N ? r : null, I = B(
+    () => N && C ? ke(a, C, c) : [],
+    [N, a, C, c]
+  ), H = B(
     () => {
       var e;
-      return (e = N.find(
-        (l) => !Le.has(l.key)
+      return (e = I.find(
+        (l) => !Ae.has(l.key)
       )) == null ? void 0 : e.key;
     },
-    [N]
-  ), H = Pe[r], I = B(
-    () => H.map((e) => ({
+    [I]
+  ), U = we[r], W = B(
+    () => U.map((e) => ({
       ...e,
-      fieldClusters: Me(e.fields)
+      fieldClusters: Fe(e.fields)
     })),
-    [H]
-  ), U = B(() => {
+    [U]
+  ), _ = B(() => {
     if (r !== "table")
       return [
         {
           key: r,
-          fieldGroups: I
+          fieldGroups: W
         }
       ];
-    const e = I.filter(
-      (n) => X.has(n.key)
-    ), l = I.filter(
-      (n) => !X.has(n.key)
+    const e = W.filter(
+      (n) => ee.has(n.key)
+    ), l = W.filter(
+      (n) => !ee.has(n.key)
     );
     return [
       {
@@ -227,12 +232,12 @@ function Je({
         fieldGroups: l
       }
     ].filter((n) => n.fieldGroups.length > 0);
-  }, [r, I]), K = Fe[r], ie = B(
-    () => N.flatMap((e) => {
+  }, [r, W]), L = Se[r], ie = B(
+    () => I.flatMap((e) => {
       const l = [];
-      return e.key === G && l.push(
+      return e.key === H && l.push(
         /* @__PURE__ */ o(
-          Z,
+          q,
           {
             component: "li",
             role: "presentation",
@@ -247,103 +252,102 @@ function Je({
           "preset-legacy-divider"
         )
       ), l.push(
-        /* @__PURE__ */ o(W, { value: e.key, children: e.label }, e.key)
+        /* @__PURE__ */ o(z, { value: e.key, children: e.label }, e.key)
       ), l;
     }),
-    [G, N]
+    [H, I]
   );
-  ge(() => {
+  ve(() => {
     j.current && (j.current.scrollTop = 0);
   }, [r]);
-  const _ = /* @__PURE__ */ s((e, l, n) => {
-    const k = R(c, e, "common.white") || "#FFFFFF", w = R(c, e, "common.black") || "#111827", a = we(n, {
+  const Y = /* @__PURE__ */ d((e, l, n) => {
+    const k = M(u, e, "common.white") || "#FFFFFF", w = M(u, e, "common.black") || "#111827", s = Te(n, {
       whiteTextColor: k,
       blackTextColor: w
     });
-    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((L) => !!L) : [];
-  }, "getAutoDerivedUpdates"), Y = /* @__PURE__ */ s((e) => {
+    return s ? [
+      l.lightPath ? { path: l.lightPath, value: s.light } : null,
+      l.darkPath ? { path: l.darkPath, value: s.dark } : null,
+      l.contrastTextPath ? { path: l.contrastTextPath, value: s.contrastText } : null
+    ].filter((A) => !!A) : [];
+  }, "getAutoDerivedUpdates"), Z = /* @__PURE__ */ d((e) => {
     const l = e.fieldClusters.flatMap(
       (n) => n.fields.map((k) => k.path)
     );
-    return /* @__PURE__ */ h("div", { className: "flex flex-col gap-12", children: [
-      e.label ? /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-8", children: [
+    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(x, { variant: "subtitle1", fontWeight: 700, children: e.label }),
         /* @__PURE__ */ o(
-          ce,
+          ue,
           {
             size: "small",
             "aria-label": `${e.label} reset`,
-            onClick: /* @__PURE__ */ s(() => {
-              S(l);
+            onClick: /* @__PURE__ */ d(() => {
+              E(l);
             }, "onClick"),
             sx: {
-              border: `1px solid ${re}`,
+              border: `1px solid ${oe}`,
               borderRadius: 1,
               color: v,
               p: 0.5
             },
-            children: /* @__PURE__ */ o(me, { sx: { fontSize: 18 } })
+            children: /* @__PURE__ */ o(fe, { sx: { fontSize: 18 } })
           }
         )
       ] }) : null,
       /* @__PURE__ */ o("div", { className: "grid gap-12", children: e.fieldClusters.map((n) => {
         if (!n.label)
-          return n.fields.map((C) => /* @__PURE__ */ o(
-            J,
+          return n.fields.map((b) => /* @__PURE__ */ o(
+            O,
             {
-              definition: C,
-              resetVersion: f,
-              sectionKey: r,
-              settings: c,
+              definition: b,
+              resetVersion: p,
+              value: M(u, r, b.path),
               onChange: t,
               onReset: i
             },
-            C.path
+            b.path
           ));
-        const k = `${r}:${e.key}:${n.key}`, w = !!le[k], a = n.autoDerivedFieldPaths, L = !!(a && b);
-        return /* @__PURE__ */ h(
-          A,
+        const k = `${r}:${e.key}:${n.key}`, w = !!ne[k], s = n.autoDerivedFieldPaths, A = !!(s && C);
+        return /* @__PURE__ */ m(
+          G,
           {
             variant: "outlined",
             sx: {
-              backgroundColor: Ee,
-              borderColor: Se,
+              backgroundColor: Ne,
+              borderColor: Ee,
               display: "flex",
               flexDirection: "column",
               gap: 1.5,
               p: 1.5
             },
             children: [
-              /* @__PURE__ */ h("div", { className: "flex items-start justify-between gap-12", children: [
+              /* @__PURE__ */ m("div", { className: "flex items-start justify-between gap-12", children: [
                 /* @__PURE__ */ o(x, { variant: "body2", fontWeight: 700, children: n.label }),
-                L ? /* @__PURE__ */ o(
-                  ue,
+                A ? /* @__PURE__ */ o(
+                  he,
                   {
                     className: "m-0",
                     control: /* @__PURE__ */ o(
-                      he,
+                      me,
                       {
                         size: "small",
                         checked: w,
-                        onChange: /* @__PURE__ */ s((C) => {
-                          const T = C.target.checked;
+                        onChange: /* @__PURE__ */ d((b) => {
+                          const T = b.target.checked;
                           T && !window.confirm(
-                            ze
-                          ) || (ne((P) => ({
-                            ...P,
+                            $e
+                          ) || (ae((y) => ({
+                            ...y,
                             [k]: T
-                          })), !T && (!b || !a || u(
-                            _(
-                              b,
-                              a,
-                              R(
-                                c,
+                          })), !T && (!C || !s || h(
+                            Y(
+                              C,
+                              s,
+                              M(
+                                u,
                                 r,
-                                a.mainPath
+                                s.mainPath
                               )
                             )
                           )));
@@ -354,33 +358,36 @@ function Je({
                   }
                 ) : null
               ] }),
-              /* @__PURE__ */ o("div", { className: "grid gap-12", children: n.fields.map((C) => {
-                const T = a && b ? !w && C.path !== a.mainPath : !1;
+              /* @__PURE__ */ o("div", { className: "grid gap-12", children: n.fields.map((b) => {
+                const T = s && C ? !w && b.path !== s.mainPath : !1;
                 return /* @__PURE__ */ o(
-                  J,
+                  O,
                   {
                     disabled: T,
-                    definition: C,
-                    resetVersion: f,
-                    sectionKey: r,
-                    settings: c,
-                    onChange: /* @__PURE__ */ s((P, $) => {
-                      if (!a || !b || w || P !== a.mainPath) {
-                        t(P, $);
+                    definition: b,
+                    resetVersion: p,
+                    value: M(
+                      u,
+                      r,
+                      b.path
+                    ),
+                    onChange: /* @__PURE__ */ d((y, R) => {
+                      if (!s || !C || w || y !== s.mainPath) {
+                        t(y, R);
                         return;
                       }
-                      u([
-                        { path: P, value: $ },
-                        ..._(
-                          b,
-                          a,
-                          $
+                      h([
+                        { path: y, value: R },
+                        ...Y(
+                          C,
+                          s,
+                          R
                         )
                       ]);
                     }, "onChange"),
                     onReset: i
                   },
-                  C.path
+                  b.path
                 );
               }) })
             ]
@@ -390,13 +397,13 @@ function Je({
       }) })
     ] }, e.key);
   }, "renderFieldGroup");
-  return /* @__PURE__ */ o(pe, { theme: je, children: /* @__PURE__ */ h(de, { sx: Ke, className: "flex h-full min-h-0 flex-col gap-16", children: [
-    /* @__PURE__ */ o("div", { className: "grid grid-cols-2 gap-12", children: ee.map((e) => {
+  return /* @__PURE__ */ o(be, { theme: je, children: /* @__PURE__ */ m(ce, { sx: Le, className: "flex h-full min-h-0 flex-col gap-16", children: [
+    /* @__PURE__ */ o("div", { className: "grid grid-cols-2 gap-12", children: re.map((e) => {
       const l = e.key === r;
       return /* @__PURE__ */ o(
-        se,
+        de,
         {
-          onClick: /* @__PURE__ */ s(() => F(e.key), "onClick"),
+          onClick: /* @__PURE__ */ d(() => S(e.key), "onClick"),
           className: "w-full rounded-lg text-left",
           sx: {
             alignItems: "flex-start",
@@ -405,7 +412,7 @@ function Je({
             color: l ? g.active.textColor : g.inactive.textColor,
             p: 2
           },
-          children: /* @__PURE__ */ h("div", { className: "flex w-full flex-col gap-4", children: [
+          children: /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-4", children: [
             /* @__PURE__ */ o(x, { variant: "subtitle1", fontWeight: 600, children: e.label }),
             e.description ? /* @__PURE__ */ o(
               x,
@@ -422,45 +429,45 @@ function Je({
         e.key
       );
     }) }),
-    /* @__PURE__ */ h(
-      A,
+    /* @__PURE__ */ m(
+      G,
       {
         className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg",
         sx: {
           backgroundColor: D,
-          border: `1px solid ${M}`,
+          border: `1px solid ${F}`,
           boxShadow: "none"
         },
         children: [
-          /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-20 py-16", children: /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-1 flex-col gap-14", children: [
-            /* @__PURE__ */ o(x, { variant: "h6", sx: { color: y }, children: K == null ? void 0 : K.label }),
-            E ? /* @__PURE__ */ h("div", { className: "grid gap-12 md:grid-cols-2", children: [
-              /* @__PURE__ */ h(
-                q,
+          /* @__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(x, { variant: "h6", sx: { color: P }, children: L == null ? void 0 : L.label }),
+            N ? /* @__PURE__ */ m("div", { className: "grid gap-12 md:grid-cols-2", children: [
+              /* @__PURE__ */ m(
+                J,
                 {
                   select: !0,
                   label: "Mode",
-                  value: p,
-                  onChange: /* @__PURE__ */ s((e) => {
-                    te(e.target.value);
+                  value: c,
+                  onChange: /* @__PURE__ */ d((e) => {
+                    le(e.target.value);
                   }, "onChange"),
                   children: [
-                    /* @__PURE__ */ o(W, { value: "light", children: "light" }),
-                    /* @__PURE__ */ o(W, { value: "dark", children: "dark" })
+                    /* @__PURE__ */ o(z, { value: "light", children: "light" }),
+                    /* @__PURE__ */ o(z, { value: "dark", children: "dark" })
                   ]
                 }
               ),
-              /* @__PURE__ */ h(
-                q,
+              /* @__PURE__ */ m(
+                J,
                 {
                   select: !0,
                   label: "Preset",
-                  value: m,
-                  onChange: /* @__PURE__ */ s((e) => {
-                    oe(e.target.value);
+                  value: f,
+                  onChange: /* @__PURE__ */ d((e) => {
+                    te(e.target.value);
                   }, "onChange"),
                   children: [
-                    m === O ? /* @__PURE__ */ o(W, { value: O, children: "custom" }) : null,
+                    f === Q ? /* @__PURE__ */ o(z, { value: Q, children: "custom" }) : null,
                     ie
                   ]
                 }
@@ -468,10 +475,10 @@ function Je({
             ] }) : null
           ] }) }),
           /* @__PURE__ */ o(
-            Z,
+            q,
             {
               sx: {
-                borderColor: M
+                borderColor: F
               }
             }
           ),
@@ -480,13 +487,13 @@ function Je({
             {
               ref: j,
               className: "flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto px-20 py-20",
-              children: U.map((e) => r === "table" && U.length > 1 ? /* @__PURE__ */ h(
-                A,
+              children: _.map((e) => r === "table" && _.length > 1 ? /* @__PURE__ */ m(
+                G,
                 {
                   variant: "outlined",
                   sx: {
-                    backgroundColor: We,
-                    borderColor: M,
+                    backgroundColor: ze,
+                    borderColor: F,
                     boxShadow: "none",
                     display: "flex",
                     flexDirection: "column",
@@ -495,11 +502,11 @@ function Je({
                   },
                   children: [
                     e.label ? /* @__PURE__ */ o(x, { variant: "subtitle1", fontWeight: 700, children: e.label }) : null,
-                    /* @__PURE__ */ o("div", { className: "grid gap-20", children: e.fieldGroups.map(Y) })
+                    /* @__PURE__ */ o("div", { className: "grid gap-20", children: e.fieldGroups.map(Z) })
                   ]
                 },
                 e.key
-              ) : e.fieldGroups.map(Y))
+              ) : e.fieldGroups.map(Z))
             }
           )
         ]
@@ -507,8 +514,8 @@ function Je({
     )
   ] }) });
 }
-s(Je, "ThemePreviewControls");
+d(Oe, "ThemePreviewControls");
 export {
-  Je as ThemePreviewControls
+  Oe as ThemePreviewControls
 };
 //# sourceMappingURL=ThemePreviewControls.js.map