@owp/core 2.5.54 → 2.5.55

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

@@ -1,52 +1,61 @@
 var ne = Object.defineProperty;
-var d = (s, r) => ne(s, "name", { value: r, configurable: !0 });
-import { jsx as e, jsxs as l } 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";
+var d = (c, i) => ne(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 de from "../defs/ThemePreviewGridDef.xml.js";
 import ce from "../defs/ThemePreviewReadonlyGridDef.xml.js";
 import { OwpDatePicker as se } from "../../../components/OwpPicker/OwpDatePicker.js";
 import { OwpDataTable as J } from "../../../components/OwpTable/OwpDataTable.js";
-import { OwpFieldTable as O } from "../../../components/OwpTable/OwpFieldTable.js";
+import { OwpFieldTable as $ } from "../../../components/OwpTable/OwpFieldTable.js";
 import { OwpTable as Q } from "../../../components/OwpTable/OwpTable.js";
-import { OwpStoreProvider as $ } from "../../../contexts/OwpStoreProvider.js";
-import { highlightTreeGridCellById as he } from "../../../utils/treeGridUtil.js";
-import A 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 { TREEGRID_CELL_CHANGED_CLASS as he } from "../../../constants/treeGrid.js";
+import { OwpStoreProvider as O } from "../../../contexts/OwpStoreProvider.js";
+import z 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 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/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 fe, TableRow as F, TableCell as I, TableBody as pe, Table as ue, Typography as c, Box as v, Paper as D, TextField as E, Skeleton as M, Button as R, ButtonBase as ve, CircularProgress as U, LinearProgress as H, IconButton as ge } from "@mui/material";
-import { useTheme as K, createTheme as be, ThemeProvider as we, alpha as j } from "@mui/material/styles";
-import { enqueueSnackbar as ye, closeSnackbar as L, SnackbarContent as Te } from "notistack";
-import { memo as N, useMemo as Se } from "react";
-import { previewChromeBorder as P, gridPreviewColumnLabels as Ne, gridPreviewRows as Ce, gridPreviewBodyText as Re, getThemePreviewFieldTableSx as z, getThemePreviewFieldTableTitleSx as Z, tableFieldPreviewLayout as ee, tableFieldPreviewData as le, getThemePreviewFieldTableCellSx as _, getThemePreviewBasicTableSx as Pe, tablePreviewRows as We, tablePreviewHeaders as re, getThemePreviewDataTableSx as ke, dataTablePreviewRows as V, dataTablePreviewHeadCells as ie, gridCanvasPreviewRows as X, gridStyledTablePreviewRows as Ee, gridStyledDataTablePreviewRows as Be, previewNoop as T, previewInnerCardSx as ae, searchHeaderPreviewData as $e, previewSectionCardClassName as Ge } from "./themePreviewCanvas.shared.js";
-import { OwpStyleProvider as G } from "../../../components/OwpStyleProvider/OwpStyleProvider.js";
-import { OwpTreeGrid as Y } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
-import { OwpYesNoSelector as Me } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
-import { OwpPageContent as Oe } from "../../../components/OwpPageContent/OwpPageContent.js";
-import { OwpSection as q } from "../../../components/OwpSection/OwpSection.js";
-import { OwpSearchFilter as De } from "../../../components/OwpSearchFilter/OwpSearchFilter.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/SpaceDashboardOutlined.js";
+import { TableHead as xe, TableRow as F, TableCell as I, TableBody as pe, Table as ue, Typography as h, Box as w, Skeleton as W, Paper as D, TextField as k, Button as R, ButtonBase as ve, CircularProgress as H, LinearProgress as U, IconButton as we } from "@mui/material";
+import { useTheme as K, createTheme as ge, ThemeProvider as be, alpha as L } from "@mui/material/styles";
+import { useSetAtom as ye } from "jotai";
+import { enqueueSnackbar as Te, closeSnackbar as j, SnackbarContent as Se } from "notistack";
+import { memo as S, useState as Ce, useRef as Ne, useEffect as Re, useMemo as Pe, useLayoutEffect as We } from "react";
+import { previewChromeBorder as P, gridPreviewColumnLabels as Ee, gridPreviewRows as Ge, gridPreviewBodyText as ke, getThemePreviewFieldTableSx as A, getThemePreviewFieldTableTitleSx as Z, tableFieldPreviewLayout as ee, tableFieldPreviewData as le, getThemePreviewFieldTableCellSx as _, getThemePreviewBasicTableSx as Me, tablePreviewRows as Oe, tablePreviewHeaders as re, getThemePreviewDataTableSx as Be, dataTablePreviewRows as V, dataTablePreviewHeadCells as ie, gridCanvasPreviewRows as q, gridStyledTablePreviewRows as $e, gridStyledDataTablePreviewRows as De, previewNoop as T, previewInnerCardSx as ae, searchHeaderPreviewData as Ae, previewSectionCardClassName as _e } from "./themePreviewCanvas.shared.js";
+import { OwpStyleProvider as B } from "../../../components/OwpStyleProvider/OwpStyleProvider.js";
+import { OwpTreeGrid as X } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
+import { OwpYesNoSelector as ze } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
+import { OwpPageContent as Fe } from "../../../components/OwpPageContent/OwpPageContent.js";
+import { OwpSection as Y } from "../../../components/OwpSection/OwpSection.js";
+import { owpSettingsStateAtom as Ie } from "../../../store/atoms/owpSettingsAtoms.js";
+import { OwpSearchFilter as He } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
+function Ue({ state: c }) {
+  const i = ye(Ie), l = c.owpSettings;
+  return We(() => {
+    !(l != null && l.current) || !(l != null && l.defaults) || !(l != null && l.initial) || i(l);
+  }, [l, i]), null;
+}
+d(Ue, "ThemePreviewStoreStateSync");
 function y({
-  children: s,
-  fillContentHeight: r = !1,
-  gapClassName: i = "gap-16",
-  paperClassName: a = Ge,
-  sx: o,
+  children: c,
+  fillContentHeight: i = !1,
+  gapClassName: l = "gap-16",
+  paperClassName: a = _e,
+  sx: t,
   title: n
 }) {
-  const x = n != null && n !== "";
+  const u = n != null && n !== "";
   return /* @__PURE__ */ e(
     D,
     {
       className: a,
       sx: {
         ...ae,
-        ...o
+        ...t
       },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ r(
         "div",
         {
-          className: `flex flex-col ${x ? i : ""} ${r ? "min-h-0 flex-1" : ""}`,
+          className: `flex flex-col ${u ? l : ""} ${i ? "min-h-0 flex-1" : ""}`,
           children: [
-            x ? /* @__PURE__ */ e(c, { variant: "subtitle1", fontWeight: 700, children: n }) : null,
-            s
+            u ? /* @__PURE__ */ e(h, { variant: "subtitle1", fontWeight: 700, children: n }) : null,
+            c
           ]
         }
       )
@@ -54,94 +63,94 @@ function y({
   );
 }
 d(y, "PreviewSectionCard");
-function B({ children: s }) {
-  const r = K(), i = Se(
-    () => be(r, {
+function M({ children: c }) {
+  const i = K(), l = Pe(
+    () => ge(i, {
       palette: {
         divider: P
       }
     }),
-    [r]
+    [i]
   );
-  return /* @__PURE__ */ e(we, { theme: i, children: s });
+  return /* @__PURE__ */ e(be, { theme: l, children: c });
 }
-d(B, "ThemePreviewStaticDividerBoundary");
+d(M, "ThemePreviewStaticDividerBoundary");
 function te({
-  buttonPreviewItems: s,
-  mainTextSecondary: r
+  buttonPreviewItems: c,
+  mainTextSecondary: i
 }) {
-  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-12", children: [
-    /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ e(c, { variant: "caption", sx: { color: r }, children: "contained" }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: i, color: a, previewContrastColor: o }) => /* @__PURE__ */ e(
+  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: c.map(({ label: l, color: a, previewContrastColor: t }) => /* @__PURE__ */ e(
         R,
         {
           size: "small",
           variant: "contained",
           sx: {
             backgroundColor: a,
-            color: o,
+            color: t,
             minWidth: 72,
             px: 1.5,
             py: 0.625
           },
-          children: i
+          children: l
         },
-        `contained-${i}`
+        `contained-${l}`
       )) })
     ] }),
-    /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ e(c, { variant: "caption", sx: { color: r }, children: "outlined" }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: i, color: a }) => /* @__PURE__ */ e(
+    /* @__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: c.map(({ label: l, color: a }) => /* @__PURE__ */ e(
         R,
         {
           size: "small",
           variant: "outlined",
           sx: {
-            borderColor: j(a, 0.52),
+            borderColor: L(a, 0.52),
             color: a,
             minWidth: 72,
             px: 1.5,
             py: 0.625,
             "&:hover": {
-              backgroundColor: j(a, 0.08),
+              backgroundColor: L(a, 0.08),
               borderColor: a
             }
           },
-          children: i
+          children: l
         },
-        `outlined-${i}`
+        `outlined-${l}`
       )) })
     ] })
   ] });
 }
 d(te, "ThemePreviewButtonsPreviewContent");
