@strapi/plugin-color-picker 0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c → 0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d

package/dist/admin/translations/zh.json.mjs

@@ -0,0 +1,15 @@
+var zh = {
+    "color-picker.description": "選擇任意顏色",
+    "color-picker.input.aria-label": "選色器輸入",
+    "color-picker.input.format": "HEX",
+    "color-picker.label": "顏色",
+    "color-picker.options.advanced.regex": "正則表達模式",
+    "color-picker.options.advanced.regex.description": "提供正則表達式以驗證 HEX 值",
+    "color-picker.options.advanced.requiredField": "必填欄位",
+    "color-picker.options.advanced.requiredField.description": "若此欄位為空，您將無法建立項目",
+    "color-picker.settings": "設定",
+    "color-picker.toggle.aria-label": "選色器開關"
+};
+
+export { zh as default };
+//# sourceMappingURL=zh.json.mjs.map

package/dist/admin/translations/zh.json.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zh.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/admin/utils/getTrad.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var pluginId = require('../pluginId.js');
+
+const getTrad = (id)=>`${pluginId.pluginId}.${id}`;
+
+exports.getTrad = getTrad;
+//# sourceMappingURL=getTrad.js.map

package/dist/admin/utils/getTrad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTrad.js","sources":["../../../admin/src/utils/getTrad.ts"],"sourcesContent":["import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n"],"names":["getTrad","id","pluginId"],"mappings":";;;;AAEO,MAAMA,OAAU,GAAA,CAACC,EAAe,GAAA,CAAC,EAAEC,iBAAAA,CAAS,CAAC,EAAED,EAAG,CAAA;;;;"}

package/dist/admin/utils/getTrad.mjs

@@ -0,0 +1,6 @@
+import { pluginId } from '../pluginId.mjs';
+
+const getTrad = (id)=>`${pluginId}.${id}`;
+
+export { getTrad };
+//# sourceMappingURL=getTrad.mjs.map

package/dist/admin/utils/getTrad.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTrad.mjs","sources":["../../../admin/src/utils/getTrad.ts"],"sourcesContent":["import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n"],"names":["getTrad","id","pluginId"],"mappings":";;AAEO,MAAMA,OAAU,GAAA,CAACC,EAAe,GAAA,CAAC,EAAEC,QAAAA,CAAS,CAAC,EAAED,EAAG,CAAA;;;;"}

package/dist/admin/utils/prefixPluginTranslations.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const prefixPluginTranslations = (trad, pluginId)=>{
+    return Object.keys(trad).reduce((acc, current)=>{
+        acc[`${pluginId}.${current}`] = trad[current];
+        return acc;
+    }, {});
+};
+
+exports.prefixPluginTranslations = prefixPluginTranslations;
+//# sourceMappingURL=prefixPluginTranslations.js.map

package/dist/admin/utils/prefixPluginTranslations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefixPluginTranslations.js","sources":["../../../admin/src/utils/prefixPluginTranslations.ts"],"sourcesContent":["type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n  if (!pluginId) {\n    throw new TypeError(\"pluginId can't be empty\");\n  }\n  return Object.keys(trad).reduce((acc, current) => {\n    acc[`${pluginId}.${current}`] = trad[current];\n    return acc;\n  }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n"],"names":["prefixPluginTranslations","trad","pluginId","Object","keys","reduce","acc","current"],"mappings":";;AAEMA,MAAAA,wBAAAA,GAA2B,CAACC,IAAmBC,EAAAA,QAAAA,GAAAA;AAInD,IAAA,OAAOC,OAAOC,IAAI,CAACH,MAAMI,MAAM,CAAC,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;AACpCD,QAAAA,GAAG,CAAC,CAAC,EAAEJ,QAAAA,CAAS,CAAC,EAAEK,OAAQ,CAAA,CAAC,CAAC,GAAGN,IAAI,CAACM,OAAQ,CAAA;QAC7C,OAAOD,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AACN;;;;"}

package/dist/admin/utils/prefixPluginTranslations.mjs

@@ -0,0 +1,9 @@
+const prefixPluginTranslations = (trad, pluginId)=>{
+    return Object.keys(trad).reduce((acc, current)=>{
+        acc[`${pluginId}.${current}`] = trad[current];
+        return acc;
+    }, {});
+};
+
+export { prefixPluginTranslations };
+//# sourceMappingURL=prefixPluginTranslations.mjs.map

