npm - @strapi/plugin-color-picker - Versions diffs - 4.15.1 → 4.15.2 - Mend

@strapi/plugin-color-picker 4.15.1 → 4.15.2

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 (13) hide show

package/dist/_chunks/ColorPickerInput-b422e4e7.js ADDED Viewed

@@ -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-2b655cca.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-b422e4e7.js.map

package/dist/_chunks/{ColorPickerInput-cddbeb1a.js.map → ColorPickerInput-b422e4e7.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerInput-cddbeb1a.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","jsxDEV","Field","Flex","FieldLabel","this","getTrad","Typography","CarretDown","FocusTrap","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPickerInput-b422e4e7.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,SAAOA,iBAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD;ACxBA,MAAM,eAAeC,gBAAO,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKN,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAI5C,MAAM,cAAcA,gBAAAA,QAAOC,cAAAA,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,oBAAoBD,gBAAAA,QAAOE,aAAAA,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,qBAAqBF,gBAAAA,QAAOG,aAAAA,OAAO;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAwBpC,MAAM,mBAAmBJ,iBAAM;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,IAAIA,iBAAM,SAAS,KAAK;AAC5D,UAAA,uBAAuBA,iBAAM,OAA0B,IAAK;AAC5D,UAAA,EAAE,kBAAkBK,UAAAA;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,WAAAC,2BAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QAEJ;AAAA,QACA,MAAM,eAAe,cAAc,WAAW;AAAA,QAC9C;AAAA,QAEA,0CAACC,mBAAK,EAAA,WAAU,UAAS,YAAW,WAAU,KAAK,GACjD,UAAA;AAAA,UAAAF,+BAACG,aAAAA,YAAW,EAAA,QAAQ,aAAc,UAAA,cAAc,SAAS,GAAE;AAAA,UAC3DC,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,cAAY,cAAc;AAAA,gBACxB,IAAIC,cAAQ,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,gBAAAD,gCAACF,aAAAA,MACC,EAAA,UAAA;AAAA,kBAAAF,+BAAC,gBAAa,OAAc;AAAA,kBAC5BA,2BAAA;AAAA,oBAACM,aAAA;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,gBACAN,2BAAAA,IAACO,MAAW,YAAA,EAAA,eAAW,KAAC,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC1B;AAAA,UACC,mBACCP,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,cAET,0CAACQ,aAAAA,WAAU,EAAA,UAAU,MAAM,mBAAmB,KAAK,GACjD,UAAA;AAAA,gBAAAR,2BAAA;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,gDACCE,aAAAA,MAAK,EAAA,YAAY,GAAG,aAAa,GAAG,gBAAe,YAClD,UAAA;AAAA,kBAACF,2BAAA,IAAAS,aAAA,KAAA,EAAI,cAAc,GACjB,UAACT,2BAAAA,IAAAM,aAAA,YAAA,EAAW,SAAQ,SAAQ,IAAG,SAAQ,WAAU,cAC9C,UAAc,cAAA;AAAA,oBACb,IAAID,cAAQ,2BAA2B;AAAA,oBACvC,gBAAgB;AAAA,kBAAA,CACjB,GACH,EACF,CAAA;AAAA,kBACAL,2BAAA;AAAA,oBAACU,aAAA;AAAA,oBAAA;AAAA,sBACC,IAAG;AAAA,sBACH,cAAY,cAAc;AAAA,wBACxB,IAAIL,cAAQ,+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,yCAEDM,aAAU,WAAA,EAAA;AAAA,yCACVC,aAAW,YAAA,EAAA;AAAA,QAAA,GACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;;"}

package/dist/_chunks/ColorPickerInput-ee59d80f.mjs ADDED Viewed

@@ -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-10d18ad6.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-ee59d80f.mjs.map

package/dist/_chunks/{ColorPickerInput-ca8fbb6e.mjs.map → ColorPickerInput-ee59d80f.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerInput-ca8fbb6e.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":["this"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPickerInput-ee59d80f.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":"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"}

package/dist/_chunks/{index-e7d8fc7b.mjs → index-10d18ad6.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { prefixPluginTranslations } from "@strapi/helper-plugin";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Flex, Icon } from "@strapi/design-system";
 import { Paint } from "@strapi/icons";
 import styled from "styled-components";
@@ -23,15 +23,7 @@ const IconBox = styled(Flex)`
   }
 `;
 const ColorPickerIcon = () => {
-  return /* @__PURE__ */ jsxDEV(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxDEV(Icon, { as: Paint }, void 0, false, {
-    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerIcon.tsx",
-    lineNumber: 19,
-    columnNumber: 7
-  }, globalThis) }, void 0, false, {
-    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerIcon.tsx",
-    lineNumber: 18,
-    columnNumber: 5
-  }, globalThis);
+  return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { as: Paint }) });
 };
 const pluginId = "color-picker";
 const getTrad = (id) => `${pluginId}.${id}`;
