@wordpress/components 39.0.0 → 40.1.0

package/build/custom-gradient-picker/gradient-bar/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/gradient-bar/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useRef, useReducer } from '@wordpress/element';\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n  switch (action.type) {\n    case 'MOVE_INSERTER':\n      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'MOVING_INSERTER',\n          insertPosition: action.insertPosition\n        };\n      }\n      break;\n    case 'STOP_INSERTER_MOVE':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'OPEN_INSERTER':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'INSERTING_CONTROL_POINT',\n          insertPosition: state.insertPosition\n        };\n      }\n      break;\n    case 'CLOSE_INSERTER':\n      if (state.id === 'INSERTING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'START_CONTROL_CHANGE':\n      if (state.id === 'IDLE') {\n        return {\n          id: 'MOVING_CONTROL_POINT'\n        };\n      }\n      break;\n    case 'STOP_CONTROL_CHANGE':\n      if (state.id === 'MOVING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n  }\n  return state;\n};\nconst customGradientBarReducerInitialState = {\n  id: 'IDLE'\n};\nexport default function CustomGradientBar({\n  background,\n  hasGradient,\n  value: controlPoints,\n  onChange,\n  disableInserter = false,\n  disableAlpha = false,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const gradientMarkersContainerDomRef = useRef(null);\n  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n  const onMouseEnterAndMove = event => {\n    if (!gradientMarkersContainerDomRef.current) {\n      return;\n    }\n    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n    // If the insert point is close to an existing control point don't show it.\n    if (controlPoints.some(({\n      position\n    }) => {\n      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n    })) {\n      if (gradientBarState.id === 'MOVING_INSERTER') {\n        gradientBarStateDispatch({\n          type: 'STOP_INSERTER_MOVE'\n        });\n      }\n      return;\n    }\n    gradientBarStateDispatch({\n      type: 'MOVE_INSERTER',\n      insertPosition\n    });\n  };\n  const onMouseLeave = () => {\n    gradientBarStateDispatch({\n      type: 'STOP_INSERTER_MOVE'\n    });\n  };\n  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx('components-custom-gradient-picker__gradient-bar', {\n      'has-gradient': hasGradient\n    }),\n    onMouseEnter: onMouseEnterAndMove,\n    onMouseMove: onMouseEnterAndMove,\n    onMouseLeave: onMouseLeave,\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: \"components-custom-gradient-picker__gradient-bar-background\",\n      style: {\n        background,\n        opacity: hasGradient ? 1 : 0.4\n      }\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: gradientMarkersContainerDomRef,\n      className: \"components-custom-gradient-picker__markers-container\",\n      children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        insertPosition: gradientBarState.insertPosition,\n        value: controlPoints,\n        onChange: onChange,\n        onOpenInserter: () => {\n          gradientBarStateDispatch({\n            type: 'OPEN_INSERTER'\n          });\n        },\n        onCloseInserter: () => {\n          gradientBarStateDispatch({\n            type: 'CLOSE_INSERTER'\n          });\n        }\n      }), /*#__PURE__*/_jsx(ControlPoints, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        disableRemove: disableInserter,\n        gradientPickerDomRef: gradientMarkersContainerDomRef,\n        ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n        value: controlPoints,\n        onChange: onChange,\n        onStartControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'START_CONTROL_CHANGE'\n          });\n        },\n        onStopControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'STOP_CONTROL_CHANGE'\n          });\n        }\n      })]\n    })]\n  });\n}"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useRef, useReducer } from '@wordpress/element';\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n  switch (action.type) {\n    case 'MOVE_INSERTER':\n      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'MOVING_INSERTER',\n          insertPosition: action.insertPosition\n        };\n      }\n      break;\n    case 'STOP_INSERTER_MOVE':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'OPEN_INSERTER':\n      if (state.id === 'MOVING_INSERTER') {\n        return {\n          id: 'INSERTING_CONTROL_POINT',\n          insertPosition: state.insertPosition\n        };\n      }\n      break;\n    case 'CLOSE_INSERTER':\n      if (state.id === 'INSERTING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n    case 'START_CONTROL_CHANGE':\n      if (state.id === 'IDLE') {\n        return {\n          id: 'MOVING_CONTROL_POINT'\n        };\n      }\n      break;\n    case 'STOP_CONTROL_CHANGE':\n      if (state.id === 'MOVING_CONTROL_POINT') {\n        return {\n          id: 'IDLE'\n        };\n      }\n      break;\n  }\n  return state;\n};\nconst customGradientBarReducerInitialState = {\n  id: 'IDLE'\n};\nexport default function CustomGradientBar({\n  background,\n  hasGradient,\n  value: controlPoints,\n  onChange,\n  disableInserter = false,\n  disableAlpha = false,\n  disablePositioning = false,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const gradientMarkersContainerDomRef = useRef(null);\n  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n  const onMouseEnterAndMove = event => {\n    if (!gradientMarkersContainerDomRef.current) {\n      return;\n    }\n    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n    // If the insert point is close to an existing control point don't show it.\n    if (controlPoints.some(({\n      position\n    }) => {\n      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n    })) {\n      if (gradientBarState.id === 'MOVING_INSERTER') {\n        gradientBarStateDispatch({\n          type: 'STOP_INSERTER_MOVE'\n        });\n      }\n      return;\n    }\n    gradientBarStateDispatch({\n      type: 'MOVE_INSERTER',\n      insertPosition\n    });\n  };\n  const onMouseLeave = () => {\n    gradientBarStateDispatch({\n      type: 'STOP_INSERTER_MOVE'\n    });\n  };\n  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx('components-custom-gradient-picker__gradient-bar', {\n      'has-gradient': hasGradient\n    }),\n    onMouseEnter: onMouseEnterAndMove,\n    onMouseMove: onMouseEnterAndMove,\n    onMouseLeave: onMouseLeave,\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: \"components-custom-gradient-picker__gradient-bar-background\",\n      style: {\n        background,\n        opacity: hasGradient ? 1 : 0.4\n      }\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: gradientMarkersContainerDomRef,\n      className: \"components-custom-gradient-picker__markers-container\",\n      children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        insertPosition: gradientBarState.insertPosition,\n        value: controlPoints,\n        onChange: onChange,\n        onOpenInserter: () => {\n          gradientBarStateDispatch({\n            type: 'OPEN_INSERTER'\n          });\n        },\n        onCloseInserter: () => {\n          gradientBarStateDispatch({\n            type: 'CLOSE_INSERTER'\n          });\n        }\n      }), /*#__PURE__*/_jsx(ControlPoints, {\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        disableAlpha: disableAlpha,\n        disableRemove: disableInserter,\n        disablePositioning: disablePositioning,\n        gradientPickerDomRef: gradientMarkersContainerDomRef,\n        ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n        value: controlPoints,\n        onChange: onChange,\n        onStartControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'START_CONTROL_CHANGE'\n          });\n        },\n        onStopControlPointChange: () => {\n          gradientBarStateDispatch({\n            type: 'STOP_CONTROL_CHANGE'\n          });\n        }\n      })]\n    })]\n  });\n}"],
+  "mappings": "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",
   "names": ["_jsxs", "clsx", "_jsx", "ControlPoints"]
 }

package/build/disabled/index.cjs

@@ -136,7 +136,7 @@ function Disabled({
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       // @ts-expect-error `inert` is not declared in React 18's HTML attribute types.
       inert: isDisabled ? "true" : void 0,
-      className: isDisabled ? (0, import_clsx.default)(style_module_default.disabled, className, "components-disabled") : void 0,
+      className: (0, import_clsx.default)(className, isDisabled && [style_module_default.disabled, "components-disabled"]) || void 0,
       ...props,
       children
     })

package/build/disabled/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/disabled/index.tsx", "../../../style-runtime/src/index.ts", "../../src/disabled/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport Context from './context';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-expect-error `inert` is not declared in React 18's HTML attribute types.\n      inert: isDisabled ? 'true' : undefined,\n      className: isDisabled ? clsx(styles.disabled, className, 'components-disabled') : undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;", "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(\"bacc423d2b\", \"._556ae8be2a7ddc8e__disabled{pointer-events:none;position:relative}._556ae8be2a7ddc8e__disabled:after{content:\\\"\\\";inset:0;position:absolute}._556ae8be2a7ddc8e__disabled *{pointer-events:none}\");\n}\nexport default {\"disabled\":\"_556ae8be2a7ddc8e__disabled\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport Context from './context';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-expect-error `inert` is not declared in React 18's HTML attribute types.\n      inert: isDisabled ? 'true' : undefined\n      // Only the disabled styling is conditional. The consumer's own\n      // className has to stick around so the wrapper stays targetable\n      // whether or not it is currently disabled.\n      ,\n      className: clsx(className, isDisabled && [styles.disabled, 'components-disabled']) || undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;", "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(\"bacc423d2b\", \"._556ae8be2a7ddc8e__disabled{pointer-events:none;position:relative}._556ae8be2a7ddc8e__disabled:after{content:\\\"\\\";inset:0;position:absolute}._556ae8be2a7ddc8e__disabled *{pointer-events:none}\");\n}\nexport default {\"disabled\":\"_556ae8be2a7ddc8e__disabled\"};\n"],
+  "mappings": "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",
   "names": ["Context", "_jsx", "clsx"]
 }

package/build/draggable/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/draggable/index.tsx", "../../../style-runtime/src/index.ts", "../../src/draggable/style.module.scss"],
-  "sourcesContent": ["import { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { getWpCompatOverlaySlot } from '@wordpress/ui';\nimport styles from './style.module.scss';\n\n// Legacy class names preserved alongside the CSS-module hashed ones for\n// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's\n// CSS-module mock.\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClasses = [styles['invisible-drag-image'], 'components-draggable__invisible-drag-image'].filter(Boolean);\nconst cloneWrapperClasses = [styles.clone, 'components-draggable__clone'].filter(Boolean);\n// Global class — shared with external code (e.g. block-editor keyboard drag).\nconst bodyClass = 'is-dragging-components-draggable';\nconst clonePadding = 0;\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable({\n  children,\n  onDragStart,\n  onDragOver,\n  onDragEnd,\n  appendToOwnerDocument = false,\n  cloneClassname,\n  elementId,\n  transferData,\n  __experimentalTransferDataType: transferDataType = 'text',\n  __experimentalDragComponent: dragComponent\n}) {\n  const dragComponentRef = useRef(null);\n  const cleanupRef = useRef(() => {});\n\n  /**\n   * Removes the element clone, resets cursor, and removes drag listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function end(event) {\n    event.preventDefault();\n    cleanupRef.current();\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  }\n\n  /**\n   * This method does a couple of things:\n   *\n   * - Clones the current element and spawns clone over original element.\n   * - Adds a fake temporary drag image to avoid browser defaults.\n   * - Sets transfer data.\n   * - Adds dragover listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function start(event) {\n    const {\n      ownerDocument\n    } = event.target;\n    // Only use the slot when it lives in the same document as the\n    // dragged element, so coordinate resolution stays in one space.\n    const slot = getWpCompatOverlaySlot();\n    const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;\n    event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n    const cloneWrapper = ownerDocument.createElement('div');\n    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n    cloneWrapper.style.top = '0';\n    cloneWrapper.style.left = '0';\n    const dragImage = ownerDocument.createElement('div');\n\n    // Set a fake drag image to avoid browser defaults. Remove from DOM\n    // right after. event.dataTransfer.setDragImage is not supported yet in\n    // IE, we need to check for its existence first.\n    if ('function' === typeof event.dataTransfer.setDragImage) {\n      dragImage.classList.add(...dragImageClasses);\n      // Invisible — stays at the document body, no slot needed.\n      ownerDocument.body.appendChild(dragImage);\n      event.dataTransfer.setDragImage(dragImage, 0, 0);\n    }\n    cloneWrapper.classList.add(...cloneWrapperClasses);\n    const inSlotClass = styles['is-in-compat-slot'];\n    if (compatSlot && inSlotClass) {\n      cloneWrapper.classList.add(inSlotClass);\n    }\n    if (cloneClassname) {\n      cloneWrapper.classList.add(cloneClassname);\n    }\n    let x = 0;\n    let y = 0;\n    // If a dragComponent is defined, the following logic will clone the\n    // HTML node and inject it into the cloneWrapper.\n    if (dragComponentRef.current) {\n      // Position dragComponent at the same position as the cursor.\n      x = event.clientX;\n      y = event.clientY;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n      const clonedDragComponent = ownerDocument.createElement('div');\n      clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n      cloneWrapper.appendChild(clonedDragComponent);\n      (compatSlot ?? ownerDocument.body).appendChild(cloneWrapper);\n    } else {\n      const element = ownerDocument.getElementById(elementId);\n\n      // Prepare element clone and append to element wrapper.\n      const elementRect = element.getBoundingClientRect();\n      const elementWrapper = element.parentNode;\n      const elementTopOffset = elementRect.top;\n      const elementLeftOffset = elementRect.left;\n      cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n      const clone = element.cloneNode(true);\n      clone.id = `clone-${elementId}`;\n\n      // Position clone right over the original element (20px padding).\n      x = elementLeftOffset - clonePadding;\n      y = elementTopOffset - clonePadding;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n      cloneWrapper.appendChild(clone);\n      if (compatSlot) {\n        compatSlot.appendChild(cloneWrapper);\n      } else if (appendToOwnerDocument) {\n        ownerDocument.body.appendChild(cloneWrapper);\n      } else {\n        elementWrapper?.appendChild(cloneWrapper);\n      }\n    }\n\n    // Mark the current cursor coordinates.\n    let cursorLeft = event.clientX;\n    let cursorTop = event.clientY;\n    function over(e) {\n      // Skip doing any work if mouse has not moved.\n      if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n        return;\n      }\n      const nextX = x + e.clientX - cursorLeft;\n      const nextY = y + e.clientY - cursorTop;\n      cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n      cursorLeft = e.clientX;\n      cursorTop = e.clientY;\n      x = nextX;\n      y = nextY;\n      if (onDragOver) {\n        onDragOver(e);\n      }\n    }\n\n    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n    // note that browsers may throttle raf below 60fps in certain conditions.\n    // @ts-expect-error `throttle` expects a `(...args: unknown[]) => unknown` callback.\n    const throttledDragOver = throttle(over, 16);\n    ownerDocument.addEventListener('dragover', throttledDragOver);\n\n    // Update cursor to 'grabbing', document wide.\n    ownerDocument.body.classList.add(bodyClass);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n    cleanupRef.current = () => {\n      // Remove drag clone.\n      if (cloneWrapper && cloneWrapper.parentNode) {\n        cloneWrapper.parentNode.removeChild(cloneWrapper);\n      }\n      if (dragImage && dragImage.parentNode) {\n        dragImage.parentNode.removeChild(dragImage);\n      }\n\n      // Reset cursor.\n      ownerDocument.body.classList.remove(bodyClass);\n      ownerDocument.removeEventListener('dragover', throttledDragOver);\n    };\n  }\n  useEffect(() => () => {\n    cleanupRef.current();\n  }, []);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children({\n      onDraggableStart: start,\n      onDraggableEnd: end\n    }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-draggable-drag-component-root\",\n      style: {\n        display: 'none'\n      },\n      ref: dragComponentRef,\n      children: dragComponent\n    })]\n  });\n}\nexport default Draggable;", "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(\"e7e88c1781\", \"._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}\");\n}\nexport default {\"invisible-drag-image\":\"_3476c2e530687f96__invisible-drag-image\",\"clone\":\"_6f00e51ab7574306__clone\",\"is-in-compat-slot\":\"_664ecd37377558df__is-in-compat-slot\"};\n"],
+  "sourcesContent": ["import { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { getWpCompatOverlaySlot } from '@wordpress/ui';\nimport styles from './style.module.scss';\n\n// Legacy class names preserved alongside the CSS-module hashed ones for\n// backwards compatibility. `filter(Boolean)` strips `undefined` from the\n// CSS-module mock.\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClasses = [styles['invisible-drag-image'], 'components-draggable__invisible-drag-image'].filter(Boolean);\nconst cloneWrapperClasses = [styles.clone, 'components-draggable__clone'].filter(Boolean);\n// Global class — shared with external code (e.g. block-editor keyboard drag).\nconst bodyClass = 'is-dragging-components-draggable';\nconst clonePadding = 0;\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable({\n  children,\n  onDragStart,\n  onDragOver,\n  onDragEnd,\n  appendToOwnerDocument = false,\n  cloneClassname,\n  elementId,\n  transferData,\n  __experimentalTransferDataType: transferDataType = 'text',\n  __experimentalDragComponent: dragComponent\n}) {\n  const dragComponentRef = useRef(null);\n  const cleanupRef = useRef(() => {});\n\n  /**\n   * Removes the element clone, resets cursor, and removes drag listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function end(event) {\n    event.preventDefault();\n    cleanupRef.current();\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  }\n\n  /**\n   * This method does a couple of things:\n   *\n   * - Clones the current element and spawns clone over original element.\n   * - Adds a fake temporary drag image to avoid browser defaults.\n   * - Sets transfer data.\n   * - Adds dragover listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function start(event) {\n    const {\n      ownerDocument\n    } = event.target;\n    // Only use the slot when it lives in the same document as the\n    // dragged element, so coordinate resolution stays in one space.\n    const slot = getWpCompatOverlaySlot();\n    const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;\n    event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n    const cloneWrapper = ownerDocument.createElement('div');\n    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n    cloneWrapper.style.top = '0';\n    cloneWrapper.style.left = '0';\n    const dragImage = ownerDocument.createElement('div');\n\n    // Set a fake drag image to avoid browser defaults. Remove from DOM\n    // right after. event.dataTransfer.setDragImage is not supported yet in\n    // IE, we need to check for its existence first.\n    if ('function' === typeof event.dataTransfer.setDragImage) {\n      dragImage.classList.add(...dragImageClasses);\n      // Invisible — stays at the document body, no slot needed.\n      ownerDocument.body.appendChild(dragImage);\n      event.dataTransfer.setDragImage(dragImage, 0, 0);\n    }\n    cloneWrapper.classList.add(...cloneWrapperClasses);\n    const inSlotClass = styles['is-in-compat-slot'];\n    if (compatSlot && inSlotClass) {\n      cloneWrapper.classList.add(inSlotClass);\n    }\n    if (cloneClassname) {\n      cloneWrapper.classList.add(cloneClassname);\n    }\n    let x = 0;\n    let y = 0;\n    // If a dragComponent is defined, the following logic will clone the\n    // HTML node and inject it into the cloneWrapper.\n    if (dragComponentRef.current) {\n      // Position dragComponent at the same position as the cursor.\n      x = event.clientX;\n      y = event.clientY;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n      const clonedDragComponent = ownerDocument.createElement('div');\n      clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n      cloneWrapper.appendChild(clonedDragComponent);\n      (compatSlot ?? ownerDocument.body).appendChild(cloneWrapper);\n    } else {\n      const element = ownerDocument.getElementById(elementId);\n\n      // Prepare element clone and append to element wrapper.\n      const elementRect = element.getBoundingClientRect();\n      const elementWrapper = element.parentNode;\n      const elementTopOffset = elementRect.top;\n      const elementLeftOffset = elementRect.left;\n      cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n      const clone = element.cloneNode(true);\n      clone.id = `clone-${elementId}`;\n\n      // Position clone right over the original element (20px padding).\n      x = elementLeftOffset - clonePadding;\n      y = elementTopOffset - clonePadding;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n      cloneWrapper.appendChild(clone);\n      if (compatSlot) {\n        compatSlot.appendChild(cloneWrapper);\n      } else if (appendToOwnerDocument) {\n        ownerDocument.body.appendChild(cloneWrapper);\n      } else {\n        elementWrapper?.appendChild(cloneWrapper);\n      }\n    }\n\n    // Mark the current cursor coordinates.\n    let cursorLeft = event.clientX;\n    let cursorTop = event.clientY;\n    function over(e) {\n      // Skip doing any work if mouse has not moved.\n      if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n        return;\n      }\n      const nextX = x + e.clientX - cursorLeft;\n      const nextY = y + e.clientY - cursorTop;\n      cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n      cursorLeft = e.clientX;\n      cursorTop = e.clientY;\n      x = nextX;\n      y = nextY;\n      if (onDragOver) {\n        onDragOver(e);\n      }\n    }\n\n    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n    // note that browsers may throttle raf below 60fps in certain conditions.\n    // @ts-expect-error `throttle` expects a `(...args: unknown[]) => unknown` callback.\n    const throttledDragOver = throttle(over, 16);\n    ownerDocument.addEventListener('dragover', throttledDragOver);\n\n    // Update cursor to 'grabbing', document wide.\n    ownerDocument.body.classList.add(bodyClass);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n    cleanupRef.current = () => {\n      // Remove drag clone.\n      if (cloneWrapper && cloneWrapper.parentNode) {\n        cloneWrapper.parentNode.removeChild(cloneWrapper);\n      }\n      if (dragImage && dragImage.parentNode) {\n        dragImage.parentNode.removeChild(dragImage);\n      }\n\n      // Reset cursor.\n      ownerDocument.body.classList.remove(bodyClass);\n      ownerDocument.removeEventListener('dragover', throttledDragOver);\n    };\n  }\n  useEffect(() => () => {\n    cleanupRef.current();\n  }, []);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children({\n      onDraggableStart: start,\n      onDraggableEnd: end\n    }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-draggable-drag-component-root\",\n      style: {\n        display: 'none'\n      },\n      ref: dragComponentRef,\n      children: dragComponent\n    })]\n  });\n}\nexport default Draggable;", "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(\"e7e88c1781\", \"._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}\");\n}\nexport default {\"invisible-drag-image\":\"_3476c2e530687f96__invisible-drag-image\",\"clone\":\"_6f00e51ab7574306__clone\",\"is-in-compat-slot\":\"_664ecd37377558df__is-in-compat-slot\"};\n"],
   "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build/dropdown/dropdown-content-wrapper.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/components/src/dropdown/dropdown-content-wrapper.tsx
@@ -24,17 +34,106 @@ __export(dropdown_content_wrapper_exports, {
   default: () => dropdown_content_wrapper_default
 });
 module.exports = __toCommonJS(dropdown_content_wrapper_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_context = require("../context/index.cjs");
-var import_styles = require("./styles.cjs");
+
+// 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/dropdown/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("7f9bfd3385", ".ab61d20c737fa550__content-wrapper{margin-left:-8px;margin-right:-8px}.ab61d20c737fa550__content-wrapper:first-of-type{margin-top:-8px}.ab61d20c737fa550__content-wrapper:last-of-type{margin-bottom:-8px}.f0a033fae417d720__padding-small{padding:8px}.d83816967399484e__padding-medium{padding:16px}");
+}
+var style_module_default = { "content-wrapper": "ab61d20c737fa550__content-wrapper", "padding-small": "f0a033fae417d720__padding-small", "padding-medium": "d83816967399484e__padding-medium" };
+
+// packages/components/src/dropdown/dropdown-content-wrapper.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function UnconnectedDropdownContentWrapper(props, forwardedRef) {
   const {
     paddingSize = "small",
+    className,
     ...derivedProps
   } = (0, import_context.useContextSystem)(props, "DropdownContentWrapper");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.DropdownContentWrapperDiv, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     ...derivedProps,
-    paddingSize,
+    className: (0, import_clsx.default)(style_module_default["content-wrapper"], {
+      [style_module_default["padding-small"]]: paddingSize !== "none" && paddingSize !== "medium",
+      [style_module_default["padding-medium"]]: paddingSize === "medium"
+    }, className),
     ref: forwardedRef
   });
 }

