fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+export const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
+export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
+export const HORIZONTAL_GRADIENT_ORIENTATION = {
+  type: 'angular',
+  value: '90'
+};
+export const GRADIENT_OPTIONS = [{
+  value: 'linear-gradient',
+  label: __('Linear')
+}, {
+  value: 'radial-gradient',
+  label: __('Radial')
+}];
+export const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
+  top: 0,
+  'top right': 45,
+  'right top': 45,
+  right: 90,
+  'right bottom': 135,
+  'bottom right': 135,
+  bottom: 180,
+  'bottom left': 225,
+  'left bottom': 225,
+  left: 270,
+  'top left': 315,
+  'left top': 315
+};
+//# sourceMappingURL=constants.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","DEFAULT_GRADIENT","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","type","value","GRADIENT_OPTIONS","label","DIRECTIONAL_ORIENTATION_ANGLE_MAP","top","right","bottom","left"],"sources":["@wordpress/components/src/custom-gradient-picker/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const DEFAULT_GRADIENT =\n\t'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\n\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\n\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n\ttype: 'angular',\n\tvalue: '90',\n} as const;\n\nexport const GRADIENT_OPTIONS = [\n\t{ value: 'linear-gradient', label: __( 'Linear' ) },\n\t{ value: 'radial-gradient', label: __( 'Radial' ) },\n];\n\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n\ttop: 0,\n\t'top right': 45,\n\t'right top': 45,\n\tright: 90,\n\t'right bottom': 135,\n\t'bottom right': 135,\n\tbottom: 180,\n\t'bottom left': 225,\n\t'left bottom': 225,\n\tleft: 270,\n\t'top left': 315,\n\t'left top': 315,\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,OAAO,MAAMC,gBAAgB,GAC5B,0EAA0E;AAE3E,OAAO,MAAMC,6BAA6B,GAAG,GAAG;AAEhD,OAAO,MAAMC,+BAA+B,GAAG;EAC9CC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;AACR,CAAU;AAEV,OAAO,MAAMC,gBAAgB,GAAG,CAC/B;EAAED,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAEP,EAAE,CAAE,QAAS;AAAE,CAAC,EACnD;EAAEK,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAEP,EAAE,CAAE,QAAS;AAAE,CAAC,CACnD;AAED,OAAO,MAAMQ,iCAAiC,GAAG;EAChDC,GAAG,EAAE,CAAC;EACN,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE,EAAE;EACT,cAAc,EAAE,GAAG;EACnB,cAAc,EAAE,GAAG;EACnBC,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,GAAG;EAClBC,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,GAAG;EACf,UAAU,EAAE;AACb,CAAC"}

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js

@@ -0,0 +1,8 @@
+export const GRADIENT_MARKERS_WIDTH = 16;
+export const INSERT_POINT_WIDTH = 16;
+export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
+export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
+export const MINIMUM_SIGNIFICANT_MOVE = 5;
+export const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
+//# sourceMappingURL=constants.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.ts"],"sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC,OAAO,MAAMC,2CAA2C,GAAG,EAAE;AAC7D,OAAO,MAAMC,+BAA+B,GAAG,CAAC;AAChD,OAAO,MAAMC,wBAAwB,GAAG,CAAC;AAEzC,OAAO,MAAMC,gCAAgC,GAC5CH,2CAA2C;AAC5C,OAAO,MAAMI,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGD,sBAAsB,IAAK,CAAC"}

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js

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

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js