@@ -55,7 +47,7 @@ const index = {
         defaultMessage: "Select any color"
       },
       components: {
-        Input: async () => import("./ColorPickerInput-ca8fbb6e.mjs").then((module) => ({
+        Input: async () => import("./ColorPickerInput-ee59d80f.mjs").then((module) => ({
           default: module.ColorPickerInput
         }))
       },
@@ -121,4 +113,4 @@ export {
   getTrad as g,
   index as i
 };
-//# sourceMappingURL=index-e7d8fc7b.mjs.map
+//# sourceMappingURL=index-10d18ad6.mjs.map

package/dist/_chunks/{index-e7d8fc7b.mjs.map → index-10d18ad6.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index-~~e7d8fc7b~~.mjs","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values /\n / to stay consistent between themes /\n background-color: #f0f0ff; / primary100 /\n border: 1px solid #d9d8ff; / primary200 /\n\n svg > path {\n fill: #4945ff; / primary600 /\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /\n TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":[~~"this"~~],"mappings":";;;;;;;;;;;;;;AAIA,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,MAAM,kBAAkB,MAAM;AACnC,~~gCACG~~,SAAQ,EAAA,gBAAe,UAAS,YAAW,UAAS,OAAO,GAAG,QAAQ,GAAG,WAAS,MAAC,eAAW,MAC7F,~~UAAC~~,~~uBAAA~~,~~MAAA~~,~~EAAK,~~IAAI,~~MAAV~~,~~GAAA~~,~~QAAA,OAAA~~;~~AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,UAAiB,EADnB,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,UAAA;~~AAEJ;ACrBO,MAAM,WAAW;ACEjB,MAAM,UAAU,CAAC,OAAe,GAAG,QAAQ,IAAI,EAAE;ACKxD,MAAe,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,SAAS,KAAU;AACjB,QAAI,aAAa,SAAS;AAAA,MACxB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,QACT,IAAI,QAAQ,oBAAoB;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA,iBAAiB;AAAA,QACf,IAAI,QAAQ,0BAA0B;AAAA,QACtC,gBAAgB;AAAA,MAClB;AAAA,MACA,YAAY;AAAA,QACV,OAAO,YACL,OAAO,iCAA+B,EAAE,KAAK,CAAC,YAAY;AAAA,UACxD,SAAS,OAAO;AAAA,QAAA,EAChB;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,UAAU;AAAA,UACR;AAAA,YACE,WAAW;AAAA,cACT,IAAI,QAAQ,qCAAqC;AAAA,cACjD,gBAAgB;AAAA,YAClB;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAc;AAAA,YACd,aAAa;AAAA,cACX,IAAI,QAAQ,iDAAiD;AAAA,cAC7D,gBAAgB;AAAA,YAClB;AAAA,UACF;AAAA,UACA;AAAA,YACE,cAAc;AAAA,cACZ,IAAI;AAAA,cACJ,gBAAgB;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT,IAAI,QAAQ,6CAA6C;AAAA,kBACzD,gBAAgB;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACX,IAAI,QAAQ,yDAAyD;AAAA,kBACrE,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EACA,MAAM,cAAc,EAAE,WAAkC;AAChD,UAAA,gBAAgB,MAAM,QAAQ;AAAA,MAClC,QAAQ,IAAI,CAAC,WAAW;AACf,eAAA,qCAA+B,uBAAA,OAAA,EAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,EAAA,CAAA,GAAA,kBAAA,MAAA,OAAA,EACnC,KAAK,CAAC,EAAE,SAAS,WAAW;AACpB,iBAAA;AAAA,YACL,MAAM,yBAAyB,MAAM,QAAQ;AAAA,YAC7C;AAAA,UAAA;AAAA,QACF,CACD,EACA,MAAM,MAAM;AACJ,iBAAA;AAAA,YACL,MAAM,CAAC;AAAA,YACP;AAAA,UAAA;AAAA,QACF,CACD;AAAA,MAAA,CACJ;AAAA,IAAA;AAGI,WAAA,QAAQ,QAAQ,aAAa;AAAA,EACtC;AACF;"}
1	+ {"version":3,"file":"index-10d18ad6.mjs","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values /\n / to stay consistent between themes /\n background-color: #f0f0ff; / primary100 /\n border: 1px solid #d9d8ff; / primary200 /\n\n svg > path {\n fill: #4945ff; / primary600 /\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /\n TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAIA,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,MAAM,kBAAkB,MAAM;AACnC,6BACG,SAAQ,EAAA,gBAAe,UAAS,YAAW,UAAS,OAAO,GAAG,QAAQ,GAAG,WAAS,MAAC,eAAW,MAC7F,8BAAC,MAAK,EAAA,IAAI,OAAO,EACnB,CAAA;AAEJ;ACrBO,MAAM,WAAW;ACEjB,MAAM,UAAU,CAAC,OAAe,GAAG,QAAQ,IAAI,EAAE;ACKxD,MAAe,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,SAAS,KAAU;AACjB,QAAI,aAAa,SAAS;AAAA,MACxB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,QACT,IAAI,QAAQ,oBAAoB;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA,iBAAiB;AAAA,QACf,IAAI,QAAQ,0BAA0B;AAAA,QACtC,gBAAgB;AAAA,MAClB;AAAA,MACA,YAAY;AAAA,QACV,OAAO,YACL,OAAO,iCAA+B,EAAE,KAAK,CAAC,YAAY;AAAA,UACxD,SAAS,OAAO;AAAA,QAAA,EAChB;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,UAAU;AAAA,UACR;AAAA,YACE,WAAW;AAAA,cACT,IAAI,QAAQ,qCAAqC;AAAA,cACjD,gBAAgB;AAAA,YAClB;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAc;AAAA,YACd,aAAa;AAAA,cACX,IAAI,QAAQ,iDAAiD;AAAA,cAC7D,gBAAgB;AAAA,YAClB;AAAA,UACF;AAAA,UACA;AAAA,YACE,cAAc;AAAA,cACZ,IAAI;AAAA,cACJ,gBAAgB;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT,IAAI,QAAQ,6CAA6C;AAAA,kBACzD,gBAAgB;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACX,IAAI,QAAQ,yDAAyD;AAAA,kBACrE,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EACA,MAAM,cAAc,EAAE,WAAkC;AAChD,UAAA,gBAAgB,MAAM,QAAQ;AAAA,MAClC,QAAQ,IAAI,CAAC,WAAW;AACf,eAAA,qCAA+B,uBAAA,OAAA,EAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,EAAA,CAAA,GAAA,kBAAA,MAAA,OAAA,EACnC,KAAK,CAAC,EAAE,SAAS,WAAW;AACpB,iBAAA;AAAA,YACL,MAAM,yBAAyB,MAAM,QAAQ;AAAA,YAC7C;AAAA,UAAA;AAAA,QACF,CACD,EACA,MAAM,MAAM;AACJ,iBAAA;AAAA,YACL,MAAM,CAAC;AAAA,YACP;AAAA,UAAA;AAAA,QACF,CACD;AAAA,MAAA,CACJ;AAAA,IAAA;AAGI,WAAA,QAAQ,QAAQ,aAAa;AAAA,EACtC;AACF;"}

package/dist/_chunks/{index-0b5f614d.js → index-2b655cca.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 const helperPlugin = require("@strapi/helper-plugin");
-const jsxDevRuntime = require("react/jsx-dev-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const styled = require("styled-components");
@@ -26,15 +26,7 @@ const IconBox = styled__default.default(designSystem.Flex)`
   }
 `;
 const ColorPickerIcon = () => {
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Icon, { as: icons.Paint }, void 0, false, {
-    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerIcon.tsx",
-    lineNumber: 19,
-    columnNumber: 7
-  }, globalThis) }, void 0, false, {
-    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerIcon.tsx",
-    lineNumber: 18,
-    columnNumber: 5
-  }, globalThis);
+  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.Paint }) });
 };
 const pluginId = "color-picker";
 const getTrad = (id) => `${pluginId}.${id}`;