package/dist/admin/utils/prefixPluginTranslations.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefixPluginTranslations.mjs","sources":["../../../admin/src/utils/prefixPluginTranslations.ts"],"sourcesContent":["type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n  if (!pluginId) {\n    throw new TypeError(\"pluginId can't be empty\");\n  }\n  return Object.keys(trad).reduce((acc, current) => {\n    acc[`${pluginId}.${current}`] = trad[current];\n    return acc;\n  }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n"],"names":["prefixPluginTranslations","trad","pluginId","Object","keys","reduce","acc","current"],"mappings":"AAEMA,MAAAA,wBAAAA,GAA2B,CAACC,IAAmBC,EAAAA,QAAAA,GAAAA;AAInD,IAAA,OAAOC,OAAOC,IAAI,CAACH,MAAMI,MAAM,CAAC,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;AACpCD,QAAAA,GAAG,CAAC,CAAC,EAAEJ,QAAAA,CAAS,CAAC,EAAEK,OAAQ,CAAA,CAAC,CAAC,GAAGN,IAAI,CAACM,OAAQ,CAAA;QAC7C,OAAOD,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AACN;;;;"}

package/dist/server/index.js

@@ -1,13 +1,10 @@
-"use strict";
-const register = ({ strapi }) => {
-  strapi.customFields.register({
-    name: "color",
-    plugin: "color-picker",
-    type: "string"
-  });
-};
-const index = {
-  register
+'use strict';
+
+var register = require('./register.js');
+
+var index = {
+    register: register.register
 };
+
 module.exports = index;
 //# sourceMappingURL=index.js.map

package/dist/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../server/src/register.ts","../../server/src/index.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n  strapi.customFields.register({\n    name: 'color',\n    plugin: 'color-picker',\n    type: 'string',\n  });\n};\n","import { register } from './register';\n\nexport default {\n  register,\n};\n"],"names":[],"mappings":";AAAO,MAAM,WAAW,CAAC,EAAE,aAAkB;AAC3C,SAAO,aAAa,SAAS;AAAA,IAC3B,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA,CACP;AACH;ACJA,MAAe,QAAA;AAAA,EACb;AACF;;"}
+{"version":3,"file":"index.js","sources":["../../server/src/index.ts"],"sourcesContent":["import { register } from './register';\n\nexport default {\n  register,\n};\n"],"names":["register"],"mappings":";;;;AAEA,YAAe;AACbA,cAAAA;AACF,CAAE;;;;"}

package/dist/server/index.mjs

@@ -1,14 +1,8 @@
-const register = ({ strapi }) => {
-  strapi.customFields.register({
-    name: "color",
-    plugin: "color-picker",
-    type: "string"
-  });
-};
-const index = {
-  register
-};
-export {
-  index as default
+import { register } from './register.mjs';
+
+var index = {
+    register
 };
+
+export { index as default };
 //# sourceMappingURL=index.mjs.map

package/dist/server/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../server/src/register.ts","../../server/src/index.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n  strapi.customFields.register({\n    name: 'color',\n    plugin: 'color-picker',\n    type: 'string',\n  });\n};\n","import { register } from './register';\n\nexport default {\n  register,\n};\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,CAAC,EAAE,aAAkB;AAC3C,SAAO,aAAa,SAAS;AAAA,IAC3B,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA,CACP;AACH;ACJA,MAAe,QAAA;AAAA,EACb;AACF;"}
+{"version":3,"file":"index.mjs","sources":["../../server/src/index.ts"],"sourcesContent":["import { register } from './register';\n\nexport default {\n  register,\n};\n"],"names":["register"],"mappings":";;AAEA,YAAe;AACbA,IAAAA;AACF,CAAE;;;;"}

package/dist/server/register.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const register = ({ strapi })=>{
+    strapi.customFields.register({
+        name: 'color',
+        plugin: 'color-picker',
+        type: 'string'
+    });
+};
+
+exports.register = register;
+//# sourceMappingURL=register.js.map

package/dist/server/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sources":["../../server/src/register.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n  strapi.customFields.register({\n    name: 'color',\n    plugin: 'color-picker',\n    type: 'string',\n  });\n};\n"],"names":["register","strapi","customFields","name","plugin","type"],"mappings":";;AAAaA,MAAAA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAO,GAAA;IACtCA,MAAOC,CAAAA,YAAY,CAACF,QAAQ,CAAC;QAC3BG,IAAM,EAAA,OAAA;QACNC,MAAQ,EAAA,cAAA;QACRC,IAAM,EAAA;AACR,KAAA,CAAA;AACF;;;;"}

