@owp/core 2.5.52 → 2.5.54

package/dist/constants.js

@@ -1,39 +1,59 @@
-import { DEFAULT_CELL_ALIGNMENT as R, DEFAULT_HEADER_FILL as L, DEFAULT_HEADER_FONT as T, DEFAULT_THIN_BORDER as A, DEFAULT_VALUE_FONT as G, DEFAULT_WRAP_CELL_ALIGNMENT as O } from "./constants/excel.js";
-import { FALLBACK_LANGUAGE_LIST as D } from "./constants/language.js";
-import { CURRENT_LANGUAGE as I, LOCAL_STORAGE_KEYS as C, STORAGE_ACCESS_TOKEN_KEY as o } from "./constants/localStorageKeys.js";
-import { STORAGE_KEYS as F } from "./constants/storageKeys.js";
-import { DEFAULT_TABLE_RADIUS as U } from "./constants/table.js";
-import { TREEGRID_ADDED_ROW_BACKGROUND_COLOR as S, TREEGRID_CELL_CHANGED_CLASS as B, TREEGRID_CELL_HIGHLIGHT_COLOR as s, TREEGRID_CELL_HIGHLIGHT_FONT_WEIGHT as m, TREEGRID_CELL_HIGHLIGHT_TEXT_COLOR as x, TREEGRID_ERROR_CELL_BORDER_COLOR as f, TREEGRID_FONT_FAMILY as p, TREEGRID_FONT_FAMILY_STACK as K, TREEGRID_INPUT_CELL_COLOR as l, TREEGRID_WARNING_CELL_COLOR as Y, getTreeGridAssetBasePath as d, getTreeGridFontFaceStyles as i, getTreeGridTextResourceUrl as M, resolveTreeGridAssetUrl as W, resolveTreeGridColorNumber as a } from "./constants/treeGrid.js";
-import { TREEGRID_TABLE_BODY_BORDER_COLOR as P, TREEGRID_TABLE_HEADER_BORDER_COLOR as c } from "./components/OwpTable/internal/treeGridTableStyle.js";
+import { DEFAULT_CELL_ALIGNMENT as R, DEFAULT_HEADER_FILL as L, DEFAULT_HEADER_FONT as O, DEFAULT_THIN_BORDER as D, DEFAULT_VALUE_FONT as T, DEFAULT_WRAP_CELL_ALIGNMENT as C } from "./constants/excel.js";
+import { FALLBACK_LANGUAGE_LIST as G } from "./constants/language.js";
+import { CURRENT_LANGUAGE as U, LOCAL_STORAGE_KEYS as F, STORAGE_ACCESS_TOKEN_KEY as N } from "./constants/localStorageKeys.js";
+import { STORAGE_KEYS as B } from "./constants/storageKeys.js";
+import { DEFAULT_TABLE_RADIUS as H } from "./constants/table.js";
+import { TREEGRID_ADDED_ROW_BACKGROUND_COLOR as S, TREEGRID_CELL_CHANGED_CLASS as o, TREEGRID_CELL_HIGHLIGHT_COLOR as t, TREEGRID_CELL_HIGHLIGHT_FONT_WEIGHT as W, TREEGRID_CELL_HIGHLIGHT_TEXT_COLOR as s, TREEGRID_CHANGED_ROW_BACKGROUND_COLOR as Y, TREEGRID_DEFAULT_BODY_BACKGROUND_COLOR as m, TREEGRID_DEFAULT_BODY_FILL_BACKGROUND_COLOR as x, TREEGRID_DEFAULT_BODY_TEXT_COLOR as f, TREEGRID_DEFAULT_EDITING_CELL_BORDER_COLOR as p, TREEGRID_DEFAULT_FOCUSED_CELL_BACKGROUND_COLOR as l, TREEGRID_DEFAULT_FOCUSED_CELL_BORDER_COLOR as M, TREEGRID_DEFAULT_FOCUSED_CELL_RECT_BACKGROUND_COLOR as d, TREEGRID_DEFAULT_FOCUSED_ROW_BACKGROUND_COLOR as i, TREEGRID_DEFAULT_FOCUSED_ROW_BORDER_COLOR as P, TREEGRID_DEFAULT_HEADER_BACKGROUND_COLOR as V, TREEGRID_DEFAULT_HEADER_TEXT_COLOR as a, TREEGRID_DEFAULT_HOVER_BACKGROUND_COLOR as g, TREEGRID_DEFAULT_HOVER_BORDER_COLOR as X, TREEGRID_DEFAULT_ROW_BACKGROUND_COLOR as c, TREEGRID_DEFAULT_ROW_SOLID_BACKGROUND_COLOR as u, TREEGRID_DEFAULT_SELECTED_CELL_BACKGROUND_COLOR as v, TREEGRID_DEFAULT_SELECTED_ROW_BACKGROUND_COLOR as b, TREEGRID_ERROR_CELL_BORDER_COLOR as h, TREEGRID_FONT_FAMILY as n, TREEGRID_FONT_FAMILY_STACK as y, TREEGRID_INPUT_CELL_COLOR as j, TREEGRID_THEME_PREVIEW_CHANGED_CELL_BACKGROUND_COLOR as k, TREEGRID_THEME_PREVIEW_EDITABLE_CELL_BACKGROUND_COLOR as q, TREEGRID_WARNING_CELL_COLOR as w, getTreeGridAssetBasePath as z, getTreeGridFontFaceStyles as J, getTreeGridTextResourceUrl as Q, resolveTreeGridAssetUrl as Z, resolveTreeGridColorNumber as $ } from "./constants/treeGrid.js";
+import { TREEGRID_TABLE_BODY_BORDER_COLOR as _E, TREEGRID_TABLE_HEADER_BORDER_COLOR as RE } from "./components/OwpTable/internal/treeGridTableStyle.js";
 export {
-  I as CURRENT_LANGUAGE,
+  U as CURRENT_LANGUAGE,
   R as DEFAULT_CELL_ALIGNMENT,
   L as DEFAULT_HEADER_FILL,
-  T as DEFAULT_HEADER_FONT,
-  U as DEFAULT_TABLE_RADIUS,
-  A as DEFAULT_THIN_BORDER,
-  G as DEFAULT_VALUE_FONT,
-  O as DEFAULT_WRAP_CELL_ALIGNMENT,
-  D as FALLBACK_LANGUAGE_LIST,
-  C as LOCAL_STORAGE_KEYS,
-  o as STORAGE_ACCESS_TOKEN_KEY,
-  F as STORAGE_KEYS,
+  O as DEFAULT_HEADER_FONT,
+  H as DEFAULT_TABLE_RADIUS,
+  D as DEFAULT_THIN_BORDER,
+  T as DEFAULT_VALUE_FONT,
+  C as DEFAULT_WRAP_CELL_ALIGNMENT,
+  G as FALLBACK_LANGUAGE_LIST,
+  F as LOCAL_STORAGE_KEYS,
+  N as STORAGE_ACCESS_TOKEN_KEY,
+  B as STORAGE_KEYS,
   S as TREEGRID_ADDED_ROW_BACKGROUND_COLOR,
-  B as TREEGRID_CELL_CHANGED_CLASS,
-  s as TREEGRID_CELL_HIGHLIGHT_COLOR,
-  m as TREEGRID_CELL_HIGHLIGHT_FONT_WEIGHT,
-  x as TREEGRID_CELL_HIGHLIGHT_TEXT_COLOR,
-  f as TREEGRID_ERROR_CELL_BORDER_COLOR,
-  p as TREEGRID_FONT_FAMILY,
-  K as TREEGRID_FONT_FAMILY_STACK,
-  l as TREEGRID_INPUT_CELL_COLOR,
-  P as TREEGRID_TABLE_BODY_BORDER_COLOR,
-  c as TREEGRID_TABLE_HEADER_BORDER_COLOR,
-  Y as TREEGRID_WARNING_CELL_COLOR,
-  d as getTreeGridAssetBasePath,
-  i as getTreeGridFontFaceStyles,
-  M as getTreeGridTextResourceUrl,
-  W as resolveTreeGridAssetUrl,
-  a as resolveTreeGridColorNumber
+  o as TREEGRID_CELL_CHANGED_CLASS,
+  t as TREEGRID_CELL_HIGHLIGHT_COLOR,
+  W as TREEGRID_CELL_HIGHLIGHT_FONT_WEIGHT,
+  s as TREEGRID_CELL_HIGHLIGHT_TEXT_COLOR,
+  Y as TREEGRID_CHANGED_ROW_BACKGROUND_COLOR,
+  m as TREEGRID_DEFAULT_BODY_BACKGROUND_COLOR,
+  x as TREEGRID_DEFAULT_BODY_FILL_BACKGROUND_COLOR,
+  f as TREEGRID_DEFAULT_BODY_TEXT_COLOR,
+  p as TREEGRID_DEFAULT_EDITING_CELL_BORDER_COLOR,
+  l as TREEGRID_DEFAULT_FOCUSED_CELL_BACKGROUND_COLOR,
+  M as TREEGRID_DEFAULT_FOCUSED_CELL_BORDER_COLOR,
+  d as TREEGRID_DEFAULT_FOCUSED_CELL_RECT_BACKGROUND_COLOR,
+  i as TREEGRID_DEFAULT_FOCUSED_ROW_BACKGROUND_COLOR,
+  P as TREEGRID_DEFAULT_FOCUSED_ROW_BORDER_COLOR,
+  V as TREEGRID_DEFAULT_HEADER_BACKGROUND_COLOR,
+  a as TREEGRID_DEFAULT_HEADER_TEXT_COLOR,
+  g as TREEGRID_DEFAULT_HOVER_BACKGROUND_COLOR,
+  X as TREEGRID_DEFAULT_HOVER_BORDER_COLOR,
+  c as TREEGRID_DEFAULT_ROW_BACKGROUND_COLOR,
+  u as TREEGRID_DEFAULT_ROW_SOLID_BACKGROUND_COLOR,
+  v as TREEGRID_DEFAULT_SELECTED_CELL_BACKGROUND_COLOR,
+  b as TREEGRID_DEFAULT_SELECTED_ROW_BACKGROUND_COLOR,
+  h as TREEGRID_ERROR_CELL_BORDER_COLOR,
+  n as TREEGRID_FONT_FAMILY,
+  y as TREEGRID_FONT_FAMILY_STACK,
+  j as TREEGRID_INPUT_CELL_COLOR,
+  _E as TREEGRID_TABLE_BODY_BORDER_COLOR,
+  RE as TREEGRID_TABLE_HEADER_BORDER_COLOR,
+  k as TREEGRID_THEME_PREVIEW_CHANGED_CELL_BACKGROUND_COLOR,
+  q as TREEGRID_THEME_PREVIEW_EDITABLE_CELL_BACKGROUND_COLOR,
+  w as TREEGRID_WARNING_CELL_COLOR,
+  z as getTreeGridAssetBasePath,
+  J as getTreeGridFontFaceStyles,
+  Q as getTreeGridTextResourceUrl,
+  Z as resolveTreeGridAssetUrl,
+  $ as resolveTreeGridColorNumber
 };
 //# sourceMappingURL=constants.js.map