@@ -58,7 +50,7 @@ const index = {
         defaultMessage: "Select any color"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-cddbeb1a.js")).then((module2) => ({
+        Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-b422e4e7.js")).then((module2) => ({
           default: module2.ColorPickerInput
         }))
       },
@@ -122,4 +114,4 @@ const index = {
 };
 exports.getTrad = getTrad;
 exports.index = index;
-//# sourceMappingURL=index-0b5f614d.js.map
+//# sourceMappingURL=index-2b655cca.js.map

package/dist/_chunks/{index-0b5f614d.js.map → index-2b655cca.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index-~~0b5f614d~~.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values /\n / to stay consistent between themes /\n background-color: #f0f0ff; / primary100 /\n border: 1px solid #d9d8ff; / primary200 /\n\n svg > path {\n fill: #4945ff; / primary600 /\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /\n TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","~~jsxDEV","~~Icon","Paint","~~this","~~module","prefixPluginTranslations"],"mappings":";;;;;;;;;;;;;;;;;AAIA,MAAM,UAAUA,gBAAAA,QAAOC,aAAAA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,MAAM,kBAAkB,MAAM;AACnC,~~8CACG~~,SAAQ,EAAA,gBAAe,UAAS,YAAW,UAAS,OAAO,GAAG,QAAQ,GAAG,WAAS,MAAC,eAAW,MAC7F,~~UAACC~~,~~qCAAAC~~,~~aAAAA~~,~~MAAA,EAAK,~~IAAIC,~~MAAV~~,~~MAAA~~,~~GAAA~~,~~QAAA,OAAA~~;~~AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,UAAiB,EADnB,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,UAAA;~~AAEJ;ACrBO,MAAM,WAAW;ACEjB,MAAM,UAAU,CAAC,OAAe,GAAG,QAAQ,IAAI,EAAE;ACKxD,MAAe,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,SAAS,KAAU;AACjB,QAAI,aAAa,SAAS;AAAA,MACxB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,QACT,IAAI,QAAQ,oBAAoB;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA,iBAAiB;AAAA,QACf,IAAI,QAAQ,0BAA0B;AAAA,QACtC,gBAAgB;AAAA,MAClB;AAAA,MACA,YAAY;AAAA,QACV,OAAO,YACL,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,gCAA+B,CAAE,EAAA,KAAK,CAACC,aAAY;AAAA,UACxD,SAASA,QAAO;AAAA,QAAA,EAChB;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,UAAU;AAAA,UACR;AAAA,YACE,WAAW;AAAA,cACT,IAAI,QAAQ,qCAAqC;AAAA,cACjD,gBAAgB;AAAA,YAClB;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAc;AAAA,YACd,aAAa;AAAA,cACX,IAAI,QAAQ,iDAAiD;AAAA,cAC7D,gBAAgB;AAAA,YAClB;AAAA,UACF;AAAA,UACA;AAAA,YACE,cAAc;AAAA,cACZ,IAAI;AAAA,cACJ,gBAAgB;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT,IAAI,QAAQ,6CAA6C;AAAA,kBACzD,gBAAgB;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACX,IAAI,QAAQ,yDAAyD;AAAA,kBACrE,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EACA,MAAM,cAAc,EAAE,WAAkC;AAChD,UAAA,gBAAgB,MAAM,QAAQ;AAAA,MAClC,QAAQ,IAAI,CAAC,WAAW;AACf,eAAA,qCAA+B,uBAAA,OAAA,EAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,IAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,EAAA,CAAA,GAAA,kBAAA,MAAA,OAAA,EACnC,KAAK,CAAC,EAAE,SAAS,WAAW;AACpB,iBAAA;AAAA,YACL,MAAMC,aAAAA,yBAAyB,MAAM,QAAQ;AAAA,YAC7C;AAAA,UAAA;AAAA,QACF,CACD,EACA,MAAM,MAAM;AACJ,iBAAA;AAAA,YACL,MAAM,CAAC;AAAA,YACP;AAAA,UAAA;AAAA,QACF,CACD;AAAA,MAAA,CACJ;AAAA,IAAA;AAGI,WAAA,QAAQ,QAAQ,aAAa;AAAA,EACtC;AACF;;;"}
1	+ {"version":3,"file":"index-2b655cca.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values /\n / to stay consistent between themes /\n background-color: #f0f0ff; / primary100 /\n border: 1px solid #d9d8ff; / primary200 /\n\n svg > path {\n fill: #4945ff; / primary600 /\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /\n TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","Icon","Paint","module","prefixPluginTranslations"],"mappings":"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"}