package/dist/server/register.mjs

@@ -0,0 +1,10 @@
+const register = ({ strapi })=>{
+    strapi.customFields.register({
+        name: 'color',
+        plugin: 'color-picker',
+        type: 'string'
+    });
+};
+
+export { register };
+//# sourceMappingURL=register.mjs.map

package/dist/server/register.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.mjs","sources":["../../server/src/register.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n  strapi.customFields.register({\n    name: 'color',\n    plugin: 'color-picker',\n    type: 'string',\n  });\n};\n"],"names":["register","strapi","customFields","name","plugin","type"],"mappings":"AAAaA,MAAAA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAO,GAAA;IACtCA,MAAOC,CAAAA,YAAY,CAACF,QAAQ,CAAC;QAC3BG,IAAM,EAAA,OAAA;QACNC,MAAQ,EAAA,cAAA;QACRC,IAAM,EAAA;AACR,KAAA,CAAA;AACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-color-picker",
-  "version": "0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c",
+  "version": "0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d",
   "description": "Strapi maintained Custom Fields",
   "repository": {
     "type": "git",
@@ -38,11 +38,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "./dist",
+    "dist/",
     "strapi-server.js"
   ],
   "scripts": {
-    "build": "strapi plugin:build --force",
+    "build": "run -T npm-run-all clean --parallel build:code build:types",
+    "build:code": "run -T rollup -c",
+    "build:types": "run -T run-p build:types:server build:types:admin",
+    "build:types:server": "run -T tsc -p server/tsconfig.build.json --emitDeclarationOnly",
+    "build:types:admin": "run -T tsc -p admin/tsconfig.build.json --emitDeclarationOnly",
     "clean": "run -T rimraf ./dist",
     "lint": "run -T eslint .",
     "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
@@ -50,36 +54,33 @@
     "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
     "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
     "test:ts:front": "run -T tsc -p admin/tsconfig.json",
-    "watch": "strapi plugin:watch"
+    "watch": "run -T rollup -c -w"
   },
   "dependencies": {
-    "@strapi/design-system": "1.14.1",
-    "@strapi/helper-plugin": "0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c",
-    "@strapi/icons": "1.14.1",
-    "prop-types": "^15.8.1",
+    "@strapi/design-system": "2.0.0-rc.23",
+    "@strapi/icons": "2.0.0-rc.23",
     "react-colorful": "5.6.1",
-    "react-intl": "6.4.1"
+    "react-intl": "6.6.2"
   },
   "devDependencies": {
-    "@strapi/strapi": "0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/styled-components": "5.1.32",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "5.3.4",
-    "styled-components": "5.3.3",
-    "typescript": "5.2.2"
+    "@strapi/strapi": "0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d",
+    "@testing-library/react": "15.0.7",
+    "@testing-library/user-event": "14.5.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.22.3",
+    "styled-components": "6.1.8",
+    "typescript": "5.4.4"
   },
   "peerDependencies": {
-    "@strapi/strapi": "^4.4.0",
+    "@strapi/strapi": "^5.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^5.2.0",
-    "styled-components": "^5.2.1"
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
   },
   "engines": {
-    "node": ">=18.0.0 <=20.x.x",
+    "node": ">=18.0.0 <=22.x.x",
     "npm": ">=6.0.0"
   },
   "strapi": {
@@ -87,6 +88,5 @@
     "description": "Color picker custom field",
     "kind": "plugin",
     "displayName": "Color Picker"
-  },
-  "gitHead": "f8af92b375dc730ba47ed2117f25df893aae696c"
+  }
 }

package/dist/_chunks/ColorPickerInput-0lOoTrf0.js

