npm - @owp/core - Versions diffs - 2.5.7 → 2.5.9 - Mend

@owp/core 2.5.7 → 2.5.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

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

@@ -1,15 +1,16 @@
-var K = Object.defineProperty;
-var l = (t, e) => K(t, "name", { value: e, configurable: !0 });
-import { jsxs as m, jsx as o, Fragment as Y } 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 q, TextField as $, Box as h, Divider as J, Typography as C, Popover as Q, InputAdornment as X, Button as Z } from "@mui/material";
-import { blue as ee, lightBlue as re, cyan as te, teal as le, green as oe, amber as ne, orange as ae, deepOrange as ie, red as ue, pink as ce, purple as se, deepPurple as pe, indigo as de, grey as me, blueGrey as he } from "@mui/material/colors";
-import { useState as f, useRef as fe, useEffect as T } from "react";
-import { getThemePreviewPaletteValue as xe } from "../utils/themePreviewSettings.js";
-import { getColorAlphaValue as ge, toColorPickerValue as F, applyColorPickerValue as S } from "../utils/color.js";
-const be = {
+var J = Object.defineProperty;
+var l = (t, e) => J(t, "name", { value: e, configurable: !0 });
+import { jsx as o, jsxs as c, Fragment as Q } 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 X, Typography as v, InputAdornment as Z, MenuItem as ee, TextField as L, Box as h, Divider as re, Popover as te, Button as le } from "@mui/material";
+import oe 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 ne, lightBlue as ae, cyan as ie, teal as ue, green as ce, amber as se, orange as pe, deepOrange as de, red as me, pink as he, purple as fe, deepPurple as xe, indigo as ge, grey as be, blueGrey as Pe } from "@mui/material/colors";
+import { useState as x, useRef as ve, useEffect as w } from "react";
+import { getThemePreviewPaletteValue as we } from "../utils/themePreviewSettings.js";
+import { getColorAlphaValue as ye, toColorPickerValue as z, applyColorPickerValue as N } from "../utils/color.js";
+const ke = {
   "px-number": "px",
   "rem-number": "rem"
-}, Pe = [
+}, Ce = [
   "50",
   "100",
   "200",
@@ -24,159 +25,207 @@ const be = {
   "A200",
   "A400",
   "A700"
-], ve = [
-  ["Blue", ee],
-  ["Light Blue", re],
-  ["Cyan", te],
-  ["Teal", le],
-  ["Green", oe],
-  ["Amber", ne],
-  ["Orange", ae],
-  ["Deep Orange", ie],
-  ["Red", ue],
-  ["Pink", ce],
-  ["Purple", se],
-  ["Deep Purple", pe],
-  ["Indigo", de],
-  ["Grey", me],
-  ["Blue Grey", he]
-], we = ve.map(([t, e]) => ({
+], Te = [
+  ["Blue", ne],
+  ["Light Blue", ae],
+  ["Cyan", ie],
+  ["Teal", ue],
+  ["Green", ce],
+  ["Amber", se],
+  ["Orange", pe],
+  ["Deep Orange", de],
+  ["Red", me],
+  ["Pink", he],
+  ["Purple", fe],
+  ["Deep Purple", xe],
+  ["Indigo", ge],
+  ["Grey", be],
+  ["Blue Grey", Pe]
+], Ie = Te.map(([t, e]) => ({
   label: t,
-  colors: Pe.reduce((n, s) => {
-    const a = e[s];
-    return a && n.push({
+  colors: Ce.reduce((n, s) => {
+    const m = e[s];
+    return m && n.push({
       key: `${t}-${s}`,
       shade: s,
-      value: a
+      value: m
     }), n;
   }, [])
-})), ye = 500, U = 32, L = 20;
-function ke(t, e) {
+})), Ee = 500, G = 32, j = 20;
+function Ve(t, e) {
   return t.replace(new RegExp(`${e}$`, "i"), "");
 }
-l(ke, "getUnitInputDisplayValue");
-function G(t) {
+l(Ve, "getUnitInputDisplayValue");
+function K(t) {
   const e = t.replace(/[^0-9.,]/g, "").replace(/,/g, "."), n = e.indexOf(".");
   if (n < 0)
     return e;
-  const s = e.slice(0, n), a = e.slice(n + 1).replace(/\./g, "");
-  return `${s}.${a}`;
+  const s = e.slice(0, n), m = e.slice(n + 1).replace(/\./g, "");
+  return `${s}.${m}`;
 }
-l(G, "normalizeUnitInputDisplayValue");
-function Ce(t) {
-  const e = G(t);
+l(K, "normalizeUnitInputDisplayValue");
+function Ae(t) {
+  const e = K(t);
   return !e || e === "." ? "" : e.startsWith(".") ? `0${e}` : e.endsWith(".") ? e.slice(0, -1) : e;
 }
-l(Ce, "normalizeCommittedUnitInputDisplayValue");
-function Te(t, e) {
-  const n = Ce(t);
+l(Ae, "normalizeCommittedUnitInputDisplayValue");
+function Be(t, e) {
+  const n = Ae(t);
   return n ? `${n}${e}` : "";
 }
-l(Te, "normalizeUnitInputValue");
-function Ie(t) {
-  return (t ? be[t] : null) ?? null;
+l(Be, "normalizeUnitInputValue");
+function ze(t) {
+  return (t ? ke[t] : null) ?? null;
 }
-l(Ie, "getUnitValueFormat");
-function _e({
+l(ze, "getUnitValueFormat");
+function Se({
   disabled: t = !1,
   definition: e,
-  sectionKey: n,
-  settings: s,
-  onChange: a
+  resetVersion: n,
+  sectionKey: s,
+  settings: m,
+  onChange: g,
+  onReset: y
 }) {
-  var H, O;
-  const [I, b] = f(null), i = xe(s, n, e.path), u = Ie(e.valueFormat), V = e.showColorPicker !== !1, E = e.allowAlpha ? ge(i) : null, A = [e.description];
-  e.allowAlpha && A.push(
-    E ? `알파값은 ${E}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.` : "알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다."
+  var F, U;
+  const [D, k] = x(null), i = we(m, s, e.path), u = ze(e.valueFormat), M = e.showColorPicker !== !1, R = e.allowAlpha ? ye(i) : null, _ = [e.description];
+  e.allowAlpha && _.push(
+    R ? `알파값은 ${R}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.` : "알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다."
   );
-  const N = A.filter(Boolean).join(" "), P = !!((H = e.options) != null && H.length), v = !!(e.allowAlpha && V && !P && !u), x = u ? ke(i, u) : i, j = V, p = !P && !v, [w, B] = f(x), [R, y] = f(!1), [z, M] = f(F(i)), [k, _] = f(!1), c = fe(null);
-  T(() => {
-    !p || R || B(x);
-  }, [p, x, R]), T(() => {
-    k || M(F(i));
-  }, [k, i]), T(() => () => {
-    c.current && window.clearTimeout(c.current);
-  }, []);
-  const D = /* @__PURE__ */ l((r) => {
-    a(
+  const Y = _.filter(Boolean).join(" "), C = !!((F = e.options) != null && F.length), T = !!(e.allowAlpha && M && !C && !u), f = u ? Ve(i, u) : i, q = M, p = !C && !T, [I, E] = x(f), [W, b] = x(!1), [O, V] = x(z(i)), [A, B] = x(!1), a = ve(null);
+  w(() => {
+    !p || W || E(f);
+  }, [p, f, W]), w(() => {
+    A || V(z(i));
+  }, [A, i]), w(() => () => {
+    a.current && window.clearTimeout(a.current);
+  }, []), w(() => {
+    typeof n > "u" || (a.current && (window.clearTimeout(a.current), a.current = null), E(f), b(!1), V(z(i)), B(!1));
+  }, [n]);
+  const H = /* @__PURE__ */ l((r) => {
+    g(
       e.path,
-      u ? Te(r, u) : r
+      u ? Be(r, u) : r
     );
-  }, "commitBufferedTextValue"), W = /* @__PURE__ */ l((r) => {
-    c.current && (window.clearTimeout(c.current), c.current = null), _(!1), a(e.path, S(i, r));
-  }, "commitBufferedPickerValue");
-  return /* @__PURE__ */ m("div", { className: "grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12", children: [
+  }, "commitBufferedTextValue"), $ = /* @__PURE__ */ l((r) => {
+    a.current && (window.clearTimeout(a.current), a.current = null), B(!1), g(e.path, N(i, r));
+  }, "commitBufferedPickerValue"), S = y || u ? /* @__PURE__ */ o(Z, { position: "end", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+    y ? /* @__PURE__ */ o(
+      X,
+      {
+        size: "small",
+        "aria-label": `${e.label} reset`,
+        disabled: t,
+        edge: "end",
+        onMouseDown: /* @__PURE__ */ l((r) => {
+          r.preventDefault();
+        }, "onMouseDown"),
+        onClick: /* @__PURE__ */ l(() => {
+          y(e.path);
+        }, "onClick"),
+        sx: {
+          border: "1px solid #cbd5e1",
+          borderRadius: 1,
+          color: "#6b7280",
+          p: 0.25
+        },
+        children: /* @__PURE__ */ o(oe, { sx: { fontSize: 16 } })
+      }
+    ) : null,
+    u ? /* @__PURE__ */ o(v, { variant: "body2", children: u }) : null
+  ] }) }) : void 0;
+  return /* @__PURE__ */ c("div", { className: "grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12", children: [
     /* @__PURE__ */ o(
-      $,
+      L,
       {
-        select: P,
+        select: C,
         label: e.label,
         size: "small",
-        value: p ? w : x,
+        value: p ? I : f,
         disabled: t,
         onChange: /* @__PURE__ */ l((r) => {
-          if (v)
+          if (T)
             return;
-          const d = u ? G(r.target.value) : r.target.value;
+          const d = u ? K(r.target.value) : r.target.value;
           if (p) {
-            B(d);
+            E(d);
             return;
           }
-          a(e.path, d);
+          g(e.path, d);
         }, "onChange"),
         onFocus: /* @__PURE__ */ l(() => {
-          p && y(!0);
+          p && b(!0);
         }, "onFocus"),
         onBlur: /* @__PURE__ */ l(() => {
-          p && (y(!1), D(w));
+          p && (b(!1), H(I));
         }, "onBlur"),
         onKeyDown: /* @__PURE__ */ l((r) => {
-          !p || r.key !== "Enter" || (r.preventDefault(), y(!1), D(w), r.currentTarget.blur());
+          !p || r.key !== "Enter" || (r.preventDefault(), b(!1), H(I), r.currentTarget.blur());
         }, "onKeyDown"),
-        helperText: N,
+        helperText: Y,
         slotProps: {
           htmlInput: {
             ...u ? {
               inputMode: "decimal"
             } : {},
-            ...v ? {
+            ...T ? {
               readOnly: !0
             } : {}
           },
-          input: u ? {
-            endAdornment: /* @__PURE__ */ o(X, { position: "end", children: u })
-          } : void 0
+          input: {
+            ...S ? {
+              endAdornment: S
+            } : {}
+          }
         },
-        children: (O = e.options) == null ? void 0 : O.map((r) => /* @__PURE__ */ o(q, { value: r.value, children: r.label }, r.value))
+        children: (U = e.options) == null ? void 0 : U.map((r) => /* @__PURE__ */ o(ee, { value: r.value, children: r.label }, r.value))
       }
     ),
-    j ? /* @__PURE__ */ m("div", { className: "grid grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ m(Y, { children: [
+    q ? /* @__PURE__ */ c("div", { className: "grid grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ c(Q, { children: [
         /* @__PURE__ */ o(
-          $,
+          le,
           {
-            label: "Pick",
+            size: "small",
+            fullWidth: !0,
+            variant: "outlined",
+            disabled: t,
+            sx: {
+              fontSize: "1.2rem",
+              height: G,
+              minWidth: 0
+            },
+            onClick: /* @__PURE__ */ l((r) => {
+              k(r.currentTarget);
+            }, "onClick"),
+            children: "MUI"
+          }
+        ),
+        /* @__PURE__ */ o(
+          L,
+          {
+            hiddenLabel: !0,
             type: "color",
             size: "small",
-            value: z,
+            value: O,
             disabled: t,
             onChange: /* @__PURE__ */ l((r) => {
               const d = r.target.value;
-              M(d), _(!0), c.current && window.clearTimeout(c.current), c.current = window.setTimeout(() => {
-                W(d);
-              }, ye);
+              V(d), B(!0), a.current && window.clearTimeout(a.current), a.current = window.setTimeout(() => {
+                $(d);
+              }, Ee);
             }, "onChange"),
             onBlur: /* @__PURE__ */ l(() => {
-              k && W(z);
+              A && $(O);
             }, "onBlur"),
             slotProps: {
-              inputLabel: {
-                shrink: !0
+              htmlInput: {
+                "aria-label": "Pick color"
               }
             },
             sx: {
               "& .MuiOutlinedInput-root": {
-                height: U,
+                height: G,
                 px: 0.5
               },
               '& input[type="color"]': {
@@ -186,8 +235,8 @@ function _e({
                 border: 0,
                 borderRadius: 0,
                 display: "block",
-                height: L,
-                minHeight: L,
+                height: j,
+                minHeight: j,
                 overflow: "hidden",
                 padding: 0,
                 p: 0,
@@ -208,32 +257,14 @@ function _e({
             }
           }
         ),
-        /* @__PURE__ */ o(
-          Z,
-          {
-            size: "small",
-            fullWidth: !0,
-            variant: "outlined",
-            disabled: t,
-            sx: {
-              fontSize: "1.2rem",
-              height: U,
-              minWidth: 0
-            },
-            onClick: /* @__PURE__ */ l((r) => {
-              b(r.currentTarget);
-            }, "onClick"),
-            children: "MUI"
-          }
-        ),
-        I ? /* @__PURE__ */ o(
-          Q,
+        D ? /* @__PURE__ */ o(
+          te,
           {
             open: !0,
-            anchorEl: I,
+            anchorEl: D,
             transitionDuration: 0,
             onClose: /* @__PURE__ */ l(() => {
-              b(null);
+              k(null);
             }, "onClose"),
             anchorOrigin: {
               vertical: "bottom",
@@ -255,9 +286,9 @@ function _e({
                 }
               }
             },
-            children: /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-col gap-10", children: we.map((r, d) => /* @__PURE__ */ m(h, { className: "flex flex-col gap-10", children: [
-              d > 0 ? /* @__PURE__ */ o(J, { flexItem: !0 }) : null,
-              /* @__PURE__ */ m(
+            children: /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-col gap-10", children: Ie.map((r, d) => /* @__PURE__ */ c(h, { className: "flex flex-col gap-10", children: [
+              d > 0 ? /* @__PURE__ */ o(re, { flexItem: !0 }) : null,
+              /* @__PURE__ */ c(
                 h,
                 {
                   sx: {
@@ -269,7 +300,7 @@ function _e({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ o(C, { variant: "caption", color: "text.secondary", children: r.label }),
+                    /* @__PURE__ */ o(v, { variant: "caption", color: "text.secondary", children: r.label }),
                     /* @__PURE__ */ o(
                       h,
                       {
@@ -279,16 +310,16 @@ function _e({
                           gridTemplateColumns: "repeat(auto-fit, minmax(68px, 1fr))",
                           minWidth: 0
                         },
-                        children: r.colors.map((g) => /* @__PURE__ */ m(
+                        children: r.colors.map((P) => /* @__PURE__ */ c(
                           h,
                           {
                             component: "button",
                             type: "button",
                             onClick: /* @__PURE__ */ l(() => {
-                              a(
+                              g(
                                 e.path,
-                                S(i, g.value)
-                              ), b(null);
+                                N(i, P.value)
+                              ), k(null);
                             }, "onClick"),
                             sx: {
                               alignItems: "center",
@@ -319,7 +350,7 @@ function _e({
                                     width: 30,
                                     height: 30,
                                     borderRadius: 1,
-                                    backgroundColor: g.value,
+                                    backgroundColor: P.value,
                                     border: "1px solid",
                                     borderColor: "divider"
                                   }
@@ -334,12 +365,12 @@ function _e({
                                     fontWeight: 600,
                                     lineHeight: 1
                                   },
-                                  children: g.shade
+                                  children: P.shade
                                 }
                               )
                             ]
                           },
-                          g.key
+                          P.key
                         ))
                       }
                     )
@@ -350,10 +381,10 @@ function _e({
           }
         ) : null
       ] }),
-      e.allowAlpha ? /* @__PURE__ */ m("div", { className: "col-span-2 flex flex-col gap-2", children: [
-        /* @__PURE__ */ o(C, { variant: "caption", color: "text.secondary", children: "Current" }),
+      e.allowAlpha ? /* @__PURE__ */ c("div", { className: "col-span-2 flex flex-col gap-2", children: [
+        /* @__PURE__ */ o(v, { variant: "caption", color: "text.secondary", children: "Current" }),
         /* @__PURE__ */ o(
-          C,
+          v,
           {
             variant: "caption",
             color: "text.secondary",
@@ -365,8 +396,8 @@ function _e({
     ] }) : /* @__PURE__ */ o("div", {})
   ] });
 }
-l(_e, "ThemePreviewColorField");
+l(Se, "ThemePreviewColorField");
 export {
-  _e as ThemePreviewColorField
+  Se as ThemePreviewColorField
 };
 //# sourceMappingURL=ThemePreviewColorField.js.map

package/dist/features/themePreview/components/ThemePreviewColorField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemePreviewColorField.js","sources":["../../../../src/features/themePreview/components/ThemePreviewColorField.tsx"],"sourcesContent":["import {\n Box,\n Button,\n Divider,\n InputAdornment,\n MenuItem,\n Popover,\n TextField,\n Typography,\n} from '@mui/material';\nimport {\n amber,\n blue,\n blueGrey,\n cyan,\n deepOrange,\n deepPurple,\n green,\n grey,\n indigo,\n lightBlue,\n orange,\n pink,\n purple,\n red,\n teal,\n} from '@mui/material/colors';\nimport type {\n ThemePreviewFieldDefinition,\n ThemePreviewSectionKey,\n ThemePreviewSettings,\n} from '../types';\nimport {\n applyColorPickerValue,\n getColorAlphaValue,\n getThemePreviewPaletteValue,\n toColorPickerValue,\n} from '../utils';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface ThemePreviewColorFieldProps {\n disabled?: boolean;\n definition: ThemePreviewFieldDefinition;\n sectionKey: ThemePreviewSectionKey;\n settings: ThemePreviewSettings;\n onChange: (path: string, value: string) => void;\n}\n\nconst themePreviewInputUnits = {\n 'px-number': 'px',\n 'rem-number': 'rem',\n} as const;\n\ntype ThemePreviewInputUnit = (typeof themePreviewInputUnits)[keyof typeof themePreviewInputUnits];\n\nconst themePreviewMuiColorShades = [\n '50',\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n 'A100',\n 'A200',\n 'A400',\n 'A700',\n] as const;\nconst themePreviewMuiColorPalettes = [\n ['Blue', blue],\n ['Light Blue', lightBlue],\n ['Cyan', cyan],\n ['Teal', teal],\n ['Green', green],\n ['Amber', amber],\n ['Orange', orange],\n ['Deep Orange', deepOrange],\n ['Red', red],\n ['Pink', pink],\n ['Purple', purple],\n ['Deep Purple', deepPurple],\n ['Indigo', indigo],\n ['Grey', grey],\n ['Blue Grey', blueGrey],\n] as const;\nconst themePreviewMuiPaletteColorRows = themePreviewMuiColorPalettes.map(([label, palette]) => ({\n label,\n colors: themePreviewMuiColorShades.reduce<Array<{\n key: string;\n shade: string;\n value: string;\n }>>((acc, shade) => {\n const paletteValue = (palette as Record<string, string>)[shade];\n\n if (!paletteValue) {\n return acc;\n }\n\n acc.push({\n key: `${label}-${shade}`,\n shade,\n value: paletteValue,\n });\n\n return acc;\n }, []),\n}));\nconst THEME_PREVIEW_COLOR_PICKER_APPLY_DELAY_MS = 500;\nconst THEME_PREVIEW_SMALL_FIELD_HEIGHT = 32;\nconst THEME_PREVIEW_PICKER_SWATCH_HEIGHT = 20;\n\nfunction getUnitInputDisplayValue(value: string, unit: ThemePreviewInputUnit) {\n return value.replace(new RegExp(`${unit}$`, 'i'), '');\n}\n\nfunction normalizeUnitInputDisplayValue(value: string) {\n const sanitizedValue = value.replace(/[^0-9.,]/g, '').replace(/,/g, '.');\n const decimalPointIndex = sanitizedValue.indexOf('.');\n\n if (decimalPointIndex < 0) {\n return sanitizedValue;\n }\n\n const integerPart = sanitizedValue.slice(0, decimalPointIndex);\n const decimalPart = sanitizedValue.slice(decimalPointIndex + 1).replace(/\\./g, '');\n\n return `${integerPart}.${decimalPart}`;\n}\n\nfunction normalizeCommittedUnitInputDisplayValue(value: string) {\n const normalizedValue = normalizeUnitInputDisplayValue(value);\n\n if (!normalizedValue \|\| normalizedValue === '.') {\n return '';\n }\n\n if (normalizedValue.startsWith('.')) {\n return `0${normalizedValue}`;\n }\n\n if (normalizedValue.endsWith('.')) {\n return normalizedValue.slice(0, -1);\n }\n\n return normalizedValue;\n}\n\nfunction normalizeUnitInputValue(value: string, unit: ThemePreviewInputUnit) {\n const normalizedValue = normalizeCommittedUnitInputDisplayValue(value);\n\n return normalizedValue ? `${normalizedValue}${unit}` : '';\n}\n\nfunction getUnitValueFormat(valueFormat?: ThemePreviewFieldDefinition['valueFormat']) {\n return (valueFormat ? themePreviewInputUnits[valueFormat] : null) ?? null;\n}\n\nexport function ThemePreviewColorField({\n disabled = false,\n definition,\n sectionKey,\n settings,\n onChange,\n}: ThemePreviewColorFieldProps) {\n const [muiPaletteAnchorElement, setMuiPaletteAnchorElement] = useState<HTMLElement \| null>(null);\n const value = getThemePreviewPaletteValue(settings, sectionKey, definition.path);\n const unitValueFormat = getUnitValueFormat(definition.valueFormat);\n const showColorPicker = definition.showColorPicker !== false;\n const alphaValue = definition.allowAlpha ? getColorAlphaValue(value) : null;\n const helperText = [definition.description];\n\n if (definition.allowAlpha) {\n helperText.push(\n alphaValue\n ? `알파값은 ${alphaValue}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.`\n : '알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.',\n );\n }\n\n const resolvedHelperText = helperText.filter(Boolean).join(' ');\n const hasOptions = Boolean(definition.options?.length);\n const isReadOnlyColorTextInput = Boolean(\n definition.allowAlpha && showColorPicker && !hasOptions && !unitValueFormat,\n );\n const displayValue =\n unitValueFormat ? getUnitInputDisplayValue(value, unitValueFormat) : value;\n const hasPickerControls = showColorPicker;\n const canBufferTextInput = !hasOptions && !isReadOnlyColorTextInput;\n const [bufferedTextValue, setBufferedTextValue] = useState(displayValue);\n const [isBufferedTextInputFocused, setIsBufferedTextInputFocused] = useState(false);\n const [bufferedPickerValue, setBufferedPickerValue] = useState(toColorPickerValue(value));\n const [isBufferedPickerDirty, setIsBufferedPickerDirty] = useState(false);\n const colorPickerApplyTimeoutRef = useRef<number \| null>(null);\n\n useEffect(() => {\n if (!canBufferTextInput \|\| isBufferedTextInputFocused) {\n return;\n }\n\n setBufferedTextValue(displayValue);\n }, [canBufferTextInput, displayValue, isBufferedTextInputFocused]);\n\n useEffect(() => {\n if (isBufferedPickerDirty) {\n return;\n }\n\n setBufferedPickerValue(toColorPickerValue(value));\n }, [isBufferedPickerDirty, value]);\n\n useEffect(() => {\n return () => {\n if (!colorPickerApplyTimeoutRef.current) {\n return;\n }\n\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n };\n }, []);\n\n const commitBufferedTextValue = (nextValue: string) => {\n onChange(\n definition.path,\n unitValueFormat ? normalizeUnitInputValue(nextValue, unitValueFormat) : nextValue,\n );\n };\n const commitBufferedPickerValue = (nextPickerValue: string) => {\n if (colorPickerApplyTimeoutRef.current) {\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n colorPickerApplyTimeoutRef.current = null;\n }\n\n setIsBufferedPickerDirty(false);\n onChange(definition.path, applyColorPickerValue(value, nextPickerValue));\n };\n\n return (\n <div className=\"grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12\">\n <TextField\n select={hasOptions}\n label={definition.label}\n size=\"small\"\n value={canBufferTextInput ? bufferedTextValue : displayValue}\n disabled={disabled}\n onChange={(event) => {\n if (isReadOnlyColorTextInput) {\n return;\n }\n\n const nextValue = unitValueFormat\n ? normalizeUnitInputDisplayValue(event.target.value)\n : event.target.value;\n\n if (canBufferTextInput) {\n setBufferedTextValue(nextValue);\n return;\n }\n\n onChange(definition.path, nextValue);\n }}\n onFocus={() => {\n if (!canBufferTextInput) {\n return;\n }\n\n setIsBufferedTextInputFocused(true);\n }}\n onBlur={() => {\n if (!canBufferTextInput) {\n return;\n }\n\n setIsBufferedTextInputFocused(false);\n commitBufferedTextValue(bufferedTextValue);\n }}\n onKeyDown={(event) => {\n if (!canBufferTextInput \|\| event.key !== 'Enter') {\n return;\n }\n\n event.preventDefault();\n setIsBufferedTextInputFocused(false);\n commitBufferedTextValue(bufferedTextValue);\n event.currentTarget.blur();\n }}\n helperText={resolvedHelperText}\n slotProps={{\n htmlInput:\n {\n ...(unitValueFormat\n ? {\n inputMode: 'decimal',\n }\n : {}),\n ...(isReadOnlyColorTextInput\n ? {\n readOnly: true,\n }\n : {}),\n },\n input:\n unitValueFormat\n ? {\n endAdornment: <InputAdornment position=\"end\">{unitValueFormat}</InputAdornment>,\n }\n : undefined,\n }}\n >\n {definition.options?.map((option) => (\n <MenuItem key={option.value} value={option.value}>\n {option.label}\n </MenuItem>\n ))}\n </TextField>\n\n {hasPickerControls ? (\n <div className=\"grid grid-cols-2 gap-6\">\n <>\n <TextField\n label=\"Pick\"\n type=\"color\"\n size=\"small\"\n value={bufferedPickerValue}\n disabled={disabled}\n onChange={(event) => {\n const nextPickerValue = event.target.value;\n\n setBufferedPickerValue(nextPickerValue);\n setIsBufferedPickerDirty(true);\n\n if (colorPickerApplyTimeoutRef.current) {\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n }\n\n colorPickerApplyTimeoutRef.current = window.setTimeout(() => {\n commitBufferedPickerValue(nextPickerValue);\n }, THEME_PREVIEW_COLOR_PICKER_APPLY_DELAY_MS);\n }}\n onBlur={() => {\n if (!isBufferedPickerDirty) {\n return;\n }\n\n commitBufferedPickerValue(bufferedPickerValue);\n }}\n slotProps={{\n inputLabel: {\n shrink: true,\n },\n }}\n sx={{\n '& .MuiOutlinedInput-root': {\n height: THEME_PREVIEW_SMALL_FIELD_HEIGHT,\n px: 0.5,\n },\n '& input[type=\"color\"]': {\n WebkitAppearance: 'none',\n alignSelf: 'center',\n boxSizing: 'border-box',\n border: 0,\n borderRadius: 0,\n display: 'block',\n height: THEME_PREVIEW_PICKER_SWATCH_HEIGHT,\n minHeight: THEME_PREVIEW_PICKER_SWATCH_HEIGHT,\n overflow: 'hidden',\n padding: 0,\n p: 0,\n width: '100%',\n },\n '& input[type=\"color\"]::-webkit-color-swatch-wrapper': {\n borderRadius: 0,\n p: 0,\n },\n '& input[type=\"color\"]::-webkit-color-swatch': {\n borderColor: '#94a3b8',\n borderRadius: 0,\n },\n '& input[type=\"color\"]::-moz-color-swatch': {\n borderColor: '#94a3b8',\n borderRadius: 0,\n },\n }}\n />\n <Button\n size=\"small\"\n fullWidth\n variant=\"outlined\"\n disabled={disabled}\n sx={{\n fontSize: '1.2rem',\n height: THEME_PREVIEW_SMALL_FIELD_HEIGHT,\n minWidth: 0,\n }}\n onClick={(event) => {\n setMuiPaletteAnchorElement(event.currentTarget);\n }}\n >\n MUI\n </Button>\n {muiPaletteAnchorElement ? (\n <Popover\n open\n anchorEl={muiPaletteAnchorElement}\n transitionDuration={0}\n onClose={() => {\n setMuiPaletteAnchorElement(null);\n }}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n slotProps={{\n paper: {\n sx: {\n maxHeight: 'calc(100vh - 32px)',\n maxWidth: 'calc(100vw - 32px)',\n minWidth: 320,\n overflow: 'auto',\n p: 1.5,\n width: 'min(760px, calc(100vw - 32px))',\n },\n },\n }}\n >\n <div className=\"flex min-w-0 flex-col gap-10\">\n {themePreviewMuiPaletteColorRows.map((paletteRow, paletteRowIndex) => (\n <Box key={paletteRow.label} className=\"flex flex-col gap-10\">\n {paletteRowIndex > 0 ? <Divider flexItem /> : null}\n <Box\n sx={{\n display: 'grid',\n gap: 1,\n gridTemplateColumns: {\n xs: 'minmax(0, 1fr)',\n sm: '84px minmax(0, 1fr)',\n },\n }}\n >\n <Typography variant=\"caption\" color=\"text.secondary\">\n {paletteRow.label}\n </Typography>\n <Box\n sx={{\n display: 'grid',\n gap: 0.75,\n gridTemplateColumns: 'repeat(auto-fit, minmax(68px, 1fr))',\n minWidth: 0,\n }}\n >\n {paletteRow.colors.map((colorItem) => (\n <Box\n key={colorItem.key}\n component=\"button\"\n type=\"button\"\n onClick={() => {\n onChange(\n definition.path,\n applyColorPickerValue(value, colorItem.value),\n );\n setMuiPaletteAnchorElement(null);\n }}\n sx={{\n alignItems: 'center',\n backgroundColor: 'background.paper',\n border: '1px solid',\n borderColor: 'divider',\n borderRadius: 1,\n color: 'text.secondary',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n gap: 0.5,\n justifyContent: 'center',\n minWidth: 0,\n p: 0.5,\n transition: 'background-color 120ms ease, border-color 120ms ease',\n width: '100%',\n '&:hover': {\n backgroundColor: 'action.hover',\n borderColor: 'text.secondary',\n },\n }}\n >\n <Box\n sx={{\n width: 30,\n height: 30,\n borderRadius: 1,\n backgroundColor: colorItem.value,\n border: '1px solid',\n borderColor: 'divider',\n }}\n />\n <Box\n component=\"span\"\n sx={{\n fontSize: '0.75rem',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {colorItem.shade}\n </Box>\n </Box>\n ))}\n </Box>\n </Box>\n </Box>\n ))}\n </div>\n </Popover>\n ) : null}\n </>\n {definition.allowAlpha ? (\n <div className=\"col-span-2 flex flex-col gap-2\">\n <Typography variant=\"caption\" color=\"text.secondary\">\n Current\n </Typography>\n <Typography\n variant=\"caption\"\n color=\"text.secondary\"\n className=\"truncate whitespace-nowrap\"\n >\n {value \|\| '-'}\n </Typography>\n </div>\n ) : null}\n </div>\n ) : (\n <div />\n )}\n </div>\n );\n}\n"],"names":["themePreviewInputUnits","themePreviewMuiColorShades","themePreviewMuiColorPalettes","blue","lightBlue","cyan","teal","green","amber","orange","deepOrange","red","pink","purple","deepPurple","indigo","grey","blueGrey","themePreviewMuiPaletteColorRows","label","palette","acc","shade","paletteValue","THEME_PREVIEW_COLOR_PICKER_APPLY_DELAY_MS","THEME_PREVIEW_SMALL_FIELD_HEIGHT","THEME_PREVIEW_PICKER_SWATCH_HEIGHT","getUnitInputDisplayValue","value","unit","__name","normalizeUnitInputDisplayValue","sanitizedValue","decimalPointIndex","integerPart","decimalPart","normalizeCommittedUnitInputDisplayValue","normalizedValue","normalizeUnitInputValue","getUnitValueFormat","valueFormat","ThemePreviewColorField","disabled","definition","sectionKey","settings","onChange","muiPaletteAnchorElement","setMuiPaletteAnchorElement","useState","getThemePreviewPaletteValue","unitValueFormat","showColorPicker","alphaValue","getColorAlphaValue","helperText","resolvedHelperText","hasOptions","_a","isReadOnlyColorTextInput","displayValue","hasPickerControls","canBufferTextInput","bufferedTextValue","setBufferedTextValue","isBufferedTextInputFocused","setIsBufferedTextInputFocused","bufferedPickerValue","setBufferedPickerValue","toColorPickerValue","isBufferedPickerDirty","setIsBufferedPickerDirty","colorPickerApplyTimeoutRef","useRef","useEffect","commitBufferedTextValue","nextValue","commitBufferedPickerValue","nextPickerValue","applyColorPickerValue","jsxs","jsx","TextField","event","InputAdornment","_b","option","MenuItem","Fragment","Button","Popover","paletteRow","paletteRowIndex","Box","Divider","Typography","colorItem"],"mappings":"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"}
1	+ {"version":3,"file":"ThemePreviewColorField.js","sources":["../../../../src/features/themePreview/components/ThemePreviewColorField.tsx"],"sourcesContent":["import {\n Box,\n Button,\n Divider,\n IconButton,\n InputAdornment,\n MenuItem,\n Popover,\n TextField,\n Typography,\n} from '@mui/material';\nimport RestartAltOutlinedIcon from '@mui/icons-material/RestartAltOutlined';\nimport {\n amber,\n blue,\n blueGrey,\n cyan,\n deepOrange,\n deepPurple,\n green,\n grey,\n indigo,\n lightBlue,\n orange,\n pink,\n purple,\n red,\n teal,\n} from '@mui/material/colors';\nimport type {\n ThemePreviewFieldDefinition,\n ThemePreviewSectionKey,\n ThemePreviewSettings,\n} from '../types';\nimport {\n applyColorPickerValue,\n getColorAlphaValue,\n getThemePreviewPaletteValue,\n toColorPickerValue,\n} from '../utils';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface ThemePreviewColorFieldProps {\n disabled?: boolean;\n definition: ThemePreviewFieldDefinition;\n resetVersion?: number;\n sectionKey: ThemePreviewSectionKey;\n settings: ThemePreviewSettings;\n onChange: (path: string, value: string) => void;\n onReset?: (path: string) => void;\n}\n\nconst themePreviewInputUnits = {\n 'px-number': 'px',\n 'rem-number': 'rem',\n} as const;\n\ntype ThemePreviewInputUnit = (typeof themePreviewInputUnits)[keyof typeof themePreviewInputUnits];\n\nconst themePreviewMuiColorShades = [\n '50',\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n 'A100',\n 'A200',\n 'A400',\n 'A700',\n] as const;\nconst themePreviewMuiColorPalettes = [\n ['Blue', blue],\n ['Light Blue', lightBlue],\n ['Cyan', cyan],\n ['Teal', teal],\n ['Green', green],\n ['Amber', amber],\n ['Orange', orange],\n ['Deep Orange', deepOrange],\n ['Red', red],\n ['Pink', pink],\n ['Purple', purple],\n ['Deep Purple', deepPurple],\n ['Indigo', indigo],\n ['Grey', grey],\n ['Blue Grey', blueGrey],\n] as const;\nconst themePreviewMuiPaletteColorRows = themePreviewMuiColorPalettes.map(([label, palette]) => ({\n label,\n colors: themePreviewMuiColorShades.reduce<Array<{\n key: string;\n shade: string;\n value: string;\n }>>((acc, shade) => {\n const paletteValue = (palette as Record<string, string>)[shade];\n\n if (!paletteValue) {\n return acc;\n }\n\n acc.push({\n key: `${label}-${shade}`,\n shade,\n value: paletteValue,\n });\n\n return acc;\n }, []),\n}));\nconst THEME_PREVIEW_COLOR_PICKER_APPLY_DELAY_MS = 500;\nconst THEME_PREVIEW_SMALL_FIELD_HEIGHT = 32;\nconst THEME_PREVIEW_PICKER_SWATCH_HEIGHT = 20;\n\nfunction getUnitInputDisplayValue(value: string, unit: ThemePreviewInputUnit) {\n return value.replace(new RegExp(`${unit}$`, 'i'), '');\n}\n\nfunction normalizeUnitInputDisplayValue(value: string) {\n const sanitizedValue = value.replace(/[^0-9.,]/g, '').replace(/,/g, '.');\n const decimalPointIndex = sanitizedValue.indexOf('.');\n\n if (decimalPointIndex < 0) {\n return sanitizedValue;\n }\n\n const integerPart = sanitizedValue.slice(0, decimalPointIndex);\n const decimalPart = sanitizedValue.slice(decimalPointIndex + 1).replace(/\\./g, '');\n\n return `${integerPart}.${decimalPart}`;\n}\n\nfunction normalizeCommittedUnitInputDisplayValue(value: string) {\n const normalizedValue = normalizeUnitInputDisplayValue(value);\n\n if (!normalizedValue \|\| normalizedValue === '.') {\n return '';\n }\n\n if (normalizedValue.startsWith('.')) {\n return `0${normalizedValue}`;\n }\n\n if (normalizedValue.endsWith('.')) {\n return normalizedValue.slice(0, -1);\n }\n\n return normalizedValue;\n}\n\nfunction normalizeUnitInputValue(value: string, unit: ThemePreviewInputUnit) {\n const normalizedValue = normalizeCommittedUnitInputDisplayValue(value);\n\n return normalizedValue ? `${normalizedValue}${unit}` : '';\n}\n\nfunction getUnitValueFormat(valueFormat?: ThemePreviewFieldDefinition['valueFormat']) {\n return (valueFormat ? themePreviewInputUnits[valueFormat] : null) ?? null;\n}\n\nexport function ThemePreviewColorField({\n disabled = false,\n definition,\n resetVersion,\n sectionKey,\n settings,\n onChange,\n onReset,\n}: ThemePreviewColorFieldProps) {\n const [muiPaletteAnchorElement, setMuiPaletteAnchorElement] = useState<HTMLElement \| null>(null);\n const value = getThemePreviewPaletteValue(settings, sectionKey, definition.path);\n const unitValueFormat = getUnitValueFormat(definition.valueFormat);\n const showColorPicker = definition.showColorPicker !== false;\n const alphaValue = definition.allowAlpha ? getColorAlphaValue(value) : null;\n const helperText = [definition.description];\n\n if (definition.allowAlpha) {\n helperText.push(\n alphaValue\n ? `알파값은 ${alphaValue}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.`\n : '알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.',\n );\n }\n\n const resolvedHelperText = helperText.filter(Boolean).join(' ');\n const hasOptions = Boolean(definition.options?.length);\n const isReadOnlyColorTextInput = Boolean(\n definition.allowAlpha && showColorPicker && !hasOptions && !unitValueFormat,\n );\n const displayValue =\n unitValueFormat ? getUnitInputDisplayValue(value, unitValueFormat) : value;\n const hasPickerControls = showColorPicker;\n const canBufferTextInput = !hasOptions && !isReadOnlyColorTextInput;\n const [bufferedTextValue, setBufferedTextValue] = useState(displayValue);\n const [isBufferedTextInputFocused, setIsBufferedTextInputFocused] = useState(false);\n const [bufferedPickerValue, setBufferedPickerValue] = useState(toColorPickerValue(value));\n const [isBufferedPickerDirty, setIsBufferedPickerDirty] = useState(false);\n const colorPickerApplyTimeoutRef = useRef<number \| null>(null);\n\n useEffect(() => {\n if (!canBufferTextInput \|\| isBufferedTextInputFocused) {\n return;\n }\n\n setBufferedTextValue(displayValue);\n }, [canBufferTextInput, displayValue, isBufferedTextInputFocused]);\n\n useEffect(() => {\n if (isBufferedPickerDirty) {\n return;\n }\n\n setBufferedPickerValue(toColorPickerValue(value));\n }, [isBufferedPickerDirty, value]);\n\n useEffect(() => {\n return () => {\n if (!colorPickerApplyTimeoutRef.current) {\n return;\n }\n\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n };\n }, []);\n\n useEffect(() => {\n if (typeof resetVersion === 'undefined') {\n return;\n }\n\n if (colorPickerApplyTimeoutRef.current) {\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n colorPickerApplyTimeoutRef.current = null;\n }\n\n setBufferedTextValue(displayValue);\n setIsBufferedTextInputFocused(false);\n setBufferedPickerValue(toColorPickerValue(value));\n setIsBufferedPickerDirty(false);\n }, [resetVersion]);\n\n const commitBufferedTextValue = (nextValue: string) => {\n onChange(\n definition.path,\n unitValueFormat ? normalizeUnitInputValue(nextValue, unitValueFormat) : nextValue,\n );\n };\n const commitBufferedPickerValue = (nextPickerValue: string) => {\n if (colorPickerApplyTimeoutRef.current) {\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n colorPickerApplyTimeoutRef.current = null;\n }\n\n setIsBufferedPickerDirty(false);\n onChange(definition.path, applyColorPickerValue(value, nextPickerValue));\n };\n const inputEndAdornment = onReset \|\| unitValueFormat ? (\n <InputAdornment position=\"end\">\n <div className=\"flex items-center gap-2\">\n {onReset ? (\n <IconButton\n size=\"small\"\n aria-label={`${definition.label} reset`}\n disabled={disabled}\n edge=\"end\"\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n onClick={() => {\n onReset(definition.path);\n }}\n sx={{\n border: '1px solid #cbd5e1',\n borderRadius: 1,\n color: '#6b7280',\n p: 0.25,\n }}\n >\n <RestartAltOutlinedIcon sx={{ fontSize: 16 }} />\n </IconButton>\n ) : null}\n {unitValueFormat ? <Typography variant=\"body2\">{unitValueFormat}</Typography> : null}\n </div>\n </InputAdornment>\n ) : undefined;\n\n return (\n <div className=\"grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12\">\n <TextField\n select={hasOptions}\n label={definition.label}\n size=\"small\"\n value={canBufferTextInput ? bufferedTextValue : displayValue}\n disabled={disabled}\n onChange={(event) => {\n if (isReadOnlyColorTextInput) {\n return;\n }\n\n const nextValue = unitValueFormat\n ? normalizeUnitInputDisplayValue(event.target.value)\n : event.target.value;\n\n if (canBufferTextInput) {\n setBufferedTextValue(nextValue);\n return;\n }\n\n onChange(definition.path, nextValue);\n }}\n onFocus={() => {\n if (!canBufferTextInput) {\n return;\n }\n\n setIsBufferedTextInputFocused(true);\n }}\n onBlur={() => {\n if (!canBufferTextInput) {\n return;\n }\n\n setIsBufferedTextInputFocused(false);\n commitBufferedTextValue(bufferedTextValue);\n }}\n onKeyDown={(event) => {\n if (!canBufferTextInput \|\| event.key !== 'Enter') {\n return;\n }\n\n event.preventDefault();\n setIsBufferedTextInputFocused(false);\n commitBufferedTextValue(bufferedTextValue);\n event.currentTarget.blur();\n }}\n helperText={resolvedHelperText}\n slotProps={{\n htmlInput:\n {\n ...(unitValueFormat\n ? {\n inputMode: 'decimal',\n }\n : {}),\n ...(isReadOnlyColorTextInput\n ? {\n readOnly: true,\n }\n : {}),\n },\n input:\n {\n ...(inputEndAdornment\n ? {\n endAdornment: inputEndAdornment,\n }\n : {}),\n },\n }}\n >\n {definition.options?.map((option) => (\n <MenuItem key={option.value} value={option.value}>\n {option.label}\n </MenuItem>\n ))}\n </TextField>\n\n {hasPickerControls ? (\n <div className=\"grid grid-cols-2 gap-6\">\n <>\n <Button\n size=\"small\"\n fullWidth\n variant=\"outlined\"\n disabled={disabled}\n sx={{\n fontSize: '1.2rem',\n height: THEME_PREVIEW_SMALL_FIELD_HEIGHT,\n minWidth: 0,\n }}\n onClick={(event) => {\n setMuiPaletteAnchorElement(event.currentTarget);\n }}\n >\n MUI\n </Button>\n <TextField\n hiddenLabel\n type=\"color\"\n size=\"small\"\n value={bufferedPickerValue}\n disabled={disabled}\n onChange={(event) => {\n const nextPickerValue = event.target.value;\n\n setBufferedPickerValue(nextPickerValue);\n setIsBufferedPickerDirty(true);\n\n if (colorPickerApplyTimeoutRef.current) {\n window.clearTimeout(colorPickerApplyTimeoutRef.current);\n }\n\n colorPickerApplyTimeoutRef.current = window.setTimeout(() => {\n commitBufferedPickerValue(nextPickerValue);\n }, THEME_PREVIEW_COLOR_PICKER_APPLY_DELAY_MS);\n }}\n onBlur={() => {\n if (!isBufferedPickerDirty) {\n return;\n }\n\n commitBufferedPickerValue(bufferedPickerValue);\n }}\n slotProps={{\n htmlInput: {\n 'aria-label': 'Pick color',\n },\n }}\n sx={{\n '& .MuiOutlinedInput-root': {\n height: THEME_PREVIEW_SMALL_FIELD_HEIGHT,\n px: 0.5,\n },\n '& input[type=\"color\"]': {\n WebkitAppearance: 'none',\n alignSelf: 'center',\n boxSizing: 'border-box',\n border: 0,\n borderRadius: 0,\n display: 'block',\n height: THEME_PREVIEW_PICKER_SWATCH_HEIGHT,\n minHeight: THEME_PREVIEW_PICKER_SWATCH_HEIGHT,\n overflow: 'hidden',\n padding: 0,\n p: 0,\n width: '100%',\n },\n '& input[type=\"color\"]::-webkit-color-swatch-wrapper': {\n borderRadius: 0,\n p: 0,\n },\n '& input[type=\"color\"]::-webkit-color-swatch': {\n borderColor: '#94a3b8',\n borderRadius: 0,\n },\n '& input[type=\"color\"]::-moz-color-swatch': {\n borderColor: '#94a3b8',\n borderRadius: 0,\n },\n }}\n />\n {muiPaletteAnchorElement ? (\n <Popover\n open\n anchorEl={muiPaletteAnchorElement}\n transitionDuration={0}\n onClose={() => {\n setMuiPaletteAnchorElement(null);\n }}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n slotProps={{\n paper: {\n sx: {\n maxHeight: 'calc(100vh - 32px)',\n maxWidth: 'calc(100vw - 32px)',\n minWidth: 320,\n overflow: 'auto',\n p: 1.5,\n width: 'min(760px, calc(100vw - 32px))',\n },\n },\n }}\n >\n <div className=\"flex min-w-0 flex-col gap-10\">\n {themePreviewMuiPaletteColorRows.map((paletteRow, paletteRowIndex) => (\n <Box key={paletteRow.label} className=\"flex flex-col gap-10\">\n {paletteRowIndex > 0 ? <Divider flexItem /> : null}\n <Box\n sx={{\n display: 'grid',\n gap: 1,\n gridTemplateColumns: {\n xs: 'minmax(0, 1fr)',\n sm: '84px minmax(0, 1fr)',\n },\n }}\n >\n <Typography variant=\"caption\" color=\"text.secondary\">\n {paletteRow.label}\n </Typography>\n <Box\n sx={{\n display: 'grid',\n gap: 0.75,\n gridTemplateColumns: 'repeat(auto-fit, minmax(68px, 1fr))',\n minWidth: 0,\n }}\n >\n {paletteRow.colors.map((colorItem) => (\n <Box\n key={colorItem.key}\n component=\"button\"\n type=\"button\"\n onClick={() => {\n onChange(\n definition.path,\n applyColorPickerValue(value, colorItem.value),\n );\n setMuiPaletteAnchorElement(null);\n }}\n sx={{\n alignItems: 'center',\n backgroundColor: 'background.paper',\n border: '1px solid',\n borderColor: 'divider',\n borderRadius: 1,\n color: 'text.secondary',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n gap: 0.5,\n justifyContent: 'center',\n minWidth: 0,\n p: 0.5,\n transition: 'background-color 120ms ease, border-color 120ms ease',\n width: '100%',\n '&:hover': {\n backgroundColor: 'action.hover',\n borderColor: 'text.secondary',\n },\n }}\n >\n <Box\n sx={{\n width: 30,\n height: 30,\n borderRadius: 1,\n backgroundColor: colorItem.value,\n border: '1px solid',\n borderColor: 'divider',\n }}\n />\n <Box\n component=\"span\"\n sx={{\n fontSize: '0.75rem',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {colorItem.shade}\n </Box>\n </Box>\n ))}\n </Box>\n </Box>\n </Box>\n ))}\n </div>\n </Popover>\n ) : null}\n </>\n {definition.allowAlpha ? (\n <div className=\"col-span-2 flex flex-col gap-2\">\n <Typography variant=\"caption\" color=\"text.secondary\">\n Current\n </Typography>\n <Typography\n variant=\"caption\"\n color=\"text.secondary\"\n className=\"truncate whitespace-nowrap\"\n >\n {value \|\| '-'}\n </Typography>\n </div>\n ) : null}\n </div>\n ) : (\n <div />\n )}\n </div>\n );\n}\n"],"names":["themePreviewInputUnits","themePreviewMuiColorShades","themePreviewMuiColorPalettes","blue","lightBlue","cyan","teal","green","amber","orange","deepOrange","red","pink","purple","deepPurple","indigo","grey","blueGrey","themePreviewMuiPaletteColorRows","label","palette","acc","shade","paletteValue","THEME_PREVIEW_COLOR_PICKER_APPLY_DELAY_MS","THEME_PREVIEW_SMALL_FIELD_HEIGHT","THEME_PREVIEW_PICKER_SWATCH_HEIGHT","getUnitInputDisplayValue","value","unit","__name","normalizeUnitInputDisplayValue","sanitizedValue","decimalPointIndex","integerPart","decimalPart","normalizeCommittedUnitInputDisplayValue","normalizedValue","normalizeUnitInputValue","getUnitValueFormat","valueFormat","ThemePreviewColorField","disabled","definition","resetVersion","sectionKey","settings","onChange","onReset","muiPaletteAnchorElement","setMuiPaletteAnchorElement","useState","getThemePreviewPaletteValue","unitValueFormat","showColorPicker","alphaValue","getColorAlphaValue","helperText","resolvedHelperText","hasOptions","_a","isReadOnlyColorTextInput","displayValue","hasPickerControls","canBufferTextInput","bufferedTextValue","setBufferedTextValue","isBufferedTextInputFocused","setIsBufferedTextInputFocused","bufferedPickerValue","setBufferedPickerValue","toColorPickerValue","isBufferedPickerDirty","setIsBufferedPickerDirty","colorPickerApplyTimeoutRef","useRef","useEffect","commitBufferedTextValue","nextValue","commitBufferedPickerValue","nextPickerValue","applyColorPickerValue","inputEndAdornment","jsx","InputAdornment","jsxs","IconButton","event","RestartAltOutlinedIcon","Typography","TextField","_b","option","MenuItem","Fragment","Button","Popover","paletteRow","paletteRowIndex","Box","Divider","colorItem"],"mappings":"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"}