package/dist/admin/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use strict";
-const index = require("../_chunks/index-0b5f614d.js");
+const index = require("../_chunks/index-2b655cca.js");
 require("@strapi/helper-plugin");
-require("react/jsx-dev-runtime");
+require("react/jsx-runtime");
 require("@strapi/design-system");
 require("@strapi/icons");
 require("styled-components");

package/dist/admin/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { i } from "../_chunks/index-e7d8fc7b.mjs";
+import { i } from "../_chunks/index-10d18ad6.mjs";
 import "@strapi/helper-plugin";
-import "react/jsx-dev-runtime";
+import "react/jsx-runtime";
 import "@strapi/design-system";
 import "@strapi/icons";
 import "styled-components";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-color-picker",
-  "version": "4.15.1",
+  "version": "4.15.2",
   "description": "Strapi maintained Custom Fields",
   "repository": {
     "type": "git",
@@ -44,10 +44,7 @@
   "scripts": {
     "build": "strapi plugin:build --force",
     "clean": "run -T rimraf ./dist",
-    "lint": "yarn lint:project && yarn lint:back && yarn lint:front",
-    "lint:back": "run -T eslint ./server -c ./server/.eslintrc.js",
-    "lint:front": "run -T eslint ./admin -c ./admin/.eslintrc.js",
-    "lint:project": "run -T eslint . -c ./.eslintrc.js",
+    "lint": "run -T eslint .",
     "prepublishOnly": "yarn clean && yarn build",
     "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
     "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
@@ -58,14 +55,14 @@
   },
   "dependencies": {
     "@strapi/design-system": "1.13.0",
-    "@strapi/helper-plugin": "4.15.1",
+    "@strapi/helper-plugin": "4.15.2",
     "@strapi/icons": "1.13.0",
     "prop-types": "^15.8.1",
     "react-colorful": "5.6.1",
     "react-intl": "6.4.1"
   },
   "devDependencies": {
-    "@strapi/strapi": "4.15.1",
+    "@strapi/strapi": "4.15.2",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/styled-components": "5.1.26",
@@ -79,8 +76,8 @@
     "@strapi/strapi": "^4.4.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "5.3.4",
-    "styled-components": "5.3.3"
+    "react-router-dom": "^5.2.0",
+    "styled-components": "^5.2.1"
   },
   "engines": {
     "node": ">=18.0.0 <=20.x.x",
@@ -92,5 +89,5 @@
     "kind": "plugin",
     "displayName": "Color Picker"
   },
-  "gitHead": "b6c085052f108fcfe47d22972a664dfa85aa0358"
+  "gitHead": "bb510893332674e2607f7d335b34dc78c599319a"
 }

