@owp/core 2.5.61 → 2.5.63

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

@@ -1,52 +1,55 @@
-var Ze = Object.defineProperty;
-var z = (k, W) => Ze(k, "name", { value: W, configurable: !0 });
-import { jsx as r, jsxs as c } 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 { defaultSnackbarTheme as qe, defaultSnackbarProviderProps as I, snackbarVariantKeys as Je } from "../configs/snackbar.js";
-import { defaultTableTheme as Qe } from "../configs/table.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/KeyboardArrowUpRounded.js";
-import er 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/MenuRounded.js";
-import Pe 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/NavigateNext.js";
-import rr 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 or 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 i, ButtonBase as ar, CircularProgress as nr } from "@mui/material";
-import { alpha as n, darken as tr } from "@mui/material/styles";
-import { owpDayjs as cr } from "../../../dayjs.js";
-import { closeSnackbar as ir } from "notistack";
-import { useRef as lr, useDeferredValue as dr, useMemo as t, useEffect as sr, Fragment as mr } from "react";
-import { getPaletteValue as a, previewChromeBorder as $, getPreviewContrastColor as Se, createThemePreviewVersionKey as x, gridPreviewBodyBackground as br, gridPreviewBodyText as vr, getThemePreviewStyleValue as Te, snackbarPreviewMessageByVariant as hr, getPreviewSectionOrder as ur, navbarPreviewItems as fr, themePreviewReadonlyTreeGridId as pr, themePreviewEditableTreeGridId as xr } from "./themePreviewCanvas.shared.js";
-import { ThemePreviewGridPreviewTable as kr, ThemePreviewTablesSection as wr, ThemePreviewGridSection as gr, ThemePreviewSearchHeaderSection as yr, ThemePreviewSnackbarsSection as Pr, ThemePreviewButtonsSection as Sr, ThemePreviewCommonSection as Tr } from "./ThemePreviewCanvasSections.js";
-import { snackbarPreviewIconByVariant as Cr } from "./themePreviewCanvas.icons.js";
-import { merge as Ce } from "../../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/object/merge.js";
-const Br = "#ff4d2d", Nr = "rgba(255, 77, 45, 0.14)";
-function _r({
+var er = Object.defineProperty;
+var C = (k, z) => er(k, "name", { value: z, configurable: !0 });
+import { jsx as o, jsxs as c } 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 { defaultSnackbarTheme as rr, defaultSnackbarProviderProps as N, snackbarVariantKeys as or } from "../configs/snackbar.js";
+import { defaultTableTheme as ar } from "../configs/table.js";
+import nr 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/KeyboardArrowUpRounded.js";
+import tr 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/MenuRounded.js";
+import Ne 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/NavigateNext.js";
+import cr 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 ir 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 i, ButtonBase as lr, CircularProgress as dr } from "@mui/material";
+import { alpha as n, darken as mr } from "@mui/material/styles";
+import { owpDayjs as sr } from "../../../dayjs.js";
+import { closeSnackbar as br } from "notistack";
+import { useRef as ur, useDeferredValue as vr, useMemo as t, useEffect as hr, Fragment as fr } from "react";
+import { getPaletteValue as r, previewChromeBorder as H, getPreviewContrastColor as He, createThemePreviewVersionKey as p, gridPreviewBodyBackground as pr, gridPreviewBodyText as xr, getThemePreviewStyleValue as ze, snackbarPreviewMessageByVariant as kr, getPreviewSectionOrder as yr, navbarPreviewItems as wr, themePreviewReadonlyTreeGridId as Pr, themePreviewEditableTreeGridId as Sr } from "./themePreviewCanvas.shared.js";
+import { ThemePreviewGridPreviewTable as gr, ThemePreviewTablesSection as Tr, ThemePreviewGridSection as Br, ThemePreviewSearchHeaderSection as Cr, ThemePreviewSnackbarsSection as Nr, ThemePreviewButtonsSection as Hr, ThemePreviewCommonSection as zr } from "./ThemePreviewCanvasSections.js";
+import { snackbarPreviewIconByVariant as Ir } from "./themePreviewCanvas.icons.js";
+import { merge as Ie } from "../../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/object/merge.js";
+const $r = "#ff4d2d", Wr = "rgba(255, 77, 45, 0.14)";
+function Qr({
   activeSection: k,
-  isLoading: W = !1,
+  isLoading: z = !1,
   settings: e
 }) {
-  var xe, ke, we, ge, ye;
-  const A = lr([]), s = dr(k), F = !1, Y = t(
-    () => Ce(
+  var Se, ge, Te, Be, Ce;
+  const I = ur([]), m = vr(k), M = !1, R = t(
+    () => Ie(
       {},
-      Qe,
+      ar,
       e.theme.main.table
     ),
     [e.theme.main.table]
-  ), m = e.theme.toolbar.palette.mode, K = a(e, "toolbar", "background.default"), Be = a(e, "toolbar", "background.paper"), w = a(e, "toolbar", "text.primary"), Ne = a(e, "toolbar", "divider"), g = a(e, "toolbar", "common.white"), He = a(e, "toolbar", "common.black"), U = n(g, m === "dark" ? 0.06 : 0.78), _ = n(g, m === "dark" ? 0.1 : 0.62), L = n(g, m === "dark" ? 0.05 : 0.54), l = e.theme.navbar.palette.mode, D = a(e, "navbar", "background.default"), O = a(e, "navbar", "divider") || $, b = a(e, "navbar", "text.primary"), Z = a(e, "navbar", "text.secondary"), h = a(e, "navbar", "secondary.main"), y = a(e, "navbar", "secondary.dark") || h, q = Se(
-    D,
-    b || "#111827"
-  ), ze = n(q, l === "dark" ? 0.72 : 0.64), J = n(
-    h,
-    l === "dark" ? 0.2 : 0.12
-  ), Q = n(h, l === "dark" ? 0.42 : 0.28), X = n(
-    y,
+  ), s = e.theme.toolbar.palette.mode, E = r(e, "toolbar", "background.default"), $e = r(e, "toolbar", "background.paper"), y = r(e, "toolbar", "text.primary"), We = r(e, "toolbar", "divider"), w = r(e, "toolbar", "common.white"), Ae = r(e, "toolbar", "common.black"), F = n(w, s === "dark" ? 0.06 : 0.78), K = n(w, s === "dark" ? 0.1 : 0.62), Y = n(w, s === "dark" ? 0.05 : 0.54), l = e.theme.navbar.palette.mode, $ = r(e, "navbar", "background.default"), W = r(e, "navbar", "divider") || H, b = r(e, "navbar", "text.primary"), U = r(e, "navbar", "text.secondary"), v = r(e, "navbar", "secondary.main"), P = r(e, "navbar", "secondary.dark") || v, _ = He($, b || "#111827"), De = n(_, l === "dark" ? 0.72 : 0.64), L = n(v, l === "dark" ? 0.2 : 0.12), Z = n(v, l === "dark" ? 0.42 : 0.28), q = n(
+    P,
     l === "dark" ? 0.22 : 0.14
-  ), ee = n(
-    y,
+  ), J = n(
+    P,
     l === "dark" ? 0.56 : 0.36
-  ), re = h, oe = Z || n(b, l === "dark" ? 0.78 : 0.72), Ie = n(h, l === "dark" ? 0.22 : 0.12), $e = tr(D, l === "dark" ? 0.08 : 0.05), We = Z || n(b, l === "dark" ? 0.78 : 0.62), j = a(e, "main", "background.default"), P = a(e, "main", "background.paper"), ae = a(e, "main", "text.primary"), ne = a(e, "main", "text.secondary"), S = a(e, "main", "success.main"), te = a(e, "main", "success.contrastText"), T = a(e, "main", "info.main"), ce = a(e, "main", "info.contrastText"), C = a(e, "main", "warning.main"), ie = a(e, "main", "warning.contrastText"), B = a(e, "main", "error.main"), le = a(e, "main", "error.contrastText"), G = e.theme.main.grid, N = x(e.theme.main.table), V = x({
-    palette: e.theme.main.palette ?? {},
-    table: e.theme.main.table ?? {}
-  }), de = "#586980", M = "#ffffff", se = "14px", me = "13px", be = ((xe = G == null ? void 0 : G.body) == null ? void 0 : xe.backgroundColor) ?? br, ve = n(M, 0.22), he = n(vr, 0.14), f = t(
+  ), Q = v, X = U || n(b, l === "dark" ? 0.78 : 0.72), Oe = n(v, l === "dark" ? 0.22 : 0.12), Ve = mr($, l === "dark" ? 0.08 : 0.05), je = U || n(b, l === "dark" ? 0.78 : 0.62), A = r(e, "main", "background.default"), S = r(e, "main", "background.paper"), ee = r(e, "main", "text.primary"), re = r(e, "main", "text.secondary"), oe = r(e, "main", "button.primary.main") || r(e, "main", "primary.main"), ae = r(e, "main", "button.primary.contrastText") || r(e, "main", "primary.contrastText"), ne = r(e, "main", "button.secondary.main") || r(e, "main", "secondary.main"), te = r(e, "main", "button.secondary.contrastText") || r(e, "main", "secondary.contrastText"), ce = r(e, "main", "button.success.main") || r(e, "main", "success.main"), ie = r(e, "main", "button.success.contrastText") || r(e, "main", "success.contrastText"), le = r(e, "main", "button.info.main") || r(e, "main", "info.main"), de = r(e, "main", "button.info.contrastText") || r(e, "main", "info.contrastText"), me = r(e, "main", "button.warning.main") || r(e, "main", "warning.main"), se = r(e, "main", "button.warning.contrastText") || r(e, "main", "warning.contrastText"), be = r(e, "main", "button.error.main") || r(e, "main", "error.main"), ue = r(e, "main", "button.error.contrastText") || r(e, "main", "error.contrastText"), D = e.theme.main.grid, g = t(
+    () => p(e.theme.main.table),
+    [e.theme.main.table]
+  ), ve = t(
+    () => p(e.theme.main.grid),
+    [e.theme.main.grid]
+  ), O = t(
+    () => p({
+      palette: e.theme.main.palette ?? {},
+      table: e.theme.main.table ?? {}
+    }),
+    [e.theme.main.palette, e.theme.main.table]
+  ), he = "#586980", V = "#ffffff", fe = "14px", pe = "13px", xe = ((Se = D == null ? void 0 : D.body) == null ? void 0 : Se.backgroundColor) ?? pr, ke = n(V, 0.22), ye = n(xr, 0.14), h = t(
     () => ({
       ...e,
       theme: {
@@ -56,253 +59,257 @@ function _r({
       }
     }),
     [e]
-  ), ue = x(
-    f.theme.main
-  ), H = t(
+  ), we = t(
+    () => p(h.theme.main),
+    [h.theme.main]
+  ), T = t(
     () => ({
       owpSettings: {
-        current: f,
-        defaults: f,
-        initial: f
+        current: h,
+        defaults: h,
+        initial: h
       }
     }),
-    [f]
-  ), R = cr().format("YYYY-MM-DD"), Ae = t(
-    () => `OWP-${R.replace(/-/g, "")}-001`,
-    [R]
-  ), u = t(
+    [h]
+  ), j = sr().format("YYYY-MM-DD"), Ge = t(
+    () => `OWP-${j.replace(/-/g, "")}-001`,
+    [j]
+  ), f = t(
     () => ({
-      backgroundColor: P,
-      border: `1px solid ${$}`
+      backgroundColor: S,
+      border: `1px solid ${H}`
     }),
-    [P]
-  ), De = s === "navbar" ? "navbar" : s === "toolbar" ? "toolbar" : "main", Oe = W || s !== k, je = t(
+    [S]
+  ), Me = m === "navbar" ? "navbar" : m === "toolbar" ? "toolbar" : "main", Re = z || m !== k, Ee = t(
     () => ({
-      backgroundColor: U,
-      borderColor: _,
-      boxShadow: `inset 0 1px 0 ${L}`
+      backgroundColor: F,
+      borderColor: K,
+      boxShadow: `inset 0 1px 0 ${Y}`
     }),
-    [U, _, L]
-  ), Ge = t(
+    [F, K, Y]
+  ), Fe = t(
     () => ({
-      backgroundColor: J,
-      borderColor: Q,
-      color: re,
+      backgroundColor: L,
+      borderColor: Z,
+      color: Q,
       transition: "background-color 160ms ease, border-color 160ms ease, color 160ms ease",
       "&:hover, &:focus-visible, &:active": {
-        backgroundColor: X,
-        borderColor: ee,
-        color: y
+        backgroundColor: q,
+        borderColor: J,
+        color: P
       }
     }),
     [
-      re,
-      y,
-      J,
       Q,
-      X,
-      ee
+      P,
+      L,
+      Z,
+      q,
+      J
     ]
-  ), fe = t(
+  ), B = t(
     () => [
-      { label: "info", color: T, contrastColor: ce },
-      { label: "warning", color: C, contrastColor: ie },
-      { label: "error", color: B, contrastColor: le },
-      { label: "success", color: S, contrastColor: te }
-    ].map((o) => ({
-      ...o,
-      previewContrastColor: o.label === "error" || o.label === "success" ? Se(o.color, o.contrastColor) : o.contrastColor
+      { label: "primary", color: oe, contrastColor: ae },
+      {
+        label: "secondary",
+        color: ne,
+        contrastColor: te
+      },
+      { label: "info", color: le, contrastColor: de },
+      { label: "warning", color: me, contrastColor: se },
+      { label: "error", color: be, contrastColor: ue },
+      { label: "success", color: ce, contrastColor: ie }
+    ].map((a) => ({
+      ...a,
+      previewContrastColor: a.contrastColor || He(a.color, "#ffffff")
     })),
     [
-      B,
+      oe,
+      ae,
+      ne,
+      te,
+      be,
+      ue,
       le,
-      T,
+      de,
       ce,
-      S,
-      te,
-      C,
-      ie
+      ie,
+      me,
+      se
     ]
-  ), pe = e.snackbar ?? qe, v = t(
-    () => Ce({}, I, e.snackbarProviderProps),
+  ), Pe = e.snackbar ?? rr, u = t(
+    () => Ie({}, N, e.snackbarProviderProps),
     [e.snackbarProviderProps]
-  ), Ve = ((ke = v.anchorOrigin) == null ? void 0 : ke.horizontal) ?? I.anchorOrigin.horizontal, Me = ((we = v.anchorOrigin) == null ? void 0 : we.vertical) ?? I.anchorOrigin.vertical, Re = v.maxSnack ?? I.maxSnack, Ee = Te((ge = v.style) == null ? void 0 : ge.fontSize), Fe = Te(
-    (ye = v.style) == null ? void 0 : ye.lineHeight
-  ), Ye = t(
-    () => Je.map((o) => {
-      const d = pe[o];
+  ), Ke = ((ge = u.anchorOrigin) == null ? void 0 : ge.horizontal) ?? N.anchorOrigin.horizontal, Ye = ((Te = u.anchorOrigin) == null ? void 0 : Te.vertical) ?? N.anchorOrigin.vertical, Ue = u.maxSnack ?? N.maxSnack, _e = ze((Be = u.style) == null ? void 0 : Be.fontSize), Le = ze(
+    (Ce = u.style) == null ? void 0 : Ce.lineHeight
+  ), Ze = t(
+    () => or.map((a) => {
+      const d = Pe[a];
       return {
         actionHoverColor: n(
           d.color,
-          o === "default" ? 0.18 : 0.16
+          a === "default" ? 0.18 : 0.16
         ),
         backgroundColor: d.backgroundColor,
         color: d.color,
-        icon: Cr[o],
-        key: o,
-        message: hr[o]
+        icon: Ir[a],
+        key: a,
+        message: kr[a]
       };
     }),
-    [pe]
-  ), Ke = t(
-    () => ur(s),
-    [s]
-  ), Ue = t(
+    [Pe]
+  ), qe = t(
+    () => yr(m),
+    [m]
+  ), Je = t(
     () => ({
-      common: ue,
-      buttons: x({
-        error: B,
-        info: T,
-        success: S,
-        warning: C
-      }),
-      grid: "grid",
-      searchHeader: V,
-      snackbars: x({
+      common: we,
+      buttons: p(B),
+      grid: ve,
+      searchHeader: O,
+      snackbars: p({
         provider: e.snackbarProviderProps,
         snackbar: e.snackbar
       }),
-      tables: N
+      tables: g
     }),
     [
       B,
-      T,
-      S,
-      ue,
-      C,
-      V,
+      we,
+      ve,
+      O,
       e.snackbar,
       e.snackbarProviderProps,
-      N
+      g
     ]
-  ), _e = t(
-    () => /* @__PURE__ */ r(
-      kr,
+  ), Qe = t(
+    () => /* @__PURE__ */ o(
+      gr,
       {
-        gridBodyBorder: he,
-        layoutPreviewGridCellBackground: be,
-        layoutPreviewGridCellFontSize: me,
-        layoutPreviewGridHeaderBackground: de,
-        layoutPreviewGridHeaderBorder: ve,
-        layoutPreviewGridHeaderColor: M,
-        layoutPreviewGridHeaderFontSize: se
+        gridBodyBorder: ye,
+        layoutPreviewGridCellBackground: xe,
+        layoutPreviewGridCellFontSize: pe,
+        layoutPreviewGridHeaderBackground: he,
+        layoutPreviewGridHeaderBorder: ke,
+        layoutPreviewGridHeaderColor: V,
+        layoutPreviewGridHeaderFontSize: fe
       }
     ),
     [
+      ye,
+      xe,
+      pe,
       he,
-      be,
-      me,
-      de,
-      ve,
-      M,
-      se
+      ke,
+      V,
+      fe
     ]
   );
-  sr(() => () => {
-    A.current.forEach((o) => {
-      ir(o);
-    }), A.current = [];
+  hr(() => () => {
+    I.current.forEach((a) => {
+      br(a);
+    }), I.current = [];
   }, []);
-  const Le = /* @__PURE__ */ z((o) => {
-    switch (o) {
+  const Xe = /* @__PURE__ */ C((a) => {
+    switch (a) {
       case "common":
-        return /* @__PURE__ */ r(
-          Tr,
+        return /* @__PURE__ */ o(
+          zr,
           {
-            buttonPreviewItems: fe,
-            mainTextSecondary: ne,
-            mainThemePreviewStoreState: H,
-            previewSectionCardSx: u
+            buttonPreviewItems: B,
+            mainTextSecondary: re,
+            mainThemePreviewStoreState: T,
+            previewSectionCardSx: f
           }
         );
       case "buttons":
-        return /* @__PURE__ */ r(
-          Sr,
+        return /* @__PURE__ */ o(
+          Hr,
           {
-            buttonPreviewItems: fe,
-            mainTextSecondary: ne,
-            previewSectionCardSx: u
+            buttonPreviewItems: B,
+            mainTextSecondary: re,
+            previewSectionCardSx: f
           }
         );
       case "snackbars":
-        return /* @__PURE__ */ r(
-          Pr,
+        return /* @__PURE__ */ o(
+          Nr,
           {
-            previewSectionCardSx: u,
-            previewSnackbarKeysRef: A,
-            snackbarAnchorOrigin: v.anchorOrigin,
-            snackbarAutoHideDuration: v.autoHideDuration,
-            snackbarPreviewAnchorHorizontal: Ve,
-            snackbarPreviewAnchorVertical: Me,
-            snackbarPreviewFontSize: Ee,
-            snackbarPreviewItems: Ye,
-            snackbarPreviewLineHeight: Fe,
-            snackbarPreviewMaxSnack: Re
+            previewSectionCardSx: f,
+            previewSnackbarKeysRef: I,
+            snackbarAnchorOrigin: u.anchorOrigin,
+            snackbarAutoHideDuration: u.autoHideDuration,
+            snackbarPreviewAnchorHorizontal: Ke,
+            snackbarPreviewAnchorVertical: Ye,
+            snackbarPreviewFontSize: _e,
+            snackbarPreviewItems: Ze,
+            snackbarPreviewLineHeight: Le,
+            snackbarPreviewMaxSnack: Ue
           }
         );
       case "searchHeader":
-        return /* @__PURE__ */ r(
-          yr,
+        return /* @__PURE__ */ o(
+          Cr,
           {
-            activeSection: s === "navbar" || s === "toolbar" ? s : "main",
-            gridPreviewTable: _e,
-            mainBackground: j,
-            mainPaper: P,
-            mainText: ae,
-            mainThemePreviewStoreState: H,
-            previewSectionCardSx: u,
-            searchHeaderPreviewDate: R,
-            searchHeaderPreviewNumber: Ae,
-            searchHeaderPreviewVersionKey: V,
-            tablePreviewCanTableRadiusZero: F,
-            tableTheme: Y,
-            tableThemePreviewVersionKey: N
+            activeSection: m === "navbar" || m === "toolbar" ? m : "main",
+            gridPreviewTable: Qe,
+            mainBackground: A,
+            mainPaper: S,
+            mainText: ee,
+            mainThemePreviewStoreState: T,
+            previewSectionCardSx: f,
+            searchHeaderPreviewDate: j,
+            searchHeaderPreviewNumber: Ge,
+            searchHeaderPreviewVersionKey: O,
+            tablePreviewCanTableRadiusZero: M,
+            tableTheme: R,
+            tableThemePreviewVersionKey: g
           }
         );
       case "grid":
-        return /* @__PURE__ */ r(
-          gr,
+        return /* @__PURE__ */ o(
+          Br,
           {
-            editableThemePreviewGridId: xr,
-            mainThemePreviewStoreState: H,
-            previewSectionCardSx: u,
-            readonlyThemePreviewGridId: pr
+            editableThemePreviewGridId: Sr,
+            mainThemePreviewStoreState: T,
+            previewSectionCardSx: f,
+            readonlyThemePreviewGridId: Pr
           }
         );
       case "tables":
-        return /* @__PURE__ */ r(
-          wr,
+        return /* @__PURE__ */ o(
+          Tr,
           {
-            mainThemePreviewStoreState: H,
-            previewSectionCardSx: u,
-            tablePreviewCanTableRadiusZero: F,
-            tableTheme: Y,
-            tableThemePreviewVersionKey: N
+            mainThemePreviewStoreState: T,
+            previewSectionCardSx: f,
+            tablePreviewCanTableRadiusZero: M,
+            tableTheme: R,
+            tableThemePreviewVersionKey: g
           }
         );
       default:
         return null;
     }
-  }, "renderPreviewSection"), E = /* @__PURE__ */ z((o, d, p = 0) => De === o ? /* @__PURE__ */ r(
+  }, "renderPreviewSection"), G = /* @__PURE__ */ C((a, d, x = 0) => Me === a ? /* @__PURE__ */ o(
     "div",
     {
       "aria-hidden": !0,
       className: "pointer-events-none absolute z-[2]",
       style: {
         inset: d,
-        border: `4px solid ${Br}`,
-        borderRadius: p,
-        boxShadow: `0 0 0 1px ${Nr}`
+        border: `4px solid ${$r}`,
+        borderRadius: x,
+        boxShadow: `0 0 0 1px ${Wr}`
       }
     }
   ) : null, "renderHighlightOverlay");
-  return /* @__PURE__ */ r("div", { className: "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ o("div", { className: "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ c(
     "div",
     {
       className: "grid min-h-0 flex-1 grid-cols-[224px_minmax(0,1fr)] grid-rows-[76px_minmax(0,1fr)] overflow-hidden rounded-lg border border-solid",
       style: {
-        backgroundColor: j,
-        borderColor: $
+        backgroundColor: A,
+        borderColor: H
       },
       children: [
         /* @__PURE__ */ c(
@@ -310,55 +317,55 @@ function _r({
           {
             className: "col-span-2 relative flex items-center justify-between px-20",
             style: {
-              backgroundColor: K,
-              backgroundImage: `linear-gradient(180deg, ${K} 0%, ${Be} 100%)`,
-              borderBottom: `1px solid ${Ne}`,
-              boxShadow: `inset 0 1px 0 ${n(g, m === "dark" ? 0.06 : 0.82)}, 0 4px 16px ${n(He, m === "dark" ? 0.18 : 0.05)}`,
-              color: w
+              backgroundColor: E,
+              backgroundImage: `linear-gradient(180deg, ${E} 0%, ${$e} 100%)`,
+              borderBottom: `1px solid ${We}`,
+              boxShadow: `inset 0 1px 0 ${n(w, s === "dark" ? 0.06 : 0.82)}, 0 4px 16px ${n(Ae, s === "dark" ? 0.18 : 0.05)}`,
+              color: y
             },
             children: [
-              E("toolbar", 0, 0),
-              /* @__PURE__ */ r("div", { className: "flex items-center gap-12", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+              G("toolbar", 0, 0),
+              /* @__PURE__ */ o("div", { className: "flex items-center gap-12", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ c(
                   "div",
                   {
                     className: "flex items-center gap-2",
                     style: {
-                      color: n(w, m === "dark" ? 0.72 : 0.64)
+                      color: n(y, s === "dark" ? 0.72 : 0.64)
                     },
                     children: [
-                      /* @__PURE__ */ r(i, { variant: "caption", children: "OWP" }),
-                      /* @__PURE__ */ r(Pe, { sx: { fontSize: 18 } }),
-                      /* @__PURE__ */ r(i, { variant: "caption", children: "Theme Preview" })
+                      /* @__PURE__ */ o(i, { variant: "caption", children: "OWP" }),
+                      /* @__PURE__ */ o(Ne, { sx: { fontSize: 18 } }),
+                      /* @__PURE__ */ o(i, { variant: "caption", children: "Theme Preview" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ r(i, { variant: "subtitle1", fontWeight: 700, children: "Toolbar" })
+                /* @__PURE__ */ o(i, { variant: "subtitle1", fontWeight: 700, children: "Toolbar" })
               ] }) }),
-              /* @__PURE__ */ r("div", { className: "pointer-events-none absolute left-1/2 top-1/2 flex w-full max-w-[520px] -translate-x-1/2 -translate-y-1/2 justify-center px-12 text-center", children: /* @__PURE__ */ c(
+              /* @__PURE__ */ o("div", { className: "pointer-events-none absolute left-1/2 top-1/2 flex w-full max-w-[520px] -translate-x-1/2 -translate-y-1/2 justify-center px-12 text-center", children: /* @__PURE__ */ c(
                 i,
                 {
                   variant: "body2",
                   sx: {
-                    color: n(w, m === "dark" ? 0.92 : 0.84),
+                    color: n(y, s === "dark" ? 0.92 : 0.84),
                     fontSize: 13,
                     fontWeight: 700
                   },
                   children: [
                     "로그인 화면 배경색은 Toolbar",
                     " ",
-                    /* @__PURE__ */ r(Pe, { sx: { mx: 0.25, fontSize: 18, verticalAlign: "middle" } }),
+                    /* @__PURE__ */ o(Ne, { sx: { mx: 0.25, fontSize: 18, verticalAlign: "middle" } }),
                     " ",
                     "Background Default 색상을 따라갑니다."
                   ]
                 }
               ) }),
-              /* @__PURE__ */ r("div", { className: "flex items-center gap-8", children: [rr, or].map((o, d) => /* @__PURE__ */ r(
+              /* @__PURE__ */ o("div", { className: "flex items-center gap-8", children: [cr, ir].map((a, d) => /* @__PURE__ */ o(
                 "div",
                 {
                   className: "flex h-32 w-32 items-center justify-center rounded-[10px] border border-solid",
-                  style: je,
-                  children: /* @__PURE__ */ r(o, { sx: { color: w, fontSize: 18 } })
+                  style: Ee,
+                  children: /* @__PURE__ */ o(a, { sx: { color: y, fontSize: 18 } })
                 },
                 `${d}`
               )) })
@@ -370,67 +377,67 @@ function _r({
           {
             className: "relative flex min-h-0 flex-col",
             style: {
-              backgroundColor: D,
-              borderRight: `1px solid ${O}`,
+              backgroundColor: $,
+              borderRight: `1px solid ${W}`,
               color: b
             },
             children: [
-              E("navbar", 0, 0),
+              G("navbar", 0, 0),
               /* @__PURE__ */ c(
                 "div",
                 {
                   className: "flex items-center justify-between gap-8 px-16 py-14",
                   style: {
-                    borderBottom: `1px solid ${O}`
+                    borderBottom: `1px solid ${W}`
                   },
                   children: [
-                    /* @__PURE__ */ r("div", { className: "flex items-center gap-10", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ r(
+                    /* @__PURE__ */ o("div", { className: "flex items-center gap-10", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+                      /* @__PURE__ */ o(
                         i,
                         {
                           variant: "subtitle2",
                           fontWeight: 700,
                           sx: {
-                            color: q
+                            color: _
                           },
                           children: "Navbar"
                         }
                       ),
-                      /* @__PURE__ */ r(i, { variant: "caption", sx: { color: ze }, children: "Navigation" })
+                      /* @__PURE__ */ o(i, { variant: "caption", sx: { color: De }, children: "Navigation" })
                     ] }) }),
-                    /* @__PURE__ */ r(
-                      ar,
+                    /* @__PURE__ */ o(
+                      lr,
                       {
                         "aria-label": "navbar menu",
                         className: "flex h-28 w-28 items-center justify-center rounded-[10px] border border-solid",
-                        sx: Ge,
-                        children: /* @__PURE__ */ r(er, { sx: { color: "inherit", fontSize: 16 } })
+                        sx: Fe,
+                        children: /* @__PURE__ */ o(tr, { sx: { color: "inherit", fontSize: 16 } })
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-4 px-10 py-10", children: fr.map((o, d) => {
-                const p = d === 1;
-                return /* @__PURE__ */ r(
+              /* @__PURE__ */ o("div", { className: "flex flex-1 flex-col gap-4 px-10 py-10", children: wr.map((a, d) => {
+                const x = d === 1;
+                return /* @__PURE__ */ o(
                   "div",
                   {
                     className: "rounded-lg px-12 py-10",
                     style: {
-                      backgroundColor: p ? Ie : "transparent",
-                      color: p ? h : oe
+                      backgroundColor: x ? Oe : "transparent",
+                      color: x ? v : X
                     },
-                    children: /* @__PURE__ */ r(i, { variant: "body2", fontWeight: p ? 700 : 500, children: o })
+                    children: /* @__PURE__ */ o(i, { variant: "body2", fontWeight: x ? 700 : 500, children: a })
                   },
-                  o
+                  a
                 );
               }) }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ o(
                 "div",
                 {
                   className: "px-12 py-12",
                   style: {
-                    borderTop: `1px solid ${O}`
+                    borderTop: `1px solid ${W}`
                   },
                   children: /* @__PURE__ */ c(
                     "div",
@@ -438,19 +445,19 @@ function _r({
                       className: "flex min-h-[56px] items-center gap-12 rounded-lg px-8 py-8",
                       style: { color: b },
                       children: [
-                        /* @__PURE__ */ r(
+                        /* @__PURE__ */ o(
                           "div",
                           {
                             className: "flex h-36 w-36 shrink-0 items-center justify-center rounded-full",
                             style: {
-                              backgroundColor: $e,
-                              color: We
+                              backgroundColor: Ve,
+                              color: je
                             },
-                            children: /* @__PURE__ */ r(i, { sx: { fontSize: 18, fontWeight: 700, lineHeight: 1 }, children: "관" })
+                            children: /* @__PURE__ */ o(i, { sx: { fontSize: 18, fontWeight: 700, lineHeight: 1 }, children: "관" })
                           }
                         ),
                         /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-                          /* @__PURE__ */ r(
+                          /* @__PURE__ */ o(
                             i,
                             {
                               className: "truncate",
@@ -464,12 +471,12 @@ function _r({
                               children: "Impix"
                             }
                           ),
-                          /* @__PURE__ */ r(
+                          /* @__PURE__ */ o(
                             i,
                             {
                               className: "truncate",
                               sx: {
-                                color: oe,
+                                color: X,
                                 fontSize: 14,
                                 fontWeight: 500,
                                 letterSpacing: "-0.02em",
@@ -479,7 +486,14 @@ function _r({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center justify-center", style: { color: b }, children: /* @__PURE__ */ r(Xe, { sx: { fontSize: 16 } }) })
+                        /* @__PURE__ */ o(
+                          "div",
+                          {
+                            className: "flex shrink-0 items-center justify-center",
+                            style: { color: b },
+                            children: /* @__PURE__ */ o(nr, { sx: { fontSize: 16 } })
+                          }
+                        )
                       ]
                     }
                   )
@@ -493,26 +507,26 @@ function _r({
           {
             className: "relative flex min-h-0 flex-col gap-14 overflow-y-auto overflow-x-hidden p-14",
             style: {
-              backgroundColor: j,
-              color: ae
+              backgroundColor: A,
+              color: ee
             },
             children: [
-              E("main", 8),
-              Oe ? /* @__PURE__ */ r(
+              G("main", 8),
+              Re ? /* @__PURE__ */ o(
                 "div",
                 {
                   className: "absolute inset-14 z-10 flex items-center justify-center rounded-lg",
                   style: {
-                    backgroundColor: n(P, 0.88),
-                    border: `1px solid ${$}`
+                    backgroundColor: n(S, 0.88),
+                    border: `1px solid ${H}`
                   },
                   children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center gap-10", children: [
-                    /* @__PURE__ */ r(nr, { color: "secondary", size: 34, thickness: 4.5 }),
-                    /* @__PURE__ */ r(i, { variant: "body2", color: "text.secondary", fontWeight: 700, children: "로딩 중..." })
+                    /* @__PURE__ */ o(dr, { color: "secondary", size: 34, thickness: 4.5 }),
+                    /* @__PURE__ */ o(i, { variant: "body2", color: "text.secondary", fontWeight: 700, children: "로딩 중..." })
                   ] })
                 }
               ) : null,
-              Ke.map((o) => /* @__PURE__ */ r(mr, { children: Le(o) }, `${o}-${Ue[o]}`))
+              qe.map((a) => /* @__PURE__ */ o(fr, { children: Xe(a) }, `${a}-${Je[a]}`))
             ]
           }
         )
@@ -520,8 +534,8 @@ function _r({
     }
   ) });
 }
-z(_r, "ThemePreviewCanvas");
+C(Qr, "ThemePreviewCanvas");
 export {
-  _r as ThemePreviewCanvas
+  Qr as ThemePreviewCanvas
 };
 //# sourceMappingURL=ThemePreviewCanvas.js.map