@wordpress/components 37.0.1-next.v.202607070741.0 → 39.0.0

package/build/context/context-system-provider.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/context/context-system-provider.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext ?? {}, value ?? {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}          options\n * @param {React.ReactNode} options.children Children to render.\n * @param {T}               options.value    Props to render into connected components.\n * @return {React.JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AACtB,iBAA0B;AAE1B,6BAA8B;AAK9B,qBAAiE;AACjE,qBAAiB;AAKjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,iBAAiB,CAAC,GAAG,SAAS,CAAC,GAAG;AAAA,MACjD,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
+  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47\nimport { isPlainObject } from 'is-plain-object';\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext ?? {}, value ?? {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}          options\n * @param {React.ReactNode} options.children Children to render.\n * @param {T}               options.value    Props to render into connected components.\n * @return {React.JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,iBAA0B;AAE1B,6BAA8B;AAC9B,qBAAiE;AACjE,qBAAiB;AACjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,iBAAiB,CAAC,GAAG,SAAS,CAAC,GAAG;AAAA,MACjD,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
   "names": ["fastDeepEqual", "warn", "deepmerge", "_jsx"]
 }

package/build/context/get-styled-class-name-from-key.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/context/get-styled-class-name-from-key.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName(namespace) {\n  const kebab = kebabCase(namespace);\n  return `components-${kebab}`;\n}\nexport const getStyledClassNameFromKey = memoize(getStyledClassName);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAuC;AACvC,oBAAoB;AAQpB,SAAS,mBAAmB,WAAW;AACrC,QAAM,YAAQ,mBAAAA,WAAU,SAAS;AACjC,SAAO,cAAc,KAAK;AAC5B;AACO,IAAM,gCAA4B,cAAAC,SAAQ,kBAAkB;",
+  "sourcesContent": ["import { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName(namespace) {\n  const kebab = kebabCase(namespace);\n  return `components-${kebab}`;\n}\nexport const getStyledClassNameFromKey = memoize(getStyledClassName);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuC;AACvC,oBAAoB;AAQpB,SAAS,mBAAmB,WAAW;AACrC,QAAM,YAAQ,mBAAAA,WAAU,SAAS;AACjC,SAAO,cAAc,KAAK;AAC5B;AACO,IAAM,gCAA4B,cAAAC,SAAQ,kBAAkB;",
   "names": ["kebabCase", "memoize"]
 }

package/build/context/use-context-system.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/context/use-context-system.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem(props, namespace) {\n  const contextSystemProps = useComponentsContext();\n  if (typeof namespace === 'undefined') {\n    globalThis.SCRIPT_DEBUG === true ? warn('useContextSystem: Please provide a namespace') : void 0;\n  }\n  const contextProps = contextSystemProps?.[namespace] || {};\n\n  /** @type {ConnectedProps<P>} */\n  // @ts-ignore We fill in the missing properties below\n  const finalComponentProps = {\n    ...getConnectedNamespace(),\n    ...getNamespace(namespace)\n  };\n  const {\n    _overrides: overrideProps,\n    ...otherContextProps\n  } = contextProps;\n  const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;\n  const cx = useCx();\n  const classes = cx(getStyledClassNameFromKey(namespace), props.className);\n\n  // Provides the ability to customize the render of the component.\n  const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;\n  for (const key in initialMergedProps) {\n    // @ts-ignore filling in missing props\n    finalComponentProps[key] = initialMergedProps[key];\n  }\n  for (const key in overrideProps) {\n    // @ts-ignore filling in missing props\n    finalComponentProps[key] = overrideProps[key];\n  }\n\n  // Setting an `undefined` explicitly can cause unintended overwrites\n  // when a `cloneElement()` is involved.\n  if (rendered !== undefined) {\n    // @ts-ignore\n    finalComponentProps.children = rendered;\n  }\n  finalComponentProps.className = classes;\n  return finalComponentProps;\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiB;AAKjB,qCAAqC;AACrC,mBAAoD;AACpD,4CAA0C;AAC1C,oBAAsB;AAgBf,SAAS,iBAAiB,OAAO,WAAW;AACjD,QAAM,yBAAqB,qDAAqB;AAChD,MAAI,OAAO,cAAc,aAAa;AACpC,eAAW,iBAAiB,WAAO,eAAAA,SAAK,8CAA8C,IAAI;AAAA,EAC5F;AACA,QAAM,eAAe,qBAAqB,SAAS,KAAK,CAAC;AAIzD,QAAM,sBAAsB;AAAA,IAC1B,OAAG,oCAAsB;AAAA,IACzB,OAAG,2BAAa,SAAS;AAAA,EAC3B;AACA,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAqB,OAAO,QAAQ,iBAAiB,EAAE,SAAS,OAAO,OAAO,CAAC,GAAG,mBAAmB,KAAK,IAAI;AACpH,QAAM,SAAK,qBAAM;AACjB,QAAM,UAAU,OAAG,iEAA0B,SAAS,GAAG,MAAM,SAAS;AAGxE,QAAM,WAAW,OAAO,mBAAmB,mBAAmB,aAAa,mBAAmB,eAAe,kBAAkB,IAAI,mBAAmB;AACtJ,aAAW,OAAO,oBAAoB;AAEpC,wBAAoB,GAAG,IAAI,mBAAmB,GAAG;AAAA,EACnD;AACA,aAAW,OAAO,eAAe;AAE/B,wBAAoB,GAAG,IAAI,cAAc,GAAG;AAAA,EAC9C;AAIA,MAAI,aAAa,QAAW;AAE1B,wBAAoB,WAAW;AAAA,EACjC;AACA,sBAAoB,YAAY;AAChC,SAAO;AACT;",
+  "sourcesContent": ["import warn from '@wordpress/warning';\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem(props, namespace) {\n  const contextSystemProps = useComponentsContext();\n  if (typeof namespace === 'undefined') {\n    globalThis.SCRIPT_DEBUG === true ? warn('useContextSystem: Please provide a namespace') : void 0;\n  }\n  const contextProps = contextSystemProps?.[namespace] || {};\n\n  /** @type {ConnectedProps<P>} */\n  // @ts-expect-error The initial object cannot satisfy the generic `P`, whose props are copied in below.\n  const finalComponentProps = {\n    ...getConnectedNamespace(),\n    ...getNamespace(namespace)\n  };\n  const {\n    _overrides: overrideProps,\n    ...otherContextProps\n  } = contextProps;\n  const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;\n  const cx = useCx();\n  const classes = cx(getStyledClassNameFromKey(namespace), props.className);\n\n  // Provides the ability to customize the render of the component.\n  const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;\n  for (const key in initialMergedProps) {\n    // @ts-expect-error A string key cannot index the merged props type.\n    finalComponentProps[key] = initialMergedProps[key];\n  }\n  for (const key in overrideProps) {\n    // @ts-expect-error A string key cannot index the merged props type.\n    finalComponentProps[key] = overrideProps[key];\n  }\n\n  // Setting an `undefined` explicitly can cause unintended overwrites\n  // when a `cloneElement()` is involved.\n  if (rendered !== undefined) {\n    // @ts-expect-error `children` does not exist on `ConnectedProps<P>`.\n    finalComponentProps.children = rendered;\n  }\n  finalComponentProps.className = classes;\n  return finalComponentProps;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAiB;AACjB,qCAAqC;AACrC,mBAAoD;AACpD,4CAA0C;AAC1C,oBAAsB;AAgBf,SAAS,iBAAiB,OAAO,WAAW;AACjD,QAAM,yBAAqB,qDAAqB;AAChD,MAAI,OAAO,cAAc,aAAa;AACpC,eAAW,iBAAiB,WAAO,eAAAA,SAAK,8CAA8C,IAAI;AAAA,EAC5F;AACA,QAAM,eAAe,qBAAqB,SAAS,KAAK,CAAC;AAIzD,QAAM,sBAAsB;AAAA,IAC1B,OAAG,oCAAsB;AAAA,IACzB,OAAG,2BAAa,SAAS;AAAA,EAC3B;AACA,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAqB,OAAO,QAAQ,iBAAiB,EAAE,SAAS,OAAO,OAAO,CAAC,GAAG,mBAAmB,KAAK,IAAI;AACpH,QAAM,SAAK,qBAAM;AACjB,QAAM,UAAU,OAAG,iEAA0B,SAAS,GAAG,MAAM,SAAS;AAGxE,QAAM,WAAW,OAAO,mBAAmB,mBAAmB,aAAa,mBAAmB,eAAe,kBAAkB,IAAI,mBAAmB;AACtJ,aAAW,OAAO,oBAAoB;AAEpC,wBAAoB,GAAG,IAAI,mBAAmB,GAAG;AAAA,EACnD;AACA,aAAW,OAAO,eAAe;AAE/B,wBAAoB,GAAG,IAAI,cAAc,GAAG;AAAA,EAC9C;AAIA,MAAI,aAAa,QAAW;AAE1B,wBAAoB,WAAW;AAAA,EACjC;AACA,sBAAoB,YAAY;AAChC,SAAO;AACT;",
   "names": ["warn"]
 }

package/build/context/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/context/utils.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace(componentName) {\n  return {\n    [COMPONENT_NAMESPACE]: componentName\n  };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n  return {\n    [CONNECTED_NAMESPACE]: true\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyD;AAclD,SAAS,aAAa,eAAe;AAC1C,SAAO;AAAA,IACL,CAAC,oCAAmB,GAAG;AAAA,EACzB;AACF;AAaO,SAAS,wBAAwB;AACtC,SAAO;AAAA,IACL,CAAC,oCAAmB,GAAG;AAAA,EACzB;AACF;",
+  "sourcesContent": ["import { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace(componentName) {\n  return {\n    [COMPONENT_NAMESPACE]: componentName\n  };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n  return {\n    [CONNECTED_NAMESPACE]: true\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyD;AAclD,SAAS,aAAa,eAAe;AAC1C,SAAO;AAAA,IACL,CAAC,oCAAmB,GAAG;AAAA,EACzB;AACF;AAaO,SAAS,wBAAwB;AACtC,SAAO;AAAA,IACL,CAAC,oCAAmB,GAAG;AAAA,EACzB;AACF;",
   "names": []
 }

package/build/custom-gradient-picker/constants.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/constants.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nexport const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n  type: 'angular',\n  value: '90'\n};\nexport const GRADIENT_OPTIONS = [{\n  value: 'linear-gradient',\n  label: __('Linear')\n}, {\n  value: 'radial-gradient',\n  label: __('Radial')\n}];\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n  top: 0,\n  'top right': 45,\n  'right top': 45,\n  right: 90,\n  'right bottom': 135,\n  'bottom right': 135,\n  bottom: 180,\n  'bottom left': 225,\n  'left bottom': 225,\n  left: 270,\n  'top left': 315,\n  'left top': 315\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACZ,IAAM,mBAAmB;AACzB,IAAM,gCAAgC;AACtC,IAAM,kCAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,OAAO;AACT;AACO,IAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAO;AAAA,EACP,WAAO,gBAAG,QAAQ;AACpB,GAAG;AAAA,EACD,OAAO;AAAA,EACP,WAAO,gBAAG,QAAQ;AACpB,CAAC;AACM,IAAM,oCAAoC;AAAA,EAC/C,KAAK;AAAA,EACL,aAAa;AAAA,EACb,aAAa;AAAA,EACb,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AACd;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nexport const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n  type: 'angular',\n  value: '90'\n};\nexport const GRADIENT_OPTIONS = [{\n  value: 'linear-gradient',\n  label: __('Linear')\n}, {\n  value: 'radial-gradient',\n  label: __('Radial')\n}];\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n  top: 0,\n  'top right': 45,\n  'right top': 45,\n  right: 90,\n  'right bottom': 135,\n  'bottom right': 135,\n  bottom: 180,\n  'bottom left': 225,\n  'left bottom': 225,\n  left: 270,\n  'top left': 315,\n  'left top': 315\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACZ,IAAM,mBAAmB;AACzB,IAAM,gCAAgC;AACtC,IAAM,kCAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,OAAO;AACT;AACO,IAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAO;AAAA,EACP,WAAO,gBAAG,QAAQ;AACpB,GAAG;AAAA,EACD,OAAO;AAAA,EACP,WAAO,gBAAG,QAAQ;AACpB,CAAC;AACM,IAAM,oCAAoC;AAAA,EAC/C,KAAK;AAAA,EACL,aAAa;AAAA,EACb,aAAa;AAAA,EACb,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AACd;",
   "names": []
 }

package/build/custom-gradient-picker/gradient-bar/control-points.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/gradient-bar/control-points.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\nimport { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ControlPointButton({\n  isOpen,\n  position,\n  color,\n  ...additionalProps\n}) {\n  const instanceId = useInstanceId(ControlPointButton);\n  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Button, {\n      \"aria-label\": sprintf(\n      // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),\n      \"aria-describedby\": descriptionId,\n      \"aria-haspopup\": \"true\",\n      \"aria-expanded\": isOpen,\n      __next40pxDefaultSize: true,\n      className: clsx('components-custom-gradient-picker__control-point-button', {\n        'is-active': isOpen\n      }),\n      ...additionalProps\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: descriptionId,\n      children: __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')\n    })]\n  });\n}\nfunction GradientColorPickerDropdown({\n  isRenderedInSidebar,\n  className,\n  ...props\n}) {\n  // Open the popover below the gradient control/insertion point\n  const popoverProps = useMemo(() => ({\n    placement: 'bottom',\n    offset: 8,\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  }), []);\n  const mergedClassName = clsx('components-custom-gradient-picker__control-point-dropdown', className);\n  return /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n    isRenderedInSidebar: isRenderedInSidebar,\n    popoverProps: popoverProps,\n    className: mergedClassName,\n    ...props\n  });\n}\nfunction ControlPoints({\n  disableRemove,\n  disableAlpha,\n  gradientPickerDomRef,\n  ignoreMarkerPosition,\n  value: controlPoints,\n  onChange,\n  onStartControlPointChange,\n  onStopControlPointChange,\n  __experimentalIsRenderedInSidebar\n}) {\n  const controlPointMoveStateRef = useRef(undefined);\n  const onMouseMove = event => {\n    if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {\n      return;\n    }\n    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);\n    const {\n      initialPosition,\n      index,\n      significantMoveHappened\n    } = controlPointMoveStateRef.current;\n    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {\n      controlPointMoveStateRef.current.significantMoveHappened = true;\n    }\n    onChange(updateControlPointPosition(controlPoints, index, relativePosition));\n  };\n  const cleanEventListeners = () => {\n    if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', cleanEventListeners);\n      onStopControlPointChange();\n      controlPointMoveStateRef.current.listenersActivated = false;\n    }\n  };\n\n  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n  // This memoization would prevent the event listeners from being properly cleaned.\n  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n  const cleanEventListenersRef = useRef(undefined);\n  cleanEventListenersRef.current = cleanEventListeners;\n  useEffect(() => {\n    return () => {\n      cleanEventListenersRef.current?.();\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: controlPoints.map((point, index) => {\n      const initialPosition = point?.position;\n      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n        isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        onClose: onStopControlPointChange,\n        renderToggle: ({\n          isOpen,\n          onToggle\n        }) => /*#__PURE__*/_jsx(ControlPointButton, {\n          onClick: () => {\n            if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {\n              return;\n            }\n            if (isOpen) {\n              onStopControlPointChange();\n            } else {\n              onStartControlPointChange();\n            }\n            onToggle();\n          },\n          onMouseDown: () => {\n            if (window && window.addEventListener) {\n              controlPointMoveStateRef.current = {\n                initialPosition,\n                index,\n                significantMoveHappened: false,\n                listenersActivated: true\n              };\n              onStartControlPointChange();\n              window.addEventListener('mousemove', onMouseMove);\n              window.addEventListener('mouseup', cleanEventListeners);\n            }\n          },\n          onKeyDown: event => {\n            if (event.code === 'ArrowLeft') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));\n            } else if (event.code === 'ArrowRight') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));\n            }\n          },\n          isOpen: isOpen,\n          position: point.position,\n          color: point.color\n        }, index),\n        renderContent: ({\n          onClose\n        }) => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n          paddingSize: \"none\",\n          children: [/*#__PURE__*/_jsx(ColorPicker, {\n            enableAlpha: !disableAlpha,\n            color: point.color,\n            onChange: color => {\n              onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));\n            }\n          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/_jsx(HStack, {\n            className: \"components-custom-gradient-picker__remove-control-point-wrapper\",\n            alignment: \"center\",\n            children: /*#__PURE__*/_jsx(Button, {\n              onClick: () => {\n                onChange(removeControlPoint(controlPoints, index));\n                onClose();\n              },\n              variant: \"link\",\n              children: __('Remove Control Point')\n            })\n          })]\n        }),\n        style: {\n          left: `${point.position}%`,\n          transform: 'translateX( -50% )'\n        }\n      }, index);\n    })\n  });\n}\nfunction InsertPoint({\n  value: controlPoints,\n  onChange,\n  onOpenInserter,\n  onCloseInserter,\n  insertPosition,\n  disableAlpha,\n  __experimentalIsRenderedInSidebar\n}) {\n  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);\n  return /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n    isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n    className: \"components-custom-gradient-picker__inserter\",\n    onClose: () => {\n      onCloseInserter();\n    },\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"true\",\n      onClick: () => {\n        if (isOpen) {\n          onCloseInserter();\n        } else {\n          setAlreadyInsertedPoint(false);\n          onOpenInserter();\n        }\n        onToggle();\n      },\n      className: \"components-custom-gradient-picker__insert-point-dropdown\",\n      icon: plus\n    }),\n    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n      paddingSize: \"none\",\n      children: /*#__PURE__*/_jsx(ColorPicker, {\n        enableAlpha: !disableAlpha,\n        onChange: color => {\n          if (!alreadyInsertedPoint) {\n            onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));\n            setAlreadyInsertedPoint(true);\n          } else {\n            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));\n          }\n        }\n      })\n    }),\n    style: insertPosition !== null ? {\n      left: `${insertPosition}%`,\n      transform: 'translateX( -50% )'\n    } : undefined\n  });\n}\nControlPoints.InsertPoint = InsertPoint;\nexport default ControlPoints;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { colord } from 'colord';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\nimport { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ControlPointButton({\n  isOpen,\n  position,\n  color,\n  ...additionalProps\n}) {\n  const instanceId = useInstanceId(ControlPointButton);\n  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Button, {\n      \"aria-label\": sprintf(\n      // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),\n      \"aria-describedby\": descriptionId,\n      \"aria-haspopup\": \"true\",\n      \"aria-expanded\": isOpen,\n      __next40pxDefaultSize: true,\n      className: clsx('components-custom-gradient-picker__control-point-button', {\n        'is-active': isOpen\n      }),\n      ...additionalProps\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: descriptionId,\n      children: __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')\n    })]\n  });\n}\nfunction GradientColorPickerDropdown({\n  isRenderedInSidebar,\n  className,\n  ...props\n}) {\n  // Open the popover below the gradient control/insertion point\n  const popoverProps = useMemo(() => ({\n    placement: 'bottom',\n    offset: 8,\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  }), []);\n  const mergedClassName = clsx('components-custom-gradient-picker__control-point-dropdown', className);\n  return /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n    isRenderedInSidebar: isRenderedInSidebar,\n    popoverProps: popoverProps,\n    className: mergedClassName,\n    ...props\n  });\n}\nfunction ControlPoints({\n  disableRemove,\n  disableAlpha,\n  gradientPickerDomRef,\n  ignoreMarkerPosition,\n  value: controlPoints,\n  onChange,\n  onStartControlPointChange,\n  onStopControlPointChange,\n  __experimentalIsRenderedInSidebar\n}) {\n  const controlPointMoveStateRef = useRef(undefined);\n  const onMouseMove = event => {\n    if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {\n      return;\n    }\n    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);\n    const {\n      initialPosition,\n      index,\n      significantMoveHappened\n    } = controlPointMoveStateRef.current;\n    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {\n      controlPointMoveStateRef.current.significantMoveHappened = true;\n    }\n    onChange(updateControlPointPosition(controlPoints, index, relativePosition));\n  };\n  const cleanEventListeners = () => {\n    if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', cleanEventListeners);\n      onStopControlPointChange();\n      controlPointMoveStateRef.current.listenersActivated = false;\n    }\n  };\n\n  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n  // This memoization would prevent the event listeners from being properly cleaned.\n  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n  const cleanEventListenersRef = useRef(undefined);\n  cleanEventListenersRef.current = cleanEventListeners;\n  useEffect(() => {\n    return () => {\n      cleanEventListenersRef.current?.();\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: controlPoints.map((point, index) => {\n      const initialPosition = point?.position;\n      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n        isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        onClose: onStopControlPointChange,\n        renderToggle: ({\n          isOpen,\n          onToggle\n        }) => /*#__PURE__*/_jsx(ControlPointButton, {\n          onClick: () => {\n            if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {\n              return;\n            }\n            if (isOpen) {\n              onStopControlPointChange();\n            } else {\n              onStartControlPointChange();\n            }\n            onToggle();\n          },\n          onMouseDown: () => {\n            if (window && window.addEventListener) {\n              controlPointMoveStateRef.current = {\n                initialPosition,\n                index,\n                significantMoveHappened: false,\n                listenersActivated: true\n              };\n              onStartControlPointChange();\n              window.addEventListener('mousemove', onMouseMove);\n              window.addEventListener('mouseup', cleanEventListeners);\n            }\n          },\n          onKeyDown: event => {\n            if (event.code === 'ArrowLeft') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));\n            } else if (event.code === 'ArrowRight') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));\n            }\n          },\n          isOpen: isOpen,\n          position: point.position,\n          color: point.color\n        }, index),\n        renderContent: ({\n          onClose\n        }) => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n          paddingSize: \"none\",\n          children: [/*#__PURE__*/_jsx(ColorPicker, {\n            enableAlpha: !disableAlpha,\n            color: point.color,\n            onChange: color => {\n              onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));\n            }\n          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/_jsx(HStack, {\n            className: \"components-custom-gradient-picker__remove-control-point-wrapper\",\n            alignment: \"center\",\n            children: /*#__PURE__*/_jsx(Button, {\n              onClick: () => {\n                onChange(removeControlPoint(controlPoints, index));\n                onClose();\n              },\n              variant: \"link\",\n              children: __('Remove Control Point')\n            })\n          })]\n        }),\n        style: {\n          left: `${point.position}%`,\n          transform: 'translateX( -50% )'\n        }\n      }, index);\n    })\n  });\n}\nfunction InsertPoint({\n  value: controlPoints,\n  onChange,\n  onOpenInserter,\n  onCloseInserter,\n  insertPosition,\n  disableAlpha,\n  __experimentalIsRenderedInSidebar\n}) {\n  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);\n  return /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n    isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n    className: \"components-custom-gradient-picker__inserter\",\n    onClose: () => {\n      onCloseInserter();\n    },\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"true\",\n      onClick: () => {\n        if (isOpen) {\n          onCloseInserter();\n        } else {\n          setAlreadyInsertedPoint(false);\n          onOpenInserter();\n        }\n        onToggle();\n      },\n      className: \"components-custom-gradient-picker__insert-point-dropdown\",\n      icon: plus\n    }),\n    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n      paddingSize: \"none\",\n      children: /*#__PURE__*/_jsx(ColorPicker, {\n        enableAlpha: !disableAlpha,\n        onChange: color => {\n          if (!alreadyInsertedPoint) {\n            onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));\n            setAlreadyInsertedPoint(true);\n          } else {\n            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));\n          }\n        }\n      })\n    }),\n    style: insertPosition !== null ? {\n      left: `${insertPosition}%`,\n      transform: 'translateX( -50% )'\n    } : undefined\n  });\n}\nControlPoints.InsertPoint = InsertPoint;\nexport default ControlPoints;"],
+  "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx", "Button", "clsx", "DropdownContentWrapper"]
 }

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": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\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  __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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",
   "names": ["_jsxs", "clsx", "_jsx", "ControlPoints"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/gradient-bar/utils.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\n/**\n * Clamps a number between 0 and 100.\n *\n * @param value Value to clamp.\n *\n * @return Value clamped between 0 and 100.\n */\nexport function clampPercent(value) {\n  return Math.max(0, Math.min(100, value));\n}\n\n/**\n * Check if a control point is overlapping with another.\n *\n * @param value        Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition  New position of the control point.\n * @param minDistance  Distance considered to be overlapping.\n *\n * @return True if the point is overlapping.\n */\nexport function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {\n  const initialPosition = value[initialIndex].position;\n  const minPosition = Math.min(initialPosition, newPosition);\n  const maxPosition = Math.max(initialPosition, newPosition);\n  return value.some(({\n    position\n  }, index) => {\n    return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);\n  });\n}\n\n/**\n * Adds a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param position Position to insert the new point.\n * @param color    Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function addControlPoint(points, position, color) {\n  const nextIndex = points.findIndex(point => point.position > position);\n  const newPoint = {\n    color,\n    position\n  };\n  const newPoints = points.slice();\n  newPoints.splice(nextIndex - 1, 0, newPoint);\n  return newPoints;\n}\n\n/**\n * Removes a control point from an array and returns the new array.\n *\n * @param points Array of control points.\n * @param index  Index to remove.\n *\n * @return New array of control points.\n */\nexport function removeControlPoint(points, index) {\n  return points.filter((_point, pointIndex) => {\n    return pointIndex !== index;\n  });\n}\n/**\n * Updates a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param index    Index to update.\n * @param newPoint New control point to replace the index.\n *\n * @return New array of control points.\n */\nexport function updateControlPoint(points, index, newPoint) {\n  const newValue = points.slice();\n  newValue[index] = newPoint;\n  return newValue;\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param points      Array of control points.\n * @param index       Index to update.\n * @param newPosition Position to move the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointPosition(points, index, newPosition) {\n  if (isOverlapping(points, index, newPosition)) {\n    return points;\n  }\n  const newPoint = {\n    ...points[index],\n    position: newPosition\n  };\n  return updateControlPoint(points, index, newPoint);\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param index    Index to update.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColor(points, index, newColor) {\n  const newPoint = {\n    ...points[index],\n    color: newColor\n  };\n  return updateControlPoint(points, index, newPoint);\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColorByPosition(points, position, newColor) {\n  const index = points.findIndex(point => point.position === position);\n  return updateControlPointColor(points, index, newColor);\n}\n\n/**\n * Gets the horizontal coordinate when dragging a control point with the mouse.\n *\n * @param mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n *\n * @return Whole number percentage from the left.\n */\n\nexport function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {\n  if (!containerElement) {\n    return;\n  }\n  const {\n    x,\n    width\n  } = containerElement.getBoundingClientRect();\n  const absolutePositionValue = mouseXCoordinate - x;\n  return Math.round(clampPercent(absolutePositionValue * 100 / width));\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAgD;AAQzC,SAAS,aAAa,OAAO;AAClC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACzC;AAYO,SAAS,cAAc,OAAO,cAAc,aAAa,cAAc,kDAAiC;AAC7G,QAAM,kBAAkB,MAAM,YAAY,EAAE;AAC5C,QAAM,cAAc,KAAK,IAAI,iBAAiB,WAAW;AACzD,QAAM,cAAc,KAAK,IAAI,iBAAiB,WAAW;AACzD,SAAO,MAAM,KAAK,CAAC;AAAA,IACjB;AAAA,EACF,GAAG,UAAU;AACX,WAAO,UAAU,iBAAiB,KAAK,IAAI,WAAW,WAAW,IAAI,eAAe,cAAc,YAAY,WAAW;AAAA,EAC3H,CAAC;AACH;AAWO,SAAS,gBAAgB,QAAQ,UAAU,OAAO;AACvD,QAAM,YAAY,OAAO,UAAU,WAAS,MAAM,WAAW,QAAQ;AACrE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,OAAO,YAAY,GAAG,GAAG,QAAQ;AAC3C,SAAO;AACT;AAUO,SAAS,mBAAmB,QAAQ,OAAO;AAChD,SAAO,OAAO,OAAO,CAAC,QAAQ,eAAe;AAC3C,WAAO,eAAe;AAAA,EACxB,CAAC;AACH;AAUO,SAAS,mBAAmB,QAAQ,OAAO,UAAU;AAC1D,QAAM,WAAW,OAAO,MAAM;AAC9B,WAAS,KAAK,IAAI;AAClB,SAAO;AACT;AAWO,SAAS,2BAA2B,QAAQ,OAAO,aAAa;AACrE,MAAI,cAAc,QAAQ,OAAO,WAAW,GAAG;AAC7C,WAAO;AAAA,EACT;AACA,QAAM,WAAW;AAAA,IACf,GAAG,OAAO,KAAK;AAAA,IACf,UAAU;AAAA,EACZ;AACA,SAAO,mBAAmB,QAAQ,OAAO,QAAQ;AACnD;AAWO,SAAS,wBAAwB,QAAQ,OAAO,UAAU;AAC/D,QAAM,WAAW;AAAA,IACf,GAAG,OAAO,KAAK;AAAA,IACf,OAAO;AAAA,EACT;AACA,SAAO,mBAAmB,QAAQ,OAAO,QAAQ;AACnD;AAWO,SAAS,kCAAkC,QAAQ,UAAU,UAAU;AAC5E,QAAM,QAAQ,OAAO,UAAU,WAAS,MAAM,aAAa,QAAQ;AACnE,SAAO,wBAAwB,QAAQ,OAAO,QAAQ;AACxD;AAWO,SAAS,sCAAsC,kBAAkB,kBAAkB;AACxF,MAAI,CAAC,kBAAkB;AACrB;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB,sBAAsB;AAC3C,QAAM,wBAAwB,mBAAmB;AACjD,SAAO,KAAK,MAAM,aAAa,wBAAwB,MAAM,KAAK,CAAC;AACrE;",
+  "sourcesContent": ["import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\n/**\n * Clamps a number between 0 and 100.\n *\n * @param value Value to clamp.\n *\n * @return Value clamped between 0 and 100.\n */\nexport function clampPercent(value) {\n  return Math.max(0, Math.min(100, value));\n}\n\n/**\n * Check if a control point is overlapping with another.\n *\n * @param value        Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition  New position of the control point.\n * @param minDistance  Distance considered to be overlapping.\n *\n * @return True if the point is overlapping.\n */\nexport function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {\n  const initialPosition = value[initialIndex].position;\n  const minPosition = Math.min(initialPosition, newPosition);\n  const maxPosition = Math.max(initialPosition, newPosition);\n  return value.some(({\n    position\n  }, index) => {\n    return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);\n  });\n}\n\n/**\n * Adds a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param position Position to insert the new point.\n * @param color    Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function addControlPoint(points, position, color) {\n  const nextIndex = points.findIndex(point => point.position > position);\n  const newPoint = {\n    color,\n    position\n  };\n  const newPoints = points.slice();\n  newPoints.splice(nextIndex - 1, 0, newPoint);\n  return newPoints;\n}\n\n/**\n * Removes a control point from an array and returns the new array.\n *\n * @param points Array of control points.\n * @param index  Index to remove.\n *\n * @return New array of control points.\n */\nexport function removeControlPoint(points, index) {\n  return points.filter((_point, pointIndex) => {\n    return pointIndex !== index;\n  });\n}\n/**\n * Updates a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param index    Index to update.\n * @param newPoint New control point to replace the index.\n *\n * @return New array of control points.\n */\nexport function updateControlPoint(points, index, newPoint) {\n  const newValue = points.slice();\n  newValue[index] = newPoint;\n  return newValue;\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param points      Array of control points.\n * @param index       Index to update.\n * @param newPosition Position to move the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointPosition(points, index, newPosition) {\n  if (isOverlapping(points, index, newPosition)) {\n    return points;\n  }\n  const newPoint = {\n    ...points[index],\n    position: newPosition\n  };\n  return updateControlPoint(points, index, newPoint);\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param index    Index to update.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColor(points, index, newColor) {\n  const newPoint = {\n    ...points[index],\n    color: newColor\n  };\n  return updateControlPoint(points, index, newPoint);\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColorByPosition(points, position, newColor) {\n  const index = points.findIndex(point => point.position === position);\n  return updateControlPointColor(points, index, newColor);\n}\n\n/**\n * Gets the horizontal coordinate when dragging a control point with the mouse.\n *\n * @param mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n *\n * @return Whole number percentage from the left.\n */\n\nexport function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {\n  if (!containerElement) {\n    return;\n  }\n  const {\n    x,\n    width\n  } = containerElement.getBoundingClientRect();\n  const absolutePositionValue = mouseXCoordinate - x;\n  return Math.round(clampPercent(absolutePositionValue * 100 / width));\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAgD;AAQzC,SAAS,aAAa,OAAO;AAClC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACzC;AAYO,SAAS,cAAc,OAAO,cAAc,aAAa,cAAc,kDAAiC;AAC7G,QAAM,kBAAkB,MAAM,YAAY,EAAE;AAC5C,QAAM,cAAc,KAAK,IAAI,iBAAiB,WAAW;AACzD,QAAM,cAAc,KAAK,IAAI,iBAAiB,WAAW;AACzD,SAAO,MAAM,KAAK,CAAC;AAAA,IACjB;AAAA,EACF,GAAG,UAAU;AACX,WAAO,UAAU,iBAAiB,KAAK,IAAI,WAAW,WAAW,IAAI,eAAe,cAAc,YAAY,WAAW;AAAA,EAC3H,CAAC;AACH;AAWO,SAAS,gBAAgB,QAAQ,UAAU,OAAO;AACvD,QAAM,YAAY,OAAO,UAAU,WAAS,MAAM,WAAW,QAAQ;AACrE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,OAAO,YAAY,GAAG,GAAG,QAAQ;AAC3C,SAAO;AACT;AAUO,SAAS,mBAAmB,QAAQ,OAAO;AAChD,SAAO,OAAO,OAAO,CAAC,QAAQ,eAAe;AAC3C,WAAO,eAAe;AAAA,EACxB,CAAC;AACH;AAUO,SAAS,mBAAmB,QAAQ,OAAO,UAAU;AAC1D,QAAM,WAAW,OAAO,MAAM;AAC9B,WAAS,KAAK,IAAI;AAClB,SAAO;AACT;AAWO,SAAS,2BAA2B,QAAQ,OAAO,aAAa;AACrE,MAAI,cAAc,QAAQ,OAAO,WAAW,GAAG;AAC7C,WAAO;AAAA,EACT;AACA,QAAM,WAAW;AAAA,IACf,GAAG,OAAO,KAAK;AAAA,IACf,UAAU;AAAA,EACZ;AACA,SAAO,mBAAmB,QAAQ,OAAO,QAAQ;AACnD;AAWO,SAAS,wBAAwB,QAAQ,OAAO,UAAU;AAC/D,QAAM,WAAW;AAAA,IACf,GAAG,OAAO,KAAK;AAAA,IACf,OAAO;AAAA,EACT;AACA,SAAO,mBAAmB,QAAQ,OAAO,QAAQ;AACnD;AAWO,SAAS,kCAAkC,QAAQ,UAAU,UAAU;AAC5E,QAAM,QAAQ,OAAO,UAAU,WAAS,MAAM,aAAa,QAAQ;AACnE,SAAO,wBAAwB,QAAQ,OAAO,QAAQ;AACxD;AAWO,SAAS,sCAAsC,kBAAkB,kBAAkB;AACxF,MAAI,CAAC,kBAAkB;AACrB;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB,sBAAsB;AAC3C,QAAM,wBAAwB,mBAAmB;AACjD,SAAO,KAAK,MAAM,aAAa,wBAAwB,MAAM,KAAK,CAAC;AACrE;",
   "names": []
 }

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

@@ -131,7 +131,7 @@ function CustomGradientPicker({
       color: (0, import_utils.getStopCssColor)(colorStop),
       // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
       // TypeScript doesn't know that `colorStop.length` is not undefined here.
-      // @ts-expect-error
+      // @ts-expect-error `colorStop.length` is possibly `undefined`.
       position: parseInt(colorStop.length.value)
     };
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error `colorStop.length` is possibly `undefined`.\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
+  "mappings": "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",
   "names": ["_jsx", "AnglePickerControl", "SelectControl", "_jsxs", "CustomGradientBar"]
 }

package/build/custom-gradient-picker/serializer.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/serializer.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nexport function serializeGradientColor({\n  type,\n  value\n}) {\n  if (type === 'literal') {\n    return value;\n  }\n  if (type === 'hex') {\n    return `#${value}`;\n  }\n  if (type === 'var') {\n    return `var(${value})`;\n  }\n  if (type === 'hsl') {\n    const [hue, saturation, lightness] = value;\n    return `hsl(${hue},${saturation}%,${lightness}%)`;\n  }\n  if (type === 'hsla') {\n    const [hue, saturation, lightness, alpha] = value;\n    return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;\n  }\n  return `${type}(${value.join(',')})`;\n}\nexport function serializeGradientPosition(position) {\n  if (!position) {\n    return '';\n  }\n  const {\n    value,\n    type\n  } = position;\n  if (type === 'calc') {\n    return `calc(${value})`;\n  }\n  return `${value}${type}`;\n}\nexport function serializeGradientColorStop({\n  type,\n  value,\n  length\n}) {\n  return `${serializeGradientColor({\n    type,\n    value\n  })} ${serializeGradientPosition(length)}`;\n}\nexport function serializeGradientOrientation(orientation) {\n  if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {\n    return;\n  }\n  return `${orientation.value}deg`;\n}\nexport function serializeGradient({\n  type,\n  orientation,\n  colorStops\n}) {\n  const serializedOrientation = serializeGradientOrientation(orientation);\n  const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {\n    const getNumericStopValue = colorStop => {\n      return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value);\n    };\n    return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);\n  }).map(serializeGradientColorStop);\n  return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAAG;AACD,MAAI,SAAS,WAAW;AACtB,WAAO;AAAA,EACT;AACA,MAAI,SAAS,OAAO;AAClB,WAAO,IAAI,KAAK;AAAA,EAClB;AACA,MAAI,SAAS,OAAO;AAClB,WAAO,OAAO,KAAK;AAAA,EACrB;AACA,MAAI,SAAS,OAAO;AAClB,UAAM,CAAC,KAAK,YAAY,SAAS,IAAI;AACrC,WAAO,OAAO,GAAG,IAAI,UAAU,KAAK,SAAS;AAAA,EAC/C;AACA,MAAI,SAAS,QAAQ;AACnB,UAAM,CAAC,KAAK,YAAY,WAAW,KAAK,IAAI;AAC5C,WAAO,QAAQ,GAAG,IAAI,UAAU,KAAK,SAAS,KAAK,KAAK;AAAA,EAC1D;AACA,SAAO,GAAG,IAAI,IAAI,MAAM,KAAK,GAAG,CAAC;AACnC;AACO,SAAS,0BAA0B,UAAU;AAClD,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,SAAS,QAAQ;AACnB,WAAO,QAAQ,KAAK;AAAA,EACtB;AACA,SAAO,GAAG,KAAK,GAAG,IAAI;AACxB;AACO,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SAAO,GAAG,uBAAuB;AAAA,IAC/B;AAAA,IACA;AAAA,EACF,CAAC,CAAC,IAAI,0BAA0B,MAAM,CAAC;AACzC;AACO,SAAS,6BAA6B,aAAa;AACxD,MAAI,MAAM,QAAQ,WAAW,KAAK,CAAC,eAAe,YAAY,SAAS,WAAW;AAChF;AAAA,EACF;AACA,SAAO,GAAG,YAAY,KAAK;AAC7B;AACO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,wBAAwB,6BAA6B,WAAW;AACtE,QAAM,uBAAuB,WAAW,KAAK,CAAC,YAAY,eAAe;AACvE,UAAM,sBAAsB,eAAa;AACvC,aAAO,WAAW,QAAQ,UAAU,SAAY,IAAI,SAAS,UAAU,OAAO,KAAK;AAAA,IACrF;AACA,WAAO,oBAAoB,UAAU,IAAI,oBAAoB,UAAU;AAAA,EACzE,CAAC,EAAE,IAAI,0BAA0B;AACjC,SAAO,GAAG,IAAI,IAAI,CAAC,uBAAuB,GAAG,oBAAoB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC;AAC9F;",
+  "sourcesContent": ["export function serializeGradientColor({\n  type,\n  value\n}) {\n  if (type === 'literal') {\n    return value;\n  }\n  if (type === 'hex') {\n    return `#${value}`;\n  }\n  if (type === 'var') {\n    return `var(${value})`;\n  }\n  if (type === 'hsl') {\n    const [hue, saturation, lightness] = value;\n    return `hsl(${hue},${saturation}%,${lightness}%)`;\n  }\n  if (type === 'hsla') {\n    const [hue, saturation, lightness, alpha] = value;\n    return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;\n  }\n  return `${type}(${value.join(',')})`;\n}\nexport function serializeGradientPosition(position) {\n  if (!position) {\n    return '';\n  }\n  const {\n    value,\n    type\n  } = position;\n  if (type === 'calc') {\n    return `calc(${value})`;\n  }\n  return `${value}${type}`;\n}\nexport function serializeGradientColorStop({\n  type,\n  value,\n  length\n}) {\n  return `${serializeGradientColor({\n    type,\n    value\n  })} ${serializeGradientPosition(length)}`;\n}\nexport function serializeGradientOrientation(orientation) {\n  if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {\n    return;\n  }\n  return `${orientation.value}deg`;\n}\nexport function serializeGradient({\n  type,\n  orientation,\n  colorStops\n}) {\n  const serializedOrientation = serializeGradientOrientation(orientation);\n  const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {\n    const getNumericStopValue = colorStop => {\n      return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value);\n    };\n    return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);\n  }).map(serializeGradientColorStop);\n  return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAAG;AACD,MAAI,SAAS,WAAW;AACtB,WAAO;AAAA,EACT;AACA,MAAI,SAAS,OAAO;AAClB,WAAO,IAAI,KAAK;AAAA,EAClB;AACA,MAAI,SAAS,OAAO;AAClB,WAAO,OAAO,KAAK;AAAA,EACrB;AACA,MAAI,SAAS,OAAO;AAClB,UAAM,CAAC,KAAK,YAAY,SAAS,IAAI;AACrC,WAAO,OAAO,GAAG,IAAI,UAAU,KAAK,SAAS;AAAA,EAC/C;AACA,MAAI,SAAS,QAAQ;AACnB,UAAM,CAAC,KAAK,YAAY,WAAW,KAAK,IAAI;AAC5C,WAAO,QAAQ,GAAG,IAAI,UAAU,KAAK,SAAS,KAAK,KAAK;AAAA,EAC1D;AACA,SAAO,GAAG,IAAI,IAAI,MAAM,KAAK,GAAG,CAAC;AACnC;AACO,SAAS,0BAA0B,UAAU;AAClD,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,SAAS,QAAQ;AACnB,WAAO,QAAQ,KAAK;AAAA,EACtB;AACA,SAAO,GAAG,KAAK,GAAG,IAAI;AACxB;AACO,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SAAO,GAAG,uBAAuB;AAAA,IAC/B;AAAA,IACA;AAAA,EACF,CAAC,CAAC,IAAI,0BAA0B,MAAM,CAAC;AACzC;AACO,SAAS,6BAA6B,aAAa;AACxD,MAAI,MAAM,QAAQ,WAAW,KAAK,CAAC,eAAe,YAAY,SAAS,WAAW;AAChF;AAAA,EACF;AACA,SAAO,GAAG,YAAY,KAAK;AAC7B;AACO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,wBAAwB,6BAA6B,WAAW;AACtE,QAAM,uBAAuB,WAAW,KAAK,CAAC,YAAY,eAAe;AACvE,UAAM,sBAAsB,eAAa;AACvC,aAAO,WAAW,QAAQ,UAAU,SAAY,IAAI,SAAS,UAAU,OAAO,KAAK;AAAA,IACrF;AACA,WAAO,oBAAoB,UAAU,IAAI,oBAAoB,UAAU;AAAA,EACzE,CAAC,EAAE,IAAI,0BAA0B;AACjC,SAAO,GAAG,IAAI,IAAI,CAAC,uBAAuB,GAAG,oBAAoB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC;AAC9F;",
   "names": []
 }

package/build/custom-gradient-picker/styles/custom-gradient-picker-styles.cjs

@@ -49,7 +49,7 @@ var SelectWrapper = /* @__PURE__ */ (0, import_base.default)(import_flex.FlexBlo
   styles: "flex-grow:5"
 } : {
   name: "1gvx10y",
-  styles: "flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTZ0QiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */",
+  styles: "flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHZ0QiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var AccessoryWrapper = /* @__PURE__ */ (0, import_base.default)(import_flex.FlexBlock, process.env.NODE_ENV === "production" ? {
@@ -62,7 +62,7 @@ var AccessoryWrapper = /* @__PURE__ */ (0, import_base.default)(import_flex.Flex
   styles: "flex-grow:5"
 } : {
   name: "1gvx10y",
-  styles: "flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhbUQiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */",
+  styles: "flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPbUQiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 // Annotate the CommonJS export names for ESM import in node:

package/build/custom-gradient-picker/styles/custom-gradient-picker-styles.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx"],
-  "sourcesContent": ["import _styled from \"@emotion/styled/base\";\nfunction _EMOTION_STRINGIFIED_CSS_ERROR__() { return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\"; }\n/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../../flex';\nexport const SelectWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === \"production\" ? {\n  target: \"e10bzpgi1\"\n} : {\n  target: \"e10bzpgi1\",\n  label: \"SelectWrapper\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5\"\n} : {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTZ0QiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});\nexport const AccessoryWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === \"production\" ? {\n  target: \"e10bzpgi0\"\n} : {\n  target: \"e10bzpgi0\",\n  label: \"AccessoryWrapper\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5\"\n} : {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhbUQiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAoB;AASpB,kBAA0B;AAR1B,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AASjR,IAAM,gBAA6B,gCAAAA,SAAQ,uBAAW,QAAQ,IAAI,aAAa,eAAe;AAAA,EACnG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ,CAAC;AACM,IAAM,mBAAgC,gCAAAA,SAAQ,uBAAW,QAAQ,IAAI,aAAa,eAAe;AAAA,EACtG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ,CAAC;",
+  "sourcesContent": ["import _styled from \"@emotion/styled/base\";\nfunction _EMOTION_STRINGIFIED_CSS_ERROR__() { return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\"; }\nimport { FlexBlock } from '../../flex';\nexport const SelectWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === \"production\" ? {\n  target: \"e10bzpgi1\"\n} : {\n  target: \"e10bzpgi1\",\n  label: \"SelectWrapper\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5\"\n} : {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHZ0QiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});\nexport const AccessoryWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === \"production\" ? {\n  target: \"e10bzpgi0\"\n} : {\n  target: \"e10bzpgi0\",\n  label: \"AccessoryWrapper\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5\"\n} : {\n  name: \"1gvx10y\",\n  styles: \"flex-grow:5/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPbUQiLCJmaWxlIjoiY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRmxleEJsb2NrIH0gZnJvbSAnLi4vLi4vZmxleCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjY2Vzc29yeVdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAoB;AAEpB,kBAA0B;AAD1B,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AAEjR,IAAM,gBAA6B,gCAAAA,SAAQ,uBAAW,QAAQ,IAAI,aAAa,eAAe;AAAA,EACnG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ,CAAC;AACM,IAAM,mBAAgC,gCAAAA,SAAQ,uBAAW,QAAQ,IAAI,aAAa,eAAe;AAAA,EACtG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AACZ,CAAC;",
   "names": ["_styled"]
 }

package/build/custom-gradient-picker/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from './constants';\nimport { serializeGradient } from './serializer';\nextend([namesPlugin]);\nexport function getLinearGradientRepresentation(gradientAST) {\n  return serializeGradient({\n    type: 'linear-gradient',\n    orientation: HORIZONTAL_GRADIENT_ORIENTATION,\n    colorStops: gradientAST.colorStops\n  });\n}\nfunction hasUnsupportedLength(item) {\n  return item.length === undefined || item.length.type !== '%';\n}\nexport function getGradientAstWithDefault(value) {\n  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n  let gradientAST;\n  let hasGradient = !!value;\n  const valueToParse = value ?? DEFAULT_GRADIENT;\n  try {\n    gradientAST = gradientParser.parse(valueToParse)[0];\n  } catch (error) {\n    // eslint-disable-next-line no-console\n    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);\n    gradientAST = gradientParser.parse(DEFAULT_GRADIENT)[0];\n    hasGradient = false;\n  }\n  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {\n    gradientAST.orientation = {\n      type: 'angular',\n      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()\n    };\n  }\n  if (gradientAST.colorStops.some(hasUnsupportedLength)) {\n    const {\n      colorStops\n    } = gradientAST;\n    const step = 100 / (colorStops.length - 1);\n    colorStops.forEach((stop, index) => {\n      stop.length = {\n        value: `${step * index}`,\n        type: '%'\n      };\n    });\n  }\n  return {\n    gradientAST,\n    hasGradient\n  };\n}\nexport function getGradientAstWithControlPoints(gradientAST, newControlPoints) {\n  return {\n    ...gradientAST,\n    colorStops: newControlPoints.map(({\n      position,\n      color\n    }) => {\n      const {\n        r,\n        g,\n        b,\n        a\n      } = colord(color).toRgb();\n      return {\n        length: {\n          type: '%',\n          value: position?.toString()\n        },\n        type: a < 1 ? 'rgba' : 'rgb',\n        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]\n      };\n    })\n  };\n}\nexport function getStopCssColor(colorStop) {\n  switch (colorStop.type) {\n    case 'hex':\n      return `#${colorStop.value}`;\n    case 'literal':\n      return colorStop.value;\n    case 'var':\n      return `${colorStop.type}(${colorStop.value})`;\n    case 'rgb':\n    case 'rgba':\n      return `${colorStop.type}(${colorStop.value.join(',')})`;\n    case 'hsl':\n      {\n        const [hue, saturation, lightness] = colorStop.value;\n        return `hsl(${hue},${saturation}%,${lightness}%)`;\n      }\n    case 'hsla':\n      {\n        const [hue, saturation, lightness, alpha] = colorStop.value;\n        return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;\n      }\n    default:\n      // Should be unreachable if passing an AST from gradient-parser.\n      // See https://github.com/rafaelcaricio/gradient-parser#ast.\n      return 'transparent';\n  }\n}"],
-  "mappings": "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",
+  "sourcesContent": ["import gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from './constants';\nimport { serializeGradient } from './serializer';\nextend([namesPlugin]);\nexport function getLinearGradientRepresentation(gradientAST) {\n  return serializeGradient({\n    type: 'linear-gradient',\n    orientation: HORIZONTAL_GRADIENT_ORIENTATION,\n    colorStops: gradientAST.colorStops\n  });\n}\nfunction hasUnsupportedLength(item) {\n  return item.length === undefined || item.length.type !== '%';\n}\nexport function getGradientAstWithDefault(value) {\n  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n  let gradientAST;\n  let hasGradient = !!value;\n  const valueToParse = value ?? DEFAULT_GRADIENT;\n  try {\n    gradientAST = gradientParser.parse(valueToParse)[0];\n  } catch (error) {\n    // eslint-disable-next-line no-console\n    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);\n    gradientAST = gradientParser.parse(DEFAULT_GRADIENT)[0];\n    hasGradient = false;\n  }\n  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {\n    gradientAST.orientation = {\n      type: 'angular',\n      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()\n    };\n  }\n  if (gradientAST.colorStops.some(hasUnsupportedLength)) {\n    const {\n      colorStops\n    } = gradientAST;\n    const step = 100 / (colorStops.length - 1);\n    colorStops.forEach((stop, index) => {\n      stop.length = {\n        value: `${step * index}`,\n        type: '%'\n      };\n    });\n  }\n  return {\n    gradientAST,\n    hasGradient\n  };\n}\nexport function getGradientAstWithControlPoints(gradientAST, newControlPoints) {\n  return {\n    ...gradientAST,\n    colorStops: newControlPoints.map(({\n      position,\n      color\n    }) => {\n      const {\n        r,\n        g,\n        b,\n        a\n      } = colord(color).toRgb();\n      return {\n        length: {\n          type: '%',\n          value: position?.toString()\n        },\n        type: a < 1 ? 'rgba' : 'rgb',\n        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]\n      };\n    })\n  };\n}\nexport function getStopCssColor(colorStop) {\n  switch (colorStop.type) {\n    case 'hex':\n      return `#${colorStop.value}`;\n    case 'literal':\n      return colorStop.value;\n    case 'var':\n      return `${colorStop.type}(${colorStop.value})`;\n    case 'rgb':\n    case 'rgba':\n      return `${colorStop.type}(${colorStop.value.join(',')})`;\n    case 'hsl':\n      {\n        const [hue, saturation, lightness] = colorStop.value;\n        return `hsl(${hue},${saturation}%,${lightness}%)`;\n      }\n    case 'hsla':\n      {\n        const [hue, saturation, lightness, alpha] = colorStop.value;\n        return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;\n      }\n    default:\n      // Should be unreachable if passing an AST from gradient-parser.\n      // See https://github.com/rafaelcaricio/gradient-parser#ast.\n      return 'transparent';\n  }\n}"],
+  "mappings": "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",
   "names": ["namesPlugin", "gradientParser"]
 }

package/build/custom-select-control/index.cjs

@@ -70,7 +70,6 @@ function CustomSelectControl(props) {
   const {
     // Prevent passing legacy props to internal component.
     __next40pxDefaultSize: _next40pxDefaultSize,
-    __shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
     describedBy,
     options,
     onChange,
@@ -155,7 +154,7 @@ function CustomSelectControl(props) {
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_select.default, {
       "aria-describedby": descriptionId,
       renderSelectedValue,
-      size: size === "__unstable-large" ? "default" : size,
+      size,
       store,
       className: (0, import_clsx.default)(
         // Keeping the classname for legacy reasons

package/build/custom-select-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  __experimentalShowSelectedHint,\n  ...otherProps\n}) {\n  return {\n    showSelectedHint: __experimentalShowSelectedHint,\n    ...otherProps\n  };\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations({\n  __experimentalHint,\n  ...rest\n}) {\n  return {\n    hint: __experimentalHint,\n    ...rest\n  };\n}\nfunction getDescribedBy(currentName, describedBy) {\n  if (describedBy) {\n    return describedBy;\n  }\n\n  // translators: %s: The selected option.\n  return sprintf(__('Currently selected: %s'), currentName);\n}\n\n/**\n * `CustomSelectControl` is a dropdown for selecting a single option from a\n * list, with support for custom styling. Use it instead of the `SelectControl`\n * when options need richer markup (e.g. per-option styles or hints).\n */\nfunction CustomSelectControl(props) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,\n    describedBy,\n    options,\n    onChange,\n    size = 'default',\n    value,\n    className: classNameProp,\n    showSelectedHint = false,\n    ...restProps\n  } = useDeprecatedProps(props);\n  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');\n\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    async setValue(nextValue) {\n      const nextOption = options.find(item => item.key === nextValue);\n      if (!onChange || !nextOption) {\n        return;\n      }\n\n      // Executes the logic in a microtask after the popup is closed.\n      // This is simply to ensure the isOpen state matches the one from the\n      // previous legacy implementation.\n      await Promise.resolve();\n      const state = store.getState();\n      const changeObject = {\n        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),\n        inputValue: '',\n        isOpen: state.open,\n        selectedItem: nextOption,\n        type: ''\n      };\n      onChange(changeObject);\n    },\n    value: value?.key,\n    // Setting the first option as a default value when no value is provided\n    // is already done natively by the underlying Ariakit component,\n    // but doing this explicitly avoids the `onChange` callback from firing\n    // on initial render, thus making this implementation closer to the v1.\n    defaultValue: options[0]?.key\n  });\n  const children = options.map(applyOptionDeprecations).map(({\n    name,\n    key,\n    hint,\n    style,\n    className\n  }) => {\n    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: name\n      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__item-hint\",\n        children: hint\n      })]\n    });\n    return /*#__PURE__*/_jsx(CustomSelectItem, {\n      value: key,\n      children: hint ? withHint : name,\n      style: style,\n      className: clsx(className,\n      // Keeping the classnames for legacy reasons\n      'components-custom-select-control__item', {\n        'has-hint': hint\n      })\n    }, key);\n  });\n  const currentValue = Ariakit.useStoreState(store, 'value');\n  const selectedOption = options?.map(applyOptionDeprecations)?.find(({\n    key\n  }) => currentValue === key) ?? options[0];\n  const renderSelectedValue = () => {\n    if (!showSelectedHint || !selectedOption.hint) {\n      return selectedOption?.name;\n    }\n    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {\n      children: [selectedOption?.name, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__hint\",\n        children: selectedOption?.hint\n      })]\n    });\n  };\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(CustomSelect, {\n      \"aria-describedby\": descriptionId,\n      renderSelectedValue: renderSelectedValue,\n      size: size === '__unstable-large' ? 'default' : size,\n      store: store,\n      className: clsx(\n      // Keeping the classname for legacy reasons\n      'components-custom-select-control', classNameProp),\n      isLegacy: true,\n      ...restProps,\n      children: children\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: getDescribedBy(selectedOption?.name, describedBy)\n      })\n    })]\n  });\n}\nexport default CustomSelectControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AACzB,kBAAiB;AAKjB,qBAA8B;AAC9B,kBAA4B;AAK5B,2BAAyB;AACzB,kBAA6B;AAC7B,aAAwB;AACxB,6BAA+B;AAC/B,yBAAkE;AAClE,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAO;AAAA,IACL,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AACF;AAKA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AACF;AACA,SAAS,eAAe,aAAa,aAAa;AAChD,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAGA,aAAO,yBAAQ,gBAAG,wBAAwB,GAAG,WAAW;AAC1D;AAOA,SAAS,oBAAoB,OAAO;AAClC,QAAM;AAAA;AAAA,IAEJ,uBAAuB;AAAA,IACvB,mCAAmC;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAAI,mBAAmB,KAAK;AAC5B,QAAM,oBAAgB,8BAAc,qBAAqB,oCAAoC;AAG7F,QAAM,QAAgB,uBAAe;AAAA,IACnC,MAAM,SAAS,WAAW;AACxB,YAAM,aAAa,QAAQ,KAAK,UAAQ,KAAK,QAAQ,SAAS;AAC9D,UAAI,CAAC,YAAY,CAAC,YAAY;AAC5B;AAAA,MACF;AAKA,YAAM,QAAQ,QAAQ;AACtB,YAAM,QAAQ,MAAM,SAAS;AAC7B,YAAM,eAAe;AAAA,QACnB,kBAAkB,MAAM,cAAc,UAAU,UAAQ,KAAK,UAAU,SAAS;AAAA,QAChF,YAAY;AAAA,QACZ,QAAQ,MAAM;AAAA,QACd,cAAc;AAAA,QACd,MAAM;AAAA,MACR;AACA,eAAS,YAAY;AAAA,IACvB;AAAA,IACA,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,cAAc,QAAQ,CAAC,GAAG;AAAA,EAC5B,CAAC;AACD,QAAM,WAAW,QAAQ,IAAI,uBAAuB,EAAE,IAAI,CAAC;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,WAAwB,uCAAAA,MAAa,4BAAqB;AAAA,MAC9D,UAAU,CAAc,uCAAAC,KAAK,QAAQ;AAAA,QACnC,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAY,yBAAkB;AAAA;AAAA,QAE7C,WAAW;AAAA,QACX,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AACD,WAAoB,uCAAAA,KAAK,YAAAC,SAAkB;AAAA,MACzC,OAAO;AAAA,MACP,UAAU,OAAO,WAAW;AAAA,MAC5B;AAAA,MACA,eAAW,YAAAC;AAAA,QAAK;AAAA;AAAA,QAEhB;AAAA,QAA0C;AAAA,UACxC,YAAY;AAAA,QACd;AAAA,MAAC;AAAA,IACH,GAAG,GAAG;AAAA,EACR,CAAC;AACD,QAAM,eAAuB,sBAAc,OAAO,OAAO;AACzD,QAAM,iBAAiB,SAAS,IAAI,uBAAuB,GAAG,KAAK,CAAC;AAAA,IAClE;AAAA,EACF,MAAM,iBAAiB,GAAG,KAAK,QAAQ,CAAC;AACxC,QAAM,sBAAsB,MAAM;AAChC,QAAI,CAAC,oBAAoB,CAAC,eAAe,MAAM;AAC7C,aAAO,gBAAgB;AAAA,IACzB;AACA,WAAoB,uCAAAH,MAAa,wCAAiC;AAAA,MAChE,UAAU,CAAC,gBAAgB,MAAmB,uCAAAC,KAAY,qCAA8B;AAAA;AAAA,QAEtF,WAAW;AAAA,QACX,UAAU,gBAAgB;AAAA,MAC5B,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAD,MAAM,mBAAAI,UAAW;AAAA,IACnC,UAAU,CAAc,uCAAAH,KAAK,qBAAAI,SAAc;AAAA,MACzC,oBAAoB;AAAA,MACpB;AAAA,MACA,MAAM,SAAS,qBAAqB,YAAY;AAAA,MAChD;AAAA,MACA,eAAW,YAAAF;AAAA;AAAA,QAEX;AAAA,QAAoC;AAAA,MAAa;AAAA,MACjD,UAAU;AAAA,MACV,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAF,KAAK,uCAAgB;AAAA,MACpC,UAAuB,uCAAAA,KAAK,QAAQ;AAAA,QAClC,IAAI;AAAA,QACJ,UAAU,eAAe,gBAAgB,MAAM,WAAW;AAAA,MAC5D,CAAC;AAAA,IACH,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,gCAAQ;",
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  __experimentalShowSelectedHint,\n  ...otherProps\n}) {\n  return {\n    showSelectedHint: __experimentalShowSelectedHint,\n    ...otherProps\n  };\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations({\n  __experimentalHint,\n  ...rest\n}) {\n  return {\n    hint: __experimentalHint,\n    ...rest\n  };\n}\nfunction getDescribedBy(currentName, describedBy) {\n  if (describedBy) {\n    return describedBy;\n  }\n\n  // translators: %s: The selected option.\n  return sprintf(__('Currently selected: %s'), currentName);\n}\n\n/**\n * `CustomSelectControl` is a dropdown for selecting a single option from a\n * list, with support for custom styling. Use it instead of the `SelectControl`\n * when options need richer markup (e.g. per-option styles or hints).\n */\nfunction CustomSelectControl(props) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    describedBy,\n    options,\n    onChange,\n    size = 'default',\n    value,\n    className: classNameProp,\n    showSelectedHint = false,\n    ...restProps\n  } = useDeprecatedProps(props);\n  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');\n\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    async setValue(nextValue) {\n      const nextOption = options.find(item => item.key === nextValue);\n      if (!onChange || !nextOption) {\n        return;\n      }\n\n      // Executes the logic in a microtask after the popup is closed.\n      // This is simply to ensure the isOpen state matches the one from the\n      // previous legacy implementation.\n      await Promise.resolve();\n      const state = store.getState();\n      const changeObject = {\n        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),\n        inputValue: '',\n        isOpen: state.open,\n        selectedItem: nextOption,\n        type: ''\n      };\n      onChange(changeObject);\n    },\n    value: value?.key,\n    // Setting the first option as a default value when no value is provided\n    // is already done natively by the underlying Ariakit component,\n    // but doing this explicitly avoids the `onChange` callback from firing\n    // on initial render, thus making this implementation closer to the v1.\n    defaultValue: options[0]?.key\n  });\n  const children = options.map(applyOptionDeprecations).map(({\n    name,\n    key,\n    hint,\n    style,\n    className\n  }) => {\n    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: name\n      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__item-hint\",\n        children: hint\n      })]\n    });\n    return /*#__PURE__*/_jsx(CustomSelectItem, {\n      value: key,\n      children: hint ? withHint : name,\n      style: style,\n      className: clsx(className,\n      // Keeping the classnames for legacy reasons\n      'components-custom-select-control__item', {\n        'has-hint': hint\n      })\n    }, key);\n  });\n  const currentValue = Ariakit.useStoreState(store, 'value');\n  const selectedOption = options?.map(applyOptionDeprecations)?.find(({\n    key\n  }) => currentValue === key) ?? options[0];\n  const renderSelectedValue = () => {\n    if (!showSelectedHint || !selectedOption.hint) {\n      return selectedOption?.name;\n    }\n    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {\n      children: [selectedOption?.name, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__hint\",\n        children: selectedOption?.hint\n      })]\n    });\n  };\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(CustomSelect, {\n      \"aria-describedby\": descriptionId,\n      renderSelectedValue: renderSelectedValue,\n      size: size,\n      store: store,\n      className: clsx(\n      // Keeping the classname for legacy reasons\n      'components-custom-select-control', classNameProp),\n      isLegacy: true,\n      ...restProps,\n      children: children\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: getDescribedBy(selectedOption?.name, describedBy)\n      })\n    })]\n  });\n}\nexport default CustomSelectControl;"],
+  "mappings": "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",
   "names": ["_jsxs", "_jsx", "CustomSelectItem", "clsx", "_Fragment", "CustomSelect"]
 }

package/build/custom-select-control-v2/custom-select.cjs

@@ -114,7 +114,6 @@ function CustomSelect(props) {
         ),
         children: label
       }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_input_base.default, {
-        __next40pxDefaultSize: true,
         size,
         suffix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_chevron_down.default, {}),
         children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomSelectButton, {

package/build/custom-select-control-v2/custom-select.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control-v2/custom-select.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default CustomSelect;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAAoD;AACpD,kBAAgC;AAKhC,6BAA+B;AAC/B,aAAwB;AACxB,wBAAsB;AACtB,0BAAqC;AACrC,0BAAwB;AACxB,yBAA2C;AACpC,IAAM,0BAAsB,8BAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,eAAO,gBAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,QAAI;AAAA;AAAA,UAEvC,gBAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,kCAA8B,wBAAQ,MAAM,uBAAuB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1H,SAAoB,uCAAAA,KAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,aAAa,OAAO;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,6BAAyB,4BAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,uCAAAC,MAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,uCAAAD,KAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,uCAAAA,KAAK,uCAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,uCAAAA,KAAK,oBAAAE,QAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAD,MAAM,kBAAAE,SAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,uCAAAH,KAAK,oBAAAI,SAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,uCAAAJ,KAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,uCAAAA,KAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,uCAAAA,KAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default CustomSelect;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAAoD;AACpD,kBAAgC;AAChC,6BAA+B;AAC/B,aAAwB;AACxB,wBAAsB;AACtB,0BAAqC;AACrC,0BAAwB;AACxB,yBAA2C;AACpC,IAAM,0BAAsB,8BAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,eAAO,gBAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,QAAI;AAAA;AAAA,UAEvC,gBAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,kCAA8B,wBAAQ,MAAM,uBAAuB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1H,SAAoB,uCAAAA,KAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,aAAa,OAAO;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,6BAAyB,4BAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,uCAAAC,MAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,uCAAAD,KAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,uCAAAA,KAAK,uCAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,uCAAAA,KAAK,oBAAAE,QAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAD,MAAM,kBAAAE,SAAW;AAAA,QAChC;AAAA,QACA,QAAqB,uCAAAH,KAAK,oBAAAI,SAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,uCAAAJ,KAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,uCAAAA,KAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,uCAAAA,KAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
   "names": ["_jsx", "_jsxs", "BaseControl", "InputBase", "SelectControlChevronDown"]
 }

package/build/custom-select-control-v2/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control-v2/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport CustomSelect from './custom-select';\nimport Item from './item';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction CustomSelectControlV2(props) {\n  const {\n    defaultValue,\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    setValue: nextValue => onChange?.(nextValue),\n    defaultValue,\n    value\n  });\n  return /*#__PURE__*/_jsx(CustomSelect, {\n    ...restProps,\n    store: store\n  });\n}\nCustomSelectControlV2.Item = Item;\nexport default CustomSelectControlV2;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAIzB,2BAAyB;AACzB,kBAAiB;AACjB,yBAA4B;AAC5B,SAAS,sBAAsB,OAAO;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAgB,uBAAe;AAAA,IACnC,UAAU,eAAa,WAAW,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,IACrC,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACA,sBAAsB,OAAO,YAAAC;AAC7B,IAAO,mCAAQ;",
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport CustomSelect from './custom-select';\nimport Item from './item';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction CustomSelectControlV2(props) {\n  const {\n    defaultValue,\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    setValue: nextValue => onChange?.(nextValue),\n    defaultValue,\n    value\n  });\n  return /*#__PURE__*/_jsx(CustomSelect, {\n    ...restProps,\n    store: store\n  });\n}\nCustomSelectControlV2.Item = Item;\nexport default CustomSelectControlV2;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,2BAAyB;AACzB,kBAAiB;AACjB,yBAA4B;AAC5B,SAAS,sBAAsB,OAAO;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAgB,uBAAe;AAAA,IACnC,UAAU,eAAa,WAAW,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,IACrC,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACA,sBAAsB,OAAO,YAAAC;AAC7B,IAAO,mCAAQ;",
   "names": ["_jsx", "CustomSelect", "Item"]
 }