@strapi/plugin-color-picker 0.0.0-next.f5107c72369ee86a8ec1b6782f2e890925033ca3 → 0.0.0-next.f5b09a8e61e059f02784478e27c310c6290be088

package/dist/_chunks/ColorPickerInput-0d985ad5.mjs

@@ -0,0 +1,277 @@
+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-214132a2.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: "/home/runner/work/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: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                      lineNumber: 154,
+                      columnNumber: 15
+                    },
+                    globalThis
+                  )
+                ] }, void 0, true, {
+                  fileName: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                  lineNumber: 162,
+                  columnNumber: 13
+                }, globalThis)
+              ]
+            },
+            void 0,
+            true,
+            {
+              fileName: "/home/runner/work/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: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                    lineNumber: 180,
+                    columnNumber: 21
+                  }, globalThis) }, void 0, false, {
+                    fileName: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                      lineNumber: 187,
+                      columnNumber: 19
+                    },
+                    globalThis
+                  )
+                ] }, void 0, true, {
+                  fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                  lineNumber: 178,
+                  columnNumber: 17
+                }, globalThis)
+              ] }, void 0, true, {
+                fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                lineNumber: 171,
+                columnNumber: 15
+              }, globalThis)
+            },
+            void 0,
+            false,
+            {
+              fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+              lineNumber: 165,
+              columnNumber: 13
+            },
+            globalThis
+          ),
+          /* @__PURE__ */ jsxDEV(FieldHint, {}, void 0, false, {
+            fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+            lineNumber: 202,
+            columnNumber: 11
+          }, globalThis),
+          /* @__PURE__ */ jsxDEV(FieldError, {}, void 0, false, {
+            fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+            lineNumber: 203,
+            columnNumber: 11
+          }, globalThis)
+        ] }, void 0, true, {
+          fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+          lineNumber: 137,
+          columnNumber: 9
+        }, globalThis)
+      },
+      void 0,
+      false,
+      {
+        fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+        lineNumber: 129,
+        columnNumber: 7
+      },
+      globalThis
+    );
+  }
+);
+export {
+  ColorPickerInput
+};
+//# sourceMappingURL=ColorPickerInput-0d985ad5.mjs.map

package/dist/_chunks/ColorPickerInput-0d985ad5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput-0d985ad5.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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"}

package/dist/_chunks/ColorPickerInput-8875b370.js

@@ -0,0 +1,298 @@
+"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-9695efa4.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: "/home/runner/work/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: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                      lineNumber: 154,
+                      columnNumber: 15
+                    },
+                    globalThis
+                  )
+                ] }, void 0, true, {
+                  fileName: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                  lineNumber: 162,
+                  columnNumber: 13
+                }, globalThis)
+              ]
+            },
+            void 0,
+            true,
+            {
+              fileName: "/home/runner/work/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: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                    lineNumber: 180,
+                    columnNumber: 21
+                  }, globalThis) }, void 0, false, {
+                    fileName: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                      lineNumber: 187,
+                      columnNumber: 19
+                    },
+                    globalThis
+                  )
+                ] }, void 0, true, {
+                  fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                  lineNumber: 178,
+                  columnNumber: 17
+                }, globalThis)
+              ] }, void 0, true, {
+                fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+                lineNumber: 171,
+                columnNumber: 15
+              }, globalThis)
+            },
+            void 0,
+            false,
+            {
+              fileName: "/home/runner/work/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: "/home/runner/work/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: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+            lineNumber: 203,
+            columnNumber: 11
+          }, globalThis)
+        ] }, void 0, true, {
+          fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+          lineNumber: 137,
+          columnNumber: 9
+        }, globalThis)
+      },
+      void 0,
+      false,
+      {
+        fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
+        lineNumber: 129,
+        columnNumber: 7
+      },
+      globalThis
+    );
+  }
+);
+exports.ColorPickerInput = ColorPickerInput;
+//# sourceMappingURL=ColorPickerInput-8875b370.js.map

