@owp/core 2.5.9 → 2.5.11

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

@@ -1,309 +1,311 @@
-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 Qe = Object.defineProperty;
+var W = (w, V) => Qe(w, "name", { value: V, 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 dr from "dayjs";
+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 O, 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 { ThemePreviewTablesSection as yr, ThemePreviewGridSection as Pr, ThemePreviewSearchHeaderSection as Sr, ThemePreviewSnackbarsSection as Cr, ThemePreviewButtonsSection as Tr, ThemePreviewCommonSection as Br, ThemePreviewGridPreviewTable 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: V = !1,
+  settings: e
 }) {
-  var yr, wr, gr, Pr, Sr;
-  const A = ve([]), U = !1, _ = t(
-    () => Nr(
+  var ke, we, ge, ye, Pe;
+  const j = mr([]), s = br(w), Y = !1, U = t(
+    () => Be(
       {},
-      ae,
-      r.theme.main.table
+      rr,
+      e.theme.main.table
     ),
-    [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"
-  ), Ir = n(X, d === "dark" ? 0.72 : 0.64), rr = n(
-    f,
+    [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, D = a(e, "navbar", "background.default"), G = a(e, "navbar", "divider") || O, 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(
+    D,
+    b || "#111827"
+  ), ze = n(Q, d === "dark" ? 0.72 : 0.64), X = n(
+    u,
     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(
+  ), 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(D, 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({
+    palette: e.theme.main.palette ?? {},
+    table: e.theme.main.table ?? {}
+  }), Oe = `${gr}-${H}`, Ve = `${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(
     () => ({
-      ...r,
+      ...e,
       theme: {
-        ...r.theme,
-        navbar: r.theme.main,
-        toolbar: r.theme.main
+        ...e.theme,
+        navbar: e.theme.main,
+        toolbar: e.theme.main
       }
     }),
-    [r]
-  ), E = u(
-    p.theme.main
-  ), F = t(
+    [e]
+  ), z = p(
+    x.theme.main
+  ), I = t(
     () => ({
       owpSettings: {
-        current: p,
-        defaults: p,
-        initial: p
+        current: x,
+        defaults: x,
+        initial: x
       }
     }),
-    [p]
-  ), K = me().format("YYYY-MM-DD"), Dr = t(
-    () => `OWP-${K.replace(/-/g, "")}-001`,
-    [K]
-  ), x = t(
+    [x]
+  ), F = dr().format("YYYY-MM-DD"), je = t(
+    () => `OWP-${F.replace(/-/g, "")}-001`,
+    [F]
+  ), f = t(
     () => ({
-      backgroundColor: P,
+      backgroundColor: S,
       border: `1px solid ${O}`
     }),
-    [P]
-  ), Mr = h === "navbar" ? "navbar" : h === "toolbar" ? "toolbar" : "main", Rr = t(
+    [S]
+  ), De = s === "navbar" ? "navbar" : s === "toolbar" ? "toolbar" : "main", Ge = V || s !== w, Me = t(
     () => ({
-      backgroundColor: Z,
-      borderColor: q,
-      boxShadow: `inset 0 1px 0 ${J}`
+      backgroundColor: L,
+      borderColor: Z,
+      boxShadow: `inset 0 1px 0 ${q}`
     }),
-    [Z, q, J]
-  ), Er = t(
+    [L, Z, q]
+  ), Re = t(
     () => ({
-      backgroundColor: rr,
-      borderColor: er,
-      color: nr,
+      backgroundColor: X,
+      borderColor: ee,
+      color: ae,
       transition: "background-color 160ms ease, border-color 160ms ease, color 160ms ease",
       "&:hover, &:focus-visible, &:active": {
-        backgroundColor: or,
-        borderColor: ar,
-        color: g
+        backgroundColor: re,
+        borderColor: oe,
+        color: P
       }
     }),
     [
-      nr,
-      g,
-      rr,
-      er,
-      or,
-      ar
+      ae,
+      P,
+      X,
+      ee,
+      re,
+      oe
     ]
-  ), Fr = t(
+  ), pe = t(
     () => [
-      { 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" ? Tr(a.color, a.contrastColor) : a.contrastColor
+      { label: "info", color: T, contrastColor: le },
+      { label: "warning", color: B, contrastColor: de },
+      { label: "error", color: N, contrastColor: se },
+      { label: "success", color: C, contrastColor: ie }
+    ].map((o) => ({
+      ...o,
+      previewContrastColor: o.label === "error" || o.label === "success" ? Ce(o.color, o.contrastColor) : o.contrastColor
     })),
     [
-      H,
-      br,
-      B,
-      sr,
-      S,
-      ir,
-      C,
-      lr,
-      T,
-      dr,
       N,
-      mr
+      se,
+      T,
+      le,
+      C,
+      ie,
+      B,
+      de
     ]
-  ), 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];
+  ), xe = e.snackbar ?? Xe, h = t(
+    () => Be({}, A, 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];
       return {
         actionHoverColor: n(
           c.color,
-          a === "default" ? 0.18 : 0.16
+          o === "default" ? 0.18 : 0.16
         ),
         backgroundColor: c.backgroundColor,
         color: c.color,
-        icon: He[a],
-        key: a,
-        message: xe[a]
+        icon: Hr[o],
+        key: o,
+        message: pr[o]
       };
     }),
-    [kr]
-  ), qr = t(
-    () => ke(h),
-    [h]
-  ), Jr = t(
+    [xe]
+  ), Le = t(
+    () => xr(s),
+    [s]
+  ), Ze = t(
     () => ({
-      buttons: u({
-        error: H,
-        info: B,
-        primary: S,
-        secondary: C,
-        success: T,
-        warning: N
+      common: z,
+      buttons: p({
+        error: N,
+        info: T,
+        success: C,
+        warning: B
       }),
-      grid: `${E}-${$}`,
-      searchHeader: M,
-      snackbars: u({
-        provider: r.snackbarProviderProps,
-        snackbar: r.snackbar
+      grid: `${z}-${H}`,
+      searchHeader: R,
+      snackbars: p({
+        provider: e.snackbarProviderProps,
+        snackbar: e.snackbar
       }),
-      tables: z
+      tables: $
     }),
     [
-      $,
       H,
-      B,
-      S,
-      C,
-      T,
-      E,
       N,
-      M,
-      r.snackbar,
-      r.snackbarProviderProps,
-      z
+      T,
+      C,
+      z,
+      B,
+      R,
+      e.snackbar,
+      e.snackbarProviderProps,
+      $
     ]
-  ), Qr = t(
-    () => /* @__PURE__ */ e(
-      Ne,
+  ), qe = t(
+    () => /* @__PURE__ */ r(
+      Nr,
       {
-        gridBodyBorder: xr,
-        layoutPreviewGridCellBackground: fr,
-        layoutPreviewGridCellFontSize: ur,
-        layoutPreviewGridHeaderBackground: vr,
-        layoutPreviewGridHeaderBorder: pr,
-        layoutPreviewGridHeaderColor: R,
-        layoutPreviewGridHeaderFontSize: hr
+        gridBodyBorder: fe,
+        layoutPreviewGridCellBackground: he,
+        layoutPreviewGridCellFontSize: ve,
+        layoutPreviewGridHeaderBackground: me,
+        layoutPreviewGridHeaderBorder: ue,
+        layoutPreviewGridHeaderColor: E,
+        layoutPreviewGridHeaderFontSize: be
       }
     ),
     [
-      xr,
-      fr,
-      ur,
-      vr,
-      pr,
-      R,
-      hr
+      fe,
+      he,
+      ve,
+      me,
+      ue,
+      E,
+      be
     ]
   );
-  he(() => () => {
-    A.current.forEach((a) => {
-      be(a);
-    }), A.current = [];
+  vr(() => () => {
+    j.current.forEach((o) => {
+      sr(o);
+    }), j.current = [];
   }, []);
-  const Xr = /* @__PURE__ */ I((a) => {
+  const Je = /* @__PURE__ */ W((o) => {
     var c;
-    switch (a) {
+    switch (o) {
+      case "common":
+        return /* @__PURE__ */ r(
+          Br,
+          {
+            buttonPreviewItems: pe,
+            mainTextSecondary: ce,
+            mainThemePreviewStoreState: I,
+            previewSectionCardSx: f
+          }
+        );
       case "buttons":
-        return /* @__PURE__ */ e(
-          Be,
+        return /* @__PURE__ */ r(
+          Tr,
           {
-            buttonPreviewItems: Fr,
-            mainTextSecondary: Ar,
-            previewSectionCardSx: x
+            buttonPreviewItems: pe,
+            mainTextSecondary: ce,
+            previewSectionCardSx: f
           }
         );
       case "snackbars":
-        return /* @__PURE__ */ e(
-          Te,
+        return /* @__PURE__ */ r(
+          Cr,
           {
-            previewSectionCardSx: x,
-            previewSnackbarKeysRef: A,
-            snackbarAnchorOrigin: v.anchorOrigin,
-            snackbarAutoHideDuration: v.autoHideDuration,
-            snackbarPreviewAnchorHorizontal: Kr,
-            snackbarPreviewAnchorVertical: Yr,
-            snackbarPreviewFontSize: _r,
-            snackbarPreviewItems: Zr,
-            snackbarPreviewLineHeight: Lr,
-            snackbarPreviewMaxSnack: Ur
+            previewSectionCardSx: f,
+            previewSnackbarKeysRef: j,
+            snackbarAnchorOrigin: h.anchorOrigin,
+            snackbarAutoHideDuration: h.autoHideDuration,
+            snackbarPreviewAnchorHorizontal: Ee,
+            snackbarPreviewAnchorVertical: Fe,
+            snackbarPreviewFontSize: Ye,
+            snackbarPreviewItems: _e,
+            snackbarPreviewLineHeight: Ue,
+            snackbarPreviewMaxSnack: Ke
           }
         );
       case "searchHeader":
-        return /* @__PURE__ */ e(
-          Ce,
+        return /* @__PURE__ */ r(
+          Sr,
           {
-            gridPreviewTable: Qr,
-            mainBackground: D,
-            mainPaper: P,
-            mainText: cr,
-            mainThemePreviewStoreState: F,
-            previewSectionCardSx: x,
-            searchHeaderPreviewDate: K,
-            searchHeaderPreviewNumber: Dr,
-            searchHeaderPreviewVersionKey: M,
-            tablePreviewCanTableRadiusZero: U,
-            tableTheme: _,
-            tableThemePreviewVersionKey: z
+            activeSection: s === "navbar" || s === "toolbar" ? s : "main",
+            gridPreviewTable: qe,
+            mainBackground: M,
+            mainPaper: S,
+            mainText: te,
+            mainThemePreviewStoreState: I,
+            previewSectionCardSx: f,
+            searchHeaderPreviewDate: F,
+            searchHeaderPreviewNumber: je,
+            searchHeaderPreviewVersionKey: R,
+            tablePreviewCanTableRadiusZero: Y,
+            tableTheme: U,
+            tableThemePreviewVersionKey: $
           }
         );
       case "grid":
-        return /* @__PURE__ */ e(
-          Se,
+        return /* @__PURE__ */ r(
+          Pr,
           {
-            editableThemePreviewGridId: Vr,
-            mainGridChangedBackgroundColor: (c = b == null ? void 0 : b.changed) == null ? void 0 : c.backgroundColor,
-            mainThemePreviewStoreKey: E,
-            mainThemePreviewStoreState: F,
-            previewSectionCardSx: x,
-            readonlyThemePreviewGridId: Gr
+            editableThemePreviewGridId: Oe,
+            mainGridChangedBackgroundColor: (c = v == null ? void 0 : v.changed) == null ? void 0 : c.backgroundColor,
+            mainThemePreviewStoreKey: z,
+            mainThemePreviewStoreState: I,
+            previewSectionCardSx: f,
+            readonlyThemePreviewGridId: Ve
           }
         );
       case "tables":
-        return /* @__PURE__ */ e(
-          Pe,
+        return /* @__PURE__ */ r(
+          yr,
           {
-            mainThemePreviewStoreState: F,
-            previewSectionCardSx: x,
-            tablePreviewCanTableRadiusZero: U,
-            tableTheme: _,
-            tableThemePreviewVersionKey: z
+            mainThemePreviewStoreState: I,
+            previewSectionCardSx: f,
+            tablePreviewCanTableRadiusZero: Y,
+            tableTheme: U,
+            tableThemePreviewVersionKey: $
           }
         );
       default:
         return null;
     }
-  }, "renderPreviewSection"), Y = /* @__PURE__ */ I((a, c, k = 0) => Mr === a ? /* @__PURE__ */ e(
+  }, "renderPreviewSection"), K = /* @__PURE__ */ W((o, c, k = 0) => De === o ? /* @__PURE__ */ r(
     "div",
     {
       "aria-hidden": !0,
       className: "pointer-events-none absolute z-[2]",
       style: {
         inset: c,
-        border: `4px solid ${$e}`,
+        border: `4px solid ${$r}`,
         borderRadius: k,
-        boxShadow: `0 0 0 1px ${ze}`
+        boxShadow: `0 0 0 1px ${zr}`
       }
     }
   ) : null, "renderHighlightOverlay");
-  return /* @__PURE__ */ e("div", { className: "flex h-full min-h-0 flex-col", 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__ */ 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: D,
+        backgroundColor: M,
         borderColor: O
       },
       children: [
@@ -312,55 +314,55 @@ function qe({
           {
             className: "col-span-2 relative flex items-center justify-between px-20",
             style: {
-              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
+              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
             },
             children: [
-              Y("toolbar", 0, 0),
-              /* @__PURE__ */ e("div", { className: "flex items-center gap-12", children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", 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(
                   "div",
                   {
                     className: "flex items-center gap-2",
                     style: {
-                      color: n(y, s === "dark" ? 0.72 : 0.64)
+                      color: n(g, m === "dark" ? 0.72 : 0.64)
                     },
                     children: [
-                      /* @__PURE__ */ e(l, { variant: "caption", children: "OWP" }),
-                      /* @__PURE__ */ e(Cr, { sx: { fontSize: 18 } }),
-                      /* @__PURE__ */ e(l, { variant: "caption", children: "Theme Preview" })
+                      /* @__PURE__ */ r(l, { variant: "caption", children: "OWP" }),
+                      /* @__PURE__ */ r(Se, { sx: { fontSize: 18 } }),
+                      /* @__PURE__ */ r(l, { variant: "caption", children: "Theme Preview" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ e(l, { variant: "subtitle1", fontWeight: 700, children: "Toolbar" })
+                /* @__PURE__ */ r(l, { variant: "subtitle1", fontWeight: 700, children: "Toolbar" })
               ] }) }),
-              /* @__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(
+              /* @__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,
                 {
                   variant: "body2",
                   sx: {
-                    color: n(y, s === "dark" ? 0.92 : 0.84),
+                    color: n(g, m === "dark" ? 0.92 : 0.84),
                     fontSize: 13,
                     fontWeight: 700
                   },
                   children: [
                     "로그인 화면 배경색은 Toolbar",
                     " ",
-                    /* @__PURE__ */ e(Cr, { sx: { mx: 0.25, fontSize: 18, verticalAlign: "middle" } }),
+                    /* @__PURE__ */ r(Se, { sx: { mx: 0.25, fontSize: 18, verticalAlign: "middle" } }),
                     " ",
                     "Background Default 색상을 따라갑니다."
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "flex items-center gap-8", children: [ce, ie].map((a, c) => /* @__PURE__ */ e(
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-8", children: [nr, tr].map((o, c) => /* @__PURE__ */ r(
                 "div",
                 {
                   className: "flex h-32 w-32 items-center justify-center rounded-[10px] border border-solid",
-                  style: Rr,
-                  children: /* @__PURE__ */ e(a, { sx: { color: y, fontSize: 18 } })
+                  style: Me,
+                  children: /* @__PURE__ */ r(o, { sx: { color: g, fontSize: 18 } })
                 },
                 `${c}`
               )) })
@@ -372,12 +374,12 @@ function qe({
           {
             className: "relative flex min-h-0 flex-col",
             style: {
-              backgroundColor: V,
+              backgroundColor: D,
               borderRight: `1px solid ${G}`,
-              color: m
+              color: b
             },
             children: [
-              Y("navbar", 0, 0),
+              K("navbar", 0, 0),
               /* @__PURE__ */ i(
                 "div",
                 {
@@ -386,48 +388,48 @@ function qe({
                     borderBottom: `1px solid ${G}`
                   },
                   children: [
-                    /* @__PURE__ */ e("div", { className: "flex items-center gap-10", children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ e(
+                    /* @__PURE__ */ r("div", { className: "flex items-center gap-10", children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
+                      /* @__PURE__ */ r(
                         l,
                         {
                           variant: "subtitle2",
                           fontWeight: 700,
                           sx: {
-                            color: X
+                            color: Q
                           },
                           children: "Navbar"
                         }
                       ),
-                      /* @__PURE__ */ e(l, { variant: "caption", sx: { color: Ir }, children: "Navigation" })
+                      /* @__PURE__ */ r(l, { variant: "caption", sx: { color: ze }, children: "Navigation" })
                     ] }) }),
-                    /* @__PURE__ */ e(
-                      le,
+                    /* @__PURE__ */ r(
+                      cr,
                       {
                         "aria-label": "navbar menu",
                         className: "flex h-28 w-28 items-center justify-center rounded-[10px] border border-solid",
-                        sx: Er,
-                        children: /* @__PURE__ */ e(te, { sx: { color: "inherit", fontSize: 16 } })
+                        sx: Re,
+                        children: /* @__PURE__ */ r(ar, { sx: { color: "inherit", fontSize: 16 } })
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col gap-4 px-10 py-10", children: ye.map((a, c) => {
+              /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-4 px-10 py-10", children: kr.map((o, c) => {
                 const k = c === 1;
-                return /* @__PURE__ */ e(
+                return /* @__PURE__ */ r(
                   "div",
                   {
                     className: "rounded-lg px-12 py-10",
                     style: {
-                      backgroundColor: k ? Wr : "transparent",
-                      color: k ? f : tr
+                      backgroundColor: k ? Ie : "transparent",
+                      color: k ? u : ne
                     },
-                    children: /* @__PURE__ */ e(l, { variant: "body2", fontWeight: k ? 700 : 500, children: a })
+                    children: /* @__PURE__ */ r(l, { variant: "body2", fontWeight: k ? 700 : 500, children: o })
                   },
-                  a
+                  o
                 );
               }) }),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ r(
                 "div",
                 {
                   className: "px-12 py-12",
@@ -438,26 +440,26 @@ function qe({
                     "div",
                     {
                       className: "flex min-h-[56px] items-center gap-12 rounded-lg px-8 py-8",
-                      style: { color: m },
+                      style: { color: b },
                       children: [
-                        /* @__PURE__ */ e(
+                        /* @__PURE__ */ r(
                           "div",
                           {
                             className: "flex h-36 w-36 shrink-0 items-center justify-center rounded-full",
                             style: {
-                              backgroundColor: Or,
-                              color: jr
+                              backgroundColor: We,
+                              color: Ae
                             },
-                            children: /* @__PURE__ */ e(l, { sx: { fontSize: 18, fontWeight: 700, lineHeight: 1 }, children: "관" })
+                            children: /* @__PURE__ */ r(l, { sx: { fontSize: 18, fontWeight: 700, lineHeight: 1 }, children: "관" })
                           }
                         ),
                         /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-                          /* @__PURE__ */ e(
+                          /* @__PURE__ */ r(
                             l,
                             {
                               className: "truncate",
                               sx: {
-                                color: m,
+                                color: b,
                                 fontSize: 16,
                                 fontWeight: 600,
                                 letterSpacing: "-0.01em",
@@ -466,12 +468,12 @@ function qe({
                               children: "Impix"
                             }
                           ),
-                          /* @__PURE__ */ e(
+                          /* @__PURE__ */ r(
                             l,
                             {
                               className: "truncate",
                               sx: {
-                                color: tr,
+                                color: ne,
                                 fontSize: 14,
                                 fontWeight: 500,
                                 letterSpacing: "-0.02em",
@@ -481,7 +483,7 @@ function qe({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center", style: { color: m }, children: /* @__PURE__ */ e(ne, { sx: { fontSize: 16 } }) })
+                        /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center justify-center", style: { color: b }, children: /* @__PURE__ */ r(or, { sx: { fontSize: 16 } }) })
                       ]
                     }
                   )
@@ -493,28 +495,28 @@ function qe({
         /* @__PURE__ */ i(
           "div",
           {
-            className: "relative flex min-h-0 flex-col gap-14 overflow-auto p-14",
+            className: "relative flex min-h-0 flex-col gap-14 overflow-y-auto overflow-x-hidden p-14",
             style: {
-              backgroundColor: D,
-              color: cr
+              backgroundColor: M,
+              color: te
             },
             children: [
-              Y("main", 8),
-              j ? /* @__PURE__ */ e(
+              K("main", 8),
+              Ge ? /* @__PURE__ */ r(
                 "div",
                 {
                   className: "absolute inset-14 z-10 flex items-center justify-center rounded-lg",
                   style: {
-                    backgroundColor: n(P, 0.88),
+                    backgroundColor: n(S, 0.88),
                     border: `1px solid ${O}`
                   },
                   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: "로딩 중..." })
+                    /* @__PURE__ */ r(ir, { color: "secondary", size: 34, thickness: 4.5 }),
+                    /* @__PURE__ */ r(l, { variant: "body2", color: "text.secondary", fontWeight: 700, children: "로딩 중..." })
                   ] })
                 }
               ) : null,
-              qr.map((a) => /* @__PURE__ */ e(ue, { children: Xr(a) }, `${a}-${Jr[a]}`))
+              Le.map((o) => /* @__PURE__ */ r(hr, { children: Je(o) }, `${o}-${Ze[o]}`))
             ]
           }
         )
@@ -522,8 +524,8 @@ function qe({
     }
   ) });
 }
-I(qe, "ThemePreviewCanvas");
+W(qr, "ThemePreviewCanvas");
 export {
-  qe as ThemePreviewCanvas
+  qr as ThemePreviewCanvas
 };
 //# sourceMappingURL=ThemePreviewCanvas.js.map