@strapi/plugin-color-picker 0.0.0-next.fb3a0b82484ce466b1efb1b28f16fc8ef73aba4a → 0.0.0-next.fe88c7878fe2948cfdc68f4867329c1032a618b2

package/LICENSE

@@ -1,15 +1,37 @@
 Copyright (c) 2015-present Strapi Solutions SAS
- 
+
 Portions of the Strapi software are licensed as follows:
- 
-* If you are accessing or using any component of the software that resides under an "ee/" directory, then you are deemed to be using our “Enterprise Edition” of the software and you understand and agree that the software is not licensed under the "MIT Expat" license as set forth below but instead, all the software you access is licensed under the license defined in "strapi/packages/core/admin/ee/LICENSE" and located at https://github.com/strapi/strapi/blob/a76b557047e9ef1c168dbf1b6cf879bcc3022de6/packages/core/admin/ee/LICENSE, unless (a) you or the company you represent has signed an alternative agreement referencing this code, then such signed agreement applies or (b) you are using the software in connection with a subscription to our cloud offering, then the terms of the agreement relevant to the cloud offering which you have assented to apply and the software licenses included in that agreement shall apply.
- 
-* If (a) you are not accessing or using the software that resides under an “ee/” directory and therefore you are only accessing or using our “Community Edition” of the Software and (b) you have no registered account on our cloud offering, then we are providing you the software under the "MIT Expat" license as set forth below.
- 
+
+* All software that resides under an "ee/" directory (the “EE Software”), if that directory exists, is licensed under the license defined below.
+
+Enterprise License
+
+If you or the company you represent has entered into a written agreement referencing the Enterprise Edition of the Strapi source code available at
+https://github.com/strapi/strapi, then such agreement applies to your use of the Enterprise Edition of the Strapi Software. If you or the company you
+represent is using the Enterprise Edition of the Strapi Software in connection with a subscription to our cloud offering, then the agreement you have
+agreed to with respect to our cloud offering and the licenses included in such agreement apply to your use of the Enterprise Edition of the Strapi Software.
+Otherwise, the Strapi Enterprise Software License Agreement (found here https://strapi.io/enterprise-terms) applies to your use of the Enterprise Edition of the Strapi Software.
+
+BY ACCESSING OR USING THE ENTERPRISE EDITION OF THE STRAPI SOFTWARE, YOU ARE AGREEING TO BE BOUND BY THE RELEVANT REFERENCED AGREEMENT.
+IF YOU ARE NOT AUTHORIZED TO ACCEPT THESE TERMS ON BEHALF OF THE COMPANY YOU REPRESENT OR IF YOU DO NOT AGREE TO ALL OF THE RELEVANT TERMS AND CONDITIONS REFERENCED AND YOU
+HAVE NOT OTHERWISE EXECUTED A WRITTEN AGREEMENT WITH STRAPI, YOU ARE NOT AUTHORIZED TO ACCESS OR USE OR ALLOW ANY USER TO ACCESS OR USE ANY PART OF
+THE ENTERPRISE EDITION OF THE STRAPI SOFTWARE.  YOUR ACCESS RIGHTS ARE CONDITIONAL ON YOUR CONSENT TO THE RELEVANT REFERENCED TERMS TO THE EXCLUSION OF ALL OTHER TERMS;
+IF THE RELEVANT REFERENCED TERMS ARE CONSIDERED AN OFFER BY YOU, ACCEPTANCE IS EXPRESSLY LIMITED TO THE RELEVANT REFERENCED TERMS.
+
+* All software outside of the above-mentioned directories or restrictions above is available under the "MIT Expat" license as set forth below.
+
 MIT Expat License
- 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

@@ -0,0 +1,206 @@
+"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-1e9c7a15.js.map → ColorPickerInput-0lOoTrf0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerInput-1e9c7a15.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":["setRef","ref","value","composeRefs","refs","node","useComposedRefs","React","ColorPreview","styled","props","ColorPicker","HexColorPicker","theme","ColorPickerToggle","BaseButton","ColorPickerPopover","Popover","ColorPickerInput","attribute","description","disabled","error","intlLabel","labelAction","name","onChange","required","forwardedRef","showColorPicker","setShowColorPicker","colorPickerButtonRef","formatMessage","useIntl","color","handleBlur","e","composedRefs","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","hexValue","Box","FieldInput","FieldHint","FieldError"],"mappings":"slBAQA,SAASA,EAAUC,EAAqBC,EAAU,CAC5C,OAAOD,GAAQ,WACjBA,EAAIC,CAAK,EACAD,GAAQ,OAChBA,EAAkC,QAAUC,EAEjD,CAMA,SAASC,KAAkBC,EAAwB,CAC1C,OAACC,GAAYD,EAAK,QAASH,GAAQD,EAAOC,EAAKI,CAAI,CAAC,CAC7D,CAsBA,SAASC,KAAsBF,EAAwB,CAErD,OAAOG,EAAM,YAAYJ,EAAY,GAAGC,CAAI,EAAGA,CAAI,CACrD,CCxBA,MAAMI,EAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKLC,GAAUA,EAAM,KAAK;AAAA;AAAA,EAItCC,EAAcF,EAAOG,EAAAA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO5B,CAAC,CAAE,MAAAC,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,CAAE,MAAAA,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,qBAIvB,CAAC,CAAE,MAAAA,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMrC,CAAC,CAAE,MAAAA,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA,kBAC1B,CAAC,CAAE,MAAAA,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA;AAAA,EAI1CC,EAAoBL,EAAOM,EAAAA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAM9B,CAAC,CAAE,MAAAF,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,CAAE,MAAAA,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,YAIhC,CAAC,CAAE,MAAAA,CAAA,IAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,EAK5CG,EAAqBP,EAAOQ,EAAAA,OAAO;AAAA,aAC5B,CAAC,CAAE,MAAAJ,KAAYA,EAAM,OAAO,CAAC,CAAC;AAAA;AAAA,EAwB9BK,EAAmBX,EAAM,WACpC,CACE,CACE,UAAAY,EACA,YAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAzB,EAAQ,IAEV0B,IACG,CACH,KAAM,CAACC,EAAiBC,CAAkB,EAAIvB,EAAM,SAAS,EAAK,EAC5DwB,EAAuBxB,EAAM,OAA0B,IAAK,EAC5D,CAAE,cAAAyB,GAAkBC,EAAAA,UACpBC,EAAQhC,GAAS,UAEjBiC,EAAuDC,GAAM,CACjEA,EAAE,eAAe,EAEZA,EAAE,cAAc,SAASA,EAAE,aAAa,GAC3CN,EAAmB,EAAK,CAC1B,EAGIO,EAAe/B,EAAgBsB,EAAcG,CAAoB,EAGrE,OAAAO,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAAd,EACA,GAAIA,EAEJ,MAAAH,EACA,KAAMF,GAAeY,EAAcZ,CAAW,EAC9C,SAAAO,EAEA,kCAACa,OAAK,CAAA,UAAU,SAAS,WAAW,UAAU,IAAK,EACjD,SAAA,CAAAF,wBAACG,EAAAA,WAAW,CAAA,OAAQjB,EAAc,SAAAQ,EAAcT,CAAS,EAAE,EAC3DmB,EAAA,kBAAA,KAAC5B,EAAA,CACC,IAAKuB,EACL,aAAYL,EAAc,CACxB,GAAIW,UAAQ,gCAAgC,EAC5C,eAAgB,qBAAA,CACjB,EACD,gBAAc,qBACd,gBAAc,SACd,gBAAed,EACf,gBAAeR,EACf,SAAAA,EACA,QAAS,IAAMS,EAAmB,CAACD,CAAe,EAElD,SAAA,CAAAa,yBAACF,EAAAA,KACC,CAAA,SAAA,CAAAF,wBAAC9B,GAAa,MAAA0B,EAAc,EAC5BI,EAAA,kBAAA,IAACM,EAAA,WAAA,CACC,MAAO,CAAE,cAAe,WAAY,EACpC,UAAW1C,EAAQ,OAAY,aAC/B,QAAQ,QAEP,SAAAgC,CAAA,CACH,CAAA,EACF,EACAI,EAAAA,kBAAAA,IAACO,EAAW,WAAA,CAAA,cAAW,EAAC,CAAA,CAAA,CAAA,CAC1B,EACChB,GACCS,EAAA,kBAAA,IAACtB,EAAA,CACC,OAAQmB,EACR,KAAK,SACL,OAAQJ,EACR,QAAS,EAET,kCAACe,EAAAA,UAAU,CAAA,SAAU,IAAMhB,EAAmB,EAAK,EACjD,SAAA,CAAAQ,EAAA,kBAAA,IAAC3B,EAAA,CACC,MAAAuB,EACA,SAAWa,GACTrB,EAAS,CAAE,OAAQ,CAAE,KAAAD,EAAM,MAAOsB,EAAU,KAAM5B,EAAU,MAAQ,CAAA,CAExE,2BACCqB,EAAAA,KAAK,CAAA,WAAY,EAAG,YAAa,EAAG,eAAe,WAClD,SAAA,CAACF,EAAA,kBAAA,IAAAU,EAAA,IAAA,CAAI,aAAc,EACjB,SAACV,EAAAA,kBAAAA,IAAAM,EAAA,WAAA,CAAW,QAAQ,QAAQ,GAAG,QAAQ,UAAU,aAC9C,SAAcZ,EAAA,CACb,GAAIW,UAAQ,2BAA2B,EACvC,eAAgB,KAAA,CACjB,EACH,CACF,CAAA,EACAL,EAAA,kBAAA,IAACW,EAAA,WAAA,CACC,GAAG,qBACH,aAAYjB,EAAc,CACxB,GAAIW,UAAQ,+BAA+B,EAC3C,eAAgB,oBAAA,CACjB,EACD,MAAO,CAAE,cAAe,WAAY,EACpC,MAAAzC,EACA,YAAY,UACZ,SAAAwB,CAAA,CACF,CAAA,EACF,CAAA,EACF,CAAA,CACF,0BAEDwB,EAAU,UAAA,EAAA,0BACVC,EAAW,WAAA,EAAA,CAAA,EACd,CAAA,CAAA,CAGN,CACF"}
+{"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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"}