@@ -0,0 +1,164 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useReducer } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ControlPoints from './control-points';
+import { getHorizontalRelativeGradientPosition } from './utils';
+import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
+const customGradientBarReducer = (state, action) => {
+  switch (action.type) {
+    case 'MOVE_INSERTER':
+      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
+        return {
+          id: 'MOVING_INSERTER',
+          insertPosition: action.insertPosition
+        };
+      }
+      break;
+    case 'STOP_INSERTER_MOVE':
+      if (state.id === 'MOVING_INSERTER') {
+        return {
+          id: 'IDLE'
+        };
+      }
+      break;
+    case 'OPEN_INSERTER':
+      if (state.id === 'MOVING_INSERTER') {
+        return {
+          id: 'INSERTING_CONTROL_POINT',
+          insertPosition: state.insertPosition
+        };
+      }
+      break;
+    case 'CLOSE_INSERTER':
+      if (state.id === 'INSERTING_CONTROL_POINT') {
+        return {
+          id: 'IDLE'
+        };
+      }
+      break;
+    case 'START_CONTROL_CHANGE':
+      if (state.id === 'IDLE') {
+        return {
+          id: 'MOVING_CONTROL_POINT'
+        };
+      }
+      break;
+    case 'STOP_CONTROL_CHANGE':
+      if (state.id === 'MOVING_CONTROL_POINT') {
+        return {
+          id: 'IDLE'
+        };
+      }
+      break;
+  }
+  return state;
+};
+const customGradientBarReducerInitialState = {
+  id: 'IDLE'
+};
+export default function CustomGradientBar({
+  background,
+  hasGradient,
+  value: controlPoints,
+  onChange,
+  disableInserter = false,
+  disableAlpha = false,
+  __experimentalIsRenderedInSidebar = false
+}) {
+  const gradientMarkersContainerDomRef = useRef(null);
+  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);
+  const onMouseEnterAndMove = event => {
+    if (!gradientMarkersContainerDomRef.current) {
+      return;
+    }
+    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);
+
+    // If the insert point is close to an existing control point don't show it.
+    if (controlPoints.some(({
+      position
+    }) => {
+      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+    })) {
+      if (gradientBarState.id === 'MOVING_INSERTER') {
+        gradientBarStateDispatch({
+          type: 'STOP_INSERTER_MOVE'
+        });
+      }
+      return;
+    }
+    gradientBarStateDispatch({
+      type: 'MOVE_INSERTER',
+      insertPosition
+    });
+  };
+  const onMouseLeave = () => {
+    gradientBarStateDispatch({
+      type: 'STOP_INSERTER_MOVE'
+    });
+  };
+  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
+  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
+  return createElement("div", {
+    className: classnames('components-custom-gradient-picker__gradient-bar', {
+      'has-gradient': hasGradient
+    }),
+    onMouseEnter: onMouseEnterAndMove,
+    onMouseMove: onMouseEnterAndMove,
+    onMouseLeave: onMouseLeave
+  }, createElement("div", {
+    className: "components-custom-gradient-picker__gradient-bar-background",
+    style: {
+      background,
+      opacity: hasGradient ? 1 : 0.4
+    }
+  }), createElement("div", {
+    ref: gradientMarkersContainerDomRef,
+    className: "components-custom-gradient-picker__markers-container"
+  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && createElement(ControlPoints.InsertPoint, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    disableAlpha: disableAlpha,
+    insertPosition: gradientBarState.insertPosition,
+    value: controlPoints,
+    onChange: onChange,
+    onOpenInserter: () => {
+      gradientBarStateDispatch({
+        type: 'OPEN_INSERTER'
+      });
+    },
+    onCloseInserter: () => {
+      gradientBarStateDispatch({
+        type: 'CLOSE_INSERTER'
+      });
+    }
+  }), createElement(ControlPoints, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    disableAlpha: disableAlpha,
+    disableRemove: disableInserter,
+    gradientPickerDomRef: gradientMarkersContainerDomRef,
+    ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,
+    value: controlPoints,
+    onChange: onChange,
+    onStartControlPointChange: () => {
+      gradientBarStateDispatch({
+        type: 'START_CONTROL_CHANGE'
+      });
+    },
+    onStopControlPointChange: () => {
+      gradientBarStateDispatch({
+        type: 'STOP_CONTROL_CHANGE'
+      });
+    }
+  })));
+}
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js