-const nl = N(/* @__PURE__ */ d(function({
-  buttonPreviewItems: r,
-  mainTextSecondary: i,
+const ul = S(/* @__PURE__ */ d(function({
+  buttonPreviewItems: i,
+  mainTextSecondary: l,
   mainThemePreviewStoreState: a,
-  previewSectionCardSx: o
+  previewSectionCardSx: t
 }) {
-  return /* @__PURE__ */ e($, { preloadedState: a, children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ l("div", { className: "grid gap-16 xl:grid-cols-[188px_212px_minmax(0,9fr)_minmax(280px,13fr)]", children: [
+  return /* @__PURE__ */ e(O, { preloadedState: a, children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r("div", { className: "grid gap-16 xl:grid-cols-[188px_212px_minmax(0,9fr)_minmax(280px,13fr)]", children: [
     /* @__PURE__ */ e(
       y,
       {
         gapClassName: "gap-12",
         sx: {
-          ...o,
+          ...t,
           minWidth: 0
         },
         title: "Common",
-        children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-12", children: [
-          /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-12", children: [
-            /* @__PURE__ */ l("div", { className: "flex items-center gap-8", children: [
-              /* @__PURE__ */ e(xe, { color: "primary" }),
-              /* @__PURE__ */ e(c, { variant: "body2", color: "primary.main", fontWeight: 600, children: "primary" })
+        children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-12", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-12", children: [
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-8", children: [
+              /* @__PURE__ */ e(fe, { color: "primary" }),
+              /* @__PURE__ */ e(h, { variant: "body2", color: "primary.main", fontWeight: 600, children: "primary" })
             ] }),
-            /* @__PURE__ */ e(U, { color: "primary", size: 18, thickness: 5 })
+            /* @__PURE__ */ e(H, { color: "primary", size: 18, thickness: 5 })
           ] }),
           /* @__PURE__ */ e(
-            H,
+            U,
             {
               color: "primary",
               sx: { borderRadius: 999, height: 6, width: "100%" },
@@ -149,15 +158,15 @@ const nl = N(/* @__PURE__ */ d(function({
               variant: "determinate"
             }
           ),
-          /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-12", children: [
-            /* @__PURE__ */ l("div", { className: "flex items-center gap-8", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-12", children: [
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-8", children: [
               /* @__PURE__ */ e(me, { color: "secondary" }),
-              /* @__PURE__ */ e(c, { variant: "body2", color: "secondary.main", fontWeight: 600, children: "secondary" })
+              /* @__PURE__ */ e(h, { variant: "body2", color: "secondary.main", fontWeight: 600, children: "secondary" })
             ] }),
-            /* @__PURE__ */ e(U, { color: "secondary", size: 18, thickness: 5 })
+            /* @__PURE__ */ e(H, { color: "secondary", size: 18, thickness: 5 })
           ] }),
           /* @__PURE__ */ e(
-            H,
+            U,
             {
               color: "secondary",
               sx: { borderRadius: 999, height: 6, width: "100%" },
@@ -173,13 +182,13 @@ const nl = N(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...o,
+          ...t,
           minWidth: 0
         },
         title: "Inputs",
-        children: /* @__PURE__ */ l("div", { className: "grid gap-12", children: [
+        children: /* @__PURE__ */ r("div", { className: "grid gap-12", children: [
           /* @__PURE__ */ e(
-            E,
+            k,
             {
               fullWidth: !0,
               label: "기본 입력",
@@ -189,7 +198,7 @@ const nl = N(/* @__PURE__ */ d(function({
             }
           ),
           /* @__PURE__ */ e(
-            E,
+            k,
             {
               focused: !0,
               fullWidth: !0,
@@ -200,7 +209,7 @@ const nl = N(/* @__PURE__ */ d(function({
             }
           ),
           /* @__PURE__ */ e(
-            E,
+            k,
             {
               disabled: !0,
               fullWidth: !0,
@@ -218,15 +227,15 @@ const nl = N(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...o,
+          ...t,
           minWidth: 0
         },
         title: "Text",
-        children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-14", children: [
-          /* @__PURE__ */ e(c, { variant: "h6", children: "메인 제목 텍스트" }),
-          /* @__PURE__ */ e(c, { variant: "body1", children: "text.primary 본문" }),
-          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", children: "text.secondary 보조 설명" }),
-          /* @__PURE__ */ e(c, { variant: "body2", color: "text.disabled", children: "text.disabled 비활성 텍스트" })
+        children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-14", children: [
+          /* @__PURE__ */ e(h, { variant: "h6", children: "메인 제목 텍스트" }),
+          /* @__PURE__ */ e(h, { variant: "body1", children: "text.primary 본문" }),
+          /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: "text.secondary 보조 설명" }),
+          /* @__PURE__ */ e(h, { variant: "body2", color: "text.disabled", children: "text.disabled 비활성 텍스트" })
         ] })
       }
     ),
@@ -235,65 +244,65 @@ const nl = N(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...o,
+          ...t,
           minWidth: 0
         },
         title: "Buttons",
         children: /* @__PURE__ */ e(
           te,
           {
-            buttonPreviewItems: r,
-            mainTextSecondary: i
+            buttonPreviewItems: i,
+            mainTextSecondary: l
           }
         )
       }
     )
   ] }) }) });
-}, "ThemePreviewCommonSection2")), dl = N(/* @__PURE__ */ d(function({
-  buttonPreviewItems: r,
-  mainTextSecondary: i,
+}, "ThemePreviewCommonSection2")), vl = S(/* @__PURE__ */ d(function({
+  buttonPreviewItems: i,
+  mainTextSecondary: l,
   previewSectionCardSx: a
 }) {
   return /* @__PURE__ */ e(y, { title: "Buttons", sx: a, children: /* @__PURE__ */ e(
     te,
     {
-      buttonPreviewItems: r,
-      mainTextSecondary: i
+      buttonPreviewItems: i,
+      mainTextSecondary: l
     }
   ) });
-}, "ThemePreviewButtonsSection2")), cl = N(/* @__PURE__ */ d(function({
-  previewSectionCardSx: r,
-  previewSnackbarKeysRef: i,
+}, "ThemePreviewButtonsSection2")), wl = S(/* @__PURE__ */ d(function({
+  previewSectionCardSx: i,
+  previewSnackbarKeysRef: l,
   snackbarAnchorOrigin: a,
-  snackbarAutoHideDuration: o,
+  snackbarAutoHideDuration: t,
   snackbarPreviewAnchorHorizontal: n,
-  snackbarPreviewAnchorVertical: x,
-  snackbarPreviewFontSize: g,
-  snackbarPreviewItems: f,
-  snackbarPreviewLineHeight: t,
-  snackbarPreviewMaxSnack: h
+  snackbarPreviewAnchorVertical: u,
+  snackbarPreviewFontSize: m,
+  snackbarPreviewItems: x,
+  snackbarPreviewLineHeight: v,
+  snackbarPreviewMaxSnack: C
 }) {
-  const p = K(), m = /* @__PURE__ */ d((S, u, b, w, C, W) => {
-    const oe = ye(u, {
+  const o = K(), s = /* @__PURE__ */ d((p, f, g, b, N, E) => {
+    const oe = Te(f, {
       anchorOrigin: a,
-      autoHideDuration: o,
-      variant: S,
-      content: /* @__PURE__ */ d((k) => /* @__PURE__ */ e(
-        Te,
+      autoHideDuration: t,
+      variant: p,
+      content: /* @__PURE__ */ d((G) => /* @__PURE__ */ e(
+        Se,
         {
           role: "alert",
           style: {
-            backgroundColor: b,
-            borderRadius: `${p.shape.borderRadius}px`,
-            boxShadow: p.shadows[2],
-            color: w,
-            fontSize: g,
-            lineHeight: t,
+            backgroundColor: g,
+            borderRadius: `${o.shape.borderRadius}px`,
+            boxShadow: o.shadows[2],
+            color: b,
+            fontSize: m,
+            lineHeight: v,
             overflow: "hidden",
             padding: 0
           },
-          children: /* @__PURE__ */ l(
-            v,
+          children: /* @__PURE__ */ r(
+            w,
             {
               sx: {
                 alignItems: "center",
@@ -305,8 +314,8 @@ const nl = N(/* @__PURE__ */ d(function({
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ l(
-                  v,
+                /* @__PURE__ */ r(
+                  w,
                   {
                     sx: {
                       alignItems: "center",
@@ -318,7 +327,7 @@ const nl = N(/* @__PURE__ */ d(function({
                     },
                     children: [
                       /* @__PURE__ */ e(
-                        v,
+                        w,
                         {
                           sx: {
                             alignItems: "center",
@@ -329,40 +338,40 @@ const nl = N(/* @__PURE__ */ d(function({
                               fontSize: 20
                             }
                           },
-                          children: W
+                          children: E
                         }
                       ),
                       /* @__PURE__ */ e(
-                        v,
+                        w,
                         {
                           sx: {
                             color: "inherit",
                             flex: 1,
-                            fontSize: g,
-                            lineHeight: t,
+                            fontSize: m,
+                            lineHeight: v,
                             minWidth: 0
                           },
-                          children: u
+                          children: f
                         }
                       )
                     ]
                   }
                 ),
                 /* @__PURE__ */ e(
-                  ge,
+                  we,
                   {
                     "aria-label": "close",
-                    onClick: /* @__PURE__ */ d(() => L(k), "onClick"),
+                    onClick: /* @__PURE__ */ d(() => j(G), "onClick"),
                     size: "small",
                     sx: {
                       color: "inherit",
                       flexShrink: 0,
                       ml: 1,
                       "&:hover": {
-                        backgroundColor: C
+                        backgroundColor: N
                       }
                     },
-                    children: /* @__PURE__ */ e(A, { fontSize: "small" })
+                    children: /* @__PURE__ */ e(z, { fontSize: "small" })
                   }
                 )
               ]
@@ -371,9 +380,9 @@ const nl = N(/* @__PURE__ */ d(function({
         }
       ), "content")
     });
-    for (i.current.push(oe); i.current.length > h; ) {
-      const k = i.current.shift();
-      k && L(k);
+    for (l.current.push(oe); l.current.length > C; ) {
+      const G = l.current.shift();
+      G && j(G);
     }
   }, "openPreviewSnackbar");
   return /* @__PURE__ */ e(
@@ -382,57 +391,57 @@ const nl = N(/* @__PURE__ */ d(function({
       fillContentHeight: !0,
       paperClassName: "flex min-h-0 flex-1 flex-col rounded-lg p-14",
       title: "Snackbars",
-      sx: r,
-      children: /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col gap-10", children: [
-        /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
+      sx: i,
+      children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-10", children: [
+        /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
         /* @__PURE__ */ e(
           "div",
           {
             className: "flex min-h-0 flex-1 flex-col gap-10",
             style: {
               alignItems: n === "left" ? "flex-start" : n === "right" ? "flex-end" : "center",
-              justifyContent: x === "bottom" ? "flex-end" : "flex-start"
+              justifyContent: u === "bottom" ? "flex-end" : "flex-start"
             },
-            children: f.map(
-              ({ key: S, actionHoverColor: u, backgroundColor: b, color: w, icon: C, message: W }) => /* @__PURE__ */ l(
+            children: x.map(
+              ({ key: p, actionHoverColor: f, backgroundColor: g, color: b, icon: N, message: E }) => /* @__PURE__ */ r(
                 ve,
                 {
                   className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
                   onClick: /* @__PURE__ */ d(() => {
-                    m(
-                      S,
-                      W,
+                    s(
+                      p,
+                      E,
+                      g,
                       b,
-                      w,
-                      u,
-                      C
+                      f,
+                      N
                     );
                   }, "onClick"),
                   style: {
-                    backgroundColor: b,
+                    backgroundColor: g,
                     borderRadius: 8,
                     boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)",
-                    color: w,
+                    color: b,
                     width: "min(100%, 360px)"
                   },
                   children: [
-                    /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-10", children: [
-                      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", style: { color: w }, children: C }),
+                    /* @__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(
-                        c,
+                        h,
                         {
                           variant: "body2",
                           className: "truncate",
                           sx: {
                             color: "inherit",
-                            ...g && {
-                              fontSize: g
+                            ...m && {
+                              fontSize: m
                             },
-                            ...t && {
-                              lineHeight: t
+                            ...v && {
+                              lineHeight: v
                             }
                           },
-                          children: W
+                          children: E
                         }
                       )
                     ] }),
@@ -441,15 +450,15 @@ const nl = N(/* @__PURE__ */ d(function({
                       {
                         className: "flex h-28 w-28 shrink-0 items-center justify-center rounded-full",
                         style: {
-                          backgroundColor: u,
-                          color: w
+                          backgroundColor: f,
+                          color: b
                         },
-                        children: /* @__PURE__ */ e(A, { sx: { fontSize: 16 } })
+                        children: /* @__PURE__ */ e(z, { sx: { fontSize: 16 } })
                       }
                     )
                   ]
                 },
-                S
+                p
               )
             )
           }
@@ -457,28 +466,28 @@ const nl = N(/* @__PURE__ */ d(function({
       ] })
     }
   );
-}, "ThemePreviewSnackbarsSection2")), sl = N(/* @__PURE__ */ d(function({
-  activeSection: r,
-  gridPreviewTable: i,
+}, "ThemePreviewSnackbarsSection2")), gl = S(/* @__PURE__ */ d(function({
+  activeSection: i,
+  gridPreviewTable: l,
   mainBackground: a,
-  mainPaper: o,
+  mainPaper: t,
   mainText: n,
-  mainThemePreviewStoreState: x,
-  previewSectionCardSx: g,
-  searchHeaderPreviewDate: f,
-  searchHeaderPreviewNumber: t,
-  searchHeaderPreviewVersionKey: h,
-  tablePreviewCanTableRadiusZero: p,
-  tableTheme: m,
-  tableThemePreviewVersionKey: S
+  mainThemePreviewStoreState: u,
+  previewSectionCardSx: m,
+  searchHeaderPreviewDate: x,
+  searchHeaderPreviewNumber: v,
+  searchHeaderPreviewVersionKey: C,
+  tablePreviewCanTableRadiusZero: o,
+  tableTheme: s,
+  tableThemePreviewVersionKey: p
 }) {
-  const u = _(m), b = Z(m), w = r === "navbar" || r === "toolbar";
-  return /* @__PURE__ */ e(y, { paperClassName: "overflow-hidden rounded-lg p-0", sx: g, children: /* @__PURE__ */ e(
-    $,
+  const f = _(s), g = Z(s), b = i === "navbar" || i === "toolbar";
+  return /* @__PURE__ */ e(y, { paperClassName: "overflow-hidden rounded-lg p-0", sx: m, children: /* @__PURE__ */ e(
+    O,
     {
-      preloadedState: x,
-      children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ l(
-        v,
+      preloadedState: u,
+      children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r(
+        w,
         {
           className: "flex flex-col gap-16 p-16",
           sx: {
@@ -500,18 +509,18 @@ const nl = N(/* @__PURE__ */ d(function({
                   backgroundColor: "transparent",
                   boxShadow: "none"
                 },
-                children: /* @__PURE__ */ l(De, { onSubmit: T, onReset: T, children: [
+                children: /* @__PURE__ */ r(He, { onSubmit: T, onReset: T, children: [
                   /* @__PURE__ */ e(
                     se,
                     {
                       label: "작업일자",
-                      value: f,
+                      value: x,
                       variant: "standard",
                       onChange: T
                     }
                   ),
                   /* @__PURE__ */ e(
-                    Me,
+                    ze,
                     {
                       label: "사용여부",
                       yesLabel: "사용",
@@ -521,11 +530,11 @@ const nl = N(/* @__PURE__ */ d(function({
                     }
                   ),
                   /* @__PURE__ */ e(
-                    E,
+                    k,
                     {
                       label: "번호",
                       variant: "standard",
-                      value: t,
+                      value: v,
                       onChange: T
                     }
                   )
@@ -538,75 +547,75 @@ const nl = N(/* @__PURE__ */ d(function({
                 className: "w-full rounded-lg p-16",
                 sx: {
                   ...ae,
-                  backgroundColor: o,
+                  backgroundColor: t,
                   border: `1px solid ${P}`
                 },
                 children: /* @__PURE__ */ e(
-                  Oe,
+                  Fe,
                   {
                     title: "제목",
-                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(
-                      v,
+                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+                      w,
                       {
-                        sx: z(
-                          m,
-                          p
+                        sx: A(
+                          s,
+                          o
                         ),
                         children: /* @__PURE__ */ e(
-                          O,
+                          $,
                           {
                             canUseTreeGridStyle: !1,
                             cellSx: [
-                              ...Array.isArray(u) ? u : u ? [u] : [],
+                              ...Array.isArray(f) ? f : f ? [f] : [],
                               { py: 0.5, textAlign: "center" }
                             ],
-                            data: $e,
+                            data: Ae,
                             layout: [[{ title: "상태", key: "previewValue" }]],
                             titleSx: [
-                              ...Array.isArray(b) ? b : b ? [b] : [],
+                              ...Array.isArray(g) ? g : g ? [g] : [],
                               { py: 0.5, textAlign: "center" }
                             ],
                             titleWidth: 92
                           },
-                          `search-header-field-table-${S}`
+                          `search-header-field-table-${p}`
                         )
                       }
                     ) }) }),
-                    actions: /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-8", children: [
+                    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: "다운로드" })
                     ] }),
-                    children: /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
-                      i,
+                    children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
+                      l,
                       /* @__PURE__ */ e(
-                        q,
+                        Y,
                         {
-                          className: w ? "shrink-0" : "min-h-0 flex-1",
+                          className: b ? "shrink-0" : "min-h-0 flex-1",
                           title: "섹션 제목",
                           children: /* @__PURE__ */ e(
                             "div",
                             {
                               className: "flex min-h-0 flex-1 flex-col pt-12",
                               style: { borderTop: `1px solid ${P}` },
-                              children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(
-                                v,
+                              children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+                                w,
                                 {
-                                  sx: z(
-                                    m,
-                                    p
+                                  sx: A(
+                                    s,
+                                    o
                                   ),
                                   children: /* @__PURE__ */ e(
-                                    O,
+                                    $,
                                     {
                                       canUseTreeGridStyle: !0,
-                                      cellSx: _(m),
+                                      cellSx: _(s),
                                       data: le,
                                       layout: ee,
                                       titleWidth: 108
                                     },
-                                    `search-header-content-field-table-${S}`
+                                    `search-header-content-field-table-${p}`
                                   )
                                 }
                               ) })
@@ -614,19 +623,19 @@ const nl = N(/* @__PURE__ */ d(function({
                           )
                         }
                       ),
-                      w ? /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [0, 1].map((C) => /* @__PURE__ */ e(
-                        q,
+                      b ? /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [0, 1].map((N) => /* @__PURE__ */ e(
+                        Y,
                         {
                           className: "min-h-0 flex-1",
                           title: "섹션 제목",
-                          children: /* @__PURE__ */ l(
+                          children: /* @__PURE__ */ r(
                             "div",
                             {
                               className: "flex min-h-0 flex-1 flex-col gap-10 pt-12",
                               style: { borderTop: `1px solid ${P}` },
                               children: [
                                 /* @__PURE__ */ e(
-                                  M,
+                                  W,
                                   {
                                     animation: !1,
                                     height: 16,
@@ -635,7 +644,7 @@ const nl = N(/* @__PURE__ */ d(function({
                                   }
                                 ),
                                 /* @__PURE__ */ e(
-                                  M,
+                                  W,
                                   {
                                     animation: !1,
                                     height: 16,
@@ -644,7 +653,7 @@ const nl = N(/* @__PURE__ */ d(function({
                                   }
                                 ),
                                 /* @__PURE__ */ e(
-                                  M,
+                                  W,
                                   {
                                     animation: !1,
                                     className: "flex-1",
@@ -656,7 +665,7 @@ const nl = N(/* @__PURE__ */ d(function({
                             }
                           )
                         },
-                        `search-header-skeleton-section-${C}`
+                        `search-header-skeleton-section-${N}`
                       )) }) : null
                     ] })
                   }
@@ -667,156 +676,176 @@ const nl = N(/* @__PURE__ */ d(function({
         }
       ) })
     },
-    `search-header-${h}`
+    `search-header-${C}`
   ) });
-}, "ThemePreviewSearchHeaderSection2")), hl = N(/* @__PURE__ */ d(function({
-  editableThemePreviewGridId: r,
-  mainGridChangedBackgroundColor: i,
-  mainThemePreviewStoreKey: a,
-  mainThemePreviewStoreState: o,
-  previewSectionCardSx: n,
-  readonlyThemePreviewGridId: x
+}, "ThemePreviewSearchHeaderSection2")), bl = S(/* @__PURE__ */ d(function({
+  editableThemePreviewGridId: i,
+  mainThemePreviewStoreState: l,
+  previewSectionCardSx: a,
+  readonlyThemePreviewGridId: t
 }) {
-  return /* @__PURE__ */ e(y, { title: "Grid", sx: n, children: /* @__PURE__ */ e(
-    $,
-    {
-      preloadedState: o,
-      children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ l(
-        "div",
-        {
-          className: "flex min-h-0 flex-col gap-12",
-          style: {
-            height: "min(640px, calc(100vh - 360px))"
-          },
-          children: [
-            /* @__PURE__ */ l("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-12", children: [
-              /* @__PURE__ */ e(
-                Y,
-                {
-                  data: X,
-                  height: "100%",
-                  id: r,
-                  layoutData: de,
-                  onReady: /* @__PURE__ */ d((t) => {
-                    if (!t)
-                      return;
-                    const h = t.GetFirst(), p = h ? t.GetNext(h) : null, m = p ? t.GetNext(p) : h;
-                    h && (t.SelectRow(h, 1), p ? t.Focus(p, "OWP_THEME_PREVIEW.STATUS") : t.Focus(h, "OWP_THEME_PREVIEW.STATUS"), m && (t.SetAttribute(
-                      m,
-                      "OWP_THEME_PREVIEW.STATUS",
-                      "Error",
-                      "상태 필수 입력",
-                      1
-                    ), he(r, {
-                      row: m,
-                      col: "OWP_THEME_PREVIEW.REMARK",
-                      backgroundColor: i
-                    }), t.RefreshRow(m)));
-                  }, "handleEditableThemePreviewGridReady")
-                },
-                r
-              ),
+  const [n, u] = Ce(!1), m = Ne(null), x = /* @__PURE__ */ d(() => {
+    m.current === null && (m.current = window.requestAnimationFrame(() => {
+      m.current = null, u(!0);
+    }));
+  }, "scheduleReadonlyGridMount");
+  return Re(
+    () => () => {
+      m.current !== null && (window.cancelAnimationFrame(m.current), m.current = null);
+    },
+    []
+  ), /* @__PURE__ */ e(y, { title: "Grid", sx: a, children: /* @__PURE__ */ r(O, { preloadedState: l, children: [
+    /* @__PURE__ */ e(Ue, { state: l }),
+    /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: "flex min-h-0 flex-col gap-12",
+        style: {
+          height: "min(640px, calc(100vh - 360px))"
+        },
+        children: [
+          /* @__PURE__ */ r("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-12", children: [
+            /* @__PURE__ */ e(
+              X,
+              {
+                data: q,
+                height: "100%",
+                id: i,
+                layoutData: de,
+                onReady: /* @__PURE__ */ d((o) => {
+                  if (!o)
+                    return;
+                  const s = o.GetFirst(), p = s ? o.GetNext(s) : null, f = p ? o.GetNext(p) : s;
+                  if (!s) {
+                    x();
+                    return;
+                  }
+                  o.SelectRow(s, 1), p ? o.Focus(p, "OWP_THEME_PREVIEW.STATUS") : o.Focus(s, "OWP_THEME_PREVIEW.STATUS"), f && (o.SetAttribute(
+                    f,
+                    "OWP_THEME_PREVIEW.STATUS",
+                    "Error",
+                    "상태 필수 입력",
+                    1
+                  ), o.SetValue(
+                    f,
+                    "OWP_THEME_PREVIEW.REMARKClass",
+                    he
+                  ), o.RefreshRow(f)), x();
+                }, "handleEditableThemePreviewGridReady"),
+                showLoading: !1,
+                showToolbarTotalCount: !1
+              }
+            ),
+            n ? /* @__PURE__ */ e(
+              X,
+              {
+                data: q,
+                height: "100%",
+                id: t,
+                layoutData: ce,
+                onReady: /* @__PURE__ */ d((o) => {
+                  if (!o)
+                    return;
+                  const s = o.GetFirst();
+                  s && o.Focus(s, "OWP_THEME_PREVIEW.WORK_DATE");
+                }, "handleReadonlyThemePreviewGridReady"),
+                showLoading: !1,
+                showToolbarTotalCount: !1
+              }
+            ) : /* @__PURE__ */ r(
+              "div",
+              {
+                className: "flex min-h-0 flex-col gap-10 overflow-hidden rounded-lg border border-solid p-12",
+                style: { borderColor: P },
+                children: [
+                  /* @__PURE__ */ e(W, { animation: !1, height: 24, variant: "rounded", width: "100%" }),
+                  /* @__PURE__ */ e(W, { animation: !1, className: "flex-1", variant: "rounded", width: "100%" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { className: "grid shrink-0 grid-cols-2 gap-12", children: [
+            /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+              /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
               /* @__PURE__ */ e(
-                Y,
+                Q,
                 {
-                  data: X,
-                  height: "100%",
-                  id: x,
-                  layoutData: ce,
-                  onReady: /* @__PURE__ */ d((t) => {
-                    if (!t)
-                      return;
-                    const h = t.GetFirst();
-                    h && t.Focus(h, "OWP_THEME_PREVIEW.WORK_DATE");
-                  }, "handleReadonlyThemePreviewGridReady")
-                },
-                x
+                  canUseTreeGridStyle: !0,
+                  headers: re,
+                  rows: $e
+                }
               )
             ] }),
-            /* @__PURE__ */ l("div", { className: "grid shrink-0 grid-cols-2 gap-12", children: [
-              /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-                /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
-                /* @__PURE__ */ e(
-                  Q,
-                  {
-                    canUseTreeGridStyle: !0,
-                    headers: re,
-                    rows: Ee
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-                /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
-                /* @__PURE__ */ e(
-                  J,
-                  {
-                    canCheckbox: !1,
-                    canTotalCountRow: !1,
-                    canUseOrderBy: !1,
-                    canUseTreeGridStyle: !0,
-                    fixedRowCount: 1,
-                    headCells: ie,
-                    rows: Be,
-                    sx: {
-                      "& .MuiTableBody-root > .MuiTableRow-root, & .MuiTableBody-root > .MuiTableRow-root:hover, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected:hover": {
-                        backgroundColor: "transparent"
-                      },
-                      "& .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root": {
-                        backgroundColor: "transparent"
-                      }
+            /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+              /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
+              /* @__PURE__ */ e(
+                J,
+                {
+                  canCheckbox: !1,
+                  canTotalCountRow: !1,
+                  canUseOrderBy: !1,
+                  canUseTreeGridStyle: !0,
+                  fixedRowCount: 1,
+                  headCells: ie,
+                  rows: De,
+                  sx: {
+                    "& .MuiTableBody-root > .MuiTableRow-root, & .MuiTableBody-root > .MuiTableRow-root:hover, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected:hover": {
+                      backgroundColor: "transparent"
+                    },
+                    "& .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root": {
+                      backgroundColor: "transparent"
                     }
                   }
-                )
-              ] })
+                }
+              )
             ] })
-          ]
-        }
-      ) })
-    },
-    `grid-preview-${a}`
-  ) });
-}, "ThemePreviewGridSection2")), ml = N(/* @__PURE__ */ d(function({
-  mainThemePreviewStoreState: r,
-  previewSectionCardSx: i,
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}, "ThemePreviewGridSection2")), yl = S(/* @__PURE__ */ d(function({
+  mainThemePreviewStoreState: i,
+  previewSectionCardSx: l,
   tablePreviewCanTableRadiusZero: a,
-  tableTheme: o,
+  tableTheme: t,
   tableThemePreviewVersionKey: n
 }) {
-  return /* @__PURE__ */ e(y, { title: "Tables", sx: i, children: /* @__PURE__ */ e(
-    $,
+  return /* @__PURE__ */ e(y, { title: "Tables", sx: l, children: /* @__PURE__ */ e(
+    O,
     {
-      preloadedState: r,
-      children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-14", children: [
-        /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
-          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(v, { sx: z(o, a), children: /* @__PURE__ */ e(
-            O,
+      preloadedState: i,
+      children: /* @__PURE__ */ e(B, { 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(M, { children: /* @__PURE__ */ e(w, { sx: A(t, a), children: /* @__PURE__ */ e(
+            $,
             {
               canUseTreeGridStyle: !1,
-              cellSx: _(o),
+              cellSx: _(t),
               data: le,
               layout: ee,
-              titleSx: Z(o),
+              titleSx: Z(t),
               titleWidth: 108
             },
             `field-table-${n}`
           ) }) })
         ] }),
-        /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
-          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(v, { sx: Pe(o, a), children: /* @__PURE__ */ e(
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
+          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(w, { sx: Me(t, a), children: /* @__PURE__ */ e(
             Q,
             {
               canUseTreeGridStyle: !1,
               headers: re,
-              rows: We
+              rows: Oe
             },
             `basic-table-${n}`
           ) }) })
         ] }),
-        /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
-          /* @__PURE__ */ e(v, { sx: ke(o, a), children: /* @__PURE__ */ e(
+        /* @__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(
             J,
             {
               canCheckbox: !1,
@@ -836,14 +865,14 @@ const nl = N(/* @__PURE__ */ d(function({
     },
     `table-preview-${n}`
   ) });
-}, "ThemePreviewTablesSection2")), xl = N(/* @__PURE__ */ d(function({
-  gridBodyBorder: r,
-  layoutPreviewGridCellBackground: i,
+}, "ThemePreviewTablesSection2")), Tl = S(/* @__PURE__ */ d(function({
+  gridBodyBorder: i,
+  layoutPreviewGridCellBackground: l,
   layoutPreviewGridCellFontSize: a,
-  layoutPreviewGridHeaderBackground: o,
+  layoutPreviewGridHeaderBackground: t,
   layoutPreviewGridHeaderBorder: n,
-  layoutPreviewGridHeaderColor: x,
-  layoutPreviewGridHeaderFontSize: g
+  layoutPreviewGridHeaderColor: u,
+  layoutPreviewGridHeaderFontSize: m
 }) {
   return /* @__PURE__ */ e(
     "div",
@@ -852,7 +881,7 @@ const nl = N(/* @__PURE__ */ d(function({
       style: {
         borderColor: P
       },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ r(
         ue,
         {
           size: "small",
@@ -860,15 +889,15 @@ const nl = N(/* @__PURE__ */ d(function({
             tableLayout: "fixed"
           },
           children: [
-            /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ e(F, { children: Ne.map((f) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(xe, { children: /* @__PURE__ */ e(F, { children: Ee.map((x) => /* @__PURE__ */ e(
               I,
               {
                 sx: {
-                  backgroundColor: o,
+                  backgroundColor: t,
                   borderBottom: `1px solid ${n}`,
                   borderRight: `1px solid ${n}`,
-                  color: x,
-                  fontSize: g,
+                  color: u,
+                  fontSize: m,
                   fontWeight: 500,
                   px: 1.25,
                   py: 1,
@@ -877,23 +906,23 @@ const nl = N(/* @__PURE__ */ d(function({
                     borderRight: "none"
                   }
                 },
-                children: f
+                children: x
               },
-              f
+              x
             )) }) }),
-            /* @__PURE__ */ e(pe, { children: Ce.map((f) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(pe, { children: Ge.map((x) => /* @__PURE__ */ e(
               F,
               {
                 sx: {
-                  backgroundColor: i
+                  backgroundColor: l
                 },
-                children: f.map((t, h) => /* @__PURE__ */ e(
+                children: x.map((v, C) => /* @__PURE__ */ e(
                   I,
                   {
                     sx: {
-                      borderBottom: `1px solid ${r}`,
-                      borderRight: `1px solid ${r}`,
-                      color: Re,
+                      borderBottom: `1px solid ${i}`,
+                      borderRight: `1px solid ${i}`,
+                      color: ke,
                       fontSize: a,
                       px: 1.25,
                       py: 1,
@@ -902,12 +931,12 @@ const nl = N(/* @__PURE__ */ d(function({
                         borderRight: "none"
                       }
                     },
-                    children: t
+                    children: v
                   },
-                  `${t}-${h}`
+                  `${v}-${C}`
                 ))
               },
-              f.join("-")
+              x.join("-")
             )) })
           ]
         }
@@ -916,12 +945,12 @@ const nl = N(/* @__PURE__ */ d(function({
   );
 }, "ThemePreviewGridPreviewTable2"));
 export {
-  dl as ThemePreviewButtonsSection,
-  nl as ThemePreviewCommonSection,
-  xl as ThemePreviewGridPreviewTable,
-  hl as ThemePreviewGridSection,
-  sl as ThemePreviewSearchHeaderSection,
-  cl as ThemePreviewSnackbarsSection,
-  ml as ThemePreviewTablesSection
+  vl as ThemePreviewButtonsSection,
+  ul as ThemePreviewCommonSection,
+  Tl as ThemePreviewGridPreviewTable,
+  bl as ThemePreviewGridSection,
+  gl as ThemePreviewSearchHeaderSection,
+  wl as ThemePreviewSnackbarsSection,
+  yl as ThemePreviewTablesSection
 };
 //# sourceMappingURL=ThemePreviewCanvasSections.js.map