package/dist/_chunks/ColorPickerInput-8875b370.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput-8875b370.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,8BAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QAEJ;AAAA,QACA,MAAM,eAAe,cAAc,WAAW;AAAA,QAC9C;AAAA,QAEA,+CAACC,mBAAK,EAAA,WAAU,UAAS,YAAW,WAAU,KAAK,GACjD,UAAA;AAAA,UAAAF,8BAAAA,OAACG,aAAW,YAAA,EAAA,QAAQ,aAAc,UAAA,cAAc,SAAS,EAAzD,GAAA,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAA2D,GAAAC,UAAA;AAAA,UAC3DJ,8BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,cAAY,cAAc;AAAA,gBACxB,IAAIK,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,gBAAAL,qCAACE,aAAAA,MACC,EAAA,UAAA;AAAA,kBAAAF,8BAAA,OAAC,gBAAa,MAAd,GAAA,QAAA,OAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAA4B,GAAAI,UAAA;AAAA,kBAC5BJ,8BAAA;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,oBALH;AAAA,oBAAA;AAAA,oBAAA;AAAA,sBAAA,UAAA;AAAA,sBAAA,YAAA;AAAA,sBAAA,cAAA;AAAA,oBAAA;AAAA,oBAAAF;AAAAA,kBAMA;AAAA,gBAAA,KARF,QAAA,MAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBASA,GAAAA,UAAA;AAAA,gBACAJ,8BAAA,OAACO,MAAW,YAAA,EAAA,eAAW,KAAvB,GAAA,QAAA,OAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBAAwB,GAAAH,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAvB1B;AAAA,YAAA;AAAA,YAAA;AAAA,cAAA,UAAA;AAAA,cAAA,YAAA;AAAA,cAAA,cAAA;AAAA,YAAA;AAAA,YAAAA;AAAAA,UAwBA;AAAA,UACC,mBACCJ,8BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,cAET,+CAACQ,aAAAA,WAAU,EAAA,UAAU,MAAM,mBAAmB,KAAK,GACjD,UAAA;AAAA,gBAAAR,8BAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,UAAU,CAAC,aACT,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,UAAU,MAAM,UAAU,QAAQ;AAAA,kBAAA;AAAA,kBAHxE;AAAA,kBAAA;AAAA,kBAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAAA;AAAA,kBAAAI;AAAAA,gBAKA;AAAA,qDACCF,aAAAA,MAAK,EAAA,YAAY,GAAG,aAAa,GAAG,gBAAe,YAClD,UAAA;AAAA,kBAACF,8BAAA,OAAAS,aAAA,KAAA,EAAI,cAAc,GACjB,UAACT,8BAAAA,OAAAM,aAAA,YAAA,EAAW,SAAQ,SAAQ,IAAG,SAAQ,WAAU,cAC9C,UAAc,cAAA;AAAA,oBACb,IAAID,cAAQ,2BAA2B;AAAA,oBACvC,gBAAgB;AAAA,kBAAA,CACjB,EAJH,GAAA,QAAA,OAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAAA,GAAAD,UAKA,EANF,GAAA,QAAA,OAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAOA,GAAAA,UAAA;AAAA,kBACAJ,8BAAA;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,oBATF;AAAA,oBAAA;AAAA,oBAAA;AAAA,sBAAA,UAAA;AAAA,sBAAA,YAAA;AAAA,sBAAA,cAAA;AAAA,oBAAA;AAAA,oBAAAD;AAAAA,kBAUA;AAAA,gBAAA,KAnBF,QAAA,MAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBAoBA,GAAAA,UAAA;AAAA,cAAA,KA3BF,QAAA,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAA,YAAA;AAAA,gBAAA,cAAA;AAAA,cA4BA,GAAAA,UAAA;AAAA,YAAA;AAAA,YAlCF;AAAA,YAAA;AAAA,YAAA;AAAA,cAAA,UAAA;AAAA,cAAA,YAAA;AAAA,cAAA,cAAA;AAAA,YAAA;AAAA,YAAAA;AAAAA,UAmCA;AAAA,+CAEDO,aAAAA,WAAD,CAAA,GAAA,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAW,GAAAP,UAAA;AAAA,+CACVQ,aAAAA,YAAD,CAAA,GAAA,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAY,GAAAR,UAAA;AAAA,QAAA,KAlEd,QAAA,MAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAmEA,GAAAA,UAAA;AAAA,MAAA;AAAA,MA3EF;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAAA;AAAAA,IAAA;AAAA,EA8EJ;AACF;;"}

package/{admin/src/translations/cs.json → dist/_chunks/cs-32e5b75a.mjs}

@@ -1,4 +1,4 @@
-{
+const cs = {
   "color-picker.description": "Vyberte libovolnou barvu",
   "color-picker.input.aria-label": "Vstup pro výběr barvy",
   "color-picker.input.format": "HEX",
@@ -9,4 +9,8 @@
   "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
   "color-picker.settings": "Nastavení",
   "color-picker.toggle.aria-label": "Přepínač výběru barvy"
-}
+};
+export {
+  cs as default
+};
+//# sourceMappingURL=cs-32e5b75a.mjs.map

package/dist/_chunks/cs-32e5b75a.mjs.map

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