@@ -0,0 +1,156 @@
+/**
+ * Internal dependencies
+ */
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
+/**
+ * Clamps a number between 0 and 100.
+ *
+ * @param value Value to clamp.
+ *
+ * @return Value clamped between 0 and 100.
+ */
+export function clampPercent(value) {
+  return Math.max(0, Math.min(100, value));
+}
+
+/**
+ * Check if a control point is overlapping with another.
+ *
+ * @param value        Array of control points.
+ * @param initialIndex Index of the position to test.
+ * @param newPosition  New position of the control point.
+ * @param minDistance  Distance considered to be overlapping.
+ *
+ * @return True if the point is overlapping.
+ */
+export function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
+  const initialPosition = value[initialIndex].position;
+  const minPosition = Math.min(initialPosition, newPosition);
+  const maxPosition = Math.max(initialPosition, newPosition);
+  return value.some(({
+    position
+  }, index) => {
+    return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
+  });
+}
+
+/**
+ * Adds a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position to insert the new point.
+ * @param color    Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function addControlPoint(points, position, color) {
+  const nextIndex = points.findIndex(point => point.position > position);
+  const newPoint = {
+    color,
+    position
+  };
+  const newPoints = points.slice();
+  newPoints.splice(nextIndex - 1, 0, newPoint);
+  return newPoints;
+}
+
+/**
+ * Removes a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index  Index to remove.
+ *
+ * @return New array of control points.
+ */
+export function removeControlPoint(points, index) {
+  return points.filter((_point, pointIndex) => {
+    return pointIndex !== index;
+  });
+}
+/**
+ * Updates a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newPoint New control point to replace the index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPoint(points, index, newPoint) {
+  const newValue = points.slice();
+  newValue[index] = newPoint;
+  return newValue;
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points      Array of control points.
+ * @param index       Index to update.
+ * @param newPosition Position to move the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointPosition(points, index, newPosition) {
+  if (isOverlapping(points, index, newPosition)) {
+    return points;
+  }
+  const newPoint = {
+    ...points[index],
+    position: newPosition
+  };
+  return updateControlPoint(points, index, newPoint);
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColor(points, index, newColor) {
+  const newPoint = {
+    ...points[index],
+    color: newColor
+  };
+  return updateControlPoint(points, index, newPoint);
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position of the color stop.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColorByPosition(points, position, newColor) {
+  const index = points.findIndex(point => point.position === position);
+  return updateControlPointColor(points, index, newColor);
+}
+
+/**
+ * Gets the horizontal coordinate when dragging a control point with the mouse.
+ *
+ * @param mouseXcoordinate Horizontal coordinate of the mouse position.
+ * @param containerElement Container for the gradient picker.
+ *
+ * @return Whole number percentage from the left.
+ */
+
+export function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {
+  if (!containerElement) {
+    return;
+  }
+  const {
+    x,
+    width
+  } = containerElement.getBoundingClientRect();
+  const absolutePositionValue = mouseXCoordinate - x;
+  return Math.round(clampPercent(absolutePositionValue * 100 / width));
+}
+//# sourceMappingURL=utils.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js

@@ -0,0 +1,174 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AnglePickerControl from '../angle-picker-control';
+import CustomGradientBar from './gradient-bar';
+import { Flex } from '../flex';
+import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
+import { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';
+import { serializeGradient } from './serializer';
+import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';
+import { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';
+const GradientAnglePicker = ({
+  gradientAST,
+  hasGradient,
+  onChange
+}) => {
+  var _gradientAST$orientat;
+  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
+  const onAngleChange = newAngle => {
+    onChange(serializeGradient({
+      ...gradientAST,
+      orientation: {
+        type: 'angular',
+        value: `${newAngle}`
+      }
+    }));
+  };
+  return createElement(AnglePickerControl, {
+    __nextHasNoMarginBottom: true,
+    onChange: onAngleChange,
+    value: hasGradient ? angle : ''
+  });
+};
+const GradientTypePicker = ({
+  gradientAST,
+  hasGradient,
+  onChange
+}) => {
+  const {
+    type
+  } = gradientAST;
+  const onSetLinearGradient = () => {
+    onChange(serializeGradient({
+      ...gradientAST,
+      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,
+      type: 'linear-gradient'
+    }));
+  };
+  const onSetRadialGradient = () => {
+    const {
+      orientation,
+      ...restGradientAST
+    } = gradientAST;
+    onChange(serializeGradient({
+      ...restGradientAST,
+      type: 'radial-gradient'
+    }));
+  };
+  const handleOnChange = next => {
+    if (next === 'linear-gradient') {
+      onSetLinearGradient();
+    }
+    if (next === 'radial-gradient') {
+      onSetRadialGradient();
+    }
+  };
+  return createElement(SelectControl, {
+    __nextHasNoMarginBottom: true,
+    className: "components-custom-gradient-picker__type-picker",
+    label: __('Type'),
+    labelPosition: "top",
+    onChange: handleOnChange,
+    options: GRADIENT_OPTIONS,
+    size: "__unstable-large",
+    value: hasGradient ? type : undefined
+  });
+};
+
+/**
+ * CustomGradientPicker is a React component that renders a UI for specifying
+ * linear or radial gradients. Radial gradients are displayed in the picker as
+ * a slice of the gradient from the center to the outside.
+ *
+ * ```jsx
+ * import { CustomGradientPicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCustomGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState();
+ *
+ *   return (
+ *     <CustomGradientPicker
+ *			value={ gradient }
+ *			onChange={ setGradient }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function CustomGradientPicker({
+  /** Start opting into the new margin-free styles that will become the default in a future version. */
+  __nextHasNoMargin = false,
+  value,
+  onChange,
+  __experimentalIsRenderedInSidebar = false
+}) {
+  const {
+    gradientAST,
+    hasGradient
+  } = getGradientAstWithDefault(value);
+
+  // On radial gradients the bar should display a linear gradient.
+  // On radial gradients the bar represents a slice of the gradient from the center until the outside.
+  // On liner gradients the bar represents the color stops from left to right independently of the angle.
+  const background = getLinearGradientRepresentation(gradientAST);
+
+  // Control points color option may be hex from presets, custom colors will be rgb.
+  // The position should always be a percentage.
+  const controlPoints = gradientAST.colorStops.map(colorStop => {
+    return {
+      color: 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
+      position: parseInt(colorStop.length.value)
+    };
+  });
+  if (!__nextHasNoMargin) {
+    deprecated('Outer margin styles for wp.components.CustomGradientPicker', {
+      since: '6.1',
+      version: '6.4',
+      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
+    });
+  }
+  return createElement(VStack, {
+    spacing: 4,
+    className: classnames('components-custom-gradient-picker', {
+      'is-next-has-no-margin': __nextHasNoMargin
+    })
+  }, createElement(CustomGradientBar, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    background: background,
+    hasGradient: hasGradient,
+    value: controlPoints,
+    onChange: newControlPoints => {
+      onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));
+    }
+  }), createElement(Flex, {
+    gap: 3,
+    className: "components-custom-gradient-picker__ui-line"
+  }, createElement(SelectWrapper, null, createElement(GradientTypePicker, {
+    gradientAST: gradientAST,
+    hasGradient: hasGradient,
+    onChange: onChange
+  })), createElement(AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && createElement(GradientAnglePicker, {
+    gradientAST: gradientAST,
+    hasGradient: hasGradient,
+    onChange: onChange
+  }))));
+}
+export default CustomGradientPicker;
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/index.native.js