package/dist/contexts/OwpUiProvider.js

@@ -1,22 +1,23 @@
-var r = Object.defineProperty;
-var u = (n, l) => r(n, "name", { value: l, configurable: !0 });
-import { jsx as e, 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 { OwpAutoLogoutDialog as d } from "../components/OwpAutoLogoutDialog/OwpAutoLogoutDialog.js";
+var d = Object.defineProperty;
+var l = (n, c) => d(n, "name", { value: c, configurable: !0 });
+import { jsx as e, jsxs as h } 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 { OwpAutoLogoutDialog as S } from "../components/OwpAutoLogoutDialog/OwpAutoLogoutDialog.js";
 import { OwpSnackbarContent as m } from "../components/OwpSnackbarContent/OwpSnackbarContent.js";
-import { useAccessTokenGuard as h } from "../hooks/internal/useAccessTokenGuard.js";
-import { useGetCurrentLanguage as w } from "../hooks/internal/useCurrentLanguage.js";
-import { useGetPageLockLoading as O } from "../hooks/usePageLockLoading.js";
-import { useOwpTranslation as S } from "../hooks/useOwpTranslation.js";
-import { getI18nextLanguageCode as x } from "../utils/language.js";
-import I from "../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Close.js";
-import T from "@mui/material/IconButton";
-import { SnackbarProvider as A, closeSnackbar as y } from "notistack";
-import { useEffect as z } from "react";
-import { useOwpAppContext as D } from "./OwpAppContext.js";
-import { OwpPageLockLoading as E } from "../components/OwpPageLockLoading/OwpPageLockLoading.js";
-import { OwpDialogsProvider as G } from "../components/OwpDialogsProvider/OwpDialogsProvider.js";
-import { OwpLoading as M } from "../components/OwpLoading/OwpLoading.js";
-const j = {
+import { useAccessTokenGuard as w } from "../hooks/internal/useAccessTokenGuard.js";
+import { useGetCurrentLanguage as O } from "../hooks/internal/useCurrentLanguage.js";
+import { useGetCurrentSettings as x } from "../hooks/useOwpSettings.js";
+import { useGetPageLockLoading as I } from "../hooks/usePageLockLoading.js";
+import { useOwpTranslation as T } from "../hooks/useOwpTranslation.js";
+import { getI18nextLanguageCode as y } from "../utils/language.js";
+import A from "../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Close.js";
+import z from "@mui/material/IconButton";
+import { SnackbarProvider as G, closeSnackbar as D } from "notistack";
+import { useEffect as E } from "react";
+import { useOwpAppContext as M } from "./OwpAppContext.js";
+import { OwpPageLockLoading as j } from "../components/OwpPageLockLoading/OwpPageLockLoading.js";
+import { OwpDialogsProvider as H } from "../components/OwpDialogsProvider/OwpDialogsProvider.js";
+import { OwpLoading as N } from "../components/OwpLoading/OwpLoading.js";
+const R = {
   default: m,
   success: m,
   info: m,
@@ -36,28 +37,30 @@ const j = {
   classes: {
     containerRoot: "bottom-0 right-0 mb-52 md:mb-68 mr-8 lg:mr-80"
   },
-  Components: j,
-  action: /* @__PURE__ */ u((n) => /* @__PURE__ */ e(
-    T,
+  Components: R,
+  action: /* @__PURE__ */ l((n) => /* @__PURE__ */ e(
+    z,
     {
       "aria-label": "close",
-      onClick: /* @__PURE__ */ u(() => y(n), "onClick"),
+      onClick: /* @__PURE__ */ l(() => D(n), "onClick"),
       size: "small",
       sx: { color: "inherit" },
-      children: /* @__PURE__ */ e(I, { fontSize: "small" })
+      children: /* @__PURE__ */ e(A, { fontSize: "small" })
     }
   ), "action")
 };
-function b({
+function tt({
   children: n,
-  dialogsProviderProps: l,
+  dialogsProviderProps: c,
   snackbarProviderProps: t
 }) {
-  const { env: o } = D(), f = w(), { i18n: c } = S(), s = O(), a = h(), p = {
+  const { env: o } = M(), f = x(), a = O(), { i18n: g } = T(), p = I(), r = w(), u = f.snackbarProviderProps, L = {
     ...i,
+    ...u,
     ...t,
     style: {
       ...i.style,
+      ...u == null ? void 0 : u.style,
       ...t == null ? void 0 : t.style
     },
     classes: {
@@ -69,17 +72,17 @@ function b({
       ...t == null ? void 0 : t.Components
     },
     action: (t == null ? void 0 : t.action) ?? i.action
-  }, g = Number(o == null ? void 0 : o.autoLogoutIdleTimeoutMs), L = Number.isFinite(g) ? g : void 0;
-  return z(() => {
-    o != null && o.isI18nEnabled && c.changeLanguage(x());
-  }, [f, o, c]), a ? /* @__PURE__ */ e(M, {}) : /* @__PURE__ */ e(G, { ...l, children: /* @__PURE__ */ C(A, { ...p, children: [
+  }, s = Number(o == null ? void 0 : o.autoLogoutIdleTimeoutMs), C = Number.isFinite(s) ? s : void 0;
+  return E(() => {
+    o != null && o.isI18nEnabled && g.changeLanguage(y());
+  }, [a, o, g]), r ? /* @__PURE__ */ e(N, {}) : /* @__PURE__ */ e(H, { ...c, children: /* @__PURE__ */ h(G, { ...L, children: [
     n,
-    /* @__PURE__ */ e(E, { ...s }),
-    (o == null ? void 0 : o.isAutoLogoutEnabled) && /* @__PURE__ */ e(d, { timeout: L })
+    /* @__PURE__ */ e(j, { ...p }),
+    (o == null ? void 0 : o.isAutoLogoutEnabled) && /* @__PURE__ */ e(S, { timeout: C })
   ] }) });
 }
-u(b, "OwpUiProvider");
+l(tt, "OwpUiProvider");
 export {
-  b as OwpUiProvider
+  tt as OwpUiProvider
 };
 //# sourceMappingURL=OwpUiProvider.js.map

package/dist/contexts/OwpUiProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpUiProvider.js","sources":["../../src/contexts/OwpUiProvider.tsx"],"sourcesContent":null,"names":["defaultSnackbarComponents","OwpSnackbarContent","defaultSnackbarProviderProps","__name","snackbarKey","jsx","IconButton","closeSnackbar","CloseIcon","OwpUiProvider","children","dialogsProviderProps","snackbarProviderProps","env","useOwpAppContext","currentLanguage","useGetCurrentLanguage","i18n","useOwpTranslation","pageLockLoadingProps","useGetPageLockLoading","shouldRedirectToLogin","useAccessTokenGuard","resolvedSnackbarProviderProps","resolvedAutoLogoutIdleTimeoutMs","autoLogoutIdleTimeoutMs","useEffect","getI18nextLanguageCode","OwpLoading","OwpDialogsProvider","jsxs","SnackbarProvider","OwpPageLockLoading","OwpAutoLogoutDialog"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAMA,IAA4B;AAAA,EAChC,SAASC;AAAA,EACT,SAASA;AAAA,EACT,MAAMA;AAAA,EACN,SAASA;AAAA,EACT,OAAOA;AACT,GAcMC,IAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAAA,EAEjB,YAAYF;AAAA,EACZ,QAAQ,gBAAAG,EAAA,CAACC,MACP,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,SAAS,gBAAAH,EAAA,MAAMI,EAAcH,CAAW,GAA/B;AAAA,MACT,MAAK;AAAA,MACL,IAAI,EAAE,OAAO,UAAA;AAAA,MAEb,UAAA,gBAAAC,EAACG,GAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAPxB;AAUV;AAMO,SAASC,EAAc;AAAA,EAC5B,UAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AACF,GAAuB;AACrB,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA,GACVC,IAAkBC,EAAA,GAClB,EAAE,MAAAC,EAAA,IAASC,EAAA,GACXC,IAAuBC,EAAA,GACvBC,IAAwBC,EAAA,GACxBC,IAA0D;AAAA,IAC9D,GAAGrB;AAAA,IACH,GAAGU;AAAA,IACH,OAAO;AAAA,MACL,GAAGV,EAA6B;AAAA,MAChC,GAAGU,KAAA,gBAAAA,EAAuB;AAAA,IAAA;AAAA,IAE5B,SAAS;AAAA,MACP,GAAGV,EAA6B;AAAA,MAChC,GAAGU,KAAA,gBAAAA,EAAuB;AAAA,IAAA;AAAA,IAE5B,YAAY;AAAA,MACV,GAAGV,EAA6B;AAAA,MAChC,GAAGU,KAAA,gBAAAA,EAAuB;AAAA,IAAA;AAAA,IAE5B,SAAQA,KAAA,gBAAAA,EAAuB,WAAUV,EAA6B;AAAA,EAAA,GAElEsB,IAAkC,OAAOX,KAAA,gBAAAA,EAAK,uBAAuB,GACrEY,IAA0B,OAAO,SAASD,CAA+B,IAC3EA,IACA;AAUJ,SARAE,EAAU,MAAM;AACd,IAAKb,KAAA,QAAAA,EAAK,iBAILI,EAAK,eAAeU,GAAwB;AAAA,EACnD,GAAG,CAACZ,GAAiBF,GAAKI,CAAI,CAAC,GAE3BI,sBACMO,GAAA,EAAW,sBAIlBC,GAAA,EAAoB,GAAGlB,GACtB,UAAA,gBAAAmB,EAACC,GAAA,EAAkB,GAAGR,GACnB,UAAA;AAAA,IAAAb;AAAA,IACD,gBAAAL,EAAC2B,GAAA,EAAoB,GAAGb,GAAsB;AAAA,KAC7CN,KAAA,gBAAAA,EAAK,wBAAuB,gBAAAR,EAAC4B,GAAA,EAAoB,SAASR,EAAA,CAAyB;AAAA,EAAA,EAAA,CACtF,EAAA,CACF;AAEJ;AArDgBtB,EAAAM,GAAA;"}
+{"version":3,"file":"OwpUiProvider.js","sources":["../../src/contexts/OwpUiProvider.tsx"],"sourcesContent":null,"names":["defaultSnackbarComponents","OwpSnackbarContent","defaultSnackbarProviderProps","__name","snackbarKey","jsx","IconButton","closeSnackbar","CloseIcon","OwpUiProvider","children","dialogsProviderProps","snackbarProviderProps","env","useOwpAppContext","currentSettings","useGetCurrentSettings","currentLanguage","useGetCurrentLanguage","i18n","useOwpTranslation","pageLockLoadingProps","useGetPageLockLoading","shouldRedirectToLogin","useAccessTokenGuard","settingsSnackbarProviderProps","resolvedSnackbarProviderProps","resolvedAutoLogoutIdleTimeoutMs","autoLogoutIdleTimeoutMs","useEffect","getI18nextLanguageCode","OwpLoading","OwpDialogsProvider","jsxs","SnackbarProvider","OwpPageLockLoading","OwpAutoLogoutDialog"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAA4B;AAAA,EAChC,SAASC;AAAA,EACT,SAASA;AAAA,EACT,MAAMA;AAAA,EACN,SAASA;AAAA,EACT,OAAOA;AACT,GAcMC,IAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAAA,EAEjB,YAAYF;AAAA,EACZ,QAAQ,gBAAAG,EAAA,CAACC,MACP,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,SAAS,gBAAAH,EAAA,MAAMI,EAAcH,CAAW,GAA/B;AAAA,MACT,MAAK;AAAA,MACL,IAAI,EAAE,OAAO,UAAA;AAAA,MAEb,UAAA,gBAAAC,EAACG,GAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAPxB;AAUV;AAMO,SAASC,GAAc;AAAA,EAC5B,UAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AACF,GAAuB;AACrB,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA,GACVC,IAAkBC,EAAA,GAClBC,IAAkBC,EAAA,GAClB,EAAE,MAAAC,EAAA,IAASC,EAAA,GACXC,IAAuBC,EAAA,GACvBC,IAAwBC,EAAA,GACxBC,IAAgCV,EAAgB,uBAChDW,IAA0D;AAAA,IAC9D,GAAGxB;AAAA,IACH,GAAGuB;AAAA,IACH,GAAGb;AAAA,IACH,OAAO;AAAA,MACL,GAAGV,EAA6B;AAAA,MAChC,GAAGuB,KAAA,gBAAAA,EAA+B;AAAA,MAClC,GAAGb,KAAA,gBAAAA,EAAuB;AAAA,IAAA;AAAA,IAE5B,SAAS;AAAA,MACP,GAAGV,EAA6B;AAAA,MAChC,GAAGU,KAAA,gBAAAA,EAAuB;AAAA,IAAA;AAAA,IAE5B,YAAY;AAAA,MACV,GAAGV,EAA6B;AAAA,MAChC,GAAGU,KAAA,gBAAAA,EAAuB;AAAA,IAAA;AAAA,IAE5B,SAAQA,KAAA,gBAAAA,EAAuB,WAAUV,EAA6B;AAAA,EAAA,GAElEyB,IAAkC,OAAOd,KAAA,gBAAAA,EAAK,uBAAuB,GACrEe,IAA0B,OAAO,SAASD,CAA+B,IAC3EA,IACA;AAUJ,SARAE,EAAU,MAAM;AACd,IAAKhB,KAAA,QAAAA,EAAK,iBAILM,EAAK,eAAeW,GAAwB;AAAA,EACnD,GAAG,CAACb,GAAiBJ,GAAKM,CAAI,CAAC,GAE3BI,sBACMQ,GAAA,EAAW,sBAIlBC,GAAA,EAAoB,GAAGrB,GACtB,UAAA,gBAAAsB,EAACC,GAAA,EAAkB,GAAGR,GACnB,UAAA;AAAA,IAAAhB;AAAA,IACD,gBAAAL,EAAC8B,GAAA,EAAoB,GAAGd,GAAsB;AAAA,KAC7CR,KAAA,gBAAAA,EAAK,wBAAuB,gBAAAR,EAAC+B,GAAA,EAAoB,SAASR,EAAA,CAAyB;AAAA,EAAA,EAAA,CACtF,EAAA,CACF;AAEJ;AAzDgBzB,EAAAM,IAAA;"}

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

@@ -14,7 +14,7 @@ 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 { 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 { 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)";
@@ -178,7 +178,7 @@ function qr({
     ]
   ), qe = t(
     () => /* @__PURE__ */ r(
-      Nr,
+      yr,
       {
         gridBodyBorder: fe,
         layoutPreviewGridCellBackground: he,
@@ -209,7 +209,7 @@ function qr({
     switch (o) {
       case "common":
         return /* @__PURE__ */ r(
-          Br,
+          Nr,
           {
             buttonPreviewItems: pe,
             mainTextSecondary: ce,
@@ -219,7 +219,7 @@ function qr({
         );
       case "buttons":
         return /* @__PURE__ */ r(
-          Tr,
+          Br,
           {
             buttonPreviewItems: pe,
             mainTextSecondary: ce,
@@ -228,7 +228,7 @@ function qr({
         );
       case "snackbars":
         return /* @__PURE__ */ r(
-          Cr,
+          Tr,
           {
             previewSectionCardSx: f,
             previewSnackbarKeysRef: V,
@@ -244,7 +244,7 @@ function qr({
         );
       case "searchHeader":
         return /* @__PURE__ */ r(
-          Sr,
+          Cr,
           {
             activeSection: s === "navbar" || s === "toolbar" ? s : "main",
             gridPreviewTable: qe,
@@ -263,7 +263,7 @@ function qr({
         );
       case "grid":
         return /* @__PURE__ */ r(
-          Pr,
+          Sr,
           {
             editableThemePreviewGridId: De,
             mainGridChangedBackgroundColor: (c = v == null ? void 0 : v.changed) == null ? void 0 : c.backgroundColor,
@@ -275,7 +275,7 @@ function qr({
         );
       case "tables":
         return /* @__PURE__ */ r(
-          yr,
+          Pr,
           {
             mainThemePreviewStoreState: I,
             previewSectionCardSx: f,

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

@@ -12,22 +12,22 @@ import { highlightTreeGridCellById as he } from "../../../utils/treeGridUtil.js"
 import A from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Close.js";
 import me from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Search.js";
 import xe from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/SpaceDashboardOutlined.js";
-import { Typography as c, Box as v, Paper as D, TextField as E, Skeleton as M, Button as R, ButtonBase as fe, CircularProgress as F, LinearProgress as I, TableHead as pe, TableRow as U, TableCell as H, TableBody as ue, Table as ve, IconButton as ge } from "@mui/material";
+import { TableHead as fe, TableRow as F, TableCell as I, TableBody as pe, Table as ue, Typography as c, Box as v, Paper as D, TextField as E, Skeleton as M, Button as R, ButtonBase as ve, CircularProgress as U, LinearProgress as H, IconButton as ge } from "@mui/material";
 import { useTheme as K, createTheme as be, ThemeProvider as we, alpha as j } from "@mui/material/styles";
 import { enqueueSnackbar as ye, closeSnackbar as L, SnackbarContent as Te } from "notistack";
 import { memo as N, useMemo as Se } from "react";
-import { getThemePreviewFieldTableSx as z, getThemePreviewFieldTableTitleSx as Z, tableFieldPreviewLayout as ee, tableFieldPreviewData as le, getThemePreviewFieldTableCellSx as _, getThemePreviewBasicTableSx as Ne, tablePreviewRows as Ce, tablePreviewHeaders as re, getThemePreviewDataTableSx as Re, dataTablePreviewRows as V, dataTablePreviewHeadCells as ie, gridCanvasPreviewRows as X, gridStyledTablePreviewRows as Pe, gridStyledDataTablePreviewRows as We, previewNoop as T, previewChromeBorder as P, previewInnerCardSx as ae, searchHeaderPreviewData as ke, previewSectionCardClassName as Ee, gridPreviewColumnLabels as Be, gridPreviewRows as $e, gridPreviewBodyText as Ge } from "./themePreviewCanvas.shared.js";
+import { previewChromeBorder as P, gridPreviewColumnLabels as Ne, gridPreviewRows as Ce, gridPreviewBodyText as Re, getThemePreviewFieldTableSx as z, getThemePreviewFieldTableTitleSx as Z, tableFieldPreviewLayout as ee, tableFieldPreviewData as le, getThemePreviewFieldTableCellSx as _, getThemePreviewBasicTableSx as Pe, tablePreviewRows as We, tablePreviewHeaders as re, getThemePreviewDataTableSx as ke, dataTablePreviewRows as V, dataTablePreviewHeadCells as ie, gridCanvasPreviewRows as X, gridStyledTablePreviewRows as Ee, gridStyledDataTablePreviewRows as Be, previewNoop as T, previewInnerCardSx as ae, searchHeaderPreviewData as $e, previewSectionCardClassName as Ge } from "./themePreviewCanvas.shared.js";
 import { OwpStyleProvider as G } from "../../../components/OwpStyleProvider/OwpStyleProvider.js";
 import { OwpTreeGrid as Y } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
-import { OwpSearchFilter as Me } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
-import { OwpYesNoSelector as Oe } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
-import { OwpPageContent as De } from "../../../components/OwpPageContent/OwpPageContent.js";
+import { OwpYesNoSelector as Me } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
+import { OwpPageContent as Oe } from "../../../components/OwpPageContent/OwpPageContent.js";
 import { OwpSection as q } from "../../../components/OwpSection/OwpSection.js";
+import { OwpSearchFilter as De } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
 function y({
   children: s,
   fillContentHeight: r = !1,
   gapClassName: i = "gap-16",
-  paperClassName: a = Ee,
+  paperClassName: a = Ge,
   sx: o,
   title: n
 }) {
@@ -138,10 +138,10 @@ const nl = N(/* @__PURE__ */ d(function({
               /* @__PURE__ */ e(xe, { color: "primary" }),
               /* @__PURE__ */ e(c, { variant: "body2", color: "primary.main", fontWeight: 600, children: "primary" })
             ] }),
-            /* @__PURE__ */ e(F, { color: "primary", size: 18, thickness: 5 })
+            /* @__PURE__ */ e(U, { color: "primary", size: 18, thickness: 5 })
           ] }),
           /* @__PURE__ */ e(
-            I,
+            H,
             {
               color: "primary",
               sx: { borderRadius: 999, height: 6, width: "100%" },
@@ -154,10 +154,10 @@ const nl = N(/* @__PURE__ */ d(function({
               /* @__PURE__ */ e(me, { color: "secondary" }),
               /* @__PURE__ */ e(c, { variant: "body2", color: "secondary.main", fontWeight: 600, children: "secondary" })
             ] }),
-            /* @__PURE__ */ e(F, { color: "secondary", size: 18, thickness: 5 })
+            /* @__PURE__ */ e(U, { color: "secondary", size: 18, thickness: 5 })
           ] }),
           /* @__PURE__ */ e(
-            I,
+            H,
             {
               color: "secondary",
               sx: { borderRadius: 999, height: 6, width: "100%" },
@@ -395,7 +395,7 @@ const nl = N(/* @__PURE__ */ d(function({
             },
             children: f.map(
               ({ key: S, actionHoverColor: u, backgroundColor: b, color: w, icon: C, message: W }) => /* @__PURE__ */ l(
-                fe,
+                ve,
                 {
                   className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
                   onClick: /* @__PURE__ */ d(() => {
@@ -500,7 +500,7 @@ const nl = N(/* @__PURE__ */ d(function({
                   backgroundColor: "transparent",
                   boxShadow: "none"
                 },
-                children: /* @__PURE__ */ l(Me, { onSubmit: T, onReset: T, children: [
+                children: /* @__PURE__ */ l(De, { onSubmit: T, onReset: T, children: [
                   /* @__PURE__ */ e(
                     se,
                     {
@@ -511,7 +511,7 @@ const nl = N(/* @__PURE__ */ d(function({
                     }
                   ),
                   /* @__PURE__ */ e(
-                    Oe,
+                    Me,
                     {
                       label: "사용여부",
                       yesLabel: "사용",
@@ -542,7 +542,7 @@ const nl = N(/* @__PURE__ */ d(function({
                   border: `1px solid ${P}`
                 },
                 children: /* @__PURE__ */ e(
-                  De,
+                  Oe,
                   {
                     title: "제목",
                     centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(
@@ -560,7 +560,7 @@ const nl = N(/* @__PURE__ */ d(function({
                               ...Array.isArray(u) ? u : u ? [u] : [],
                               { py: 0.5, textAlign: "center" }
                             ],
-                            data: ke,
+                            data: $e,
                             layout: [[{ title: "상태", key: "previewValue" }]],
                             titleSx: [
                               ...Array.isArray(b) ? b : b ? [b] : [],
@@ -741,7 +741,7 @@ const nl = N(/* @__PURE__ */ d(function({
                   {
                     canUseTreeGridStyle: !0,
                     headers: re,
-                    rows: Pe
+                    rows: Ee
                   }
                 )
               ] }),
@@ -756,7 +756,7 @@ const nl = N(/* @__PURE__ */ d(function({
                     canUseTreeGridStyle: !0,
                     fixedRowCount: 1,
                     headCells: ie,
-                    rows: We,
+                    rows: Be,
                     sx: {
                       "& .MuiTableBody-root > .MuiTableRow-root, & .MuiTableBody-root > .MuiTableRow-root:hover, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected:hover": {
                         backgroundColor: "transparent"
@@ -804,19 +804,19 @@ const nl = N(/* @__PURE__ */ d(function({
         ] }),
         /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
           /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
-          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(v, { sx: Ne(o, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(v, { sx: Pe(o, a), children: /* @__PURE__ */ e(
             Q,
             {
               canUseTreeGridStyle: !1,
               headers: re,
-              rows: Ce
+              rows: We
             },
             `basic-table-${n}`
           ) }) })
         ] }),
         /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: [
           /* @__PURE__ */ e(c, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
-          /* @__PURE__ */ e(v, { sx: Re(o, a), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(v, { sx: ke(o, a), children: /* @__PURE__ */ e(
             J,
             {
               canCheckbox: !1,
@@ -853,15 +853,15 @@ const nl = N(/* @__PURE__ */ d(function({
         borderColor: P
       },
       children: /* @__PURE__ */ l(
-        ve,
+        ue,
         {
           size: "small",
           sx: {
             tableLayout: "fixed"
           },
           children: [
-            /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(U, { children: Be.map((f) => /* @__PURE__ */ e(
-              H,
+            /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ e(F, { children: Ne.map((f) => /* @__PURE__ */ e(
+              I,
               {
                 sx: {
                   backgroundColor: o,
@@ -881,19 +881,19 @@ const nl = N(/* @__PURE__ */ d(function({
               },
               f
             )) }) }),
-            /* @__PURE__ */ e(ue, { children: $e.map((f) => /* @__PURE__ */ e(
-              U,
+            /* @__PURE__ */ e(pe, { children: Ce.map((f) => /* @__PURE__ */ e(
+              F,
               {
                 sx: {
                   backgroundColor: i
                 },
                 children: f.map((t, h) => /* @__PURE__ */ e(
-                  H,
+                  I,
                   {
                     sx: {
                       borderBottom: `1px solid ${r}`,
                       borderRight: `1px solid ${r}`,
-                      color: Ge,
+                      color: Re,
                       fontSize: a,
                       px: 1.25,
                       py: 1,

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

@@ -1,7 +1,7 @@
 var ne = Object.defineProperty;
 var l = (t, e) => ne(t, "name", { value: e, configurable: !0 });
 import { jsx as o, jsxs as d, Fragment as ae } 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 { IconButton as ie, Typography as k, InputAdornment as ue, MenuItem as ce, TextField as Q, Box as g, Divider as se, Popover as pe, Button as de } from "@mui/material";
+import { IconButton as ie, Typography as k, InputAdornment as ue, MenuItem as ce, TextField as Q, Button as se, Box as g, Divider as pe, Popover as de } from "@mui/material";
 import me from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/RestartAltOutlined.js";
 import { blue as he, lightBlue as fe, cyan as xe, teal as ge, green as we, amber as be, orange as Pe, deepOrange as ve, red as ye, pink as Ce, purple as ke, deepPurple as Te, indigo as Ve, grey as Ie, blueGrey as Ee } from "@mui/material/colors";
 import { useState as w, useRef as T, useEffect as b } from "react";
@@ -207,7 +207,7 @@ function Xe({
     H ? /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-6", children: [
       /* @__PURE__ */ d(ae, { children: [
         /* @__PURE__ */ o(
-          de,
+          se,
           {
             size: "small",
             fullWidth: !0,
@@ -281,7 +281,7 @@ function Xe({
           }
         ),
         v ? /* @__PURE__ */ o(
-          pe,
+          de,
           {
             open: !0,
             anchorEl: v,
@@ -310,7 +310,7 @@ function Xe({
               }
             },
             children: /* @__PURE__ */ o("div", { ref: O, className: "flex min-w-0 flex-col gap-10", children: re.map((r, u) => /* @__PURE__ */ d(g, { className: "flex flex-col gap-10", children: [
-              u > 0 ? /* @__PURE__ */ o(se, { flexItem: !0 }) : null,
+              u > 0 ? /* @__PURE__ */ o(pe, { flexItem: !0 }) : null,
               /* @__PURE__ */ d(
                 g,
                 {

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

@@ -1,9 +1,9 @@
 var ae = Object.defineProperty;
 var s = (r, d) => ae(r, "name", { value: d, configurable: !0 });
 import { jsx as o, jsxs as h } 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 { MenuItem as W, ButtonBase as se, Typography as x, Paper as A, TextField as Z, Divider as q, Box as de, IconButton as ce, FormControlLabel as ue, Checkbox as he } from "@mui/material";
+import { Divider as Z, MenuItem as W, ButtonBase as se, Typography as x, Paper as A, TextField as q, Box as de, IconButton as ce, FormControlLabel as ue, Checkbox as he } from "@mui/material";
 import me from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/RestartAltOutlined.js";
-import { ThemeProvider as fe, createTheme as pe } from "@mui/material/styles";
+import { createTheme as fe, ThemeProvider as pe } from "@mui/material/styles";
 import { useState as be, useRef as Ce, useMemo as B, useEffect as ge } from "react";
 import { toolbarCuratedPresetKeys as ve, designSystemPresetKeys as xe } from "../configs/presets.js";
 import { ThemePreviewColorField as J } from "./ThemePreviewColorField.js";
@@ -85,7 +85,7 @@ const Fe = Object.fromEntries(
 }, M = "#d8dee8", Se = "#d1d7e0", Ee = "#f8fafc", D = "#ffffff", y = "#111827", v = "#6b7280", Q = "#ffffff", re = "#cbd5e1", Ne = "#94a3b8", z = "#1ea3e6", V = "#111827", Ie = "#f8fafc", We = "#f8fafc", ze = `특별한 경우가 아니면 연동 색상 편집은 권장하지 않습니다.
 
 Primary Main 값을 선택하면 Light, Dark, Contrast 값이 자동으로 채워집니다.
-특수한 디자인 조정이 필요한 경우에만 직접 편집하세요.`, je = pe({
+특수한 디자인 조정이 필요한 경우에만 직접 편집하세요.`, je = fe({
   palette: {
     mode: "light",
     background: {
@@ -232,7 +232,7 @@ function Je({
       const l = [];
       return e.key === G && l.push(
         /* @__PURE__ */ o(
-          q,
+          Z,
           {
             component: "li",
             role: "presentation",
@@ -390,7 +390,7 @@ function Je({
       }) })
     ] }, e.key);
   }, "renderFieldGroup");
-  return /* @__PURE__ */ o(fe, { theme: je, children: /* @__PURE__ */ h(de, { sx: Ke, className: "flex h-full min-h-0 flex-col gap-16", children: [
+  return /* @__PURE__ */ o(pe, { theme: je, children: /* @__PURE__ */ h(de, { sx: Ke, className: "flex h-full min-h-0 flex-col gap-16", children: [
     /* @__PURE__ */ o("div", { className: "grid grid-cols-2 gap-12", children: ee.map((e) => {
       const l = e.key === r;
       return /* @__PURE__ */ o(
@@ -436,7 +436,7 @@ function Je({
             /* @__PURE__ */ o(x, { variant: "h6", sx: { color: y }, children: K == null ? void 0 : K.label }),
             E ? /* @__PURE__ */ h("div", { className: "grid gap-12 md:grid-cols-2", children: [
               /* @__PURE__ */ h(
-                Z,
+                q,
                 {
                   select: !0,
                   label: "Mode",
@@ -451,7 +451,7 @@ function Je({
                 }
               ),
               /* @__PURE__ */ h(
-                Z,
+                q,
                 {
                   select: !0,
                   label: "Preset",
@@ -468,7 +468,7 @@ function Je({
             ] }) : null
           ] }) }),
           /* @__PURE__ */ o(
-            q,
+            Z,
             {
               sx: {
                 borderColor: M