@wordpress/components 38.0.0 → 40.0.0

package/build-module/circular-option-picker/circular-option-picker.mjs

@@ -8,6 +8,7 @@ import { Composite } from "../composite/index.mjs";
 import { Option } from "./circular-option-picker-option.mjs";
 import { OptionGroup } from "./circular-option-picker-option-group.mjs";
 import { ButtonAction, DropdownLinkAction } from "./circular-option-picker-actions.mjs";
+import { resolveCircularOptionPickerPresentation, warnIfCircularOptionPickerAsButtonsIsSet } from "./utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ListboxCircularOptionPicker(props) {
   const {
@@ -23,7 +24,8 @@ function ListboxCircularOptionPicker(props) {
   const contextValue = useMemo(() => ({
     baseId,
     activeId,
-    setActiveId
+    setActiveId,
+    presentation: "listbox"
   }), [baseId, activeId, setActiveId]);
   return /* @__PURE__ */ _jsx("div", {
     className,
@@ -48,11 +50,13 @@ function ButtonsCircularOptionPicker(props) {
     options,
     children,
     baseId,
+    presentation,
     ...additionalProps
   } = props;
   const contextValue = useMemo(() => ({
-    baseId
-  }), [baseId]);
+    baseId,
+    presentation
+  }), [baseId, presentation]);
   return /* @__PURE__ */ _jsx("div", {
     ...additionalProps,
     role: "group",
@@ -66,14 +70,17 @@ function ButtonsCircularOptionPicker(props) {
 function CircularOptionPicker(props) {
   const {
     asButtons,
+    presentation,
+    loop,
     actions: actionsProp,
     options: optionsProp,
     children,
     className,
     ...additionalProps
   } = props;
+  warnIfCircularOptionPickerAsButtonsIsSet("CircularOptionPicker", asButtons);
+  const resolvedPresentation = resolveCircularOptionPickerPresentation(presentation, asButtons);
   const baseId = useInstanceId(CircularOptionPicker, "components-circular-option-picker", additionalProps.id);
-  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;
   const actions = actionsProp ? /* @__PURE__ */ _jsx("div", {
     className: "components-circular-option-picker__custom-clear-wrapper",
     children: actionsProp
@@ -82,13 +89,24 @@ function CircularOptionPicker(props) {
     className: "components-circular-option-picker__swatches",
     children: optionsProp
   });
-  return /* @__PURE__ */ _jsx(OptionPickerImplementation, {
-    ...additionalProps,
+  const sharedProps = {
     baseId,
     className: clsx("components-circular-option-picker", className),
     actions,
     options,
     children
+  };
+  if (resolvedPresentation === "listbox") {
+    return /* @__PURE__ */ _jsx(ListboxCircularOptionPicker, {
+      ...additionalProps,
+      ...sharedProps,
+      loop
+    });
+  }
+  return /* @__PURE__ */ _jsx(ButtonsCircularOptionPicker, {
+    ...additionalProps,
+    ...sharedProps,
+    presentation: resolvedPresentation
   });
 }
 CircularOptionPicker.Option = Option;

package/build-module/circular-option-picker/circular-option-picker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/circular-option-picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListboxCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    baseId,\n    className,\n    loop = true,\n    children,\n    ...additionalProps\n  } = props;\n  const [activeId, setActiveId] = useState(undefined);\n  const contextValue = useMemo(() => ({\n    baseId,\n    activeId,\n    setActiveId\n  }), [baseId, activeId, setActiveId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: className,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [/*#__PURE__*/_jsx(Composite, {\n        ...additionalProps,\n        id: baseId,\n        focusLoop: loop,\n        rtl: isRTL(),\n        role: \"listbox\",\n        activeId: activeId,\n        setActiveId: setActiveId,\n        children: options\n      }), children, actions]\n    })\n  });\n}\nfunction ButtonsCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    children,\n    baseId,\n    ...additionalProps\n  } = props;\n  const contextValue = useMemo(() => ({\n    baseId\n  }), [baseId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...additionalProps,\n    role: \"group\",\n    id: baseId,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [options, children, actions]\n    })\n  });\n}\nfunction CircularOptionPicker(props) {\n  const {\n    asButtons,\n    actions: actionsProp,\n    options: optionsProp,\n    children,\n    className,\n    ...additionalProps\n  } = props;\n  const baseId = useInstanceId(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);\n  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;\n  const actions = actionsProp ? /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__custom-clear-wrapper\",\n    children: actionsProp\n  }) : undefined;\n  const options = /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__swatches\",\n    children: optionsProp\n  });\n  return /*#__PURE__*/_jsx(OptionPickerImplementation, {\n    ...additionalProps,\n    baseId: baseId,\n    className: clsx('components-circular-option-picker', className),\n    actions: actions,\n    options: options,\n    children: children\n  });\n}\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\nCircularOptionPicker.displayName = 'CircularOptionPicker';\nexport default CircularOptionPicker;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB;AAKlC,SAAS,mCAAmC;AAC5C,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AA8CjD,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAS;AAClD,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,UAAU,WAAW,CAAC;AACnC,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAc,qBAAK,WAAW;AAAA,QACtC,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,KAAK,MAAM;AAAA,QACX,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,UAAU;AAAA,MACZ,CAAC,GAAG,UAAU,OAAO;AAAA,IACvB,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,MAAM,CAAC;AACZ,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAC,SAAS,UAAU,OAAO;AAAA,IACvC,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,qBAAqB,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,cAAc,sBAAsB,qCAAqC,gBAAgB,EAAE;AAC1G,QAAM,6BAA6B,YAAY,8BAA8B;AAC7E,QAAM,UAAU,cAA2B,qBAAK,OAAO;AAAA,IACrD,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC,IAAI;AACL,QAAM,UAAuB,qBAAK,OAAO;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AACD,SAAoB,qBAAK,4BAA4B;AAAA,IACnD,GAAG;AAAA,IACH;AAAA,IACA,WAAW,KAAK,qCAAqC,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,qBAAqB,SAAS;AAC9B,qBAAqB,cAAc;AACnC,qBAAqB,eAAe;AACpC,qBAAqB,qBAAqB;AAC1C,qBAAqB,cAAc;AACnC,IAAO,iCAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\nimport { resolveCircularOptionPickerPresentation, warnIfCircularOptionPickerAsButtonsIsSet } from './utils';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListboxCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    baseId,\n    className,\n    loop = true,\n    children,\n    ...additionalProps\n  } = props;\n  const [activeId, setActiveId] = useState(undefined);\n  const contextValue = useMemo(() => ({\n    baseId,\n    activeId,\n    setActiveId,\n    presentation: 'listbox'\n  }), [baseId, activeId, setActiveId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: className,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [/*#__PURE__*/_jsx(Composite, {\n        ...additionalProps,\n        id: baseId,\n        focusLoop: loop,\n        rtl: isRTL(),\n        role: \"listbox\",\n        activeId: activeId,\n        setActiveId: setActiveId,\n        children: options\n      }), children, actions]\n    })\n  });\n}\nfunction ButtonsCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    children,\n    baseId,\n    presentation,\n    ...additionalProps\n  } = props;\n  const contextValue = useMemo(() => ({\n    baseId,\n    presentation\n  }), [baseId, presentation]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...additionalProps,\n    role: \"group\",\n    id: baseId,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [options, children, actions]\n    })\n  });\n}\nfunction CircularOptionPicker(props) {\n  const {\n    asButtons,\n    presentation,\n    loop,\n    actions: actionsProp,\n    options: optionsProp,\n    children,\n    className,\n    ...additionalProps\n  } = props;\n  warnIfCircularOptionPickerAsButtonsIsSet('CircularOptionPicker', asButtons);\n  const resolvedPresentation = resolveCircularOptionPickerPresentation(presentation, asButtons);\n  const baseId = useInstanceId(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);\n  const actions = actionsProp ? /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__custom-clear-wrapper\",\n    children: actionsProp\n  }) : undefined;\n  const options = /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__swatches\",\n    children: optionsProp\n  });\n  const sharedProps = {\n    baseId,\n    className: clsx('components-circular-option-picker', className),\n    actions,\n    options,\n    children\n  };\n  if (resolvedPresentation === 'listbox') {\n    return /*#__PURE__*/_jsx(ListboxCircularOptionPicker, {\n      ...additionalProps,\n      ...sharedProps,\n      loop: loop\n    });\n  }\n  return /*#__PURE__*/_jsx(ButtonsCircularOptionPicker, {\n    ...additionalProps,\n    ...sharedProps,\n    presentation: resolvedPresentation\n  });\n}\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\nCircularOptionPicker.displayName = 'CircularOptionPicker';\nexport default CircularOptionPicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/circular-option-picker/index.mjs

@@ -3,7 +3,7 @@ import CircularOptionPicker from "./circular-option-picker.mjs";
 import { Option } from "./circular-option-picker-option.mjs";
 import { OptionGroup } from "./circular-option-picker-option-group.mjs";
 import { ButtonAction, DropdownLinkAction } from "./circular-option-picker-actions.mjs";
-import { getComputeCircularOptionPickerCommonProps } from "./utils.mjs";
+import { getComputeCircularOptionPickerCommonProps, resolveCircularOptionPickerPresentation, warnIfCircularOptionPickerAsButtonsIsSet } from "./utils.mjs";
 var circular_option_picker_default = CircularOptionPicker;
 export {
   ButtonAction,
@@ -11,6 +11,8 @@ export {
   Option,
   OptionGroup,
   circular_option_picker_default as default,
-  getComputeCircularOptionPickerCommonProps
+  getComputeCircularOptionPickerCommonProps,
+  resolveCircularOptionPickerPresentation,
+  warnIfCircularOptionPickerAsButtonsIsSet
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/circular-option-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/index.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport CircularOptionPicker from './circular-option-picker';\nexport { Option } from './circular-option-picker-option';\nexport { OptionGroup } from './circular-option-picker-option-group';\nexport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\nexport { getComputeCircularOptionPickerCommonProps } from './utils';\nexport default CircularOptionPicker;"],
-  "mappings": ";AAGA,OAAO,0BAA0B;AACjC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AACjD,SAAS,iDAAiD;AAC1D,IAAO,iCAAQ;",
+  "sourcesContent": ["import CircularOptionPicker from './circular-option-picker';\nexport { Option } from './circular-option-picker-option';\nexport { OptionGroup } from './circular-option-picker-option-group';\nexport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\nexport { getComputeCircularOptionPickerCommonProps, resolveCircularOptionPickerPresentation, warnIfCircularOptionPickerAsButtonsIsSet } from './utils';\nexport default CircularOptionPicker;"],
+  "mappings": ";AAAA,OAAO,0BAA0B;AACjC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AACjD,SAAS,2CAA2C,yCAAyC,gDAAgD;AAC7I,IAAO,iCAAQ;",
   "names": []
 }

package/build-module/circular-option-picker/utils.mjs

@@ -1,11 +1,26 @@
 // packages/components/src/circular-option-picker/utils.tsx
 import { __ } from "@wordpress/i18n";
-function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby) {
-  const metaProps = asButtons ? {
-    asButtons: true
-  } : {
-    asButtons: false,
+import deprecated from "@wordpress/deprecated";
+function warnIfCircularOptionPickerAsButtonsIsSet(componentName, asButtons) {
+  if (asButtons === void 0) {
+    return;
+  }
+  deprecated(`\`asButtons\` prop in wp.components.${componentName}`, {
+    since: "7.2",
+    alternative: "`presentation`",
+    hint: '`asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
+  });
+}
+function resolveCircularOptionPickerPresentation(presentation, asButtons) {
+  return presentation ?? (asButtons ? "toggle-buttons" : "listbox");
+}
+function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation) {
+  const resolvedPresentation = resolveCircularOptionPickerPresentation(presentation, asButtons);
+  const metaProps = resolvedPresentation === "listbox" ? {
+    presentation: "listbox",
     loop
+  } : {
+    presentation: resolvedPresentation
   };
   const labelProps = {
     "aria-labelledby": ariaLabelledby,
@@ -13,10 +28,13 @@ function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, a
   };
   return {
     metaProps,
-    labelProps
+    labelProps,
+    resolvedPresentation
   };
 }
 export {
-  getComputeCircularOptionPickerCommonProps
+  getComputeCircularOptionPickerCommonProps,
+  resolveCircularOptionPickerPresentation,
+  warnIfCircularOptionPickerAsButtonsIsSet
 };
 //# sourceMappingURL=utils.mjs.map

package/build-module/circular-option-picker/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/utils.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Computes the common props for the CircularOptionPicker.\n */\nexport function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby) {\n  const metaProps = asButtons ? {\n    asButtons: true\n  } : {\n    asButtons: false,\n    loop\n  };\n  const labelProps = {\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabelledby ? undefined : ariaLabel || __('Custom color picker')\n  };\n  return {\n    metaProps,\n    labelProps\n  };\n}"],
-  "mappings": ";AAGA,SAAS,UAAU;AAKZ,SAAS,0CAA0C,WAAW,MAAM,WAAW,gBAAgB;AACpG,QAAM,YAAY,YAAY;AAAA,IAC5B,WAAW;AAAA,EACb,IAAI;AAAA,IACF,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,aAAa;AAAA,IACjB,mBAAmB;AAAA,IACnB,cAAc,iBAAiB,SAAY,aAAa,GAAG,qBAAqB;AAAA,EAClF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport deprecated from '@wordpress/deprecated';\nexport function warnIfCircularOptionPickerAsButtonsIsSet(componentName, asButtons) {\n  if (asButtons === undefined) {\n    return;\n  }\n  deprecated(`\\`asButtons\\` prop in wp.components.${componentName}`, {\n    since: '7.2',\n    alternative: '`presentation`',\n    hint: '`asButtons={ true }` maps to `presentation=\"toggle-buttons\"`. Explicit `presentation` takes precedence.'\n  });\n}\nexport function resolveCircularOptionPickerPresentation(presentation, asButtons) {\n  return presentation ?? (asButtons ? 'toggle-buttons' : 'listbox');\n}\n\n/**\n * Computes the common props for the CircularOptionPicker.\n */\nexport function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation) {\n  const resolvedPresentation = resolveCircularOptionPickerPresentation(presentation, asButtons);\n  const metaProps = resolvedPresentation === 'listbox' ? {\n    presentation: 'listbox',\n    loop\n  } : {\n    presentation: resolvedPresentation\n  };\n  const labelProps = {\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabelledby ? undefined : ariaLabel || __('Custom color picker')\n  };\n  return {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  };\n}"],
+  "mappings": ";AAAA,SAAS,UAAU;AACnB,OAAO,gBAAgB;AAChB,SAAS,yCAAyC,eAAe,WAAW;AACjF,MAAI,cAAc,QAAW;AAC3B;AAAA,EACF;AACA,aAAW,uCAAuC,aAAa,IAAI;AAAA,IACjE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AACH;AACO,SAAS,wCAAwC,cAAc,WAAW;AAC/E,SAAO,iBAAiB,YAAY,mBAAmB;AACzD;AAKO,SAAS,0CAA0C,WAAW,MAAM,WAAW,gBAAgB,cAAc;AAClH,QAAM,uBAAuB,wCAAwC,cAAc,SAAS;AAC5F,QAAM,YAAY,yBAAyB,YAAY;AAAA,IACrD,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AAAA,IACF,cAAc;AAAA,EAChB;AACA,QAAM,aAAa;AAAA,IACjB,mBAAmB;AAAA,IACnB,cAAc,iBAAiB,SAAY,aAAa,GAAG,qBAAqB;AAAA,EAClF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/build-module/clipboard-button/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/clipboard-button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef(undefined);\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,aAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM,MAAM,mBAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,qBAAK,QAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef(undefined);\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,aAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM,MAAM,mBAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,qBAAK,QAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
   "names": []
 }

package/build-module/color-indicator/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-indicator/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedColorIndicator(props, forwardedRef) {\n  const {\n    className,\n    colorValue,\n    ...additionalProps\n  } = props;\n  return /*#__PURE__*/_jsx(\"span\", {\n    className: clsx('component-color-indicator', className),\n    style: {\n      background: colorValue\n    },\n    ref: forwardedRef,\n    ...additionalProps\n  });\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef(UnforwardedColorIndicator);\nColorIndicator.displayName = 'ColorIndicator';\nexport default ColorIndicator;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAC5B,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AACH;AAaO,IAAM,iBAAiB,WAAW,yBAAyB;AAClE,eAAe,cAAc;AAC7B,IAAO,0BAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedColorIndicator(props, forwardedRef) {\n  const {\n    className,\n    colorValue,\n    ...additionalProps\n  } = props;\n  return /*#__PURE__*/_jsx(\"span\", {\n    className: clsx('component-color-indicator', className),\n    style: {\n      background: colorValue\n    },\n    ref: forwardedRef,\n    ...additionalProps\n  });\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef(UnforwardedColorIndicator);\nColorIndicator.displayName = 'ColorIndicator';\nexport default ColorIndicator;"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AACH;AAaO,IAAM,iBAAiB,WAAW,yBAAyB;AAClE,eAAe,cAAc;AAC7B,IAAO,0BAAQ;",
   "names": []
 }

package/build-module/color-palette/index.mjs

@@ -8,11 +8,96 @@ import { __, sprintf } from "@wordpress/i18n";
 import { useCallback, useMemo, useState, forwardRef } from "@wordpress/element";
 import Dropdown from "../dropdown/index.mjs";
 import { ColorPicker } from "../color-picker/index.mjs";
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker/index.mjs";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from "../circular-option-picker/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
 import { Truncate } from "../truncate/index.mjs";
-import { ColorHeading } from "./styles.mjs";
+import { Heading } from "../heading/index.mjs";
 import DropdownContentWrapper from "../dropdown/dropdown-content-wrapper.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/color-palette/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a7b05d56c7", ".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}");
+}
+var style_module_default = { "color-heading": "cf6db1948d5273a8__color-heading" };
+
+// packages/components/src/color-palette/index.tsx
 import { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from "./utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 extend([namesPlugin, a11yPlugin]);
@@ -23,6 +108,7 @@ function SinglePalette({
   onChange,
   value,
   selectedSlug,
+  presentation,
   ...additionalProps
 }) {
   const colorOptions = useMemo(() => {
@@ -32,7 +118,7 @@ function SinglePalette({
       slug
     }, index) => {
       const colordColor = colord(color);
-      const isSelected = selectedSlug ? slug === selectedSlug : value === color;
+      const isSelected = presentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : value === color);
       return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
         isSelected,
         selectedIconProps: isSelected ? {
@@ -47,7 +133,7 @@ function SinglePalette({
         onClick: isSelected ? clearColor : () => onChange(color, index, slug)
       }, slug ?? `${color}-${index}`);
     });
-  }, [colors, value, selectedSlug, onChange, clearColor]);
+  }, [colors, value, selectedSlug, onChange, clearColor, presentation]);
   return /* @__PURE__ */ _jsx(CircularOptionPicker.OptionGroup, {
     className,
     options: colorOptions,
@@ -61,7 +147,8 @@ function MultiplePalettes({
   onChange,
   value,
   selectedSlug,
-  headingLevel
+  headingLevel,
+  presentation
 }) {
   const instanceId = useInstanceId(MultiplePalettes, "color-palette");
   if (colors.length === 0) {
@@ -77,7 +164,8 @@ function MultiplePalettes({
       const id = `${instanceId}-${index}`;
       return /* @__PURE__ */ _jsxs(VStack, {
         spacing: 2,
-        children: [/* @__PURE__ */ _jsx(ColorHeading, {
+        children: [/* @__PURE__ */ _jsx(Heading, {
+          className: style_module_default["color-heading"],
           id,
           level: headingLevel,
           children: name
@@ -87,6 +175,7 @@ function MultiplePalettes({
           onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),
           value,
           selectedSlug,
+          presentation,
           "aria-labelledby": id
         })]
       }, index);
@@ -125,6 +214,7 @@ function CustomColorPickerDropdown({
 function UnforwardedColorPalette(props, forwardedRef) {
   const {
     asButtons,
+    presentation,
     loop,
     clearable = true,
     colors = [],
@@ -139,6 +229,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
     "aria-labelledby": ariaLabelledby,
     ...additionalProps
   } = props;
+  warnIfCircularOptionPickerAsButtonsIsSet("ColorPalette", asButtons);
   const [normalizedColorValue, setNormalizedColorValue] = useState(value);
   const clearColor = useCallback(() => onChange(void 0), [onChange]);
   const customColorPaletteCallbackRef = useCallback((node) => {
@@ -162,11 +253,17 @@ function UnforwardedColorPalette(props, forwardedRef) {
     buttonLabelName,
     displayValue
   ) : __("Custom color picker");
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const paletteCommonProps = {
     clearColor,
     onChange,
     value,
-    selectedSlug
+    selectedSlug,
+    presentation: resolvedPresentation
   };
   const actions = !!clearable && /* @__PURE__ */ _jsx(CircularOptionPicker.ButtonAction, {
     onClick: clearColor,
@@ -174,10 +271,6 @@ function UnforwardedColorPalette(props, forwardedRef) {
     disabled: !value,
     children: __("Clear")
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   if (disableCustomColors && colors.length === 0 && !actions) {
     return null;
   }

package/build-module/color-palette/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/color-palette/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug — entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = selectedSlug ? slug === selectedSlug : value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n\n  // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.\n  if (disableCustomColors && colors.length === 0 && !actions) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
-  "mappings": "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",
+  "sources": ["../../src/color-palette/index.tsx", "../../../style-runtime/src/index.ts", "../../src/color-palette/style.module.scss"],
+  "sourcesContent": ["import { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { Heading } from '../heading';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport styles from './style.module.scss';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  presentation,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug — entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = presentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : value === color);\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor, presentation]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel,\n  presentation\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(Heading, {\n          className: styles['color-heading'],\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          presentation: presentation,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    presentation,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  warnIfCircularOptionPickerAsButtonsIsSet('ColorPalette', asButtons);\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug,\n    presentation: resolvedPresentation\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n\n  // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.\n  if (disableCustomColors && colors.length === 0 && !actions) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"a7b05d56c7\", \".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}\");\n}\nexport default {\"color-heading\":\"cf6db1948d5273a8__color-heading\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/color-palette/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-palette/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n  const valueIsCssVariable = /var\\(/.test(value ?? '');\n  const valueIsColorMix = /color-mix\\(/.test(value ?? '');\n  return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false, selectedSlug) => {\n  if (!currentValue) {\n    return '';\n  }\n  const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n  const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n  // Normalize format of `colors` to simplify the following loop\n\n  const colorPalettes = showMultiplePalettes ? colors : [{\n    colors: colors\n  }];\n  for (const {\n    colors: paletteColors\n  } of colorPalettes) {\n    for (const {\n      name: colorName,\n      color: colorValue,\n      slug\n    } of paletteColors) {\n      if (selectedSlug) {\n        if (slug === selectedSlug) {\n          return colorName;\n        }\n        continue;\n      }\n      const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n      if (normalizedCurrentValue === normalizedColorValue) {\n        return colorName;\n      }\n    }\n  }\n\n  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n  return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n  if (!value || !element || isSimpleCSSColor(value)) {\n    return value;\n  }\n  const {\n    ownerDocument\n  } = element;\n  const {\n    defaultView\n  } = ownerDocument;\n  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n  return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"],
-  "mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AAKvB,SAAS,UAAU;AAMnB,OAAO,CAAC,aAAa,UAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,SAAS,EAAE;AACnD,QAAM,kBAAkB,cAAc,KAAK,SAAS,EAAE;AACtD,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,IAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,OAAO,iBAAiB;AACzH,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,4BAA4B,OAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,IACF,KAAK,eAAe;AAClB,UAAI,cAAc;AAChB,YAAI,SAAS,cAAc;AACzB,iBAAO;AAAA,QACT;AACA;AAAA,MACF;AACA,YAAM,uBAAuB,4BAA4B,OAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,SAAO,GAAG,QAAQ;AACpB;AAIO,IAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,IAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,IAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,0BAA0B,OAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
+  "sourcesContent": ["import { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport { __ } from '@wordpress/i18n';\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n  const valueIsCssVariable = /var\\(/.test(value ?? '');\n  const valueIsColorMix = /color-mix\\(/.test(value ?? '');\n  return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false, selectedSlug) => {\n  if (!currentValue) {\n    return '';\n  }\n  const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n  const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n  // Normalize format of `colors` to simplify the following loop\n\n  const colorPalettes = showMultiplePalettes ? colors : [{\n    colors: colors\n  }];\n  for (const {\n    colors: paletteColors\n  } of colorPalettes) {\n    for (const {\n      name: colorName,\n      color: colorValue,\n      slug\n    } of paletteColors) {\n      if (selectedSlug) {\n        if (slug === selectedSlug) {\n          return colorName;\n        }\n        continue;\n      }\n      const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n      if (normalizedCurrentValue === normalizedColorValue) {\n        return colorName;\n      }\n    }\n  }\n\n  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n  return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n  if (!value || !element || isSimpleCSSColor(value)) {\n    return value;\n  }\n  const {\n    ownerDocument\n  } = element;\n  const {\n    defaultView\n  } = ownerDocument;\n  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n  return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"],
+  "mappings": ";AAAA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AACvB,SAAS,UAAU;AACnB,OAAO,CAAC,aAAa,UAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,SAAS,EAAE;AACnD,QAAM,kBAAkB,cAAc,KAAK,SAAS,EAAE;AACtD,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,IAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,OAAO,iBAAiB;AACzH,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,4BAA4B,OAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,IACF,KAAK,eAAe;AAClB,UAAI,cAAc;AAChB,YAAI,SAAS,cAAc;AACzB,iBAAO;AAAA,QACT;AACA;AAAA,MACF;AACA,YAAM,uBAAuB,4BAA4B,OAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,SAAO,GAAG,QAAQ;AACpB;AAIO,IAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,IAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,IAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,0BAA0B,OAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
   "names": []
 }

package/build-module/color-picker/color-copy-button.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/color-copy-button.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef(undefined);\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
-  "mappings": ";AAGA,SAAS,0BAA0B;AACnC,SAAS,UAAU,WAAW,cAAc;AAC5C,SAAS,MAAM,aAAa;AAC5B,SAAS,UAAU;AAKnB,SAAS,cAAc;AACvB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AACrB,IAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM,UAAU,mBAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,YAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,WAAW,GAAG,SAAS,IAAI,GAAG,MAAM;AAClD,SAAoB,qBAAK,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,QAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sourcesContent": ["import { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef(undefined);\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
+  "mappings": ";AAAA,SAAS,0BAA0B;AACnC,SAAS,UAAU,WAAW,cAAc;AAC5C,SAAS,MAAM,aAAa;AAC5B,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AACrB,IAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM,UAAU,mBAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,YAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,WAAW,GAAG,SAAS,IAAI,GAAG,MAAM;AAClD,SAAoB,qBAAK,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,QAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": []
 }

package/build-module/color-picker/color-input.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/color-input.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  hsla,\n  onChange,\n  onHSLChange,\n  enableAlpha\n}) => {\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        hsla: hsla,\n        onChange: onHSLChange,\n        enableAlpha: enableAlpha\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n  }\n};"],
-  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,OAAO,YAAY;AACrB,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,EACL;AACF;",
+  "sourcesContent": ["import { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  hsla,\n  onChange,\n  onHSLChange,\n  enableAlpha\n}) => {\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        hsla: hsla,\n        onChange: onHSLChange,\n        enableAlpha: enableAlpha\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n  }\n};"],
+  "mappings": ";AAAA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,OAAO,YAAY;AACrB,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,EACL;AACF;",
   "names": []
 }