@@ -0,0 +1,94 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, RadioControl, RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { colorsUtils } from '../mobile/color-settings/utils';
+import { getGradientAstWithDefault } from './utils';
+import { serializeGradient } from './serializer';
+import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';
+import styles from './style.scss';
+function CustomGradientPicker({
+  setColor,
+  currentValue,
+  isGradientColor
+}) {
+  const [gradientOrientation, setGradientOrientation] = useState(HORIZONTAL_GRADIENT_ORIENTATION);
+  const [currentColor, setCurrentColor] = useState(currentValue);
+  const {
+    getGradientType,
+    gradients,
+    gradientOptions
+  } = colorsUtils;
+  const {
+    gradientAST
+  } = getGradientAstWithDefault(currentColor);
+  const gradientType = getGradientType(currentColor);
+  function isLinearGradient(type) {
+    return type === gradients.linear;
+  }
+  function getGradientColor(type) {
+    const {
+      orientation,
+      ...restGradientAST
+    } = gradientAST;
+    if (orientation) {
+      setGradientOrientation(orientation);
+    }
+    return serializeGradient(isLinearGradient(type) ? {
+      ...gradientAST,
+      ...(gradientAST.orientation ? {} : {
+        orientation: gradientOrientation
+      }),
+      type
+    } : {
+      ...restGradientAST,
+      type
+    });
+  }
+  function onGradientTypeChange(type) {
+    const gradientColor = getGradientColor(type);
+    setCurrentColor(gradientColor);
+    setColor(gradientColor);
+  }
+  function setGradientAngle(value) {
+    const gradientColor = serializeGradient({
+      ...gradientAST,
+      orientation: {
+        type: 'angular',
+        value
+      }
+    });
+    if (isGradientColor && gradientColor !== currentColor) {
+      setCurrentColor(gradientColor);
+      setColor(gradientColor);
+    }
+  }
+  function getGradientAngle() {
+    var _gradientAST$orientat;
+    return (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
+  }
+  return createElement(Fragment, null, createElement(PanelBody, {
+    title: __('Gradient Type')
+  }, createElement(RadioControl, {
+    selected: gradientType,
+    options: gradientOptions,
+    onChange: onGradientTypeChange
+  })), isLinearGradient(gradientType) && createElement(PanelBody, {
+    style: styles.angleControl
+  }, createElement(RangeControl, {
+    label: __('Angle'),
+    minimumValue: 0,
+    maximumValue: 360,
+    value: getGradientAngle(),
+    onChange: setGradientAngle
+  })));
+}
+export default CustomGradientPicker;
+//# sourceMappingURL=index.native.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+
+export function serializeGradientColor({
+  type,
+  value
+}) {
+  if (type === 'literal') {
+    return value;
+  }
+  if (type === 'hex') {
+    return `#${value}`;
+  }
+  return `${type}(${value.join(',')})`;
+}
+export function serializeGradientPosition(position) {
+  if (!position) {
+    return '';
+  }
+  const {
+    value,
+    type
+  } = position;
+  return `${value}${type}`;
+}
+export function serializeGradientColorStop({
+  type,
+  value,
+  length
+}) {
+  return `${serializeGradientColor({
+    type,
+    value
+  })} ${serializeGradientPosition(length)}`;
+}
+export function serializeGradientOrientation(orientation) {
+  if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {
+    return;
+  }
+  return `${orientation.value}deg`;
+}
+export function serializeGradient({
+  type,
+  orientation,
+  colorStops
+}) {
+  const serializedOrientation = serializeGradientOrientation(orientation);
+  const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {
+    const getNumericStopValue = colorStop => {
+      return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value);
+    };
+    return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);
+  }).map(serializeGradientColorStop);
+  return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;
+}
+//# sourceMappingURL=serializer.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) ||\n\t\t! orientation ||\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA,OAAO,SAASA,sBAAsBA,CAAE;EACvCC,IAAI;EACJC;AACyB,CAAC,EAAG;EAC7B,IAAKD,IAAI,KAAK,SAAS,EAAG;IACzB,OAAOC,KAAK;EACb;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,OAAQ,IAAIC,KAAO,EAAC;EACrB;EACA,OAAQ,GAAGD,IAAM,IAAIC,KAAK,CAACC,IAAI,CAAE,GAAI,CAAG,GAAE;AAC3C;AAEA,OAAO,SAASC,yBAAyBA,CACxCC,QAA8C,EAC7C;EACD,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,EAAE;EACV;EACA,MAAM;IAAEH,KAAK;IAAED;EAAK,CAAC,GAAGI,QAAQ;EAChC,OAAQ,GAAGH,KAAO,GAAGD,IAAM,EAAC;AAC7B;AAEA,OAAO,SAASK,0BAA0BA,CAAE;EAC3CL,IAAI;EACJC,KAAK;EACLK;AACyB,CAAC,EAAG;EAC7B,OAAQ,GAAGP,sBAAsB,CAAE;IAClCC,IAAI;IACJC;EACD,CAA8B,CAAG,IAAIE,yBAAyB,CAAEG,MAAO,CAAG,EAAC;AAC5E;AAEA,OAAO,SAASC,4BAA4BA,CAC3CC,WAAyD,EACxD;EACD,IACCC,KAAK,CAACC,OAAO,CAAEF,WAAY,CAAC,IAC5B,CAAEA,WAAW,IACbA,WAAW,CAACR,IAAI,KAAK,SAAS,EAC7B;IACD;EACD;EACA,OAAQ,GAAGQ,WAAW,CAACP,KAAO,KAAI;AACnC;AAEA,OAAO,SAASU,iBAAiBA,CAAE;EAClCX,IAAI;EACJQ,WAAW;EACXI;AAC4B,CAAC,EAAG;EAChC,MAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAY,CAAC;EACzE,MAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAAI,CAAE,CAAEC,UAAU,EAAEC,UAAU,KAAM;IACpC,MAAMC,mBAAmB,GACxBC,SAAmC,IAC/B;MACJ,OAAOA,SAAS,EAAEb,MAAM,EAAEL,KAAK,KAAKmB,SAAS,GAC1C,CAAC,GACDC,QAAQ,CAAEF,SAAS,CAACb,MAAM,CAACL,KAAM,CAAC;IACtC,CAAC;IAED,OACCiB,mBAAmB,CAAEF,UAAW,CAAC,GACjCE,mBAAmB,CAAED,UAAW,CAAC;EAEnC,CAAE,CAAC,CACFK,GAAG,CAAEjB,0BAA2B,CAAC;EACnC,OAAQ,GAAGL,IAAM,IAAI,CAAEa,qBAAqB,EAAE,GAAGC,oBAAoB,CAAE,CACrES,MAAM,CAAEC,OAAQ,CAAC,CACjBtB,IAAI,CAAE,GAAI,CAAG,GAAE;AAClB"}

