@owp/core 2.5.60 → 2.5.62

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

@@ -1,52 +1,52 @@
-var ne = Object.defineProperty;
-var d = (c, i) => ne(c, "name", { value: i, configurable: !0 });
+var de = Object.defineProperty;
+var d = (s, i) => de(s, "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 se 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 { 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 he } from "../../../constants/treeGrid.js";
+import { TREEGRID_CELL_CHANGED_CLASS as me } 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 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 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 { 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 { 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 Y } from "../../../components/OwpSection/OwpSection.js";
-import { owpSettingsStateAtom as Ie } from "../../../store/atoms/owpSettingsAtoms.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 Ue({ state: c }) {
-  const i = ye(Ie), l = c.owpSettings;
+function Le({ state: s }) {
+  const i = Te(Ue), l = s.owpSettings;
   return We(() => {
     !(l != null && l.current) || !(l != null && l.defaults) || !(l != null && l.initial) || i(l);
   }, [l, i]), null;
 }
-d(Ue, "ThemePreviewStoreStateSync");
+d(Le, "ThemePreviewStoreStateSync");
 function y({
-  children: c,
+  children: s,
   fillContentHeight: i = !1,
   gapClassName: l = "gap-16",
-  paperClassName: a = _e,
+  paperClassName: a = ze,
   sx: t,
   title: n
 }) {
   const u = n != null && n !== "";
   return /* @__PURE__ */ e(
-    D,
+    A,
     {
       className: a,
       sx: {
-        ...ae,
+        ...te,
         ...t
       },
       children: /* @__PURE__ */ r(
@@ -55,7 +55,7 @@ function y({
           className: `flex flex-col ${u ? l : ""} ${i ? "min-h-0 flex-1" : ""}`,
           children: [
             u ? /* @__PURE__ */ e(h, { variant: "subtitle1", fontWeight: 700, children: n }) : null,
-            c
+            s
           ]
         }
       )
@@ -63,26 +63,26 @@ function y({
   );
 }
 d(y, "PreviewSectionCard");
-function M({ children: c }) {
-  const i = K(), l = Pe(
-    () => ge(i, {
+function k({ children: s }) {
+  const i = Z(), l = Ee(
+    () => be(i, {
       palette: {
         divider: P
       }
     }),
     [i]
   );
-  return /* @__PURE__ */ e(be, { theme: l, children: c });
+  return /* @__PURE__ */ e(ye, { theme: l, children: s });
 }
-d(M, "ThemePreviewStaticDividerBoundary");
-function te({
-  buttonPreviewItems: c,
+d(k, "ThemePreviewStaticDividerBoundary");
+function ne({
+  buttonPreviewItems: s,
   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: c.map(({ label: l, color: a, previewContrastColor: t }) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: l, color: a, previewContrastColor: t }) => /* @__PURE__ */ e(
         R,
         {
           size: "small",
@@ -101,19 +101,19 @@ function te({
     ] }),
     /* @__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(
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: l, color: a }) => /* @__PURE__ */ e(
         R,
         {
           size: "small",
           variant: "outlined",
           sx: {
-            borderColor: L(a, 0.52),
+            borderColor: j(a, 0.52),
             color: a,
             minWidth: 72,
             px: 1.5,
             py: 0.625,
             "&:hover": {
-              backgroundColor: L(a, 0.08),
+              backgroundColor: j(a, 0.08),
               borderColor: a
             }
           },
@@ -124,14 +124,14 @@ function te({
     ] })
   ] });
 }
-d(te, "ThemePreviewButtonsPreviewContent");
-const ul = S(/* @__PURE__ */ d(function({
+d(ne, "ThemePreviewButtonsPreviewContent");
+const gl = S(/* @__PURE__ */ d(function({
   buttonPreviewItems: i,
   mainTextSecondary: l,
   mainThemePreviewStoreState: a,
   previewSectionCardSx: t
 }) {
-  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: [
+  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(
       y,
       {
@@ -144,13 +144,13 @@ const ul = S(/* @__PURE__ */ d(function({
         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(xe, { color: "primary" }),
               /* @__PURE__ */ e(h, { variant: "body2", color: "primary.main", fontWeight: 600, children: "primary" })
             ] }),
             /* @__PURE__ */ e(H, { color: "primary", size: 18, thickness: 5 })
           ] }),
           /* @__PURE__ */ e(
-            U,
+            L,
             {
               color: "primary",
               sx: { borderRadius: 999, height: 6, width: "100%" },
@@ -160,13 +160,13 @@ const ul = S(/* @__PURE__ */ d(function({
           ),
           /* @__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(fe, { color: "secondary" }),
               /* @__PURE__ */ e(h, { variant: "body2", color: "secondary.main", fontWeight: 600, children: "secondary" })
             ] }),
             /* @__PURE__ */ e(H, { color: "secondary", size: 18, thickness: 5 })
           ] }),
           /* @__PURE__ */ e(
-            U,
+            L,
             {
               color: "secondary",
               sx: { borderRadius: 999, height: 6, width: "100%" },
@@ -188,7 +188,7 @@ const ul = S(/* @__PURE__ */ d(function({
         title: "Inputs",
         children: /* @__PURE__ */ r("div", { className: "grid gap-12", children: [
           /* @__PURE__ */ e(
-            k,
+            M,
             {
               fullWidth: !0,
               label: "기본 입력",
@@ -198,7 +198,7 @@ const ul = S(/* @__PURE__ */ d(function({
             }
           ),
           /* @__PURE__ */ e(
-            k,
+            M,
             {
               focused: !0,
               fullWidth: !0,
@@ -209,7 +209,7 @@ const ul = S(/* @__PURE__ */ d(function({
             }
           ),
           /* @__PURE__ */ e(
-            k,
+            M,
             {
               disabled: !0,
               fullWidth: !0,
@@ -249,7 +249,7 @@ const ul = S(/* @__PURE__ */ d(function({
         },
         title: "Buttons",
         children: /* @__PURE__ */ e(
-          te,
+          ne,
           {
             buttonPreviewItems: i,
             mainTextSecondary: l
@@ -258,19 +258,19 @@ const ul = S(/* @__PURE__ */ d(function({
       }
     )
   ] }) }) });
-}, "ThemePreviewCommonSection2")), vl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewCommonSection2")), bl = S(/* @__PURE__ */ d(function({
   buttonPreviewItems: i,
   mainTextSecondary: l,
   previewSectionCardSx: a
 }) {
   return /* @__PURE__ */ e(y, { title: "Buttons", sx: a, children: /* @__PURE__ */ e(
-    te,
+    ne,
     {
       buttonPreviewItems: i,
       mainTextSecondary: l
     }
   ) });
-}, "ThemePreviewButtonsSection2")), wl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewButtonsSection2")), yl = S(/* @__PURE__ */ d(function({
   previewSectionCardSx: i,
   previewSnackbarKeysRef: l,
   snackbarAnchorOrigin: a,
@@ -282,13 +282,13 @@ const ul = S(/* @__PURE__ */ d(function({
   snackbarPreviewLineHeight: v,
   snackbarPreviewMaxSnack: C
 }) {
-  const o = K(), s = /* @__PURE__ */ d((p, f, g, b, N, E) => {
-    const oe = Te(f, {
+  const o = Z(), c = /* @__PURE__ */ d((p, f, g, b, N, W) => {
+    const oe = Se(f, {
       anchorOrigin: a,
       autoHideDuration: t,
       variant: p,
       content: /* @__PURE__ */ d((G) => /* @__PURE__ */ e(
-        Se,
+        Ce,
         {
           role: "alert",
           style: {
@@ -338,7 +338,7 @@ const ul = S(/* @__PURE__ */ d(function({
                               fontSize: 20
                             }
                           },
-                          children: E
+                          children: W
                         }
                       ),
                       /* @__PURE__ */ e(
@@ -358,10 +358,10 @@ const ul = S(/* @__PURE__ */ d(function({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  we,
+                  ge,
                   {
                     "aria-label": "close",
-                    onClick: /* @__PURE__ */ d(() => j(G), "onClick"),
+                    onClick: /* @__PURE__ */ d(() => V(G), "onClick"),
                     size: "small",
                     sx: {
                       color: "inherit",
@@ -371,7 +371,7 @@ const ul = S(/* @__PURE__ */ d(function({
                         backgroundColor: N
                       }
                     },
-                    children: /* @__PURE__ */ e(z, { fontSize: "small" })
+                    children: /* @__PURE__ */ e(I, { fontSize: "small" })
                   }
                 )
               ]
@@ -382,7 +382,7 @@ const ul = S(/* @__PURE__ */ d(function({
     });
     for (l.current.push(oe); l.current.length > C; ) {
       const G = l.current.shift();
-      G && j(G);
+      G && V(G);
     }
   }, "openPreviewSnackbar");
   return /* @__PURE__ */ e(
@@ -403,14 +403,14 @@ const ul = S(/* @__PURE__ */ d(function({
               justifyContent: u === "bottom" ? "flex-end" : "flex-start"
             },
             children: x.map(
-              ({ key: p, actionHoverColor: f, backgroundColor: g, color: b, icon: N, message: E }) => /* @__PURE__ */ r(
-                ve,
+              ({ key: p, actionHoverColor: f, backgroundColor: g, color: b, icon: N, message: W }) => /* @__PURE__ */ r(
+                we,
                 {
                   className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
                   onClick: /* @__PURE__ */ d(() => {
-                    s(
+                    c(
                       p,
-                      E,
+                      W,
                       g,
                       b,
                       f,
@@ -441,7 +441,7 @@ const ul = S(/* @__PURE__ */ d(function({
                               lineHeight: v
                             }
                           },
-                          children: E
+                          children: W
                         }
                       )
                     ] }),
@@ -453,7 +453,7 @@ const ul = S(/* @__PURE__ */ d(function({
                           backgroundColor: f,
                           color: b
                         },
-                        children: /* @__PURE__ */ e(z, { sx: { fontSize: 16 } })
+                        children: /* @__PURE__ */ e(I, { sx: { fontSize: 16 } })
                       }
                     )
                   ]
@@ -466,7 +466,7 @@ const ul = S(/* @__PURE__ */ d(function({
       ] })
     }
   );
-}, "ThemePreviewSnackbarsSection2")), gl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewSnackbarsSection2")), Tl = S(/* @__PURE__ */ d(function({
   activeSection: i,
   gridPreviewTable: l,
   mainBackground: a,
@@ -478,15 +478,15 @@ const ul = S(/* @__PURE__ */ d(function({
   searchHeaderPreviewNumber: v,
   searchHeaderPreviewVersionKey: C,
   tablePreviewCanTableRadiusZero: o,
-  tableTheme: s,
+  tableTheme: c,
   tableThemePreviewVersionKey: p
 }) {
-  const f = _(s), g = Z(s), b = i === "navbar" || i === "toolbar";
+  const f = z(c), g = ee(c), b = i === "navbar" || i === "toolbar";
   return /* @__PURE__ */ e(y, { paperClassName: "overflow-hidden rounded-lg p-0", sx: m, children: /* @__PURE__ */ e(
     O,
     {
       preloadedState: u,
-      children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(
         w,
         {
           className: "flex flex-col gap-16 p-16",
@@ -502,7 +502,7 @@ const ul = S(/* @__PURE__ */ d(function({
           },
           children: [
             /* @__PURE__ */ e(
-              D,
+              A,
               {
                 className: "w-full",
                 sx: {
@@ -511,7 +511,7 @@ const ul = S(/* @__PURE__ */ d(function({
                 },
                 children: /* @__PURE__ */ r(He, { onSubmit: T, onReset: T, children: [
                   /* @__PURE__ */ e(
-                    se,
+                    he,
                     {
                       label: "작업일자",
                       value: x,
@@ -520,7 +520,7 @@ const ul = S(/* @__PURE__ */ d(function({
                     }
                   ),
                   /* @__PURE__ */ e(
-                    ze,
+                    Ie,
                     {
                       label: "사용여부",
                       yesLabel: "사용",
@@ -530,7 +530,7 @@ const ul = S(/* @__PURE__ */ d(function({
                     }
                   ),
                   /* @__PURE__ */ e(
-                    k,
+                    M,
                     {
                       label: "번호",
                       variant: "standard",
@@ -542,11 +542,11 @@ const ul = S(/* @__PURE__ */ d(function({
               }
             ),
             /* @__PURE__ */ e(
-              D,
+              A,
               {
                 className: "w-full rounded-lg p-16",
                 sx: {
-                  ...ae,
+                  ...te,
                   backgroundColor: t,
                   border: `1px solid ${P}`
                 },
@@ -554,11 +554,11 @@ const ul = S(/* @__PURE__ */ d(function({
                   Fe,
                   {
                     title: "제목",
-                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
                       w,
                       {
-                        sx: A(
-                          s,
+                        sx: D(
+                          c,
                           o
                         ),
                         children: /* @__PURE__ */ e(
@@ -569,7 +569,7 @@ const ul = S(/* @__PURE__ */ d(function({
                               ...Array.isArray(f) ? f : f ? [f] : [],
                               { py: 0.5, textAlign: "center" }
                             ],
-                            data: Ae,
+                            data: De,
                             layout: [[{ title: "상태", key: "previewValue" }]],
                             titleSx: [
                               ...Array.isArray(g) ? g : g ? [g] : [],
@@ -590,7 +590,7 @@ const ul = S(/* @__PURE__ */ d(function({
                     children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
                       l,
                       /* @__PURE__ */ e(
-                        Y,
+                        J,
                         {
                           className: b ? "shrink-0" : "min-h-0 flex-1",
                           title: "섹션 제목",
@@ -599,20 +599,20 @@ const ul = S(/* @__PURE__ */ d(function({
                             {
                               className: "flex min-h-0 flex-1 flex-col pt-12",
                               style: { borderTop: `1px solid ${P}` },
-                              children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+                              children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
                                 w,
                                 {
-                                  sx: A(
-                                    s,
+                                  sx: D(
+                                    c,
                                     o
                                   ),
                                   children: /* @__PURE__ */ e(
                                     $,
                                     {
                                       canUseTreeGridStyle: !0,
-                                      cellSx: _(s),
-                                      data: le,
-                                      layout: ee,
+                                      cellSx: z(c),
+                                      data: re,
+                                      layout: le,
                                       titleWidth: 108
                                     },
                                     `search-header-content-field-table-${p}`
@@ -624,7 +624,7 @@ const ul = 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(
-                        Y,
+                        J,
                         {
                           className: "min-h-0 flex-1",
                           title: "섹션 제목",
@@ -635,7 +635,7 @@ const ul = S(/* @__PURE__ */ d(function({
                               style: { borderTop: `1px solid ${P}` },
                               children: [
                                 /* @__PURE__ */ e(
-                                  W,
+                                  E,
                                   {
                                     animation: !1,
                                     height: 16,
@@ -644,7 +644,7 @@ const ul = S(/* @__PURE__ */ d(function({
                                   }
                                 ),
                                 /* @__PURE__ */ e(
-                                  W,
+                                  E,
                                   {
                                     animation: !1,
                                     height: 16,
@@ -653,7 +653,7 @@ const ul = S(/* @__PURE__ */ d(function({
                                   }
                                 ),
                                 /* @__PURE__ */ e(
-                                  W,
+                                  E,
                                   {
                                     animation: !1,
                                     className: "flex-1",
@@ -678,58 +678,59 @@ const ul = S(/* @__PURE__ */ d(function({
     },
     `search-header-${C}`
   ) });
-}, "ThemePreviewSearchHeaderSection2")), bl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewSearchHeaderSection2")), je = "OWP_THEME_PREVIEW.STATUS", B = "OWP_THEME_PREVIEW.WORK_DATE", Ve = "OWP_THEME_PREVIEW.REMARKClass", Sl = S(/* @__PURE__ */ d(function({
   editableThemePreviewGridId: i,
   mainThemePreviewStoreState: l,
   previewSectionCardSx: a,
   readonlyThemePreviewGridId: t
 }) {
-  const [n, u] = Ce(!1), m = Ne(null), x = /* @__PURE__ */ d(() => {
+  const [n, u] = Ne(!1), m = Re(null), x = /* @__PURE__ */ d(() => {
     m.current === null && (m.current = window.requestAnimationFrame(() => {
       m.current = null, u(!0);
     }));
   }, "scheduleReadonlyGridMount");
-  return Re(
+  return Pe(
     () => () => {
       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(
+    /* @__PURE__ */ e(Le, { state: l }),
+    /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(
       "div",
       {
-        className: "flex min-h-0 flex-col gap-12",
+        className: "flex min-h-0 min-w-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__ */ r("div", { className: "grid min-h-0 min-w-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-12", children: [
             /* @__PURE__ */ e(
-              X,
+              Y,
               {
-                data: q,
+                containerClassName: "min-w-0",
+                data: X,
                 height: "100%",
                 id: i,
-                layoutData: de,
+                layoutData: se,
                 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) {
+                  const c = o.GetFirst(), p = c ? o.GetNext(c) : null, f = p ? o.GetNext(p) : c;
+                  if (!c) {
                     x();
                     return;
                   }
-                  o.SelectRow(s, 1), p ? o.Focus(p, "OWP_THEME_PREVIEW.STATUS") : o.Focus(s, "OWP_THEME_PREVIEW.STATUS"), f && (o.SetAttribute(
+                  p ? o.Focus(p, B) : o.Focus(c, B), f && (o.SetAttribute(
                     f,
-                    "OWP_THEME_PREVIEW.STATUS",
+                    je,
                     "Error",
                     "상태 필수 입력",
                     1
                   ), o.SetValue(
                     f,
-                    "OWP_THEME_PREVIEW.REMARKClass",
-                    he
+                    Ve,
+                    me
                   ), o.RefreshRow(f)), x();
                 }, "handleEditableThemePreviewGridReady"),
                 showLoading: !1,
@@ -737,17 +738,18 @@ const ul = S(/* @__PURE__ */ d(function({
               }
             ),
             n ? /* @__PURE__ */ e(
-              X,
+              Y,
               {
-                data: q,
+                containerClassName: "min-w-0",
+                data: X,
                 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");
+                  const c = o.GetFirst();
+                  c && o.Focus(c, B);
                 }, "handleReadonlyThemePreviewGridReady"),
                 showLoading: !1,
                 showToolbarTotalCount: !1
@@ -755,11 +757,11 @@ const ul = S(/* @__PURE__ */ d(function({
             ) : /* @__PURE__ */ r(
               "div",
               {
-                className: "flex min-h-0 flex-col gap-10 overflow-hidden rounded-lg border border-solid p-12",
+                className: "flex min-h-0 min-w-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__ */ e(E, { animation: !1, height: 24, variant: "rounded", width: "100%" }),
+                  /* @__PURE__ */ e(E, { animation: !1, className: "flex-1", variant: "rounded", width: "100%" })
                 ]
               }
             )
@@ -771,7 +773,7 @@ const ul = S(/* @__PURE__ */ d(function({
                 Q,
                 {
                   canUseTreeGridStyle: !0,
-                  headers: re,
+                  headers: ie,
                   rows: $e
                 }
               )
@@ -779,15 +781,15 @@ const ul = S(/* @__PURE__ */ d(function({
             /* @__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,
+                K,
                 {
                   canCheckbox: !1,
                   canTotalCountRow: !1,
                   canUseOrderBy: !1,
                   canUseTreeGridStyle: !0,
                   fixedRowCount: 1,
-                  headCells: ie,
-                  rows: De,
+                  headCells: ae,
+                  rows: Ae,
                   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"
@@ -804,7 +806,7 @@ const ul = S(/* @__PURE__ */ d(function({
       }
     ) })
   ] }) });
-}, "ThemePreviewGridSection2")), yl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewGridSection2")), Cl = S(/* @__PURE__ */ d(function({
   mainThemePreviewStoreState: i,
   previewSectionCardSx: l,
   tablePreviewCanTableRadiusZero: a,
@@ -815,17 +817,17 @@ const ul = S(/* @__PURE__ */ d(function({
     O,
     {
       preloadedState: i,
-      children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-14", children: [
+      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(M, { children: /* @__PURE__ */ e(w, { sx: A(t, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: D(t, a), children: /* @__PURE__ */ e(
             $,
             {
               canUseTreeGridStyle: !1,
-              cellSx: _(t),
-              data: le,
-              layout: ee,
-              titleSx: Z(t),
+              cellSx: z(t),
+              data: re,
+              layout: le,
+              titleSx: ee(t),
               titleWidth: 108
             },
             `field-table-${n}`
@@ -833,12 +835,12 @@ const ul = S(/* @__PURE__ */ d(function({
         ] }),
         /* @__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(
+          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: Oe(t, a), children: /* @__PURE__ */ e(
             Q,
             {
               canUseTreeGridStyle: !1,
-              headers: re,
-              rows: Oe
+              headers: ie,
+              rows: _e
             },
             `basic-table-${n}`
           ) }) })
@@ -846,7 +848,7 @@ const ul = S(/* @__PURE__ */ d(function({
         /* @__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,
+            K,
             {
               canCheckbox: !1,
               canTableRadiusZero: a,
@@ -854,9 +856,9 @@ const ul = S(/* @__PURE__ */ d(function({
               canUseOrderBy: !1,
               canUseTreeGridStyle: !1,
               fixedRowCount: 2,
-              headCells: ie,
-              rows: V,
-              selected: V.slice(0, 1)
+              headCells: ae,
+              rows: q,
+              selected: q.slice(0, 1)
             },
             `data-table-${n}`
           ) })
@@ -865,7 +867,7 @@ const ul = S(/* @__PURE__ */ d(function({
     },
     `table-preview-${n}`
   ) });
-}, "ThemePreviewTablesSection2")), Tl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewTablesSection2")), Nl = S(/* @__PURE__ */ d(function({
   gridBodyBorder: i,
   layoutPreviewGridCellBackground: l,
   layoutPreviewGridCellFontSize: a,
@@ -882,15 +884,15 @@ const ul = S(/* @__PURE__ */ d(function({
         borderColor: P
       },
       children: /* @__PURE__ */ r(
-        ue,
+        ve,
         {
           size: "small",
           sx: {
             tableLayout: "fixed"
           },
           children: [
-            /* @__PURE__ */ e(xe, { children: /* @__PURE__ */ e(F, { children: Ee.map((x) => /* @__PURE__ */ e(
-              I,
+            /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(F, { children: Ge.map((x) => /* @__PURE__ */ e(
+              U,
               {
                 sx: {
                   backgroundColor: t,
@@ -910,14 +912,14 @@ const ul = S(/* @__PURE__ */ d(function({
               },
               x
             )) }) }),
-            /* @__PURE__ */ e(pe, { children: Ge.map((x) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(ue, { children: Me.map((x) => /* @__PURE__ */ e(
               F,
               {
                 sx: {
                   backgroundColor: l
                 },
                 children: x.map((v, C) => /* @__PURE__ */ e(
-                  I,
+                  U,
                   {
                     sx: {
                       borderBottom: `1px solid ${i}`,
@@ -945,12 +947,12 @@ const ul = S(/* @__PURE__ */ d(function({
   );
 }, "ThemePreviewGridPreviewTable2"));
 export {
-  vl as ThemePreviewButtonsSection,
-  ul as ThemePreviewCommonSection,
-  Tl as ThemePreviewGridPreviewTable,
-  bl as ThemePreviewGridSection,
-  gl as ThemePreviewSearchHeaderSection,
-  wl as ThemePreviewSnackbarsSection,
-  yl as ThemePreviewTablesSection
+  bl as ThemePreviewButtonsSection,
+  gl as ThemePreviewCommonSection,
+  Nl as ThemePreviewGridPreviewTable,
+  Sl as ThemePreviewGridSection,
+  Tl as ThemePreviewSearchHeaderSection,
+  yl as ThemePreviewSnackbarsSection,
+  Cl as ThemePreviewTablesSection
 };
 //# sourceMappingURL=ThemePreviewCanvasSections.js.map