@owp/core 2.5.62 → 2.5.63

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

@@ -1,61 +1,61 @@
 var de = Object.defineProperty;
-var d = (s, i) => de(s, "name", { value: i, configurable: !0 });
+var d = (c, i) => de(c, "name", { value: i, configurable: !0 });
 import { jsx as e, jsxs as r } 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 se from "../defs/ThemePreviewGridDef.xml.js";
-import ce from "../defs/ThemePreviewReadonlyGridDef.xml.js";
+import ce from "../defs/ThemePreviewGridDef.xml.js";
+import se from "../defs/ThemePreviewReadonlyGridDef.xml.js";
 import { OwpDatePicker as he } from "../../../components/OwpPicker/OwpDatePicker.js";
 import { OwpDataTable as K } from "../../../components/OwpTable/OwpDataTable.js";
 import { OwpFieldTable as $ } from "../../../components/OwpTable/OwpFieldTable.js";
 import { OwpTable as Q } from "../../../components/OwpTable/OwpTable.js";
 import { TREEGRID_CELL_CHANGED_CLASS as me } from "../../../constants/treeGrid.js";
 import { OwpStoreProvider as O } from "../../../contexts/OwpStoreProvider.js";
+import { OwpStyleProvider as _ } from "../../../contexts/OwpStyleProvider.js";
 import I 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/Close.js";
 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/Search.js";
 import xe 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/SpaceDashboardOutlined.js";
-import { TableHead as pe, TableRow as F, TableCell as U, TableBody as ue, Table as ve, Typography as h, Box as w, Skeleton as E, Paper as A, TextField as M, Button as R, ButtonBase as we, CircularProgress as H, LinearProgress as L, IconButton as ge } from "@mui/material";
+import { TableHead as pe, TableRow as F, TableCell as U, TableBody as ue, Table as ve, Typography as h, Box as w, Skeleton as E, Paper as A, TextField as M, Button as T, ButtonBase as we, CircularProgress as H, LinearProgress as L, IconButton as ge } from "@mui/material";
 import { useTheme as Z, createTheme as be, ThemeProvider as ye, alpha as j } from "@mui/material/styles";
 import { useSetAtom as Te } from "jotai";
 import { enqueueSnackbar as Se, closeSnackbar as V, SnackbarContent as Ce } from "notistack";
-import { memo as S, useState as Ne, useRef as Re, useEffect as Pe, useMemo as Ee, useLayoutEffect as We } from "react";
-import { previewChromeBorder as P, gridPreviewColumnLabels as Ge, gridPreviewRows as Me, gridPreviewBodyText as ke, getThemePreviewFieldTableSx as D, getThemePreviewFieldTableTitleSx as ee, tableFieldPreviewLayout as le, tableFieldPreviewData as re, getThemePreviewFieldTableCellSx as z, getThemePreviewBasicTableSx as Oe, tablePreviewRows as _e, tablePreviewHeaders as ie, getThemePreviewDataTableSx as Be, dataTablePreviewRows as q, dataTablePreviewHeadCells as ae, gridCanvasPreviewRows as X, gridStyledTablePreviewRows as $e, gridStyledDataTablePreviewRows as Ae, previewNoop as T, previewInnerCardSx as te, searchHeaderPreviewData as De, previewSectionCardClassName as ze } from "./themePreviewCanvas.shared.js";
-import { OwpStyleProvider as _ } from "../../../components/OwpStyleProvider/OwpStyleProvider.js";
+import { memo as C, useState as Ne, useRef as Re, useEffect as Pe, useMemo as Ee, useLayoutEffect as We } from "react";
+import { previewChromeBorder as P, gridPreviewColumnLabels as Ge, gridPreviewRows as Me, gridPreviewBodyText as ke, getThemePreviewFieldTableSx as D, getThemePreviewFieldTableTitleSx as ee, tableFieldPreviewLayout as le, tableFieldPreviewData as re, getThemePreviewFieldTableCellSx as z, getThemePreviewBasicTableSx as Oe, tablePreviewRows as _e, tablePreviewHeaders as ie, getThemePreviewDataTableSx as Be, dataTablePreviewRows as q, dataTablePreviewHeadCells as ae, gridCanvasPreviewRows as X, gridStyledTablePreviewRows as $e, gridStyledDataTablePreviewRows as Ae, previewNoop as S, previewInnerCardSx as ne, searchHeaderPreviewData as De, previewSectionCardClassName as ze } from "./themePreviewCanvas.shared.js";
 import { OwpTreeGrid as Y } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
 import { OwpYesNoSelector as Ie } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
 import { OwpPageContent as Fe } from "../../../components/OwpPageContent/OwpPageContent.js";
 import { OwpSection as J } from "../../../components/OwpSection/OwpSection.js";
 import { owpSettingsStateAtom as Ue } from "../../../store/atoms/owpSettingsAtoms.js";
 import { OwpSearchFilter as He } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