package/dist/_chunks/ColorPickerInput-fKB6YXW8.mjs

@@ -0,0 +1,185 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseButton, Popover, Field, Flex, FieldLabel, Typography, FocusTrap, Box, FieldInput, FieldHint, FieldError } from "@strapi/design-system";
+import { CarretDown } from "@strapi/icons";
+import { HexColorPicker } from "react-colorful";
+import { useIntl } from "react-intl";
+import styled from "styled-components";
+import { g as getTrad } from "./index-uOrtnJpz.mjs";
+import "@strapi/helper-plugin";
+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.useCallback(composeRefs(...refs), refs);
+}
+const ColorPreview = styled.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(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(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(Popover)`
+  padding: ${({ theme }) => theme.spaces[2]};
+  min-height: 270px;
+`;
+const ColorPickerInput = React.forwardRef(
+  ({
+    attribute,
+    description,
+    disabled = false,
+    error,
+    intlLabel,
+    labelAction,
+    name,
+    onChange,
+    required = false,
+    value = ""
+  }, forwardedRef) => {
+    const [showColorPicker, setShowColorPicker] = React.useState(false);
+    const colorPickerButtonRef = React.useRef(null);
+    const { formatMessage } = 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__ */ jsx(
+      Field,
+      {
+        name,
+        id: name,
+        error,
+        hint: description && formatMessage(description),
+        required,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+          /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
+          /* @__PURE__ */ jsxs(
+            ColorPickerToggle,
+            {
+              ref: composedRefs,
+              "aria-label": formatMessage({
+                id: 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__ */ jsxs(Flex, { children: [
+                  /* @__PURE__ */ jsx(ColorPreview, { color }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      style: { textTransform: "uppercase" },
+                      textColor: value ? void 0 : "neutral600",
+                      variant: "omega",
+                      children: color
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(CarretDown, { "aria-hidden": true })
+              ]
+            }
+          ),
+          showColorPicker && /* @__PURE__ */ jsx(
+            ColorPickerPopover,
+            {
+              onBlur: handleBlur,
+              role: "dialog",
+              source: colorPickerButtonRef,
+              spacing: 4,
+              children: /* @__PURE__ */ jsxs(FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
+                /* @__PURE__ */ jsx(
+                  ColorPicker,
+                  {
+                    color,
+                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
+                  /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
+                    id: getTrad("color-picker.input.format"),
+                    defaultMessage: "HEX"
+                  }) }) }),
+                  /* @__PURE__ */ jsx(
+                    FieldInput,
+                    {
+                      id: "color-picker-value",
+                      "aria-label": formatMessage({
+                        id: getTrad("color-picker.input.aria-label"),
+                        defaultMessage: "Color picker input"
+                      }),
+                      style: { textTransform: "uppercase" },
+                      value,
+                      placeholder: "#000000",
+                      onChange
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldHint, {}),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ] })
+      }
+    );
+  }
+);
+export {
+  ColorPickerInput
+};
+//# sourceMappingURL=ColorPickerInput-fKB6YXW8.mjs.map

package/dist/_chunks/{ColorPickerInput-3335ebf5.mjs.map → ColorPickerInput-fKB6YXW8.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerInput-3335ebf5.mjs","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":["setRef","ref","value","composeRefs","refs","node","useComposedRefs","React","ColorPreview","styled","props","ColorPicker","HexColorPicker","theme","ColorPickerToggle","BaseButton","ColorPickerPopover","Popover","ColorPickerInput","attribute","description","disabled","error","intlLabel","labelAction","name","onChange","required","forwardedRef","showColorPicker","setShowColorPicker","colorPickerButtonRef","formatMessage","useIntl","color","handleBlur","e","composedRefs","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","hexValue","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
+{"version":3,"file":"ColorPickerInput-fKB6YXW8.mjs","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":[],"mappings":";;;;;;;;;AAQA,SAAS,OAAU,KAAqB,OAAU;AAC5C,MAAA,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AAAA,EACA,WAAA,QAAQ,QAAQ,QAAQ,QAAW;AAC3C,QAAkC,UAAU;AAAA,EAC/C;AACF;AAMA,SAAS,eAAkB,MAAwB;AAC1C,SAAA,CAAC,SAAY,KAAK,QAAQ,CAAC,QAAQ,OAAO,KAAK,IAAI,CAAC;AAC7D;AAsBA,SAAS,mBAAsB,MAAwB;AAErD,SAAO,MAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD;ACxBA,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKN,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAI5C,MAAM,cAAc,OAAO,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO5B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,qBAIvB,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMrC,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,kBAC1B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAIhD,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAM9B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,YAIhC,CAAC,EAAE,MAAA,MAAY,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAKlD,MAAM,qBAAqB,OAAO,OAAO;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAwBpC,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,KAEV,iBACG;AACH,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAC5D,UAAA,uBAAuB,MAAM,OAA0B,IAAK;AAC5D,UAAA,EAAE,kBAAkB;AAC1B,UAAM,QAAQ,SAAS;AAEjB,UAAA,aAAsD,CAAC,MAAM;AACjE,QAAE,eAAe;AAEjB,UAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAAa,GAAG;AAC9C,2BAAmB,KAAK;AAAA,MAC1B;AAAA,IAAA;AAGI,UAAA,eAAe,gBAAgB,cAAc,oBAAoB;AAGrE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QAEJ;AAAA,QACA,MAAM,eAAe,cAAc,WAAW;AAAA,QAC9C;AAAA,QAEA,+BAAC,MAAK,EAAA,WAAU,UAAS,YAAW,WAAU,KAAK,GACjD,UAAA;AAAA,UAAA,oBAAC,YAAW,EAAA,QAAQ,aAAc,UAAA,cAAc,SAAS,GAAE;AAAA,UAC3D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,cAAY,cAAc;AAAA,gBACxB,IAAI,QAAQ,gCAAgC;AAAA,gBAC5C,gBAAgB;AAAA,cAAA,CACjB;AAAA,cACD,iBAAc;AAAA,cACd,iBAAc;AAAA,cACd,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf;AAAA,cACA,SAAS,MAAM,mBAAmB,CAAC,eAAe;AAAA,cAElD,UAAA;AAAA,gBAAA,qBAAC,MACC,EAAA,UAAA;AAAA,kBAAA,oBAAC,gBAAa,OAAc;AAAA,kBAC5B;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAO,EAAE,eAAe,YAAY;AAAA,sBACpC,WAAW,QAAQ,SAAY;AAAA,sBAC/B,SAAQ;AAAA,sBAEP,UAAA;AAAA,oBAAA;AAAA,kBACH;AAAA,gBAAA,GACF;AAAA,gBACA,oBAAC,YAAW,EAAA,eAAW,KAAC,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC1B;AAAA,UACC,mBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,cAET,+BAAC,WAAU,EAAA,UAAU,MAAM,mBAAmB,KAAK,GACjD,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,UAAU,CAAC,aACT,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,UAAU,MAAM,UAAU,QAAQ;AAAA,kBAAA;AAAA,gBAExE;AAAA,qCACC,MAAK,EAAA,YAAY,GAAG,aAAa,GAAG,gBAAe,YAClD,UAAA;AAAA,kBAAC,oBAAA,KAAA,EAAI,cAAc,GACjB,UAAC,oBAAA,YAAA,EAAW,SAAQ,SAAQ,IAAG,SAAQ,WAAU,cAC9C,UAAc,cAAA;AAAA,oBACb,IAAI,QAAQ,2BAA2B;AAAA,oBACvC,gBAAgB;AAAA,kBAAA,CACjB,GACH,EACF,CAAA;AAAA,kBACA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAG;AAAA,sBACH,cAAY,cAAc;AAAA,wBACxB,IAAI,QAAQ,+BAA+B;AAAA,wBAC3C,gBAAgB;AAAA,sBAAA,CACjB;AAAA,sBACD,OAAO,EAAE,eAAe,YAAY;AAAA,sBACpC;AAAA,sBACA,aAAY;AAAA,sBACZ;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA,GACF;AAAA,cAAA,GACF;AAAA,YAAA;AAAA,UACF;AAAA,8BAED,WAAU,EAAA;AAAA,8BACV,YAAW,EAAA;AAAA,QAAA,GACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/_chunks/cs-4GdZY0p6.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cs = {
+  "color-picker.description": "Vyberte libovolnou barvu",
+  "color-picker.input.aria-label": "Vstup pro výběr barvy",
+  "color-picker.input.format": "HEX",
+  "color-picker.label": "Barva",
+  "color-picker.options.advanced.regex": "RegExp vzor",
+  "color-picker.options.advanced.regex.description": "Zadejte regulární výraz pro ověření hodnoty HEX",
+  "color-picker.options.advanced.requiredField": "Povinné pole",
+  "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
+  "color-picker.settings": "Nastavení",
+  "color-picker.toggle.aria-label": "Přepínač výběru barvy"
+};
+exports.default = cs;
+//# sourceMappingURL=cs-4GdZY0p6.js.map

package/dist/_chunks/cs-4GdZY0p6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-4GdZY0p6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/_chunks/{cs-70e06424.mjs → cs-A2xRj-2-.mjs}

@@ -1,4 +1,4 @@
-const o = {
+const cs = {
   "color-picker.description": "Vyberte libovolnou barvu",
   "color-picker.input.aria-label": "Vstup pro výběr barvy",
   "color-picker.input.format": "HEX",
@@ -11,6 +11,6 @@ const o = {
   "color-picker.toggle.aria-label": "Přepínač výběru barvy"
 };
 export {
-  o as default
+  cs as default
 };
-//# sourceMappingURL=cs-70e06424.mjs.map
+//# sourceMappingURL=cs-A2xRj-2-.mjs.map

package/dist/_chunks/cs-A2xRj-2-.mjs.map

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

package/dist/_chunks/{en-096b1095.mjs → en-L6ZZWDJv.mjs}

@@ -1,4 +1,4 @@
-const e = {
+const en = {
   "color-picker.description": "Select any color",
   "color-picker.input.aria-label": "Color picker input",
   "color-picker.input.format": "HEX",
@@ -14,6 +14,6 @@ const e = {
   "plugin.name": "Color picker"
 };
 export {
-  e as default
+  en as default
 };
-//# sourceMappingURL=en-096b1095.mjs.map
+//# sourceMappingURL=en-L6ZZWDJv.mjs.map

package/dist/_chunks/en-L6ZZWDJv.mjs.map

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

package/dist/_chunks/en-WeRHjVEB.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "color-picker.description": "Select any color",
+  "color-picker.input.aria-label": "Color picker input",
+  "color-picker.input.format": "HEX",
+  "color-picker.label": "Color",
+  "color-picker.options.advanced.regex": "RegExp pattern",
+  "color-picker.options.advanced.regex.description": "Provide a regular expression to validate the HEX value",
+  "color-picker.options.advanced.requiredField": "Required field",
+  "color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
+  "color-picker.settings": "Settings",
+  "color-picker.toggle.aria-label": "Color picker toggle",
+  "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
+  "plugin.description.short": "A Strapi-maintained color picker custom field.",
+  "plugin.name": "Color picker"
+};
+exports.default = en;
+//# sourceMappingURL=en-WeRHjVEB.js.map

package/dist/_chunks/en-WeRHjVEB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-WeRHjVEB.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}