@owp/core 2.5.61 → 2.5.63

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

@@ -1,60 +1,60 @@
-var ne = Object.defineProperty;
-var d = (c, i) => ne(c, "name", { value: i, configurable: !0 });
+var de = Object.defineProperty;
+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 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 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 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 { 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 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 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 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: 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(Ue, "ThemePreviewStoreStateSync");
+d(Le, "ThemePreviewStoreStateSync");
 function y({
   children: c,
   fillContentHeight: i = !1,
   gapClassName: l = "gap-16",
-  paperClassName: a = _e,
-  sx: t,
-  title: n
+  paperClassName: a = ze,
+  sx: n,
+  title: t
 }) {
-  const u = n != null && n !== "";
+  const u = t != null && t !== "";
   return /* @__PURE__ */ e(
-    D,
+    A,
     {
       className: a,
       sx: {
-        ...ae,
-        ...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,
+            u ? /* @__PURE__ */ e(h, { variant: "subtitle1", fontWeight: 700, children: t }) : null,
             c
           ]
         }
@@ -63,18 +63,18 @@ function y({
   );
 }
 d(y, "PreviewSectionCard");
-function M({ children: c }) {
-  const i = K(), l = Pe(
-    () => ge(i, {
+function k({ children: c }) {
+  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: c });
 }
-d(M, "ThemePreviewStaticDividerBoundary");
+d(k, "ThemePreviewStaticDividerBoundary");
 function te({
   buttonPreviewItems: c,
   mainTextSecondary: i
@@ -82,14 +82,14 @@ function te({
   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,
+      /* @__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
@@ -102,18 +102,18 @@ 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(
-        R,
+        T,
         {
           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
             }
           },
@@ -125,32 +125,32 @@ function te({
   ] });
 }
 d(te, "ThemePreviewButtonsPreviewContent");
-const ul = S(/* @__PURE__ */ d(function({
+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(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,
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Common",
         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%" },
@@ -182,39 +182,39 @@ const ul = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Inputs",
         children: /* @__PURE__ */ r("div", { className: "grid gap-12", children: [
           /* @__PURE__ */ e(
-            k,
+            M,
             {
               fullWidth: !0,
               label: "기본 입력",
-              onChange: T,
+              onChange: S,
               size: "small",
               value: "기본 상태"
             }
           ),
           /* @__PURE__ */ e(
-            k,
+            M,
             {
               focused: !0,
               fullWidth: !0,
               label: "포커스 입력",
-              onChange: T,
+              onChange: S,
               size: "small",
               value: "focus 상태"
             }
           ),
           /* @__PURE__ */ e(
-            k,
+            M,
             {
               disabled: !0,
               fullWidth: !0,
               label: "비활성 입력",
-              onChange: T,
+              onChange: S,
               size: "small",
               value: "disabled 상태"
             }
@@ -227,7 +227,7 @@ const ul = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Text",
@@ -244,7 +244,7 @@ const ul = S(/* @__PURE__ */ d(function({
       {
         gapClassName: "gap-12",
         sx: {
-          ...t,
+          ...n,
           minWidth: 0
         },
         title: "Buttons",
@@ -258,7 +258,7 @@ const ul = S(/* @__PURE__ */ d(function({
       }
     )
   ] }) }) });
-}, "ThemePreviewCommonSection2")), vl = S(/* @__PURE__ */ d(function({
+}, "ThemePreviewCommonSection2")), bl = C(/* @__PURE__ */ d(function({
   buttonPreviewItems: i,
   mainTextSecondary: l,
   previewSectionCardSx: a
@@ -270,25 +270,25 @@ const ul = S(/* @__PURE__ */ d(function({
       mainTextSecondary: l
     }
   ) });
-}, "ThemePreviewButtonsSection2")), wl = 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 = K(), s = /* @__PURE__ */ d((p, f, g, b, N, E) => {
-    const oe = Te(f, {
+  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(
-        Se,
+        Ce,
         {
           role: "alert",
           style: {
@@ -338,7 +338,7 @@ const ul = S(/* @__PURE__ */ d(function({
                               fontSize: 20
                             }
                           },
-                          children: E
+                          children: W
                         }
                       ),
                       /* @__PURE__ */ e(
@@ -358,20 +358,20 @@ 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",
                       flexShrink: 0,
                       ml: 1,
                       "&:hover": {
-                        backgroundColor: N
+                        backgroundColor: R
                       }
                     },
-                    children: /* @__PURE__ */ e(z, { fontSize: "small" })
+                    children: /* @__PURE__ */ e(I, { fontSize: "small" })
                   }
                 )
               ]
@@ -380,9 +380,9 @@ const ul = 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 && j(G);
+      G && V(G);
     }
   }, "openPreviewSnackbar");
   return /* @__PURE__ */ e(
@@ -399,22 +399,22 @@ const ul = 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: E }) => /* @__PURE__ */ r(
-                ve,
+              ({ 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(() => {
                     s(
                       p,
-                      E,
+                      W,
                       g,
                       b,
                       f,
-                      N
+                      R
                     );
                   }, "onClick"),
                   style: {
@@ -426,7 +426,7 @@ const ul = 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,
                         {
@@ -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,33 +466,33 @@ const ul = S(/* @__PURE__ */ d(function({
       ] })
     }
   );
-}, "ThemePreviewSnackbarsSection2")), gl = 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: s,
   tableThemePreviewVersionKey: p
 }) {
-  const f = _(s), g = Z(s), 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,
     {
       preloadedState: u,
-      children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(
         w,
         {
           className: "flex flex-col gap-16 p-16",
           sx: {
             backgroundColor: a,
-            color: n,
+            color: t,
             "& .OwpPageContent-header .MuiDivider-root": {
               my: 1.5
             },
@@ -502,62 +502,62 @@ const ul = S(/* @__PURE__ */ d(function({
           },
           children: [
             /* @__PURE__ */ e(
-              D,
+              A,
               {
                 className: "w-full",
                 sx: {
                   backgroundColor: "transparent",
                   boxShadow: "none"
                 },
-                children: /* @__PURE__ */ r(He, { onSubmit: T, onReset: T, children: [
+                children: /* @__PURE__ */ r(He, { onSubmit: S, onReset: S, children: [
                   /* @__PURE__ */ e(
-                    se,
+                    he,
                     {
                       label: "작업일자",
                       value: x,
                       variant: "standard",
-                      onChange: T
+                      onChange: S
                     }
                   ),
                   /* @__PURE__ */ e(
-                    ze,
+                    Ie,
                     {
                       label: "사용여부",
                       yesLabel: "사용",
                       noLabel: "미사용",
                       value: "Y",
-                      onChange: T
+                      onChange: S
                     }
                   ),
                   /* @__PURE__ */ e(
-                    k,
+                    M,
                     {
                       label: "번호",
                       variant: "standard",
                       value: v,
-                      onChange: T
+                      onChange: S
                     }
                   )
                 ] })
               }
             ),
             /* @__PURE__ */ e(
-              D,
+              A,
               {
                 className: "w-full rounded-lg p-16",
                 sx: {
-                  ...ae,
-                  backgroundColor: t,
+                  ...ne,
+                  backgroundColor: n,
                   border: `1px solid ${P}`
                 },
                 children: /* @__PURE__ */ e(
                   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(
+                        sx: D(
                           s,
                           o
                         ),
@@ -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] : [],
@@ -582,15 +582,17 @@ const ul = 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,
                       /* @__PURE__ */ e(
-                        Y,
+                        J,
                         {
                           className: b ? "shrink-0" : "min-h-0 flex-1",
                           title: "섹션 제목",
@@ -599,10 +601,10 @@ 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(
+                                  sx: D(
                                     s,
                                     o
                                   ),
@@ -610,9 +612,9 @@ const ul = S(/* @__PURE__ */ d(function({
                                     $,
                                     {
                                       canUseTreeGridStyle: !0,
-                                      cellSx: _(s),
-                                      data: le,
-                                      layout: ee,
+                                      cellSx: z(s),
+                                      data: re,
+                                      layout: le,
                                       titleWidth: 108
                                     },
                                     `search-header-content-field-table-${p}`
@@ -623,8 +625,8 @@ 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,
+                      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",
                           title: "섹션 제목",
@@ -635,7 +637,7 @@ const ul = S(/* @__PURE__ */ d(function({
                               style: { borderTop: `1px solid ${P}` },
                               children: [
                                 /* @__PURE__ */ e(
-                                  W,
+                                  E,
                                   {
                                     animation: !1,
                                     height: 16,
@@ -644,7 +646,7 @@ const ul = S(/* @__PURE__ */ d(function({
                                   }
                                 ),
                                 /* @__PURE__ */ e(
-                                  W,
+                                  E,
                                   {
                                     animation: !1,
                                     height: 16,
@@ -653,7 +655,7 @@ const ul = S(/* @__PURE__ */ d(function({
                                   }
                                 ),
                                 /* @__PURE__ */ e(
-                                  W,
+                                  E,
                                   {
                                     animation: !1,
                                     className: "flex-1",
@@ -665,7 +667,7 @@ const ul = S(/* @__PURE__ */ d(function({
                             }
                           )
                         },
-                        `search-header-skeleton-section-${N}`
+                        `search-header-skeleton-section-${R}`
                       )) }) : null
                     ] })
                   }
@@ -676,42 +678,43 @@ const ul = S(/* @__PURE__ */ d(function({
         }
       ) })
     },
-    `search-header-${C}`
+    `search-header-${N}`
   ) });
-}, "ThemePreviewSearchHeaderSection2")), bl = 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] = Ce(!1), m = Ne(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);
     }));
   }, "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: ce,
                 onReady: /* @__PURE__ */ d((o) => {
                   if (!o)
                     return;
@@ -720,34 +723,35 @@ const ul = S(/* @__PURE__ */ d(function({
                     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(s, 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,
                 showToolbarTotalCount: !1
               }
             ),
-            n ? /* @__PURE__ */ e(
-              X,
+            t ? /* @__PURE__ */ e(
+              Y,
               {
-                data: q,
+                containerClassName: "min-w-0",
+                data: X,
                 height: "100%",
-                id: t,
-                layoutData: ce,
+                id: n,
+                layoutData: se,
                 onReady: /* @__PURE__ */ d((o) => {
                   if (!o)
                     return;
                   const s = o.GetFirst();
-                  s && o.Focus(s, "OWP_THEME_PREVIEW.WORK_DATE");
+                  s && o.Focus(s, B);
                 }, "handleReadonlyThemePreviewGridReady"),
                 showLoading: !1,
                 showToolbarTotalCount: !1
@@ -755,11 +759,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 +775,7 @@ const ul = S(/* @__PURE__ */ d(function({
                 Q,
                 {
                   canUseTreeGridStyle: !0,
-                  headers: re,
+                  headers: ie,
                   rows: $e
                 }
               )
@@ -779,15 +783,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,49 +808,49 @@ const ul = S(/* @__PURE__ */ d(function({
       }
     ) })
   ] }) });
-}, "ThemePreviewGridSection2")), yl = 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,
     {
       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(n, a), children: /* @__PURE__ */ e(
             $,
             {
               canUseTreeGridStyle: !1,
-              cellSx: _(t),
-              data: le,
-              layout: ee,
-              titleSx: Z(t),
+              cellSx: z(n),
+              data: re,
+              layout: le,
+              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(M, { children: /* @__PURE__ */ e(w, { sx: Me(t, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(w, { sx: Oe(n, a), children: /* @__PURE__ */ e(
             Q,
             {
               canUseTreeGridStyle: !1,
-              headers: re,
-              rows: Oe
+              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(
-            J,
+          /* @__PURE__ */ e(w, { sx: Be(n, a), children: /* @__PURE__ */ e(
+            K,
             {
               canCheckbox: !1,
               canTableRadiusZero: a,
@@ -854,23 +858,23 @@ 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}`
+            `data-table-${t}`
           ) })
         ] })
       ] }) })
     },
-    `table-preview-${n}`
+    `table-preview-${t}`
   ) });
-}, "ThemePreviewTablesSection2")), Tl = 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
 }) {
@@ -882,20 +886,20 @@ 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,
-                  borderBottom: `1px solid ${n}`,
-                  borderRight: `1px solid ${n}`,
+                  backgroundColor: n,
+                  borderBottom: `1px solid ${t}`,
+                  borderRight: `1px solid ${t}`,
                   color: u,
                   fontSize: m,
                   fontWeight: 500,
@@ -910,14 +914,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,
+                children: x.map((v, N) => /* @__PURE__ */ e(
+                  U,
                   {
                     sx: {
                       borderBottom: `1px solid ${i}`,
@@ -933,7 +937,7 @@ const ul = S(/* @__PURE__ */ d(function({
                     },
                     children: v
                   },
-                  `${v}-${C}`
+                  `${v}-${N}`
                 ))
               },
               x.join("-")
@@ -945,12 +949,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