package/build/dropdown/dropdown-content-wrapper.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/dropdown/dropdown-content-wrapper.tsx"],
-  "sourcesContent": ["import { contextConnect, useContextSystem } from '../context';\nimport { DropdownContentWrapperDiv } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedDropdownContentWrapper(props, forwardedRef) {\n  const {\n    paddingSize = 'small',\n    ...derivedProps\n  } = useContextSystem(props, 'DropdownContentWrapper');\n  return /*#__PURE__*/_jsx(DropdownContentWrapperDiv, {\n    ...derivedProps,\n    paddingSize: paddingSize,\n    ref: forwardedRef\n  });\n}\n\n/**\n * A convenience wrapper for the `renderContent` when you want to apply\n * different padding. (Default is `paddingSize=\"small\"`).\n *\n * ```jsx\n * import {\n *   Dropdown,\n *   __experimentalDropdownContentWrapper as DropdownContentWrapper,\n * } from '@wordpress/components';\n *\n * <Dropdown\n *   renderContent={ () => (\n *     <DropdownContentWrapper paddingSize=\"medium\">\n *       My dropdown content\n *     </DropdownContentWrapper>\n * ) }\n * />\n * ```\n */\nexport const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');\nexport default DropdownContentWrapper;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAiD;AACjD,oBAA0C;AAC1C,yBAA4B;AAC5B,SAAS,kCAAkC,OAAO,cAAc;AAC9D,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,wBAAwB;AACpD,SAAoB,uCAAAA,KAAK,yCAA2B;AAAA,IAClD,GAAG;AAAA,IACH;AAAA,IACA,KAAK;AAAA,EACP,CAAC;AACH;AAqBO,IAAM,6BAAyB,+BAAe,mCAAmC,wBAAwB;AAChH,IAAO,mCAAQ;",
-  "names": ["_jsx"]
+  "sources": ["../../src/dropdown/dropdown-content-wrapper.tsx", "../../../style-runtime/src/index.ts", "../../src/dropdown/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { contextConnect, useContextSystem } from '../context';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedDropdownContentWrapper(props, forwardedRef) {\n  const {\n    paddingSize = 'small',\n    className,\n    ...derivedProps\n  } = useContextSystem(props, 'DropdownContentWrapper');\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...derivedProps,\n    className: clsx(styles['content-wrapper'], {\n      [styles['padding-small']]: paddingSize !== 'none' && paddingSize !== 'medium',\n      [styles['padding-medium']]: paddingSize === 'medium'\n    }, className),\n    ref: forwardedRef\n  });\n}\n\n/**\n * A convenience wrapper for the `renderContent` when you want to apply\n * different padding. (Default is `paddingSize=\"small\"`).\n *\n * ```jsx\n * import {\n *   Dropdown,\n *   __experimentalDropdownContentWrapper as DropdownContentWrapper,\n * } from '@wordpress/components';\n *\n * <Dropdown\n *   renderContent={ () => (\n *     <DropdownContentWrapper paddingSize=\"medium\">\n *       My dropdown content\n *     </DropdownContentWrapper>\n * ) }\n * />\n * ```\n */\nexport const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');\nexport default DropdownContentWrapper;", "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(\"7f9bfd3385\", \".ab61d20c737fa550__content-wrapper{margin-left:-8px;margin-right:-8px}.ab61d20c737fa550__content-wrapper:first-of-type{margin-top:-8px}.ab61d20c737fa550__content-wrapper:last-of-type{margin-bottom:-8px}.f0a033fae417d720__padding-small{padding:8px}.d83816967399484e__padding-medium{padding:16px}\");\n}\nexport default {\"content-wrapper\":\"ab61d20c737fa550__content-wrapper\",\"padding-small\":\"f0a033fae417d720__padding-small\",\"padding-medium\":\"d83816967399484e__padding-medium\"};\n"],
+  "mappings": "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",
+  "names": ["_jsx", "clsx"]
 }