package/dist/_chunks/ColorPickerInput-ca8fbb6e.mjs DELETED Viewed

@@ -1,277 +0,0 @@
-import { jsxDEV } from "react/jsx-dev-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-e7d8fc7b.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__ */ jsxDEV(
-      Field,
-      {
-        name,
-        id: name,
-        error,
-        hint: description && formatMessage(description),
-        required,
-        children: /* @__PURE__ */ jsxDEV(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-          /* @__PURE__ */ jsxDEV(FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 138,
-            columnNumber: 11
-          }, globalThis),
-          /* @__PURE__ */ jsxDEV(
-            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__ */ jsxDEV(Flex, { children: [
-                  /* @__PURE__ */ jsxDEV(ColorPreview, { color }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 153,
-                    columnNumber: 15
-                  }, globalThis),
-                  /* @__PURE__ */ jsxDEV(
-                    Typography,
-                    {
-                      style: { textTransform: "uppercase" },
-                      textColor: value ? void 0 : "neutral600",
-                      variant: "omega",
-                      children: color
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                      lineNumber: 154,
-                      columnNumber: 15
-                    },
-                    globalThis
-                  )
-                ] }, void 0, true, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 152,
-                  columnNumber: 13
-                }, globalThis),
-                /* @__PURE__ */ jsxDEV(CarretDown, { "aria-hidden": true }, void 0, false, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 162,
-                  columnNumber: 13
-                }, globalThis)
-              ]
-            },
-            void 0,
-            true,
-            {
-              fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-              lineNumber: 139,
-              columnNumber: 11
-            },
-            globalThis
-          ),
-          showColorPicker && /* @__PURE__ */ jsxDEV(
-            ColorPickerPopover,
-            {
-              onBlur: handleBlur,
-              role: "dialog",
-              source: colorPickerButtonRef,
-              spacing: 4,
-              children: /* @__PURE__ */ jsxDEV(FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
-                /* @__PURE__ */ jsxDEV(
-                  ColorPicker,
-                  {
-                    color,
-                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
-                  },
-                  void 0,
-                  false,
-                  {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 172,
-                    columnNumber: 17
-                  },
-                  globalThis
-                ),
-                /* @__PURE__ */ jsxDEV(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
-                  /* @__PURE__ */ jsxDEV(Box, { paddingRight: 2, children: /* @__PURE__ */ jsxDEV(Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
-                    id: getTrad("color-picker.input.format"),
-                    defaultMessage: "HEX"
-                  }) }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 180,
-                    columnNumber: 21
-                  }, globalThis) }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 179,
-                    columnNumber: 19
-                  }, globalThis),
-                  /* @__PURE__ */ jsxDEV(
-                    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
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                      lineNumber: 187,
-                      columnNumber: 19
-                    },
-                    globalThis
-                  )
-                ] }, void 0, true, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 178,
-                  columnNumber: 17
-                }, globalThis)
-              ] }, void 0, true, {
-                fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                lineNumber: 171,
-                columnNumber: 15
-              }, globalThis)
-            },
-            void 0,
-            false,
-            {
-              fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-              lineNumber: 165,
-              columnNumber: 13
-            },
-            globalThis
-          ),
-          /* @__PURE__ */ jsxDEV(FieldHint, {}, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 202,
-            columnNumber: 11
-          }, globalThis),
-          /* @__PURE__ */ jsxDEV(FieldError, {}, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 203,
-            columnNumber: 11
-          }, globalThis)
-        ] }, void 0, true, {
-          fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-          lineNumber: 137,
-          columnNumber: 9
-        }, globalThis)
-      },
-      void 0,
-      false,
-      {
-        fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-        lineNumber: 129,
-        columnNumber: 7
-      },
-      globalThis
-    );
-  }
-);
-export {
-  ColorPickerInput
-};
-//# sourceMappingURL=ColorPickerInput-ca8fbb6e.mjs.map