node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js

@@ -0,0 +1,39 @@
+import _styled from "@emotion/styled/base";
+function _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)."; }
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { FlexBlock } from '../../flex';
+export const SelectWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === "production" ? {
+  target: "e10bzpgi1"
+} : {
+  target: "e10bzpgi1",
+  label: "SelectWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1gvx10y",
+  styles: "flex-grow:5"
+} : {
+  name: "1gvx10y",
+  styles: "flex-grow:5",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNnRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2N1c3RvbS1ncmFkaWVudC1waWNrZXIvc3R5bGVzL2N1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZCggRmxleEJsb2NrIClgXG5cdGZsZXgtZ3JvdzogNTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBY2Nlc3NvcnlXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const AccessoryWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === "production" ? {
+  target: "e10bzpgi0"
+} : {
+  target: "e10bzpgi0",
+  label: "AccessoryWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1gvx10y",
+  styles: "flex-grow:5"
+} : {
+  name: "1gvx10y",
+  styles: "flex-grow:5",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFtRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2N1c3RvbS1ncmFkaWVudC1waWNrZXIvc3R5bGVzL2N1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZCggRmxleEJsb2NrIClgXG5cdGZsZXgtZ3JvdzogNTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBY2Nlc3NvcnlXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//# sourceMappingURL=custom-gradient-picker-styles.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FlexBlock","SelectWrapper","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","AccessoryWrapper"],"sources":["@wordpress/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../../flex';\n\nexport const SelectWrapper = styled( FlexBlock )`\n\tflex-grow: 5;\n`;\n\nexport const AccessoryWrapper = styled( FlexBlock )`\n\tflex-grow: 5;\n`;\n"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,YAAY;AAEtC,OAAO,MAAMC,aAAa,GAAG,aAAAC,OAAA,CAAQF,SAAS,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAE/C;AAED,OAAO,MAAMC,gBAAgB,GAAG,aAAAX,OAAA,CAAQF,SAAS,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAElD"}

node_modules/@wordpress/components/build-module/custom-gradient-picker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-gradient-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport type CustomGradientPickerProps = {\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: string | null;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string ) => void;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type GradientAnglePickerProps = {\n\tgradientAST:\n\t\t| gradientParser.LinearGradientNode\n\t\t| gradientParser.RepeatingLinearGradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type GradientTypePickerProps = {\n\tgradientAST: gradientParser.GradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type ControlPoint = { color: string; position: number };\n\nexport type CustomGradientBarProps = {\n\tbackground: React.CSSProperties[ 'background' ];\n\thasGradient: boolean;\n\tvalue: ControlPoint[];\n\tonChange: ( newControlPoints: ControlPoint[] ) => void;\n\tdisableInserter?: boolean;\n\tdisableAlpha?: boolean;\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type CustomGradientBarIdleState = { id: 'IDLE' };\ntype CustomGradientBarMovingInserterState = {\n\tid: 'MOVING_INSERTER';\n\tinsertPosition: number;\n};\ntype CustomGradientBarInsertingControlPointState = {\n\tid: 'INSERTING_CONTROL_POINT';\n\tinsertPosition: number;\n};\ntype CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };\n\nexport type CustomGradientBarReducerState =\n\t| CustomGradientBarIdleState\n\t| CustomGradientBarMovingInserterState\n\t| CustomGradientBarInsertingControlPointState\n\t| CustomGradientBarMovingControlPointState;\n\nexport type CustomGradientBarReducerAction =\n\t| { type: 'MOVE_INSERTER'; insertPosition: number }\n\t| { type: 'STOP_INSERTER_MOVE' }\n\t| { type: 'OPEN_INSERTER' }\n\t| { type: 'CLOSE_INSERTER' }\n\t| { type: 'START_CONTROL_CHANGE' }\n\t| { type: 'STOP_CONTROL_CHANGE' };\n\nexport type ControlPointButtonProps = {\n\tisOpen: boolean;\n\tposition: ControlPoint[ 'position' ];\n\tcolor: string;\n};\n\nexport type ControlPointsProps = {\n\tdisableRemove: boolean;\n\tdisableAlpha: boolean;\n\tgradientPickerDomRef: React.RefObject< HTMLDivElement >;\n\tignoreMarkerPosition?: number;\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonStartControlPointChange: () => void;\n\tonStopControlPointChange: () => void;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n\nexport type ControlPointMoveState = {\n\tinitialPosition: number;\n\tindex: number;\n\tsignificantMoveHappened: boolean;\n\tlistenersActivated: boolean;\n};\n\nexport type InsertPointProps = {\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonOpenInserter: () => void;\n\tonCloseInserter: () => void;\n\tinsertPosition: number;\n\tdisableAlpha: boolean;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n"],"mappings":""}

node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js

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