@owp/core 2.5.9 → 2.5.11

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

@@ -1,130 +1,298 @@
-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 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 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 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";
+var ne = Object.defineProperty;
+var d = (s, r) => ne(s, "name", { value: r, configurable: !0 });
+import { jsx as e, jsxs as l } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import de from "../defs/ThemePreviewGridDef.xml.js";
+import ce from "../defs/ThemePreviewReadonlyGridDef.xml.js";
+import { OwpDatePicker as se } from "../../../components/OwpPicker/OwpDatePicker.js";
+import { OwpDataTable as J } from "../../../components/OwpTable/OwpDataTable.js";
+import { OwpFieldTable as E } from "../../../components/OwpTable/OwpFieldTable.js";
+import { OwpTable as Q } from "../../../components/OwpTable/OwpTable.js";
+import { OwpStoreProvider as G } from "../../../contexts/OwpStoreProvider.js";
+import { highlightTreeGridCellById as he } from "../../../utils/treeGridUtil.js";
+import _ from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Close.js";
+import me from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Search.js";
+import xe from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/SpaceDashboardOutlined.js";
+import { Typography as c, Box as v, Paper as D, TextField as B, Skeleton as O, Button as R, ButtonBase as fe, CircularProgress as I, LinearProgress as U, TableHead as pe, TableRow as A, TableCell as H, TableBody as ue, Table as ve, IconButton as ge } from "@mui/material";
+import { useTheme as K, createTheme as be, ThemeProvider as we, alpha as j } from "@mui/material/styles";
+import { enqueueSnackbar as ye, closeSnackbar as L, SnackbarContent as Te } from "notistack";
+import { memo as N, useMemo as Se } from "react";
+import { getThemePreviewFieldTableSx as z, getThemePreviewFieldTableTitleSx as Z, tableFieldPreviewLayout as ee, tableFieldPreviewData as le, getThemePreviewFieldTableCellSx as F, getThemePreviewBasicTableSx as Ne, tablePreviewRows as Ce, tablePreviewHeaders as re, getThemePreviewDataTableSx as Re, dataTablePreviewRows as X, dataTablePreviewHeadCells as ie, gridCanvasPreviewRows as Y, gridStyledTablePreviewRows as Pe, gridStyledDataTablePreviewRows as We, previewNoop as T, previewChromeBorder as P, previewInnerCardSx as ae, searchHeaderPreviewData as ke, previewSectionCardClassName as Be, gridPreviewColumnLabels as $e, gridPreviewRows as Ge, gridPreviewBodyText as Me } from "./themePreviewCanvas.shared.js";
 import { OwpStyleProvider as M } from "../../../components/OwpStyleProvider/OwpStyleProvider.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 C({
-  children: p,
-  fillContentHeight: o = !1,
-  gapClassName: t = "gap-16",
-  paperClassName: n = ge,
-  sx: a,
-  title: l
+import { OwpTreeGrid as q } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
+import { OwpSearchFilter as Oe } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
+import { OwpYesNoSelector as Ee } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
+import { OwpPageContent as De } from "../../../components/OwpPageContent/OwpPageContent.js";
+import { OwpSection as V } from "../../../components/OwpSection/OwpSection.js";
+function y({
+  children: s,
+  fillContentHeight: r = !1,
+  gapClassName: i = "gap-16",
+  paperClassName: a = Be,
+  sx: t,
+  title: n
 }) {
-  const s = l != null && l !== "";
+  const m = n != null && n !== "";
   return /* @__PURE__ */ e(
-    G,
+    D,
     {
-      className: n,
+      className: a,
       sx: {
-        ...J,
-        ...a
+        ...ae,
+        ...t
       },
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ l(
         "div",
         {
-          className: `flex flex-col ${s ? t : ""} ${o ? "min-h-0 flex-1" : ""}`,
+          className: `flex flex-col ${m ? i : ""} ${r ? "min-h-0 flex-1" : ""}`,
           children: [
-            s ? /* @__PURE__ */ e(m, { variant: "subtitle1", fontWeight: 700, children: l }) : null,
-            p
+            m ? /* @__PURE__ */ e(c, { variant: "subtitle1", fontWeight: 700, children: n }) : null,
+            s
           ]
         }
       )
     }
   );
 }