package/dist/_chunks/ColorPickerInput-cddbeb1a.js DELETED Viewed

@@ -1,298 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxDevRuntime = require("react/jsx-dev-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-0b5f614d.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__ */ jsxDevRuntime.jsxDEV(
-      designSystem.Field,
-      {
-        name,
-        id: name,
-        error,
-        hint: description && formatMessage(description),
-        required,
-        children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 138,
-            columnNumber: 11
-          }, globalThis),
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-            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__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { children: [
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(ColorPreview, { color }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 153,
-                    columnNumber: 15
-                  }, globalThis),
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-                    designSystem.Typography,
-                    {
-                      style: { textTransform: "uppercase" },
-                      textColor: value ? void 0 : "neutral600",
-                      variant: "omega",
-                      children: color
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                      lineNumber: 154,
-                      columnNumber: 15
-                    },
-                    globalThis
-                  )
-                ] }, void 0, true, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 152,
-                  columnNumber: 13
-                }, globalThis),
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(icons.CarretDown, { "aria-hidden": true }, void 0, false, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 162,
-                  columnNumber: 13
-                }, globalThis)
-              ]
-            },
-            void 0,
-            true,
-            {
-              fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-              lineNumber: 139,
-              columnNumber: 11
-            },
-            globalThis
-          ),
-          showColorPicker && /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-            ColorPickerPopover,
-            {
-              onBlur: handleBlur,
-              role: "dialog",
-              source: colorPickerButtonRef,
-              spacing: 4,
-              children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-                  ColorPicker,
-                  {
-                    color,
-                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
-                  },
-                  void 0,
-                  false,
-                  {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 172,
-                    columnNumber: 17
-                  },
-                  globalThis
-                ),
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
-                    id: index.getTrad("color-picker.input.format"),
-                    defaultMessage: "HEX"
-                  }) }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 180,
-                    columnNumber: 21
-                  }, globalThis) }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 179,
-                    columnNumber: 19
-                  }, globalThis),
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-                    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
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                      lineNumber: 187,
-                      columnNumber: 19
-                    },
-                    globalThis
-                  )
-                ] }, void 0, true, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 178,
-                  columnNumber: 17
-                }, globalThis)
-              ] }, void 0, true, {
-                fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                lineNumber: 171,
-                columnNumber: 15
-              }, globalThis)
-            },
-            void 0,
-            false,
-            {
-              fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-              lineNumber: 165,
-              columnNumber: 13
-            },
-            globalThis
-          ),
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldHint, {}, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 202,
-            columnNumber: 11
-          }, globalThis),
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldError, {}, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 203,
-            columnNumber: 11
-          }, globalThis)
-        ] }, void 0, true, {
-          fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-          lineNumber: 137,
-          columnNumber: 9
-        }, globalThis)
-      },
-      void 0,
-      false,
-      {
-        fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-        lineNumber: 129,
-        columnNumber: 7
-      },
-      globalThis
-    );
-  }
-);
-exports.ColorPickerInput = ColorPickerInput;
-//# sourceMappingURL=ColorPickerInput-cddbeb1a.js.map