@owp/core 2.5.53 → 2.5.55

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

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