-c(C, "PreviewSectionCard");
-const Je = y(/* @__PURE__ */ c(function({
-  buttonPreviewItems: o,
-  mainTextSecondary: t,
-  previewSectionCardSx: n
+d(y, "PreviewSectionCard");
+function $({ children: s }) {
+  const r = K(), i = Se(
+    () => be(r, {
+      palette: {
+        divider: P
+      }
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ e(we, { theme: i, children: s });
+}
+d($, "ThemePreviewStaticDividerBoundary");
+function te({
+  buttonPreviewItems: s,
+  mainTextSecondary: r
 }) {
-  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(m, { variant: "caption", sx: { minWidth: 56, color: t }, children: "contained" }),
-      o.map(({ label: a, color: l, previewContrastColor: s }) => /* @__PURE__ */ e(
-        T,
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-12", children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ e(c, { variant: "caption", sx: { color: r }, children: "contained" }),
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: i, color: a, previewContrastColor: t }) => /* @__PURE__ */ e(
+        R,
         {
+          size: "small",
           variant: "contained",
           sx: {
-            backgroundColor: l,
-            color: s
+            backgroundColor: a,
+            color: t,
+            minWidth: 72,
+            px: 1.5,
+            py: 0.625
           },
-          children: a
+          children: i
         },
-        `contained-${a}`
-      ))
+        `contained-${i}`
+      )) })
     ] }),
-    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-12", children: [
-      /* @__PURE__ */ e(m, { variant: "caption", sx: { minWidth: 56, color: t }, children: "outlined" }),
-      o.map(({ label: a, color: l }) => /* @__PURE__ */ e(
-        T,
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ e(c, { variant: "caption", sx: { color: r }, children: "outlined" }),
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-8", children: s.map(({ label: i, color: a }) => /* @__PURE__ */ e(
+        R,
         {
+          size: "small",
           variant: "outlined",
           sx: {
-            borderColor: F(l, 0.52),
-            color: l,
+            borderColor: j(a, 0.52),
+            color: a,
+            minWidth: 72,
+            px: 1.5,
+            py: 0.625,
             "&:hover": {
-              borderColor: l,
-              backgroundColor: F(l, 0.08)
+              backgroundColor: j(a, 0.08),
+              borderColor: a
             }
           },
-          children: a
+          children: i
         },
-        `outlined-${a}`
-      ))
+        `outlined-${i}`
+      )) })
     ] })