package/build/duotone-picker/custom-duotone-bar.cjs

@@ -47,6 +47,7 @@ function CustomDuotoneBar({
   const controlPoints = (0, import_utils.getColorStopsFromColors)(values);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gradient_bar.default, {
     disableInserter: true,
+    disablePositioning: true,
     background,
     hasGradient,
     value: controlPoints,

package/build/duotone-picker/custom-duotone-bar.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/duotone-picker/custom-duotone-bar.tsx"],
-  "sourcesContent": ["import CustomGradientBar from '../custom-gradient-picker/gradient-bar';\nimport { getColorStopsFromColors, getGradientFromCSSColors, getColorsFromColorStops } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst PLACEHOLDER_VALUES = ['#333', '#CCC'];\nexport default function CustomDuotoneBar({\n  value,\n  onChange\n}) {\n  const hasGradient = !!value;\n  const values = hasGradient ? value : PLACEHOLDER_VALUES;\n  const background = getGradientFromCSSColors(values);\n  const controlPoints = getColorStopsFromColors(values);\n  return /*#__PURE__*/_jsx(CustomGradientBar, {\n    disableInserter: true,\n    background: background,\n    hasGradient: hasGradient,\n    value: controlPoints,\n    onChange: newColorStops => {\n      const newValue = getColorsFromColorStops(newColorStops);\n      onChange(newValue);\n    }\n  });\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA8B;AAC9B,mBAA2F;AAC3F,yBAA4B;AAC5B,IAAM,qBAAqB,CAAC,QAAQ,MAAM;AAC3B,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AACF,GAAG;AACD,QAAM,cAAc,CAAC,CAAC;AACtB,QAAM,SAAS,cAAc,QAAQ;AACrC,QAAM,iBAAa,uCAAyB,MAAM;AAClD,QAAM,oBAAgB,sCAAwB,MAAM;AACpD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAmB;AAAA,IAC1C,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,mBAAiB;AACzB,YAAM,eAAW,sCAAwB,aAAa;AACtD,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import CustomGradientBar from '../custom-gradient-picker/gradient-bar';\nimport { getColorStopsFromColors, getGradientFromCSSColors, getColorsFromColorStops } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst PLACEHOLDER_VALUES = ['#333', '#CCC'];\nexport default function CustomDuotoneBar({\n  value,\n  onChange\n}) {\n  const hasGradient = !!value;\n  const values = hasGradient ? value : PLACEHOLDER_VALUES;\n  const background = getGradientFromCSSColors(values);\n  const controlPoints = getColorStopsFromColors(values);\n  return /*#__PURE__*/_jsx(CustomGradientBar, {\n    disableInserter: true,\n    disablePositioning: true,\n    background: background,\n    hasGradient: hasGradient,\n    value: controlPoints,\n    onChange: newColorStops => {\n      const newValue = getColorsFromColorStops(newColorStops);\n      onChange(newValue);\n    }\n  });\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA8B;AAC9B,mBAA2F;AAC3F,yBAA4B;AAC5B,IAAM,qBAAqB,CAAC,QAAQ,MAAM;AAC3B,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AACF,GAAG;AACD,QAAM,cAAc,CAAC,CAAC;AACtB,QAAM,SAAS,cAAc,QAAQ;AACrC,QAAM,iBAAa,uCAAyB,MAAM;AAClD,QAAM,oBAAgB,sCAAwB,MAAM;AACpD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAmB;AAAA,IAC1C,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,mBAAiB;AACzB,YAAM,eAAW,sCAAwB,aAAa;AACtD,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,CAAC;AACH;",
   "names": ["_jsx", "CustomGradientBar"]
 }

package/build/duotone-picker/duotone-picker.cjs

@@ -45,6 +45,7 @@ var import_spacer = require("../spacer/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DuotonePicker({
   asButtons,
+  presentation,
   loop,
   clearable = true,
   unsetable = true,
@@ -53,29 +54,37 @@ function DuotonePicker({
   disableCustomColors,
   disableCustomDuotone,
   value,
+  selectedSlug,
   onChange,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
   ...otherProps
 }) {
+  (0, import_circular_option_picker.warnIfCircularOptionPickerAsButtonsIsSet)("DuotonePicker", asButtons);
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = (0, import_circular_option_picker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const [defaultDark, defaultLight] = (0, import_element.useMemo)(() => (0, import_utils.getDefaultColors)(colorPalette), [colorPalette]);
   const isUnset = value === "unset";
+  const isUnsetSelected = resolvedPresentation !== "command-buttons" && isUnset;
   const unsetOptionLabel = (0, import_i18n.__)("Unset");
   const unsetOption = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
     value: "unset",
-    isSelected: isUnset,
+    isSelected: isUnsetSelected,
     tooltipText: unsetOptionLabel,
     "aria-label": unsetOptionLabel,
     className: "components-duotone-picker__color-indicator",
     onClick: () => {
-      onChange(isUnset ? void 0 : "unset");
+      onChange(isUnsetSelected ? void 0 : "unset");
     }
   }, "unset");
   const duotoneOptions = duotonePalette.map(({
     colors,
     slug,
     name
-  }) => {
+  }, index) => {
     const style = {
       background: (0, import_utils.getGradientFromCSSColors)(colors, "135deg"),
       color: "transparent"
@@ -90,22 +99,22 @@ function DuotonePicker({
       (0, import_i18n.__)("Duotone: %s"),
       name
     ) : tooltipText;
-    const isSelected = (0, import_es6.default)(colors, value);
+    const isSelected = resolvedPresentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : (0, import_es6.default)(colors, value));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
       value: colors,
       isSelected,
       "aria-label": label,
       tooltipText,
       style,
-      onClick: () => {
-        onChange(isSelected ? void 0 : colors);
-      }
+      onClick: (
+        // Deselecting reports no preset, matching
+        // `ColorPalette` and `GradientPicker`. Passing the slug
+        // back would leave a controlled consumer marking the
+        // swatch as selected after its value had been cleared.
+        isSelected ? () => onChange(void 0) : () => onChange(colors, index, slug)
+      )
     }, slug);
   });
-  const {
-    metaProps,
-    labelProps
-  } = (0, import_circular_option_picker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
   const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default, {
     ...otherProps,
@@ -118,14 +127,14 @@ function DuotonePicker({
       disabled: !value,
       children: (0, import_i18n.__)("Clear")
     }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
+    children: !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
       paddingTop: options.length === 0 ? 0 : 4,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
         spacing: 3,
-        children: [!disableCustomColors && !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_duotone_bar.default, {
+        children: [!disableCustomColors && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_duotone_bar.default, {
           value: isUnset ? void 0 : value,
           onChange
-        }), !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_list_picker.default, {
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_list_picker.default, {
           labels: [(0, import_i18n.__)("Shadows"), (0, import_i18n.__)("Highlights")],
           colors: colorPalette,
           value: isUnset ? void 0 : value,

package/build/duotone-picker/duotone-picker.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/duotone-picker/duotone-picker.tsx"],
-  "sourcesContent": ["import fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnset,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnset ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name ?? sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    const isSelected = fastDeepEqual(colors, value);\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick: () => {\n        onChange(isSelected ? undefined : colors);\n      }\n    }, slug);\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  presentation,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  selectedSlug,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  warnIfCircularOptionPickerAsButtonsIsSet('DuotonePicker', asButtons);\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const isUnsetSelected = resolvedPresentation !== 'command-buttons' && isUnset;\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnsetSelected,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnsetSelected ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }, index) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name ?? sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    // When a non-empty selectedSlug is provided, selection is decided\n    // strictly by slug, which keeps two presets holding the same\n    // colors apart. Otherwise selection falls back to matching the\n    // colors themselves.\n    const isSelected = resolvedPresentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : fastDeepEqual(colors, value));\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick:\n      // Deselecting reports no preset, matching\n      // `ColorPalette` and `GradientPicker`. Passing the slug\n      // back would leave a controlled consumer marking the\n      // swatch as selected after its value had been cleared.\n      isSelected ? () => onChange(undefined) : () => onChange(colors, index, slug)\n    }, slug);\n  });\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: !disableCustomDuotone && /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
+  "mappings": "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",
   "names": ["_jsx", "CircularOptionPicker", "fastDeepEqual", "_jsxs", "CustomDuotoneBar", "ColorListPicker"]
 }

package/build/focal-point-picker/index.cjs

@@ -190,7 +190,6 @@ function FocalPointPicker({
     top: y !== void 0 ? y * bounds.height : 0.5 * bounds.height
   };
   const classes = (0, import_clsx.default)("components-focal-point-picker-control", className);
-  const Label = hideLabelFromVision ? import_visually_hidden.VisuallyHidden : import_base_control_styles.StyledLabel;
   (0, import_hooks.useUpdateEffect)(() => {
     setShowGridOverlay(true);
     const timeout = window.setTimeout(() => {
@@ -202,10 +201,13 @@ function FocalPointPicker({
     ...restProps,
     as: "fieldset",
     className: classes,
-    children: [!!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
+    children: [!!label && (hideLabelFromVision ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
       as: "legend",
       children: label
-    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.MediaWrapper, {
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control_styles.StyledLabel, {
+      as: "legend",
+      children: label
+    })), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.MediaWrapper, {
       className: "components-focal-point-picker-wrapper",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_focal_point_picker_style.MediaContainer, {
         className: "components-focal-point-picker",