-function Le({ state: s }) {
-  const i = Te(Ue), l = s.owpSettings;
+function Le({ state: c }) {
+  const i = Te(Ue), l = c.owpSettings;
   return We(() => {
     !(l != null && l.current) || !(l != null && l.defaults) || !(l != null && l.initial) || i(l);
   }, [l, i]), null;
 }
 d(Le, "ThemePreviewStoreStateSync");
 function y({
-  children: s,
+  children: c,
   fillContentHeight: i = !1,
   gapClassName: l = "gap-16",
   paperClassName: a = ze,
-  sx: t,
-  title: n
+  sx: n,
+  title: t
 }) {
-  const u = n != null && n !== "";
+  const u = t != null && t !== "";
   return /* @__PURE__ */ e(
     A,
     {
       className: a,
       sx: {
-        ...te,
-        ...t
+        ...ne,
+        ...n
       },
       children: /* @__PURE__ */ r(
         "div",
         {
           className: `flex flex-col ${u ? l : ""} ${i ? "min-h-0 flex-1" : ""}`,
           children: [
-            u ? /* @__PURE__ */ e(h, { variant: "subtitle1", fontWeight: 700, children: n }) : null,
-            s
+            u ? /* @__PURE__ */ e(h, { variant: "subtitle1", fontWeight: 700, children: t }) : null,
+            c
           ]
         }
       )
@@ -63,7 +63,7 @@ function y({
   );
 }
 d(y, "PreviewSectionCard");
-function k({ children: s }) {
+function k({ children: c }) {
   const i = Z(), l = Ee(
     () => be(i, {
       palette: {
@@ -72,24 +72,24 @@ function k({ children: s }) {
     }),
     [i]
   );
-  return /* @__PURE__ */ e(ye, { theme: l, children: s });
+  return /* @__PURE__ */ e(ye, { theme: l, children: c });
 }
 d(k, "ThemePreviewStaticDividerBoundary");
-function ne({
-  buttonPreviewItems: s,
+function te({
+  buttonPreviewItems: c,
   mainTextSecondary: i
 }) {
   return /* @__PURE__ */ r("div", { className: "flex flex-col gap-12", children: [
     /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ e(h, { variant: "caption", sx: { color: i }, children: "contained" }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: l, color: a, previewContrastColor: t }) => /* @__PURE__ */ e(
-        R,
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: c.map(({ label: l, color: a, previewContrastColor: n }) => /* @__PURE__ */ e(
+        T,
         {
           size: "small",
           variant: "contained",
           sx: {
             backgroundColor: a,
-            color: t,
+            color: n,
             minWidth: 72,
             px: 1.5,
             py: 0.625
@@ -101,8 +101,8 @@ function ne({
     ] }),
     /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ e(h, { variant: "caption", sx: { color: i }, children: "outlined" }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: l, color: a }) => /* @__PURE__ */ e(
-        R,
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: c.map(({ label: l, color: a }) => /* @__PURE__ */ e(
+        T,
         {
           size: "small",
           variant: "outlined",
@@ -124,12 +124,12 @@ function ne({
     ] })
   ] });
 }
-d(ne, "ThemePreviewButtonsPreviewContent");
-const gl = S(/* @__PURE__ */ d(function({
+d(te, "ThemePreviewButtonsPreviewContent");
+const gl = C(/* @__PURE__ */ d(function({
   buttonPreviewItems: i,
   mainTextSecondary: l,
   mainThemePreviewStoreState: a,
-  previewSectionCardSx: t
+  previewSectionCardSx: n
 }) {
   return /* @__PURE__ */ e(O, { preloadedState: a, children: /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r("div", { className: "grid gap-16 xl:grid-cols-[188px_212px_minmax(0,9fr)_minmax(280px,13fr)]", children: [
     /* @__PURE__ */ e(
@@ -137,7 +137,7 @@ const gl = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Common",
@@ -182,7 +182,7 @@ const gl = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Inputs",
@@ -192,7 +192,7 @@ const gl = S(/* @__PURE__ */ d(function({
             {
               fullWidth: !0,
               label: "기본 입력",
-              onChange: T,
+              onChange: S,
               size: "small",
               value: "기본 상태"
             }
@@ -203,7 +203,7 @@ const gl = S(/* @__PURE__ */ d(function({
               focused: !0,
               fullWidth: !0,
               label: "포커스 입력",
-              onChange: T,
+              onChange: S,
               size: "small",
               value: "focus 상태"
             }
@@ -214,7 +214,7 @@ const gl = S(/* @__PURE__ */ d(function({
               disabled: !0,
               fullWidth: !0,
               label: "비활성 입력",
-              onChange: T,
+              onChange: S,
               size: "small",
               value: "disabled 상태"
             }
@@ -227,7 +227,7 @@ const gl = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Text",
@@ -244,12 +244,12 @@ const gl = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Buttons",
         children: /* @__PURE__ */ e(
-          ne,
+          te,
           {
             buttonPreviewItems: i,
             mainTextSecondary: l
@@ -258,34 +258,34 @@ const gl = S(/* @__PURE__ */ d(function({
       }
     )
   ] }) }) });
-}, "ThemePreviewCommonSection2")), bl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewCommonSection2")), bl = C(/* @__PURE__ */ d(function({
   buttonPreviewItems: i,
   mainTextSecondary: l,
   previewSectionCardSx: a
 }) {
   return /* @__PURE__ */ e(y, { title: "Buttons", sx: a, children: /* @__PURE__ */ e(
-    ne,
+    te,
     {
       buttonPreviewItems: i,
       mainTextSecondary: l
     }
   ) });
-}, "ThemePreviewButtonsSection2")), yl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewButtonsSection2")), yl = C(/* @__PURE__ */ d(function({
   previewSectionCardSx: i,
   previewSnackbarKeysRef: l,
   snackbarAnchorOrigin: a,
-  snackbarAutoHideDuration: t,
-  snackbarPreviewAnchorHorizontal: n,
+  snackbarAutoHideDuration: n,
+  snackbarPreviewAnchorHorizontal: t,
   snackbarPreviewAnchorVertical: u,
   snackbarPreviewFontSize: m,
   snackbarPreviewItems: x,
   snackbarPreviewLineHeight: v,
-  snackbarPreviewMaxSnack: C
+  snackbarPreviewMaxSnack: N
 }) {
-  const o = Z(), c = /* @__PURE__ */ d((p, f, g, b, N, W) => {
+  const o = Z(), s = /* @__PURE__ */ d((p, f, g, b, R, W) => {
     const oe = Se(f, {
       anchorOrigin: a,
-      autoHideDuration: t,
+      autoHideDuration: n,
       variant: p,
       content: /* @__PURE__ */ d((G) => /* @__PURE__ */ e(
         Ce,
@@ -368,7 +368,7 @@ const gl = S(/* @__PURE__ */ d(function({
                       flexShrink: 0,
                       ml: 1,
                       "&:hover": {
-                        backgroundColor: N
+                        backgroundColor: R
                       }
                     },
                     children: /* @__PURE__ */ e(I, { fontSize: "small" })
@@ -380,7 +380,7 @@ const gl = S(/* @__PURE__ */ d(function({
         }
       ), "content")
     });
-    for (l.current.push(oe); l.current.length > C; ) {
+    for (l.current.push(oe); l.current.length > N; ) {
       const G = l.current.shift();
       G && V(G);
     }
@@ -399,22 +399,22 @@ const gl = S(/* @__PURE__ */ d(function({
           {
             className: "flex min-h-0 flex-1 flex-col gap-10",
             style: {
-              alignItems: n === "left" ? "flex-start" : n === "right" ? "flex-end" : "center",
+              alignItems: t === "left" ? "flex-start" : t === "right" ? "flex-end" : "center",
               justifyContent: u === "bottom" ? "flex-end" : "flex-start"
             },
             children: x.map(
-              ({ key: p, actionHoverColor: f, backgroundColor: g, color: b, icon: N, message: W }) => /* @__PURE__ */ r(
+              ({ key: p, actionHoverColor: f, backgroundColor: g, color: b, icon: R, message: W }) => /* @__PURE__ */ r(
                 we,
                 {
                   className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
                   onClick: /* @__PURE__ */ d(() => {
-                    c(
+                    s(
                       p,
                       W,
                       g,
                       b,
                       f,
-                      N
+                      R
                     );
                   }, "onClick"),
                   style: {
@@ -426,7 +426,7 @@ const gl = S(/* @__PURE__ */ d(function({
                   },
                   children: [
                     /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 items-center gap-10", children: [
-                      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", style: { color: b }, children: N }),
+                      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", style: { color: b }, children: R }),
                       /* @__PURE__ */ e(
                         h,
                         {
@@ -466,22 +466,22 @@ const gl = S(/* @__PURE__ */ d(function({
       ] })
     }
   );
-}, "ThemePreviewSnackbarsSection2")), Tl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewSnackbarsSection2")), Tl = C(/* @__PURE__ */ d(function({
   activeSection: i,
   gridPreviewTable: l,
   mainBackground: a,
-  mainPaper: t,
-  mainText: n,
+  mainPaper: n,
+  mainText: t,
   mainThemePreviewStoreState: u,
   previewSectionCardSx: m,
   searchHeaderPreviewDate: x,
   searchHeaderPreviewNumber: v,
-  searchHeaderPreviewVersionKey: C,
+  searchHeaderPreviewVersionKey: N,
   tablePreviewCanTableRadiusZero: o,
-  tableTheme: c,
+  tableTheme: s,
   tableThemePreviewVersionKey: p
 }) {
-  const f = z(c), g = ee(c), b = i === "navbar" || i === "toolbar";
+  const f = z(s), g = ee(s), b = i === "navbar" || i === "toolbar";
   return /* @__PURE__ */ e(y, { paperClassName: "overflow-hidden rounded-lg p-0", sx: m, children: /* @__PURE__ */ e(
     O,
     {
@@ -492,7 +492,7 @@ const gl = S(/* @__PURE__ */ d(function({
           className: "flex flex-col gap-16 p-16",
           sx: {
             backgroundColor: a,
-            color: n,
+            color: t,
             "& .OwpPageContent-header .MuiDivider-root": {
               my: 1.5
             },
@@ -509,14 +509,14 @@ const gl = S(/* @__PURE__ */ d(function({
                   backgroundColor: "transparent",
                   boxShadow: "none"
                 },
-                children: /* @__PURE__ */ r(He, { onSubmit: T, onReset: T, children: [
+                children: /* @__PURE__ */ r(He, { onSubmit: S, onReset: S, children: [
                   /* @__PURE__ */ e(
                     he,
                     {
                       label: "작업일자",
                       value: x,
                       variant: "standard",
-                      onChange: T
+                      onChange: S
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -526,7 +526,7 @@ const gl = S(/* @__PURE__ */ d(function({
                       yesLabel: "사용",
                       noLabel: "미사용",
                       value: "Y",
-                      onChange: T
+                      onChange: S
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -535,7 +535,7 @@ const gl = S(/* @__PURE__ */ d(function({
                       label: "번호",
                       variant: "standard",
                       value: v,
-                      onChange: T
+                      onChange: S
                     }
                   )
                 ] })
@@ -546,8 +546,8 @@ const gl = S(/* @__PURE__ */ d(function({
               {
                 className: "w-full rounded-lg p-16",
                 sx: {
-                  ...te,
-                  backgroundColor: t,
+                  ...ne,
+                  backgroundColor: n,
                   border: `1px solid ${P}`
                 },
                 children: /* @__PURE__ */ e(
@@ -558,7 +558,7 @@ const gl = S(/* @__PURE__ */ d(function({
                       w,
                       {
                         sx: D(
-                          c,
+                          s,
                           o
                         ),
                         children: /* @__PURE__ */ e(
@@ -582,10 +582,12 @@ const gl = S(/* @__PURE__ */ d(function({
                       }
                     ) }) }),
                     actions: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-8", children: [
-                      /* @__PURE__ */ e(R, { color: "info", size: "small", variant: "contained", children: "추가" }),
-                      /* @__PURE__ */ e(R, { color: "warning", size: "small", variant: "contained", children: "수정" }),
-                      /* @__PURE__ */ e(R, { color: "error", size: "small", variant: "contained", children: "삭제" }),
-                      /* @__PURE__ */ e(R, { color: "success", size: "small", variant: "contained", children: "다운로드" })
+                      /* @__PURE__ */ e(T, { color: "primary", size: "small", variant: "contained", children: "생성" }),
+                      /* @__PURE__ */ e(T, { color: "secondary", size: "small", variant: "contained", children: "수정" }),
+                      /* @__PURE__ */ e(T, { color: "info", size: "small", variant: "contained", children: "정보" }),
+                      /* @__PURE__ */ e(T, { color: "warning", size: "small", variant: "contained", children: "개선" }),
+                      /* @__PURE__ */ e(T, { color: "error", size: "small", variant: "contained", children: "삭제" }),
+                      /* @__PURE__ */ e(T, { color: "success", size: "small", variant: "contained", children: "다운로드" })
                     ] }),
                     children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
                       l,
@@ -603,14 +605,14 @@ const gl = S(/* @__PURE__ */ d(function({
                                 w,
                                 {
                                   sx: D(
-                                    c,
+                                    s,
                                     o
                                   ),
                                   children: /* @__PURE__ */ e(
                                     $,
                                     {
                                       canUseTreeGridStyle: !0,
-                                      cellSx: z(c),
+                                      cellSx: z(s),
                                       data: re,
                                       layout: le,
                                       titleWidth: 108
@@ -623,7 +625,7 @@ const gl = S(/* @__PURE__ */ d(function({
                           )
                         }
                       ),
-                      b ? /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [0, 1].map((N) => /* @__PURE__ */ e(
+                      b ? /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [0, 1].map((R) => /* @__PURE__ */ e(
                         J,
                         {
                           className: "min-h-0 flex-1",
@@ -665,7 +667,7 @@ const gl = S(/* @__PURE__ */ d(function({
                             }
                           )
                         },
-                        `search-header-skeleton-section-${N}`
+                        `search-header-skeleton-section-${R}`
                       )) }) : null
                     ] })
                   }
@@ -676,15 +678,15 @@ const gl = S(/* @__PURE__ */ d(function({
         }
       ) })
     },
-    `search-header-${C}`
+    `search-header-${N}`
   ) });
-}, "ThemePreviewSearchHeaderSection2")), je = "OWP_THEME_PREVIEW.STATUS", B = "OWP_THEME_PREVIEW.WORK_DATE", Ve = "OWP_THEME_PREVIEW.REMARKClass", Sl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewSearchHeaderSection2")), je = "OWP_THEME_PREVIEW.STATUS", B = "OWP_THEME_PREVIEW.WORK_DATE", Ve = "OWP_THEME_PREVIEW.REMARKClass", Sl = C(/* @__PURE__ */ d(function({
   editableThemePreviewGridId: i,
   mainThemePreviewStoreState: l,
   previewSectionCardSx: a,
-  readonlyThemePreviewGridId: t
+  readonlyThemePreviewGridId: n
 }) {
-  const [n, u] = Ne(!1), m = Re(null), x = /* @__PURE__ */ d(() => {
+  const [t, u] = Ne(!1), m = Re(null), x = /* @__PURE__ */ d(() => {
     m.current === null && (m.current = window.requestAnimationFrame(() => {
       m.current = null, u(!0);
     }));
@@ -712,16 +714,16 @@ const gl = S(/* @__PURE__ */ d(function({
                 data: X,
                 height: "100%",
                 id: i,
-                layoutData: se,
+                layoutData: ce,
                 onReady: /* @__PURE__ */ d((o) => {
                   if (!o)
                     return;
-                  const c = o.GetFirst(), p = c ? o.GetNext(c) : null, f = p ? o.GetNext(p) : c;
-                  if (!c) {
+                  const s = o.GetFirst(), p = s ? o.GetNext(s) : null, f = p ? o.GetNext(p) : s;
+                  if (!s) {
                     x();
                     return;
                   }
-                  p ? o.Focus(p, B) : o.Focus(c, B), f && (o.SetAttribute(
+                  p ? o.Focus(p, B) : o.Focus(s, B), f && (o.SetAttribute(
                     f,
                     je,
                     "Error",
@@ -737,19 +739,19 @@ const gl = S(/* @__PURE__ */ d(function({
                 showToolbarTotalCount: !1
               }
             ),
-            n ? /* @__PURE__ */ e(
+            t ? /* @__PURE__ */ e(
               Y,
               {
                 containerClassName: "min-w-0",
                 data: X,
                 height: "100%",
-                id: t,
-                layoutData: ce,
+                id: n,
+                layoutData: se,
                 onReady: /* @__PURE__ */ d((o) => {
                   if (!o)
                     return;
-                  const c = o.GetFirst();
-                  c && o.Focus(c, B);
+                  const s = o.GetFirst();
+                  s && o.Focus(s, B);
                 }, "handleReadonlyThemePreviewGridReady"),
                 showLoading: !1,
                 showToolbarTotalCount: !1
@@ -806,12 +808,12 @@ const gl = S(/* @__PURE__ */ d(function({
       }
     ) })
   ] }) });
-}, "ThemePreviewGridSection2")), Cl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewGridSection2")), Cl = C(/* @__PURE__ */ d(function({
   mainThemePreviewStoreState: i,
   previewSectionCardSx: l,
   tablePreviewCanTableRadiusZero: a,
-  tableTheme: t,
-  tableThemePreviewVersionKey: n
+  tableTheme: n,
+  tableThemePreviewVersionKey: t
 }) {
   return /* @__PURE__ */ e(y, { title: "Tables", sx: l, children: /* @__PURE__ */ e(
     O,
@@ -820,34 +822,34 @@ const gl = S(/* @__PURE__ */ d(function({
       children: /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-14", children: [
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
           /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
-          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: D(t, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: D(n, a), children: /* @__PURE__ */ e(
             $,
             {
               canUseTreeGridStyle: !1,
-              cellSx: z(t),
+              cellSx: z(n),
               data: re,
               layout: le,
-              titleSx: ee(t),
+              titleSx: ee(n),
               titleWidth: 108
             },
-            `field-table-${n}`
+            `field-table-${t}`
           ) }) })
         ] }),
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
           /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
-          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: Oe(t, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: Oe(n, a), children: /* @__PURE__ */ e(
             Q,
             {
               canUseTreeGridStyle: !1,
               headers: ie,
               rows: _e
             },
-            `basic-table-${n}`
+            `basic-table-${t}`
           ) }) })
         ] }),
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
           /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
-          /* @__PURE__ */ e(w, { sx: Be(t, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(w, { sx: Be(n, a), children: /* @__PURE__ */ e(
             K,
             {
               canCheckbox: !1,
@@ -860,19 +862,19 @@ const gl = S(/* @__PURE__ */ d(function({
               rows: q,
               selected: q.slice(0, 1)
             },
-            `data-table-${n}`
+            `data-table-${t}`
           ) })
         ] })
       ] }) })
     },
-    `table-preview-${n}`
+    `table-preview-${t}`
   ) });
-}, "ThemePreviewTablesSection2")), Nl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewTablesSection2")), Nl = C(/* @__PURE__ */ d(function({
   gridBodyBorder: i,
   layoutPreviewGridCellBackground: l,
   layoutPreviewGridCellFontSize: a,
-  layoutPreviewGridHeaderBackground: t,
-  layoutPreviewGridHeaderBorder: n,
+  layoutPreviewGridHeaderBackground: n,
+  layoutPreviewGridHeaderBorder: t,
   layoutPreviewGridHeaderColor: u,
   layoutPreviewGridHeaderFontSize: m
 }) {
@@ -895,9 +897,9 @@ const gl = S(/* @__PURE__ */ d(function({
               U,
               {
                 sx: {
-                  backgroundColor: t,
-                  borderBottom: `1px solid ${n}`,
-                  borderRight: `1px solid ${n}`,
+                  backgroundColor: n,
+                  borderBottom: `1px solid ${t}`,
+                  borderRight: `1px solid ${t}`,
                   color: u,
                   fontSize: m,
                   fontWeight: 500,
@@ -918,7 +920,7 @@ const gl = S(/* @__PURE__ */ d(function({
                 sx: {
                   backgroundColor: l
                 },
-                children: x.map((v, C) => /* @__PURE__ */ e(
+                children: x.map((v, N) => /* @__PURE__ */ e(
                   U,
                   {
                     sx: {
@@ -935,7 +937,7 @@ const gl = S(/* @__PURE__ */ d(function({
                     },
                     children: v
                   },
-                  `${v}-${C}`
+                  `${v}-${N}`
                 ))
               },
               x.join("-")