@@ -1,206 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const designSystem = require("@strapi/design-system");
-const icons = require("@strapi/icons");
-const reactColorful = require("react-colorful");
-const reactIntl = require("react-intl");
-const styled = require("styled-components");
-const index = require("./index-OJYEuoCq.js");
-require("@strapi/helper-plugin");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespace(React);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => refs.forEach((ref) => setRef(ref, node));
-}
-function useComposedRefs(...refs) {
-  return React__namespace.useCallback(composeRefs(...refs), refs);
-}
-const ColorPreview = styled__default.default.div`
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  background-color: ${(props) => props.color};
-  border: 1px solid rgba(0, 0, 0, 0.1);
-`;
-const ColorPicker = styled__default.default(reactColorful.HexColorPicker)`
-  && {
-    width: 100%;
-    aspect-ratio: 1.5;
-  }
-
-  .react-colorful__pointer {
-    width: ${({ theme }) => theme.spaces[3]};
-    height: ${({ theme }) => theme.spaces[3]};
-  }
-
-  .react-colorful__saturation {
-    border-radius: ${({ theme }) => theme.spaces[1]};
-    border-bottom: none;
-  }
-
-  .react-colorful__hue {
-    border-radius: 10px;
-    height: ${({ theme }) => theme.spaces[3]};
-    margin-top: ${({ theme }) => theme.spaces[2]};
-  }
-`;
-const ColorPickerToggle = styled__default.default(designSystem.BaseButton)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  svg {
-    width: ${({ theme }) => theme.spaces[2]};
-    height: ${({ theme }) => theme.spaces[2]};
-  }
-
-  svg > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-    justify-self: flex-end;
-  }
-`;
-const ColorPickerPopover = styled__default.default(designSystem.Popover)`
-  padding: ${({ theme }) => theme.spaces[2]};
-  min-height: 270px;
-`;
-const ColorPickerInput = React__namespace.forwardRef(
-  ({
-    attribute,
-    description,
-    disabled = false,
-    error,
-    intlLabel,
-    labelAction,
-    name,
-    onChange,
-    required = false,
-    value = ""
-  }, forwardedRef) => {
-    const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
-    const colorPickerButtonRef = React__namespace.useRef(null);
-    const { formatMessage } = reactIntl.useIntl();
-    const color = value || "#000000";
-    const handleBlur = (e) => {
-      e.preventDefault();
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        setShowColorPicker(false);
-      }
-    };
-    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Field,
-      {
-        name,
-        id: name,
-        error,
-        hint: description && formatMessage(description),
-        required,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ColorPickerToggle,
-            {
-              ref: composedRefs,
-              "aria-label": formatMessage({
-                id: index.getTrad("color-picker.toggle.aria-label"),
-                defaultMessage: "Color picker toggle"
-              }),
-              "aria-controls": "color-picker-value",
-              "aria-haspopup": "dialog",
-              "aria-expanded": showColorPicker,
-              "aria-disabled": disabled,
-              disabled,
-              onClick: () => setShowColorPicker(!showColorPicker),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ColorPreview, { color }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Typography,
-                    {
-                      style: { textTransform: "uppercase" },
-                      textColor: value ? void 0 : "neutral600",
-                      variant: "omega",
-                      children: color
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true })
-              ]
-            }
-          ),
-          showColorPicker && /* @__PURE__ */ jsxRuntime.jsx(
-            ColorPickerPopover,
-            {
-              onBlur: handleBlur,
-              role: "dialog",
-              source: colorPickerButtonRef,
-              spacing: 4,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ColorPicker,
-                  {
-                    color,
-                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
-                    id: index.getTrad("color-picker.input.format"),
-                    defaultMessage: "HEX"
-                  }) }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.FieldInput,
-                    {
-                      id: "color-picker-value",
-                      "aria-label": formatMessage({
-                        id: index.getTrad("color-picker.input.aria-label"),
-                        defaultMessage: "Color picker input"
-                      }),
-                      style: { textTransform: "uppercase" },
-                      value,
-                      placeholder: "#000000",
-                      onChange
-                    }
-                  )
-                ] })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
-        ] })
-      }
-    );
-  }
-);
-exports.ColorPickerInput = ColorPickerInput;
-//# sourceMappingURL=ColorPickerInput-0lOoTrf0.js.map

package/dist/_chunks/ColorPickerInput-0lOoTrf0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerInput-0lOoTrf0.js","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    (ref as React.MutableRefObject<T>).current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n  return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n *  const ref = useComposedRefs(internalRef, forwardedRef);\n *\n *  React.useEffect(() => {\n *   ref.current.focus();\n *  }, [ref]);\n *\n *  return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n  BaseButton,\n  Box,\n  Field,\n  FieldError,\n  FieldHint,\n  FieldInput,\n  FieldLabel,\n  Flex,\n  FocusTrap,\n  Popover,\n  Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  margin-right: 10px;\n  background-color: ${(props) => props.color};\n  border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n  && {\n    width: 100%;\n    aspect-ratio: 1.5;\n  }\n\n  .react-colorful__pointer {\n    width: ${({ theme }) => theme.spaces[3]};\n    height: ${({ theme }) => theme.spaces[3]};\n  }\n\n  .react-colorful__saturation {\n    border-radius: ${({ theme }) => theme.spaces[1]};\n    border-bottom: none;\n  }\n\n  .react-colorful__hue {\n    border-radius: 10px;\n    height: ${({ theme }) => theme.spaces[3]};\n    margin-top: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  svg {\n    width: ${({ theme }) => theme.spaces[2]};\n    height: ${({ theme }) => theme.spaces[2]};\n  }\n\n  svg > path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n    justify-self: flex-end;\n  }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n  padding: ${({ theme }) => theme.spaces[2]};\n  min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n  intlLabel: MessageDescriptor;\n  /**\n   * TODO: this should be extended from `FieldInputProps['onChange']\n   * but that conflicts with it's secondary usage in `HexColorPicker`\n   */\n  onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n  attribute: { type: string; [key: string]: unknown };\n  name: string;\n  description?: MessageDescriptor;\n  disabled?: boolean;\n  error?: string;\n  labelAction?: React.ReactNode;\n  required?: boolean;\n  value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n  (\n    {\n      attribute,\n      description,\n      disabled = false,\n      error,\n      intlLabel,\n      labelAction,\n      name,\n      onChange,\n      required = false,\n      value = '',\n    },\n    forwardedRef\n  ) => {\n    const [showColorPicker, setShowColorPicker] = React.useState(false);\n    const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n    const { formatMessage } = useIntl();\n    const color = value || '#000000';\n\n    const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n      e.preventDefault();\n\n      if (!e.currentTarget.contains(e.relatedTarget)) {\n        setShowColorPicker(false);\n      }\n    };\n\n    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n    return (\n      <Field\n        name={name}\n        id={name}\n        // GenericInput calls formatMessage and returns a string for the error\n        error={error}\n        hint={description && formatMessage(description)}\n        required={required}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n          <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n          <ColorPickerToggle\n            ref={composedRefs}\n            aria-label={formatMessage({\n              id: getTrad('color-picker.toggle.aria-label'),\n              defaultMessage: 'Color picker toggle',\n            })}\n            aria-controls=\"color-picker-value\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={showColorPicker}\n            aria-disabled={disabled}\n            disabled={disabled}\n            onClick={() => setShowColorPicker(!showColorPicker)}\n          >\n            <Flex>\n              <ColorPreview color={color} />\n              <Typography\n                style={{ textTransform: 'uppercase' }}\n                textColor={value ? undefined : 'neutral600'}\n                variant=\"omega\"\n              >\n                {color}\n              </Typography>\n            </Flex>\n            <CarretDown aria-hidden />\n          </ColorPickerToggle>\n          {showColorPicker && (\n            <ColorPickerPopover\n              onBlur={handleBlur}\n              role=\"dialog\"\n              source={colorPickerButtonRef}\n              spacing={4}\n            >\n              <FocusTrap onEscape={() => setShowColorPicker(false)}>\n                <ColorPicker\n                  color={color}\n                  onChange={(hexValue) =>\n                    onChange({ target: { name, value: hexValue, type: attribute.type } })\n                  }\n                />\n                <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n                  <Box paddingRight={2}>\n                    <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n                      {formatMessage({\n                        id: getTrad('color-picker.input.format'),\n                        defaultMessage: 'HEX',\n                      })}\n                    </Typography>\n                  </Box>\n                  <FieldInput\n                    id=\"color-picker-value\"\n                    aria-label={formatMessage({\n                      id: getTrad('color-picker.input.aria-label'),\n                      defaultMessage: 'Color picker input',\n                    })}\n                    style={{ textTransform: 'uppercase' }}\n                    value={value}\n                    placeholder=\"#000000\"\n                    onChange={onChange}\n                  />\n                </Flex>\n              </FocusTrap>\n            </ColorPickerPopover>\n          )}\n          <FieldHint />\n          <FieldError />\n        </Flex>\n      </Field>\n    );\n  }\n);\n"],"names":["React","styled","HexColorPicker","BaseButton","Popover","useIntl","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}