-  ] }) });
-}, "ThemePreviewButtonsSection2")), Qe = y(/* @__PURE__ */ c(function({
-  previewSectionCardSx: o,
-  previewSnackbarKeysRef: t,
-  snackbarAnchorOrigin: n,
-  snackbarAutoHideDuration: a,
-  snackbarPreviewAnchorHorizontal: l,
-  snackbarPreviewAnchorVertical: s,
-  snackbarPreviewFontSize: u,
-  snackbarPreviewItems: x,
-  snackbarPreviewLineHeight: i,
-  snackbarPreviewMaxSnack: d
+  ] });
+}
+d(te, "ThemePreviewButtonsPreviewContent");
+const nl = N(/* @__PURE__ */ d(function({
+  buttonPreviewItems: r,
+  mainTextSecondary: i,
+  mainThemePreviewStoreState: a,
+  previewSectionCardSx: t
 }) {
-  const h = ce(), b = /* @__PURE__ */ c((w, f, R, g, N, P) => {
-    const Q = se(f, {
-      anchorOrigin: n,
-      autoHideDuration: a,
-      variant: w,
-      content: /* @__PURE__ */ c((W) => /* @__PURE__ */ e(
-        he,
+  return /* @__PURE__ */ e(G, { preloadedState: a, children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ l("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,
+          minWidth: 0
+        },
+        title: "Common",
+        children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-12", children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-12", children: [
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-8", children: [
+              /* @__PURE__ */ e(xe, { color: "primary" }),
+              /* @__PURE__ */ e(c, { variant: "body2", color: "primary.main", fontWeight: 600, children: "primary" })
+            ] }),
+            /* @__PURE__ */ e(I, { color: "primary", size: 18, thickness: 5 })
+          ] }),
+          /* @__PURE__ */ e(
+            U,
+            {
+              color: "primary",
+              sx: { borderRadius: 999, height: 6, width: "100%" },
+              value: 68,
+              variant: "determinate"
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-12", children: [
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-8", children: [
+              /* @__PURE__ */ e(me, { color: "secondary" }),
+              /* @__PURE__ */ e(c, { variant: "body2", color: "secondary.main", fontWeight: 600, children: "secondary" })
+            ] }),
+            /* @__PURE__ */ e(I, { color: "secondary", size: 18, thickness: 5 })
+          ] }),
+          /* @__PURE__ */ e(
+            U,
+            {
+              color: "secondary",
+              sx: { borderRadius: 999, height: 6, width: "100%" },
+              value: 52,
+              variant: "determinate"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      y,
+      {
+        gapClassName: "gap-12",
+        sx: {
+          ...t,
+          minWidth: 0
+        },
+        title: "Inputs",
+        children: /* @__PURE__ */ l("div", { className: "grid gap-12", children: [
+          /* @__PURE__ */ e(
+            B,
+            {
+              fullWidth: !0,
+              label: "기본 입력",
+              onChange: T,
+              size: "small",
+              value: "기본 상태"
+            }
+          ),
+          /* @__PURE__ */ e(
+            B,
+            {
+              focused: !0,
+              fullWidth: !0,
+              label: "포커스 입력",
+              onChange: T,
+              size: "small",
+              value: "focus 상태"
+            }
+          ),
+          /* @__PURE__ */ e(
+            B,
+            {
+              disabled: !0,
+              fullWidth: !0,
+              label: "비활성 입력",
+              onChange: T,
+              size: "small",
+              value: "disabled 상태"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      y,
+      {
+        gapClassName: "gap-12",
+        sx: {
+          ...t,
+          minWidth: 0
+        },
+        title: "Text",
+        children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-14", children: [
+          /* @__PURE__ */ e(c, { variant: "h6", children: "메인 제목 텍스트" }),
+          /* @__PURE__ */ e(c, { variant: "body1", children: "text.primary 본문" }),
+          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", children: "text.secondary 보조 설명" }),
+          /* @__PURE__ */ e(c, { variant: "body2", color: "text.disabled", children: "text.disabled 비활성 텍스트" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      y,
+      {
+        gapClassName: "gap-12",
+        sx: {
+          ...t,
+          minWidth: 0
+        },
+        title: "Buttons",
+        children: /* @__PURE__ */ e(
+          te,
+          {
+            buttonPreviewItems: r,
+            mainTextSecondary: i
+          }
+        )
+      }
+    )
+  ] }) }) });
+}, "ThemePreviewCommonSection2")), dl = N(/* @__PURE__ */ d(function({
+  buttonPreviewItems: r,
+  mainTextSecondary: i,
+  previewSectionCardSx: a
+}) {
+  return /* @__PURE__ */ e(y, { title: "Buttons", sx: a, children: /* @__PURE__ */ e(
+    te,
+    {
+      buttonPreviewItems: r,
+      mainTextSecondary: i
+    }
+  ) });
+}, "ThemePreviewButtonsSection2")), cl = N(/* @__PURE__ */ d(function({
+  previewSectionCardSx: r,
+  previewSnackbarKeysRef: i,
+  snackbarAnchorOrigin: a,
+  snackbarAutoHideDuration: t,
+  snackbarPreviewAnchorHorizontal: n,
+  snackbarPreviewAnchorVertical: m,
+  snackbarPreviewFontSize: g,
+  snackbarPreviewItems: f,
+  snackbarPreviewLineHeight: o,
+  snackbarPreviewMaxSnack: h
+}) {
+  const p = K(), x = /* @__PURE__ */ d((S, u, b, w, C, W) => {
+    const oe = ye(u, {
+      anchorOrigin: a,
+      autoHideDuration: t,
+      variant: S,
+      content: /* @__PURE__ */ d((k) => /* @__PURE__ */ e(
+        Te,
         {
           role: "alert",
           style: {
-            backgroundColor: R,
-            borderRadius: `${h.shape.borderRadius}px`,
-            boxShadow: h.shadows[2],
-            color: g,
-            fontSize: u,
-            lineHeight: i,
+            backgroundColor: b,
+            borderRadius: `${p.shape.borderRadius}px`,
+            boxShadow: p.shadows[2],
+            color: w,
+            fontSize: g,
+            lineHeight: o,
             overflow: "hidden",
             padding: 0
           },
-          children: /* @__PURE__ */ r(
+          children: /* @__PURE__ */ l(
             v,
             {
               sx: {
@@ -137,7 +305,7 @@ const Je = y(/* @__PURE__ */ c(function({
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ l(
                   v,
                   {
                     sx: {
@@ -161,7 +329,7 @@ const Je = y(/* @__PURE__ */ c(function({
                               fontSize: 20
                             }
                           },
-                          children: P
+                          children: W
                         }
                       ),
                       /* @__PURE__ */ e(
@@ -170,31 +338,31 @@ const Je = y(/* @__PURE__ */ c(function({
                           sx: {
                             color: "inherit",
                             flex: 1,
-                            fontSize: u,
-                            lineHeight: i,
+                            fontSize: g,
+                            lineHeight: o,
                             minWidth: 0
                           },
-                          children: f
+                          children: u
                         }
                       )
                     ]
                   }
                 ),
                 /* @__PURE__ */ e(
-                  de,
+                  ge,
                   {
                     "aria-label": "close",
-                    onClick: /* @__PURE__ */ c(() => A(W), "onClick"),
+                    onClick: /* @__PURE__ */ d(() => L(k), "onClick"),
                     size: "small",
                     sx: {
                       color: "inherit",
                       flexShrink: 0,
                       ml: 1,
                       "&:hover": {
-                        backgroundColor: N
+                        backgroundColor: C
                       }
                     },
-                    children: /* @__PURE__ */ e(O, { fontSize: "small" })
+                    children: /* @__PURE__ */ e(_, { fontSize: "small" })
                   }
                 )
               ]
@@ -203,68 +371,68 @@ const Je = y(/* @__PURE__ */ c(function({
         }
       ), "content")
     });
-    for (t.current.push(Q); t.current.length > d; ) {
-      const W = t.current.shift();
-      W && A(W);
+    for (i.current.push(oe); i.current.length > h; ) {
+      const k = i.current.shift();
+      k && L(k);
     }
   }, "openPreviewSnackbar");
   return /* @__PURE__ */ e(
-    C,
+    y,
     {
       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(m, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
+      sx: r,
+      children: /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col gap-10", children: [
+        /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
         /* @__PURE__ */ e(
           "div",
           {
             className: "flex min-h-0 flex-1 flex-col gap-10",
             style: {
-              alignItems: l === "left" ? "flex-start" : l === "right" ? "flex-end" : "center",
-              justifyContent: s === "bottom" ? "flex-end" : "flex-start"
+              alignItems: n === "left" ? "flex-start" : n === "right" ? "flex-end" : "center",
+              justifyContent: m === "bottom" ? "flex-end" : "flex-start"
             },
-            children: x.map(
-              ({ key: w, actionHoverColor: f, backgroundColor: R, color: g, icon: N, message: P }) => /* @__PURE__ */ r(
-                ae,
+            children: f.map(
+              ({ key: S, actionHoverColor: u, backgroundColor: b, color: w, icon: C, message: W }) => /* @__PURE__ */ l(
+                fe,
                 {
                   className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
-                  onClick: /* @__PURE__ */ c(() => {
-                    b(
+                  onClick: /* @__PURE__ */ d(() => {
+                    x(
+                      S,
+                      W,
+                      b,
                       w,
-                      P,
-                      R,
-                      g,
-                      f,
-                      N
+                      u,
+                      C
                     );
                   }, "onClick"),
                   style: {
-                    backgroundColor: R,
+                    backgroundColor: b,
                     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: g,
+                    color: w,
                     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: g }, children: N }),
+                    /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-10", children: [
+                      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", style: { color: w }, children: C }),
                       /* @__PURE__ */ e(
-                        m,
+                        c,
                         {
                           variant: "body2",
                           className: "truncate",
                           sx: {
                             color: "inherit",
-                            ...u && {
-                              fontSize: u
+                            ...g && {
+                              fontSize: g
                             },
-                            ...i && {
-                              lineHeight: i
+                            ...o && {
+                              lineHeight: o
                             }
                           },
-                          children: P
+                          children: W
                         }
                       )
                     ] }),
@@ -273,15 +441,15 @@ const Je = y(/* @__PURE__ */ c(function({
                       {
                         className: "flex h-28 w-28 shrink-0 items-center justify-center rounded-full",
                         style: {
-                          backgroundColor: f,
-                          color: g
+                          backgroundColor: u,
+                          color: w
                         },
-                        children: /* @__PURE__ */ e(O, { sx: { fontSize: 16 } })
+                        children: /* @__PURE__ */ e(_, { sx: { fontSize: 16 } })
                       }
                     )
                   ]
                 },
-                w
+                S
               )
             )
           }
@@ -289,32 +457,33 @@ const Je = y(/* @__PURE__ */ c(function({
       ] })
     }
   );
-}, "ThemePreviewSnackbarsSection2")), Ke = y(/* @__PURE__ */ c(function({
-  gridPreviewTable: o,
-  mainBackground: t,
-  mainPaper: n,
-  mainText: a,
-  mainThemePreviewStoreState: l,
-  previewSectionCardSx: s,
-  searchHeaderPreviewDate: u,
-  searchHeaderPreviewNumber: x,
-  searchHeaderPreviewVersionKey: i,
-  tablePreviewCanTableRadiusZero: d,
-  tableTheme: h,
-  tableThemePreviewVersionKey: b
+}, "ThemePreviewSnackbarsSection2")), sl = N(/* @__PURE__ */ d(function({
+  activeSection: r,
+  gridPreviewTable: i,
+  mainBackground: a,
+  mainPaper: t,
+  mainText: n,
+  mainThemePreviewStoreState: m,
+  previewSectionCardSx: g,
+  searchHeaderPreviewDate: f,
+  searchHeaderPreviewNumber: o,
+  searchHeaderPreviewVersionKey: h,
+  tablePreviewCanTableRadiusZero: p,
+  tableTheme: x,
+  tableThemePreviewVersionKey: S
 }) {
-  const w = X(h), f = V(h);
-  return /* @__PURE__ */ e(C, { paperClassName: "overflow-hidden rounded-lg p-0", sx: s, children: /* @__PURE__ */ e(
-    E,
+  const u = F(x), b = Z(x), w = r === "navbar" || r === "toolbar";
+  return /* @__PURE__ */ e(y, { paperClassName: "overflow-hidden rounded-lg p-0", sx: g, children: /* @__PURE__ */ e(
+    G,
     {
-      preloadedState: l,
-      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r(
+      preloadedState: m,
+      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ l(
         v,
         {
           className: "flex flex-col gap-16 p-16",
           sx: {
-            backgroundColor: t,
-            color: a,
+            backgroundColor: a,
+            color: n,
             "& .OwpPageContent-header .MuiDivider-root": {
               my: 1.5
             },
@@ -324,105 +493,171 @@ const Je = y(/* @__PURE__ */ c(function({
           },
           children: [
             /* @__PURE__ */ e(
-              G,
+              D,
               {
                 className: "w-full",
                 sx: {
                   backgroundColor: "transparent",
                   boxShadow: "none"
                 },
-                children: /* @__PURE__ */ r(Ce, { onSubmit: S, onReset: S, children: [
+                children: /* @__PURE__ */ l(Oe, { onSubmit: T, onReset: T, children: [
                   /* @__PURE__ */ e(
-                    le,
+                    se,
                     {
                       label: "작업일자",
-                      value: u,
+                      value: f,
                       variant: "standard",
-                      onChange: S
+                      onChange: T
                     }
                   ),
                   /* @__PURE__ */ e(
-                    Re,
+                    Ee,
                     {
                       label: "사용여부",
                       yesLabel: "사용",
                       noLabel: "미사용",
                       value: "Y",
-                      onChange: S
+                      onChange: T
                     }
                   ),
                   /* @__PURE__ */ e(
-                    ie,
+                    B,
                     {
                       label: "번호",
                       variant: "standard",
-                      value: x,
-                      onChange: S
+                      value: o,
+                      onChange: T
                     }
                   )
                 ] })
               }
             ),
             /* @__PURE__ */ e(
-              G,
+              D,
               {
                 className: "w-full rounded-lg p-16",
                 sx: {
-                  ...J,
-                  backgroundColor: n,
-                  border: `1px solid ${B}`
+                  ...ae,
+                  backgroundColor: t,
+                  border: `1px solid ${P}`
                 },
                 children: /* @__PURE__ */ e(
-                  Ne,
+                  De,
                   {
                     title: "제목",
-                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(
+                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
                       v,
                       {
-                        sx: L(
-                          h,
-                          d
+                        sx: z(
+                          x,
+                          p
                         ),
                         children: /* @__PURE__ */ e(
-                          I,
+                          E,
                           {
                             canUseTreeGridStyle: !1,
                             cellSx: [
-                              ...Array.isArray(w) ? w : w ? [w] : [],
+                              ...Array.isArray(u) ? u : u ? [u] : [],
                               { py: 0.5, textAlign: "center" }
                             ],
-                            data: be,
+                            data: ke,
                             layout: [[{ title: "상태", key: "previewValue" }]],
                             titleSx: [
-                              ...Array.isArray(f) ? f : f ? [f] : [],
+                              ...Array.isArray(b) ? b : b ? [b] : [],
                               { py: 0.5, textAlign: "center" }
                             ],
                             titleWidth: 92
                           },
-                          `search-header-field-table-${b}`
+                          `search-header-field-table-${S}`
                         )
                       }
-                    ) }),
-                    actions: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-8", 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: "다운로드" })
+                    ) }) }),
+                    actions: /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-8", children: [
+                      /* @__PURE__ */ e(R, { color: "info", size: "small", variant: "contained", children: "추가" }),
+                      /* @__PURE__ */ e(R, { color: "warning", size: "small", variant: "contained", children: "수정" }),
+                      /* @__PURE__ */ e(R, { color: "error", size: "small", variant: "contained", children: "삭제" }),
+                      /* @__PURE__ */ e(R, { color: "success", size: "small", variant: "contained", children: "다운로드" })
                     ] }),
-                    children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
-                      o,
-                      /* @__PURE__ */ e(Pe, { className: "min-h-0 flex-1", title: "섹션 제목", children: /* @__PURE__ */ r(
-                        "div",
+                    children: /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
+                      i,
+                      /* @__PURE__ */ e(
+                        V,
                         {
-                          className: "flex min-h-0 flex-1 flex-col gap-10 pt-12",
-                          style: { borderTop: `1px solid ${B}` },
-                          children: [
-                            /* @__PURE__ */ e(k, { animation: !1, height: 16, variant: "rounded", width: "100%" }),
-                            /* @__PURE__ */ e(k, { animation: !1, height: 16, variant: "rounded", width: "78%" }),
-                            /* @__PURE__ */ e(k, { animation: !1, className: "flex-1", variant: "rounded", width: "100%" })
-                          ]
+                          className: w ? "shrink-0" : "min-h-0 flex-1",
+                          title: "섹션 제목",
+                          children: /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: "flex min-h-0 flex-1 flex-col pt-12",
+                              style: { borderTop: `1px solid ${P}` },
+                              children: /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
+                                v,
+                                {
+                                  sx: z(
+                                    x,
+                                    p
+                                  ),
+                                  children: /* @__PURE__ */ e(
+                                    E,
+                                    {
+                                      canUseTreeGridStyle: !0,
+                                      cellSx: F(x),
+                                      data: le,
+                                      layout: ee,
+                                      titleWidth: 108
+                                    },
+                                    `search-header-content-field-table-${S}`
+                                  )
+                                }
+                              ) })
+                            }
+                          )
                         }
-                      ) })
+                      ),
+                      w ? /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [0, 1].map((C) => /* @__PURE__ */ e(
+                        V,
+                        {
+                          className: "min-h-0 flex-1",
+                          title: "섹션 제목",
+                          children: /* @__PURE__ */ l(
+                            "div",
+                            {
+                              className: "flex min-h-0 flex-1 flex-col gap-10 pt-12",
+                              style: { borderTop: `1px solid ${P}` },
+                              children: [
+                                /* @__PURE__ */ e(
+                                  O,
+                                  {
+                                    animation: !1,
+                                    height: 16,
+                                    variant: "rounded",
+                                    width: "100%"
+                                  }
+                                ),
+                                /* @__PURE__ */ e(
+                                  O,
+                                  {
+                                    animation: !1,
+                                    height: 16,
+                                    variant: "rounded",
+                                    width: "78%"
+                                  }
+                                ),
+                                /* @__PURE__ */ e(
+                                  O,
+                                  {
+                                    animation: !1,
+                                    className: "flex-1",
+                                    variant: "rounded",
+                                    width: "100%"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        },
+                        `search-header-skeleton-section-${C}`
+                      )) }) : null
                     ] })
                   }
                 )
@@ -432,21 +667,21 @@ const Je = y(/* @__PURE__ */ c(function({
         }
       ) })
     },
-    `search-header-${i}`
+    `search-header-${h}`
   ) });
-}, "ThemePreviewSearchHeaderSection2")), Ze = y(/* @__PURE__ */ c(function({
-  editableThemePreviewGridId: o,
-  mainGridChangedBackgroundColor: t,
-  mainThemePreviewStoreKey: n,
-  mainThemePreviewStoreState: a,
-  previewSectionCardSx: l,
-  readonlyThemePreviewGridId: s
+}, "ThemePreviewSearchHeaderSection2")), hl = N(/* @__PURE__ */ d(function({
+  editableThemePreviewGridId: r,
+  mainGridChangedBackgroundColor: i,
+  mainThemePreviewStoreKey: a,
+  mainThemePreviewStoreState: t,
+  previewSectionCardSx: n,
+  readonlyThemePreviewGridId: m
 }) {
-  return /* @__PURE__ */ e(C, { title: "Grid", sx: l, children: /* @__PURE__ */ e(
-    E,
+  return /* @__PURE__ */ e(y, { title: "Grid", sx: n, children: /* @__PURE__ */ e(
+    G,
     {
-      preloadedState: a,
-      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r(
+      preloadedState: t,
+      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ l(
         "div",
         {
           className: "flex min-h-0 flex-col gap-12",
@@ -454,68 +689,68 @@ const Je = y(/* @__PURE__ */ c(function({
             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__ */ l("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-12", children: [
               /* @__PURE__ */ e(
-                U,
+                q,
                 {
-                  data: z,
+                  data: Y,
                   height: "100%",
-                  id: o,
-                  layoutData: Z,
-                  onReady: /* @__PURE__ */ c((i) => {
-                    if (!i)
+                  id: r,
+                  layoutData: de,
+                  onReady: /* @__PURE__ */ d((o) => {
+                    if (!o)
                       return;
-                    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,
+                    const h = o.GetFirst(), p = h ? o.GetNext(h) : null, x = p ? o.GetNext(p) : h;
+                    h && (o.SelectRow(h, 1), p ? o.Focus(p, "OWP_THEME_PREVIEW.STATUS") : o.Focus(h, "OWP_THEME_PREVIEW.STATUS"), x && (he(r, {
+                      row: x,
                       col: "OWP_THEME_PREVIEW.REMARK",
-                      backgroundColor: t
-                    }), i.RefreshRow(b)));
+                      backgroundColor: i
+                    }), o.RefreshRow(x)));
                   }, "handleEditableThemePreviewGridReady")
                 },
-                o
+                r
               ),
               /* @__PURE__ */ e(
-                U,
+                q,
                 {
-                  data: z,
+                  data: Y,
                   height: "100%",
-                  id: s,
-                  layoutData: ee,
-                  onReady: /* @__PURE__ */ c((i) => {
-                    if (!i)
+                  id: m,
+                  layoutData: ce,
+                  onReady: /* @__PURE__ */ d((o) => {
+                    if (!o)
                       return;
-                    const d = i.GetFirst();
-                    d && i.Focus(d, "OWP_THEME_PREVIEW.WORK_DATE");
+                    const h = o.GetFirst();
+                    h && o.Focus(h, "OWP_THEME_PREVIEW.WORK_DATE");
                   }, "handleReadonlyThemePreviewGridReady")
                 },
-                s
+                m
               )
             ] }),
-            /* @__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(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
+            /* @__PURE__ */ l("div", { className: "grid shrink-0 grid-cols-2 gap-12", children: [
+              /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+                /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
                 /* @__PURE__ */ e(
-                  j,
+                  Q,
                   {
                     canUseTreeGridStyle: !0,
-                    headers: Y,
-                    rows: we
+                    headers: re,
+                    rows: Pe
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-                /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
+              /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+                /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
                 /* @__PURE__ */ e(
-                  _,
+                  J,
                   {
                     canCheckbox: !1,
                     canTotalCountRow: !1,
                     canUseOrderBy: !1,
                     canUseTreeGridStyle: !0,
                     fixedRowCount: 1,
-                    headCells: q,
-                    rows: ve,
+                    headCells: ie,
+                    rows: We,
                     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"
@@ -532,102 +767,102 @@ const Je = y(/* @__PURE__ */ c(function({
         }
       ) })
     },
-    `grid-preview-${n}`
+    `grid-preview-${a}`
   ) });
-}, "ThemePreviewGridSection2")), el = y(/* @__PURE__ */ c(function({
-  mainThemePreviewStoreState: o,
-  previewSectionCardSx: t,
-  tablePreviewCanTableRadiusZero: n,
-  tableTheme: a,
-  tableThemePreviewVersionKey: l
+}, "ThemePreviewGridSection2")), ml = N(/* @__PURE__ */ d(function({
+  mainThemePreviewStoreState: r,
+  previewSectionCardSx: i,
+  tablePreviewCanTableRadiusZero: a,
+  tableTheme: t,
+  tableThemePreviewVersionKey: n
 }) {
-  return /* @__PURE__ */ e(C, { title: "Tables", sx: t, children: /* @__PURE__ */ e(
-    E,
+  return /* @__PURE__ */ e(y, { title: "Tables", sx: i, children: /* @__PURE__ */ e(
+    G,
     {
-      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(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
-          /* @__PURE__ */ e(v, { sx: L(a, n), children: /* @__PURE__ */ e(
-            I,
+      preloadedState: r,
+      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-14", children: [
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
+          /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(v, { sx: z(t, a), children: /* @__PURE__ */ e(
+            E,
             {
               canUseTreeGridStyle: !1,
-              cellSx: X(a),
-              data: fe,
-              layout: xe,
-              titleSx: V(a),
+              cellSx: F(t),
+              data: le,
+              layout: ee,
+              titleSx: Z(t),
               titleWidth: 108
             },
-            `field-table-${l}`
-          ) })
+            `field-table-${n}`
+          ) }) })
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
-          /* @__PURE__ */ e(v, { sx: me(a, n), children: /* @__PURE__ */ e(
-            j,
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
+          /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(v, { sx: Ne(t, a), children: /* @__PURE__ */ e(
+            Q,
             {
               canUseTreeGridStyle: !1,
-              headers: Y,
-              rows: pe
+              headers: re,
+              rows: Ce
             },
-            `basic-table-${l}`
-          ) })
+            `basic-table-${n}`
+          ) }) })
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
-          /* @__PURE__ */ e(m, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
-          /* @__PURE__ */ e(v, { sx: ue(a, n), children: /* @__PURE__ */ e(
-            _,
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
+          /* @__PURE__ */ e(v, { sx: Re(t, a), children: /* @__PURE__ */ e(
+            J,
             {
               canCheckbox: !1,
-              canTableRadiusZero: n,
+              canTableRadiusZero: a,
               canTotalCountRow: !1,
               canUseOrderBy: !1,
               canUseTreeGridStyle: !1,
               fixedRowCount: 2,
-              headCells: q,
-              rows: H,
-              selected: H.slice(0, 1)
+              headCells: ie,
+              rows: X,
+              selected: X.slice(0, 1)
             },
-            `data-table-${l}`
+            `data-table-${n}`
           ) })
         ] })
       ] }) })
     },
-    `table-preview-${l}`
+    `table-preview-${n}`
   ) });
-}, "ThemePreviewTablesSection2")), ll = y(/* @__PURE__ */ c(function({
-  gridBodyBorder: o,
-  layoutPreviewGridCellBackground: t,
-  layoutPreviewGridCellFontSize: n,
-  layoutPreviewGridHeaderBackground: a,
-  layoutPreviewGridHeaderBorder: l,
-  layoutPreviewGridHeaderColor: s,
-  layoutPreviewGridHeaderFontSize: u
+}, "ThemePreviewTablesSection2")), xl = N(/* @__PURE__ */ d(function({
+  gridBodyBorder: r,
+  layoutPreviewGridCellBackground: i,
+  layoutPreviewGridCellFontSize: a,
+  layoutPreviewGridHeaderBackground: t,
+  layoutPreviewGridHeaderBorder: n,
+  layoutPreviewGridHeaderColor: m,
+  layoutPreviewGridHeaderFontSize: g
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       className: "overflow-hidden border border-solid",
       style: {
-        borderColor: B
+        borderColor: P
       },
-      children: /* @__PURE__ */ r(
-        ne,
+      children: /* @__PURE__ */ l(
+        ve,
         {
           size: "small",
           sx: {
             tableLayout: "fixed"
           },
           children: [
-            /* @__PURE__ */ e(oe, { children: /* @__PURE__ */ e($, { children: Te.map((x) => /* @__PURE__ */ e(
-              D,
+            /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(A, { children: $e.map((f) => /* @__PURE__ */ e(
+              H,
               {
                 sx: {
-                  backgroundColor: a,
-                  borderBottom: `1px solid ${l}`,
-                  borderRight: `1px solid ${l}`,
-                  color: s,
-                  fontSize: u,
+                  backgroundColor: t,
+                  borderBottom: `1px solid ${n}`,
+                  borderRight: `1px solid ${n}`,
+                  color: m,
+                  fontSize: g,
                   fontWeight: 500,
                   px: 1.25,
                   py: 1,
@@ -636,24 +871,24 @@ const Je = y(/* @__PURE__ */ c(function({
                     borderRight: "none"
                   }
                 },
-                children: x
+                children: f
               },
-              x
+              f
             )) }) }),
-            /* @__PURE__ */ e(te, { children: ye.map((x) => /* @__PURE__ */ e(
-              $,
+            /* @__PURE__ */ e(ue, { children: Ge.map((f) => /* @__PURE__ */ e(
+              A,
               {
                 sx: {
-                  backgroundColor: t
+                  backgroundColor: i
                 },
-                children: x.map((i, d) => /* @__PURE__ */ e(
-                  D,
+                children: f.map((o, h) => /* @__PURE__ */ e(
+                  H,
                   {
                     sx: {
-                      borderBottom: `1px solid ${o}`,
-                      borderRight: `1px solid ${o}`,
-                      color: Se,
-                      fontSize: n,
+                      borderBottom: `1px solid ${r}`,
+                      borderRight: `1px solid ${r}`,
+                      color: Me,
+                      fontSize: a,
                       px: 1.25,
                       py: 1,
                       textAlign: "center",
@@ -661,12 +896,12 @@ const Je = y(/* @__PURE__ */ c(function({
                         borderRight: "none"
                       }
                     },
-                    children: i
+                    children: o
                   },
-                  `${i}-${d}`
+                  `${o}-${h}`
                 ))
               },
-              x.join("-")
+              f.join("-")
             )) })
           ]
         }
@@ -675,11 +910,12 @@ const Je = y(/* @__PURE__ */ c(function({
   );
 }, "ThemePreviewGridPreviewTable2"));
 export {
-  Je as ThemePreviewButtonsSection,
-  ll as ThemePreviewGridPreviewTable,
-  Ze as ThemePreviewGridSection,
-  Ke as ThemePreviewSearchHeaderSection,
-  Qe as ThemePreviewSnackbarsSection,
-  el as ThemePreviewTablesSection
+  dl as ThemePreviewButtonsSection,
+  nl as ThemePreviewCommonSection,
+  xl as ThemePreviewGridPreviewTable,
+  hl as ThemePreviewGridSection,
+  sl as ThemePreviewSearchHeaderSection,
+  cl as ThemePreviewSnackbarsSection,
+  ml as ThemePreviewTablesSection
 };
 //# sourceMappingURL=ThemePreviewCanvasSections.js.map