@owp/core 2.5.8 → 2.5.9

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

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