@owp/core 2.5.8 → 2.5.10

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

@@ -1,28 +1,28 @@
-var J = Object.defineProperty;
-var c = (f, o) => J(f, "name", { value: o, configurable: !0 });
+var K = Object.defineProperty;
+var c = (p, o) => K(p, "name", { value: o, 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 Q from "../defs/ThemePreviewGridDef.xml.js";
-import K from "../defs/ThemePreviewReadonlyGridDef.xml.js";
-import { OwpDatePicker as Z } from "../../../components/OwpPicker/OwpDatePicker.js";
-import { OwpDataTable as I } from "../../../components/OwpTable/OwpDataTable.js";
-import { OwpFieldTable as A } from "../../../components/OwpTable/OwpFieldTable.js";
+import Z from "../defs/ThemePreviewGridDef.xml.js";
+import ee from "../defs/ThemePreviewReadonlyGridDef.xml.js";
+import { OwpDatePicker as le } from "../../../components/OwpPicker/OwpDatePicker.js";
+import { OwpDataTable as _ } from "../../../components/OwpTable/OwpDataTable.js";
+import { OwpFieldTable as I } from "../../../components/OwpTable/OwpFieldTable.js";
 import { OwpTable as j } from "../../../components/OwpTable/OwpTable.js";
 import { OwpStoreProvider as E } from "../../../contexts/OwpStoreProvider.js";
-import { highlightTreeGridCellById as ee } from "../../../utils/treeGridUtil.js";
+import { highlightTreeGridCellById as re } from "../../../utils/treeGridUtil.js";
 import O 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 { Typography as x, Box as u, Paper as G, TextField as le, Skeleton as k, Button as b, ButtonBase as re, TableHead as ie, TableRow as $, TableCell as D, TableBody as ae, Table as oe, IconButton as te } from "@mui/material";
-import { useTheme as ne, alpha as F } from "@mui/material/styles";
-import { enqueueSnackbar as de, closeSnackbar as z, SnackbarContent as ce } from "notistack";
-import { memo as g } from "react";
-import { getThemePreviewFieldTableSx as L, getThemePreviewFieldTableTitleSx as se, tableFieldPreviewLayout as he, tableFieldPreviewData as xe, getThemePreviewFieldTableCellSx as fe, getThemePreviewBasicTableSx as me, tablePreviewRows as pe, tablePreviewHeaders as V, getThemePreviewDataTableSx as ue, dataTablePreviewRows as U, dataTablePreviewHeadCells as X, gridCanvasPreviewRows as _, gridStyledTablePreviewRows as we, gridStyledDataTablePreviewRows as ve, previewNoop as y, previewChromeBorder as B, previewInnerCardSx as Y, searchHeaderPreviewData as be, previewSectionCardClassName as ge, gridPreviewColumnLabels as Te, gridPreviewRows as ye, gridPreviewBodyText as Se } from "./themePreviewCanvas.shared.js";
+import { Typography as m, Box as v, Paper as G, TextField as ie, Skeleton as k, Button as T, ButtonBase as ae, TableHead as oe, TableRow as $, TableCell as D, TableBody as te, Table as ne, IconButton as de } from "@mui/material";
+import { useTheme as ce, alpha as F } from "@mui/material/styles";
+import { enqueueSnackbar as se, closeSnackbar as A, SnackbarContent as he } from "notistack";
+import { memo as y } from "react";
+import { getThemePreviewFieldTableSx as L, getThemePreviewFieldTableTitleSx as V, tableFieldPreviewLayout as xe, tableFieldPreviewData as fe, getThemePreviewFieldTableCellSx as X, getThemePreviewBasicTableSx as me, tablePreviewRows as pe, tablePreviewHeaders as Y, getThemePreviewDataTableSx as ue, dataTablePreviewRows as H, dataTablePreviewHeadCells as q, gridCanvasPreviewRows as z, gridStyledTablePreviewRows as we, gridStyledDataTablePreviewRows as ve, previewNoop as S, previewChromeBorder as B, previewInnerCardSx as J, searchHeaderPreviewData as be, previewSectionCardClassName as ge, gridPreviewColumnLabels as Te, gridPreviewRows as ye, gridPreviewBodyText as Se } from "./themePreviewCanvas.shared.js";
 import { OwpStyleProvider as M } from "../../../components/OwpStyleProvider/OwpStyleProvider.js";
-import { OwpTreeGrid as H } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
-import { OwpSearchFilter as Re } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
-import { OwpYesNoSelector as Ce } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
+import { OwpTreeGrid as U } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
+import { OwpSearchFilter as Ce } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
+import { OwpYesNoSelector as Re } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
 import { OwpPageContent as Ne } from "../../../components/OwpPageContent/OwpPageContent.js";
 import { OwpSection as Pe } from "../../../components/OwpSection/OwpSection.js";
-function S({
-  children: f,
+function C({
+  children: p,
   fillContentHeight: o = !1,
   gapClassName: t = "gap-16",
   paperClassName: n = ge,
@@ -35,7 +35,7 @@ function S({
     {
       className: n,
       sx: {
-        ...Y,
+        ...J,
         ...a
       },
       children: /* @__PURE__ */ r(
@@ -43,25 +43,25 @@ function S({
         {
           className: `flex flex-col ${s ? t : ""} ${o ? "min-h-0 flex-1" : ""}`,
           children: [
-            s ? /* @__PURE__ */ e(x, { variant: "subtitle1", fontWeight: 700, children: l }) : null,
-            f
+            s ? /* @__PURE__ */ e(m, { variant: "subtitle1", fontWeight: 700, children: l }) : null,
+            p
           ]
         }
       )
     }
   );
 }
-c(S, "PreviewSectionCard");
-const Je = g(/* @__PURE__ */ c(function({
+c(C, "PreviewSectionCard");
+const Je = y(/* @__PURE__ */ c(function({
   buttonPreviewItems: o,
   mainTextSecondary: t,
   previewSectionCardSx: n
 }) {
-  return /* @__PURE__ */ e(S, { title: "Buttons", sx: n, children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-12", children: [
+  return /* @__PURE__ */ e(C, { title: "Buttons", sx: n, children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-12", children: [
     /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-12", children: [
-      /* @__PURE__ */ e(x, { variant: "caption", sx: { minWidth: 56, color: t }, children: "contained" }),
+      /* @__PURE__ */ e(m, { variant: "caption", sx: { minWidth: 56, color: t }, children: "contained" }),
       o.map(({ label: a, color: l, previewContrastColor: s }) => /* @__PURE__ */ e(
-        b,
+        T,
         {
           variant: "contained",
           sx: {
@@ -74,9 +74,9 @@ const Je = g(/* @__PURE__ */ c(function({
       ))
     ] }),
     /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-12", children: [
-      /* @__PURE__ */ e(x, { variant: "caption", sx: { minWidth: 56, color: t }, children: "outlined" }),
+      /* @__PURE__ */ e(m, { variant: "caption", sx: { minWidth: 56, color: t }, children: "outlined" }),
       o.map(({ label: a, color: l }) => /* @__PURE__ */ e(
-        b,
+        T,
         {
           variant: "outlined",
           sx: {
@@ -93,39 +93,39 @@ const Je = g(/* @__PURE__ */ c(function({
       ))
     ] })
   ] }) });
-}, "ThemePreviewButtonsSection2")), Qe = g(/* @__PURE__ */ c(function({
+}, "ThemePreviewButtonsSection2")), Qe = y(/* @__PURE__ */ c(function({
   previewSectionCardSx: o,
   previewSnackbarKeysRef: t,
   snackbarAnchorOrigin: n,
   snackbarAutoHideDuration: a,
   snackbarPreviewAnchorHorizontal: l,
   snackbarPreviewAnchorVertical: s,
-  snackbarPreviewFontSize: m,
-  snackbarPreviewItems: h,
+  snackbarPreviewFontSize: u,
+  snackbarPreviewItems: x,
   snackbarPreviewLineHeight: i,
   snackbarPreviewMaxSnack: d
 }) {
-  const p = ne(), w = /* @__PURE__ */ c((R, T, C, v, N, P) => {
-    const q = de(T, {
+  const h = ce(), b = /* @__PURE__ */ c((w, f, R, g, N, P) => {
+    const Q = se(f, {
       anchorOrigin: n,
       autoHideDuration: a,
-      variant: R,
+      variant: w,
       content: /* @__PURE__ */ c((W) => /* @__PURE__ */ e(
-        ce,
+        he,
         {
           role: "alert",
           style: {
-            backgroundColor: C,
-            borderRadius: `${p.shape.borderRadius}px`,
-            boxShadow: p.shadows[2],
-            color: v,
-            fontSize: m,
+            backgroundColor: R,
+            borderRadius: `${h.shape.borderRadius}px`,
+            boxShadow: h.shadows[2],
+            color: g,
+            fontSize: u,
             lineHeight: i,
             overflow: "hidden",
             padding: 0
           },
           children: /* @__PURE__ */ r(
-            u,
+            v,
             {
               sx: {
                 alignItems: "center",
@@ -138,7 +138,7 @@ const Je = g(/* @__PURE__ */ c(function({
               },
               children: [
                 /* @__PURE__ */ r(
-                  u,
+                  v,
                   {
                     sx: {
                       alignItems: "center",
@@ -150,7 +150,7 @@ const Je = g(/* @__PURE__ */ c(function({
                     },
                     children: [
                       /* @__PURE__ */ e(
-                        u,
+                        v,
                         {
                           sx: {
                             alignItems: "center",
@@ -165,26 +165,26 @@ const Je = g(/* @__PURE__ */ c(function({
                         }
                       ),
                       /* @__PURE__ */ e(
-                        u,
+                        v,
                         {
                           sx: {
                             color: "inherit",
                             flex: 1,
-                            fontSize: m,
+                            fontSize: u,
                             lineHeight: i,
                             minWidth: 0
                           },
-                          children: T
+                          children: f
                         }
                       )
                     ]
                   }
                 ),
                 /* @__PURE__ */ e(
-                  te,
+                  de,
                   {
                     "aria-label": "close",
-                    onClick: /* @__PURE__ */ c(() => z(W), "onClick"),
+                    onClick: /* @__PURE__ */ c(() => A(W), "onClick"),
                     size: "small",
                     sx: {
                       color: "inherit",
@@ -203,20 +203,20 @@ const Je = g(/* @__PURE__ */ c(function({
         }
       ), "content")
     });
-    for (t.current.push(q); t.current.length > d; ) {
+    for (t.current.push(Q); t.current.length > d; ) {
       const W = t.current.shift();
-      W && z(W);
+      W && A(W);
     }
   }, "openPreviewSnackbar");
   return /* @__PURE__ */ e(
-    S,
+    C,
     {
       fillContentHeight: !0,
       paperClassName: "flex min-h-0 flex-1 flex-col rounded-lg p-14",
       title: "Snackbars",
       sx: o,
       children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-10", children: [
-        /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
+        /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
         /* @__PURE__ */ e(
           "div",
           {
@@ -225,40 +225,40 @@ const Je = g(/* @__PURE__ */ c(function({
               alignItems: l === "left" ? "flex-start" : l === "right" ? "flex-end" : "center",
               justifyContent: s === "bottom" ? "flex-end" : "flex-start"
             },
-            children: h.map(
-              ({ key: R, actionHoverColor: T, backgroundColor: C, color: v, icon: N, message: P }) => /* @__PURE__ */ r(
-                re,
+            children: x.map(
+              ({ key: w, actionHoverColor: f, backgroundColor: R, color: g, icon: N, message: P }) => /* @__PURE__ */ r(
+                ae,
                 {
                   className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
                   onClick: /* @__PURE__ */ c(() => {
-                    w(
-                      R,
+                    b(
+                      w,
                       P,
-                      C,
-                      v,
-                      T,
+                      R,
+                      g,
+                      f,
                       N
                     );
                   }, "onClick"),
                   style: {
-                    backgroundColor: C,
+                    backgroundColor: R,
                     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: v,
+                    color: g,
                     width: "min(100%, 360px)"
                   },
                   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: v }, children: N }),
+                      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", style: { color: g }, children: N }),
                       /* @__PURE__ */ e(
-                        x,
+                        m,
                         {
                           variant: "body2",
                           className: "truncate",
                           sx: {
                             color: "inherit",
-                            ...m && {
-                              fontSize: m
+                            ...u && {
+                              fontSize: u
                             },
                             ...i && {
                               lineHeight: i
@@ -273,15 +273,15 @@ const Je = g(/* @__PURE__ */ c(function({
                       {
                         className: "flex h-28 w-28 shrink-0 items-center justify-center rounded-full",
                         style: {
-                          backgroundColor: T,
-                          color: v
+                          backgroundColor: f,
+                          color: g
                         },
                         children: /* @__PURE__ */ e(O, { sx: { fontSize: 16 } })
                       }
                     )
                   ]
                 },
-                R
+                w
               )
             )
           }
@@ -289,26 +289,27 @@ const Je = g(/* @__PURE__ */ c(function({
       ] })
     }
   );
-}, "ThemePreviewSnackbarsSection2")), Ke = g(/* @__PURE__ */ c(function({
+}, "ThemePreviewSnackbarsSection2")), Ke = y(/* @__PURE__ */ c(function({
   gridPreviewTable: o,
   mainBackground: t,
   mainPaper: n,
   mainText: a,
   mainThemePreviewStoreState: l,
   previewSectionCardSx: s,
-  searchHeaderPreviewDate: m,
-  searchHeaderPreviewNumber: h,
+  searchHeaderPreviewDate: u,
+  searchHeaderPreviewNumber: x,
   searchHeaderPreviewVersionKey: i,
   tablePreviewCanTableRadiusZero: d,
-  tableTheme: p,
-  tableThemePreviewVersionKey: w
+  tableTheme: h,
+  tableThemePreviewVersionKey: b
 }) {
-  return /* @__PURE__ */ e(S, { paperClassName: "overflow-hidden rounded-lg p-0", sx: s, children: /* @__PURE__ */ e(
+  const w = X(h), f = V(h);
+  return /* @__PURE__ */ e(C, { paperClassName: "overflow-hidden rounded-lg p-0", sx: s, children: /* @__PURE__ */ e(
     E,
     {
       preloadedState: l,
       children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r(
-        u,
+        v,
         {
           className: "flex flex-col gap-16 p-16",
           sx: {
@@ -330,33 +331,33 @@ const Je = g(/* @__PURE__ */ c(function({
                   backgroundColor: "transparent",
                   boxShadow: "none"
                 },
-                children: /* @__PURE__ */ r(Re, { onSubmit: y, onReset: y, children: [
+                children: /* @__PURE__ */ r(Ce, { onSubmit: S, onReset: S, children: [
                   /* @__PURE__ */ e(
-                    Z,
+                    le,
                     {
                       label: "작업일자",
-                      value: m,
+                      value: u,
                       variant: "standard",
-                      onChange: y
+                      onChange: S
                     }
                   ),
                   /* @__PURE__ */ e(
-                    Ce,
+                    Re,
                     {
                       label: "사용여부",
                       yesLabel: "사용",
                       noLabel: "미사용",
                       value: "Y",
-                      onChange: y
+                      onChange: S
                     }
                   ),
                   /* @__PURE__ */ e(
-                    le,
+                    ie,
                     {
                       label: "번호",
                       variant: "standard",
-                      value: h,
-                      onChange: y
+                      value: x,
+                      onChange: S
                     }
                   )
                 ] })
@@ -367,7 +368,7 @@ const Je = g(/* @__PURE__ */ c(function({
               {
                 className: "w-full rounded-lg p-16",
                 sx: {
-                  ...Y,
+                  ...J,
                   backgroundColor: n,
                   border: `1px solid ${B}`
                 },
@@ -376,31 +377,37 @@ const Je = g(/* @__PURE__ */ c(function({
                   {
                     title: "제목",
                     centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(
-                      u,
+                      v,
                       {
                         sx: L(
-                          p,
+                          h,
                           d
                         ),
                         children: /* @__PURE__ */ e(
-                          A,
+                          I,
                           {
                             canUseTreeGridStyle: !1,
-                            cellSx: { py: 0.5, textAlign: "center" },
+                            cellSx: [
+                              ...Array.isArray(w) ? w : w ? [w] : [],
+                              { py: 0.5, textAlign: "center" }
+                            ],
                             data: be,
                             layout: [[{ title: "상태", key: "previewValue" }]],
-                            titleSx: { py: 0.5, textAlign: "center" },
+                            titleSx: [
+                              ...Array.isArray(f) ? f : f ? [f] : [],
+                              { py: 0.5, textAlign: "center" }
+                            ],
                             titleWidth: 92
                           },
-                          `search-header-field-table-${w}`
+                          `search-header-field-table-${b}`
                         )
                       }
                     ) }),
                     actions: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-8", children: [
-                      /* @__PURE__ */ e(b, { color: "primary", size: "small", variant: "contained", children: "추가" }),
-                      /* @__PURE__ */ e(b, { color: "secondary", size: "small", variant: "contained", children: "수정" }),
-                      /* @__PURE__ */ e(b, { color: "error", size: "small", variant: "contained", children: "삭제" }),
-                      /* @__PURE__ */ e(b, { 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: "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: [
                       o,
@@ -427,7 +434,7 @@ const Je = g(/* @__PURE__ */ c(function({
     },
     `search-header-${i}`
   ) });
-}, "ThemePreviewSearchHeaderSection2")), Ze = g(/* @__PURE__ */ c(function({
+}, "ThemePreviewSearchHeaderSection2")), Ze = y(/* @__PURE__ */ c(function({
   editableThemePreviewGridId: o,
   mainGridChangedBackgroundColor: t,
   mainThemePreviewStoreKey: n,
@@ -435,7 +442,7 @@ const Je = g(/* @__PURE__ */ c(function({
   previewSectionCardSx: l,
   readonlyThemePreviewGridId: s
 }) {
-  return /* @__PURE__ */ e(S, { title: "Grid", sx: l, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(C, { title: "Grid", sx: l, children: /* @__PURE__ */ e(
     E,
     {
       preloadedState: a,
@@ -449,32 +456,32 @@ const Je = g(/* @__PURE__ */ c(function({
           children: [
             /* @__PURE__ */ r("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-12", children: [
               /* @__PURE__ */ e(
-                H,
+                U,
                 {
-                  data: _,
+                  data: z,
                   height: "100%",
                   id: o,
-                  layoutData: Q,
+                  layoutData: Z,
                   onReady: /* @__PURE__ */ c((i) => {
                     if (!i)
                       return;
-                    const d = i.GetFirst(), p = d ? i.GetNext(d) : null, w = p ? i.GetNext(p) : d;
-                    d && (i.SelectRow(d, 1), p ? i.Focus(p, "OWP_THEME_PREVIEW.STATUS") : i.Focus(d, "OWP_THEME_PREVIEW.STATUS"), w && (ee(o, {
-                      row: w,
+                    const d = i.GetFirst(), h = d ? i.GetNext(d) : null, b = h ? i.GetNext(h) : d;
+                    d && (i.SelectRow(d, 1), h ? i.Focus(h, "OWP_THEME_PREVIEW.STATUS") : i.Focus(d, "OWP_THEME_PREVIEW.STATUS"), b && (re(o, {
+                      row: b,
                       col: "OWP_THEME_PREVIEW.REMARK",
                       backgroundColor: t
-                    }), i.RefreshRow(w)));
+                    }), i.RefreshRow(b)));
                   }, "handleEditableThemePreviewGridReady")
                 },
                 o
               ),
               /* @__PURE__ */ e(
-                H,
+                U,
                 {
-                  data: _,
+                  data: z,
                   height: "100%",
                   id: s,
-                  layoutData: K,
+                  layoutData: ee,
                   onReady: /* @__PURE__ */ c((i) => {
                     if (!i)
                       return;
@@ -487,27 +494,27 @@ const Je = g(/* @__PURE__ */ c(function({
             ] }),
             /* @__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(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
+                /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
                 /* @__PURE__ */ e(
                   j,
                   {
                     canUseTreeGridStyle: !0,
-                    headers: V,
+                    headers: Y,
                     rows: we
                   }
                 )
               ] }),
               /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-                /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
+                /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
                 /* @__PURE__ */ e(
-                  I,
+                  _,
                   {
                     canCheckbox: !1,
                     canTotalCountRow: !1,
                     canUseOrderBy: !1,
                     canUseTreeGridStyle: !0,
                     fixedRowCount: 1,
-                    headCells: X,
+                    headCells: q,
                     rows: ve,
                     sx: {
                       "& .MuiTableBody-root > .MuiTableRow-root, & .MuiTableBody-root > .MuiTableRow-root:hover, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected:hover": {
@@ -527,49 +534,49 @@ const Je = g(/* @__PURE__ */ c(function({
     },
     `grid-preview-${n}`
   ) });
-}, "ThemePreviewGridSection2")), el = g(/* @__PURE__ */ c(function({
+}, "ThemePreviewGridSection2")), el = y(/* @__PURE__ */ c(function({
   mainThemePreviewStoreState: o,
   previewSectionCardSx: t,
   tablePreviewCanTableRadiusZero: n,
   tableTheme: a,
   tableThemePreviewVersionKey: l
 }) {
-  return /* @__PURE__ */ e(S, { title: "Tables", sx: t, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(C, { title: "Tables", sx: t, children: /* @__PURE__ */ e(
     E,
     {
       preloadedState: o,
       children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-14", children: [
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
-          /* @__PURE__ */ e(u, { sx: L(a, n), children: /* @__PURE__ */ e(
-            A,
+          /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
+          /* @__PURE__ */ e(v, { sx: L(a, n), children: /* @__PURE__ */ e(
+            I,
             {
               canUseTreeGridStyle: !1,
-              cellSx: fe(a),
-              data: xe,
-              layout: he,
-              titleSx: se(a),
+              cellSx: X(a),
+              data: fe,
+              layout: xe,
+              titleSx: V(a),
               titleWidth: 108
             },
             `field-table-${l}`
           ) })
         ] }),
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
-          /* @__PURE__ */ e(u, { sx: me(a, n), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
+          /* @__PURE__ */ e(v, { sx: me(a, n), children: /* @__PURE__ */ e(
             j,
             {
               canUseTreeGridStyle: !1,
-              headers: V,
+              headers: Y,
               rows: pe
             },
             `basic-table-${l}`
           ) })
         ] }),
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
-          /* @__PURE__ */ e(u, { sx: ue(a, n), children: /* @__PURE__ */ e(
-            I,
+          /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
+          /* @__PURE__ */ e(v, { sx: ue(a, n), children: /* @__PURE__ */ e(
+            _,
             {
               canCheckbox: !1,
               canTableRadiusZero: n,
@@ -577,9 +584,9 @@ const Je = g(/* @__PURE__ */ c(function({
               canUseOrderBy: !1,
               canUseTreeGridStyle: !1,
               fixedRowCount: 2,
-              headCells: X,
-              rows: U,
-              selected: U.slice(0, 1)
+              headCells: q,
+              rows: H,
+              selected: H.slice(0, 1)
             },
             `data-table-${l}`
           ) })
@@ -588,14 +595,14 @@ const Je = g(/* @__PURE__ */ c(function({
     },
     `table-preview-${l}`
   ) });
-}, "ThemePreviewTablesSection2")), ll = g(/* @__PURE__ */ c(function({
+}, "ThemePreviewTablesSection2")), ll = y(/* @__PURE__ */ c(function({
   gridBodyBorder: o,
   layoutPreviewGridCellBackground: t,
   layoutPreviewGridCellFontSize: n,
   layoutPreviewGridHeaderBackground: a,
   layoutPreviewGridHeaderBorder: l,
   layoutPreviewGridHeaderColor: s,
-  layoutPreviewGridHeaderFontSize: m
+  layoutPreviewGridHeaderFontSize: u
 }) {
   return /* @__PURE__ */ e(
     "div",
@@ -605,14 +612,14 @@ const Je = g(/* @__PURE__ */ c(function({
         borderColor: B
       },
       children: /* @__PURE__ */ r(
-        oe,
+        ne,
         {
           size: "small",
           sx: {
             tableLayout: "fixed"
           },
           children: [
-            /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e($, { children: Te.map((h) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(oe, { children: /* @__PURE__ */ e($, { children: Te.map((x) => /* @__PURE__ */ e(
               D,
               {
                 sx: {
@@ -620,7 +627,7 @@ const Je = g(/* @__PURE__ */ c(function({
                   borderBottom: `1px solid ${l}`,
                   borderRight: `1px solid ${l}`,
                   color: s,
-                  fontSize: m,
+                  fontSize: u,
                   fontWeight: 500,
                   px: 1.25,
                   py: 1,
@@ -629,17 +636,17 @@ const Je = g(/* @__PURE__ */ c(function({
                     borderRight: "none"
                   }
                 },
-                children: h
+                children: x
               },
-              h
+              x
             )) }) }),
-            /* @__PURE__ */ e(ae, { children: ye.map((h) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(te, { children: ye.map((x) => /* @__PURE__ */ e(
               $,
               {
                 sx: {
                   backgroundColor: t
                 },
-                children: h.map((i, d) => /* @__PURE__ */ e(
+                children: x.map((i, d) => /* @__PURE__ */ e(
                   D,
                   {
                     sx: {
@@ -659,7 +666,7 @@ const Je = g(/* @__PURE__ */ c(function({
                   `${i}-${d}`
                 ))
               },
-              h.join("-")
+              x.join("-")
             )) })
           ]
         }