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/custom-gradient-picker/constants.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HORIZONTAL_GRADIENT_ORIENTATION = exports.GRADIENT_OPTIONS = exports.DIRECTIONAL_ORIENTATION_ANGLE_MAP = exports.DEFAULT_LINEAR_GRADIENT_ANGLE = exports.DEFAULT_GRADIENT = void 0;
+var _i18n = require("@wordpress/i18n");
+/**
+ * WordPress dependencies
+ */
+
+const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
+exports.DEFAULT_GRADIENT = DEFAULT_GRADIENT;
+const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
+exports.DEFAULT_LINEAR_GRADIENT_ANGLE = DEFAULT_LINEAR_GRADIENT_ANGLE;
+const HORIZONTAL_GRADIENT_ORIENTATION = {
+  type: 'angular',
+  value: '90'
+};
+exports.HORIZONTAL_GRADIENT_ORIENTATION = HORIZONTAL_GRADIENT_ORIENTATION;
+const GRADIENT_OPTIONS = [{
+  value: 'linear-gradient',
+  label: (0, _i18n.__)('Linear')
+}, {
+  value: 'radial-gradient',
+  label: (0, _i18n.__)('Radial')
+}];
+exports.GRADIENT_OPTIONS = GRADIENT_OPTIONS;
+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
+};
+exports.DIRECTIONAL_ORIENTATION_ANGLE_MAP = DIRECTIONAL_ORIENTATION_ANGLE_MAP;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","DEFAULT_GRADIENT","exports","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":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,gBAAgB,GAC5B,0EAA0E;AAACC,OAAA,CAAAD,gBAAA,GAAAA,gBAAA;AAErE,MAAME,6BAA6B,GAAG,GAAG;AAACD,OAAA,CAAAC,6BAAA,GAAAA,6BAAA;AAE1C,MAAMC,+BAA+B,GAAG;EAC9CC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;AACR,CAAU;AAACJ,OAAA,CAAAE,+BAAA,GAAAA,+BAAA;AAEJ,MAAMG,gBAAgB,GAAG,CAC/B;EAAED,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AAAE,CAAC,EACnD;EAAEH,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AAAE,CAAC,CACnD;AAACP,OAAA,CAAAK,gBAAA,GAAAA,gBAAA;AAEK,MAAMG,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;AAACZ,OAAA,CAAAQ,iCAAA,GAAAA,iCAAA"}

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.KEYBOARD_CONTROL_POINT_VARIATION = exports.INSERT_POINT_WIDTH = exports.GRADIENT_MARKERS_WIDTH = void 0;
+const GRADIENT_MARKERS_WIDTH = 16;
+exports.GRADIENT_MARKERS_WIDTH = GRADIENT_MARKERS_WIDTH;
+const INSERT_POINT_WIDTH = 16;
+exports.INSERT_POINT_WIDTH = INSERT_POINT_WIDTH;
+const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
+exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
+exports.MINIMUM_DISTANCE_BETWEEN_POINTS = MINIMUM_DISTANCE_BETWEEN_POINTS;
+const MINIMUM_SIGNIFICANT_MOVE = 5;
+exports.MINIMUM_SIGNIFICANT_MOVE = MINIMUM_SIGNIFICANT_MOVE;
+const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+exports.KEYBOARD_CONTROL_POINT_VARIATION = KEYBOARD_CONTROL_POINT_VARIATION;
+const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
+exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["GRADIENT_MARKERS_WIDTH","exports","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":";;;;;;AAAO,MAAMA,sBAAsB,GAAG,EAAE;AAACC,OAAA,CAAAD,sBAAA,GAAAA,sBAAA;AAClC,MAAME,kBAAkB,GAAG,EAAE;AAACD,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAC9B,MAAMC,2CAA2C,GAAG,EAAE;AAACF,OAAA,CAAAE,2CAAA,GAAAA,2CAAA;AACvD,MAAMC,+BAA+B,GAAG,CAAC;AAACH,OAAA,CAAAG,+BAAA,GAAAA,+BAAA;AAC1C,MAAMC,wBAAwB,GAAG,CAAC;AAACJ,OAAA,CAAAI,wBAAA,GAAAA,wBAAA;AAEnC,MAAMC,gCAAgC,GAC5CH,2CAA2C;AAACF,OAAA,CAAAK,gCAAA,GAAAA,gCAAA;AACtC,MAAMC,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGF,sBAAsB,IAAK,CAAC;AAACC,OAAA,CAAAM,4CAAA,GAAAA,4CAAA"}

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

@@ -0,0 +1,261 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _colord = require("colord");
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _button = _interopRequireDefault(require("../../button"));
+var _hStack = require("../../h-stack");
+var _colorPicker = require("../../color-picker");
+var _visuallyHidden = require("../../visually-hidden");
+var _colorPalette = require("../../color-palette");
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function ControlPointButton({
+  isOpen,
+  position,
+  color,
+  ...additionalProps
+}) {
+  const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
+  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_button.default, {
+    "aria-label": (0, _i18n.sprintf)(
+    // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+    (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
+    "aria-describedby": descriptionId,
+    "aria-haspopup": "true",
+    "aria-expanded": isOpen,
+    className: (0, _classnames.default)('components-custom-gradient-picker__control-point-button', {
+      'is-active': isOpen
+    }),
+    ...additionalProps
+  }), (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
+    id: descriptionId
+  }, (0, _i18n.__)('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 = (0, _element.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 = (0, _classnames.default)('components-custom-gradient-picker__control-point-dropdown', className);
+  return (0, _react.createElement)(_colorPalette.CustomColorPickerDropdown, {
+    isRenderedInSidebar: isRenderedInSidebar,
+    popoverProps: popoverProps,
+    className: mergedClassName,
+    ...props
+  });
+}
+function ControlPoints({
+  disableRemove,
+  disableAlpha,
+  gradientPickerDomRef,
+  ignoreMarkerPosition,
+  value: controlPoints,
+  onChange,
+  onStartControlPointChange,
+  onStopControlPointChange,
+  __experimentalIsRenderedInSidebar
+}) {
+  const controlPointMoveState = (0, _element.useRef)();
+  const onMouseMove = event => {
+    if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
+      return;
+    }
+    const relativePosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientPickerDomRef.current);
+    const {
+      initialPosition,
+      index,
+      significantMoveHappened
+    } = controlPointMoveState.current;
+    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= _constants.MINIMUM_SIGNIFICANT_MOVE) {
+      controlPointMoveState.current.significantMoveHappened = true;
+    }
+    onChange((0, _utils.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 = (0, _element.useRef)();
+  cleanEventListenersRef.current = cleanEventListeners;
+  (0, _element.useEffect)(() => {
+    return () => {
+      cleanEventListenersRef.current?.();
+    };
+  }, []);
+  return (0, _react.createElement)(_react.Fragment, null, controlPoints.map((point, index) => {
+    const initialPosition = point?.position;
+    return ignoreMarkerPosition !== initialPosition && (0, _react.createElement)(GradientColorPickerDropdown, {
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      key: index,
+      onClose: onStopControlPointChange,
+      renderToggle: ({
+        isOpen,
+        onToggle
+      }) => (0, _react.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((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position - _constants.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((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position + _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
+          }
+        },
+        isOpen: isOpen,
+        position: point.position,
+        color: point.color
+      }),
+      renderContent: ({
+        onClose
+      }) => (0, _react.createElement)(_dropdownContentWrapper.default, {
+        paddingSize: "none"
+      }, (0, _react.createElement)(_colorPicker.ColorPicker, {
+        enableAlpha: !disableAlpha,
+        color: point.color,
+        onChange: color => {
+          onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
+        }
+      }), !disableRemove && controlPoints.length > 2 && (0, _react.createElement)(_hStack.HStack, {
+        className: "components-custom-gradient-picker__remove-control-point-wrapper",
+        alignment: "center"
+      }, (0, _react.createElement)(_button.default, {
+        onClick: () => {
+          onChange((0, _utils.removeControlPoint)(controlPoints, index));
+          onClose();
+        },
+        variant: "link"
+      }, (0, _i18n.__)('Remove Control Point')))),
+      style: {
+        left: `${point.position}%`,
+        transform: 'translateX( -50% )'
+      }
+    });
+  }));
+}
+function InsertPoint({
+  value: controlPoints,
+  onChange,
+  onOpenInserter,
+  onCloseInserter,
+  insertPosition,
+  disableAlpha,
+  __experimentalIsRenderedInSidebar
+}) {
+  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
+  return (0, _react.createElement)(GradientColorPickerDropdown, {
+    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    className: "components-custom-gradient-picker__inserter",
+    onClose: () => {
+      onCloseInserter();
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => (0, _react.createElement)(_button.default, {
+      "aria-expanded": isOpen,
+      "aria-haspopup": "true",
+      onClick: () => {
+        if (isOpen) {
+          onCloseInserter();
+        } else {
+          setAlreadyInsertedPoint(false);
+          onOpenInserter();
+        }
+        onToggle();
+      },
+      className: "components-custom-gradient-picker__insert-point-dropdown",
+      icon: _icons.plus
+    }),
+    renderContent: () => (0, _react.createElement)(_dropdownContentWrapper.default, {
+      paddingSize: "none"
+    }, (0, _react.createElement)(_colorPicker.ColorPicker, {
+      enableAlpha: !disableAlpha,
+      onChange: color => {
+        if (!alreadyInsertedPoint) {
+          onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
+          setAlreadyInsertedPoint(true);
+        } else {
+          onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
+        }
+      }
+    })),
+    style: insertPosition !== null ? {
+      left: `${insertPosition}%`,
+      transform: 'translateX( -50% )'
+    } : undefined
+  });
+}
+ControlPoints.InsertPoint = InsertPoint;
+var _default = ControlPoints;
+exports.default = _default;
+//# sourceMappingURL=control-points.js.map

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomGradientBar;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
+var _controlPoints = _interopRequireDefault(require("./control-points"));
+var _utils = require("./utils");
+var _constants = require("./constants");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+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'
+};
+function CustomGradientBar({
+  background,
+  hasGradient,
+  value: controlPoints,
+  onChange,
+  disableInserter = false,
+  disableAlpha = false,
+  __experimentalIsRenderedInSidebar = false
+}) {
+  const gradientMarkersContainerDomRef = (0, _element.useRef)(null);
+  const [gradientBarState, gradientBarStateDispatch] = (0, _element.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
+  const onMouseEnterAndMove = event => {
+    if (!gradientMarkersContainerDomRef.current) {
+      return;
+    }
+    const insertPosition = (0, _utils.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) < _constants.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 (0, _react.createElement)("div", {
+    className: (0, _classnames.default)('components-custom-gradient-picker__gradient-bar', {
+      'has-gradient': hasGradient
+    }),
+    onMouseEnter: onMouseEnterAndMove,
+    onMouseMove: onMouseEnterAndMove,
+    onMouseLeave: onMouseLeave
+  }, (0, _react.createElement)("div", {
+    className: "components-custom-gradient-picker__gradient-bar-background",
+    style: {
+      background,
+      opacity: hasGradient ? 1 : 0.4
+    }
+  }), (0, _react.createElement)("div", {
+    ref: gradientMarkersContainerDomRef,
+    className: "components-custom-gradient-picker__markers-container"
+  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _react.createElement)(_controlPoints.default.InsertPoint, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    disableAlpha: disableAlpha,
+    insertPosition: gradientBarState.insertPosition,
+    value: controlPoints,
+    onChange: onChange,
+    onOpenInserter: () => {
+      gradientBarStateDispatch({
+        type: 'OPEN_INSERTER'
+      });
+    },
+    onCloseInserter: () => {
+      gradientBarStateDispatch({
+        type: 'CLOSE_INSERTER'
+      });
+    }
+  }), (0, _react.createElement)(_controlPoints.default, {
+    __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/custom-gradient-picker/gradient-bar/utils.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addControlPoint = addControlPoint;
+exports.clampPercent = clampPercent;
+exports.getHorizontalRelativeGradientPosition = getHorizontalRelativeGradientPosition;
+exports.isOverlapping = isOverlapping;
+exports.removeControlPoint = removeControlPoint;
+exports.updateControlPoint = updateControlPoint;
+exports.updateControlPointColor = updateControlPointColor;
+exports.updateControlPointColorByPosition = updateControlPointColorByPosition;
+exports.updateControlPointPosition = updateControlPointPosition;
+var _constants = require("./constants");
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Clamps a number between 0 and 100.
+ *
+ * @param value Value to clamp.
+ *
+ * @return Value clamped between 0 and 100.
+ */
+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.
+ */
+function isOverlapping(value, initialIndex, newPosition, minDistance = _constants.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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+
+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/custom-gradient-picker/index.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomGradientPicker = CustomGradientPicker;
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+var _i18n = require("@wordpress/i18n");
+var _anglePickerControl = _interopRequireDefault(require("../angle-picker-control"));
+var _gradientBar = _interopRequireDefault(require("./gradient-bar"));
+var _flex = require("../flex");
+var _selectControl = _interopRequireDefault(require("../select-control"));
+var _vStack = require("../v-stack");
+var _utils = require("./utils");
+var _serializer = require("./serializer");
+var _constants = require("./constants");
+var _customGradientPickerStyles = require("./styles/custom-gradient-picker-styles");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const GradientAnglePicker = ({
+  gradientAST,
+  hasGradient,
+  onChange
+}) => {
+  var _gradientAST$orientat;
+  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : _constants.DEFAULT_LINEAR_GRADIENT_ANGLE;
+  const onAngleChange = newAngle => {
+    onChange((0, _serializer.serializeGradient)({
+      ...gradientAST,
+      orientation: {
+        type: 'angular',
+        value: `${newAngle}`
+      }
+    }));
+  };
+  return (0, _react.createElement)(_anglePickerControl.default, {
+    __nextHasNoMarginBottom: true,
+    onChange: onAngleChange,
+    value: hasGradient ? angle : ''
+  });
+};
+const GradientTypePicker = ({
+  gradientAST,
+  hasGradient,
+  onChange
+}) => {
+  const {
+    type
+  } = gradientAST;
+  const onSetLinearGradient = () => {
+    onChange((0, _serializer.serializeGradient)({
+      ...gradientAST,
+      orientation: gradientAST.orientation ? undefined : _constants.HORIZONTAL_GRADIENT_ORIENTATION,
+      type: 'linear-gradient'
+    }));
+  };
+  const onSetRadialGradient = () => {
+    const {
+      orientation,
+      ...restGradientAST
+    } = gradientAST;
+    onChange((0, _serializer.serializeGradient)({
+      ...restGradientAST,
+      type: 'radial-gradient'
+    }));
+  };
+  const handleOnChange = next => {
+    if (next === 'linear-gradient') {
+      onSetLinearGradient();
+    }
+    if (next === 'radial-gradient') {
+      onSetRadialGradient();
+    }
+  };
+  return (0, _react.createElement)(_selectControl.default, {
+    __nextHasNoMarginBottom: true,
+    className: "components-custom-gradient-picker__type-picker",
+    label: (0, _i18n.__)('Type'),
+    labelPosition: "top",
+    onChange: handleOnChange,
+    options: _constants.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 }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+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
+  } = (0, _utils.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 = (0, _utils.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: (0, _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
+      position: parseInt(colorStop.length.value)
+    };
+  });
+  if (!__nextHasNoMargin) {
+    (0, _deprecated.default)('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 (0, _react.createElement)(_vStack.VStack, {
+    spacing: 4,
+    className: (0, _classnames.default)('components-custom-gradient-picker', {
+      'is-next-has-no-margin': __nextHasNoMargin
+    })
+  }, (0, _react.createElement)(_gradientBar.default, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    background: background,
+    hasGradient: hasGradient,
+    value: controlPoints,
+    onChange: newControlPoints => {
+      onChange((0, _serializer.serializeGradient)((0, _utils.getGradientAstWithControlPoints)(gradientAST, newControlPoints)));
+    }
+  }), (0, _react.createElement)(_flex.Flex, {
+    gap: 3,
+    className: "components-custom-gradient-picker__ui-line"
+  }, (0, _react.createElement)(_customGradientPickerStyles.SelectWrapper, null, (0, _react.createElement)(GradientTypePicker, {
+    gradientAST: gradientAST,
+    hasGradient: hasGradient,
+    onChange: onChange
+  })), (0, _react.createElement)(_customGradientPickerStyles.AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0, _react.createElement)(GradientAnglePicker, {
+    gradientAST: gradientAST,
+    hasGradient: hasGradient,
+    onChange: onChange
+  }))));
+}
+var _default = CustomGradientPicker;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _utils = require("../mobile/color-settings/utils");
+var _utils2 = require("./utils");
+var _serializer = require("./serializer");
+var _constants = require("./constants");
+var _style = _interopRequireDefault(require("./style.scss"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function CustomGradientPicker({
+  setColor,
+  currentValue,
+  isGradientColor
+}) {
+  const [gradientOrientation, setGradientOrientation] = (0, _element.useState)(_constants.HORIZONTAL_GRADIENT_ORIENTATION);
+  const [currentColor, setCurrentColor] = (0, _element.useState)(currentValue);
+  const {
+    getGradientType,
+    gradients,
+    gradientOptions
+  } = _utils.colorsUtils;
+  const {
+    gradientAST
+  } = (0, _utils2.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 (0, _serializer.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 = (0, _serializer.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 : _constants.DEFAULT_LINEAR_GRADIENT_ANGLE;
+  }
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Gradient Type')
+  }, (0, _react.createElement)(_components.RadioControl, {
+    selected: gradientType,
+    options: gradientOptions,
+    onChange: onGradientTypeChange
+  })), isLinearGradient(gradientType) && (0, _react.createElement)(_components.PanelBody, {
+    style: _style.default.angleControl
+  }, (0, _react.createElement)(_components.RangeControl, {
+    label: (0, _i18n.__)('Angle'),
+    minimumValue: 0,
+    maximumValue: 360,
+    value: getGradientAngle(),
+    onChange: setGradientAngle
+  })));
+}
+var _default = CustomGradientPicker;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializeGradient = serializeGradient;
+exports.serializeGradientColor = serializeGradientColor;
+exports.serializeGradientColorStop = serializeGradientColorStop;
+exports.serializeGradientOrientation = serializeGradientOrientation;
+exports.serializeGradientPosition = serializeGradientPosition;
+/**
+ * External dependencies
+ */
+
+function serializeGradientColor({
+  type,
+  value
+}) {
+  if (type === 'literal') {
+    return value;
+  }
+  if (type === 'hex') {
+    return `#${value}`;
+  }
+  return `${type}(${value.join(',')})`;
+}
+function serializeGradientPosition(position) {
+  if (!position) {
+    return '';
+  }
+  const {
+    value,
+    type
+  } = position;
+  return `${value}${type}`;
+}
+function serializeGradientColorStop({
+  type,
+  value,
+  length
+}) {
+  return `${serializeGradientColor({
+    type,
+    value
+  })} ${serializeGradientPosition(length)}`;
+}
+function serializeGradientOrientation(orientation) {
+  if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {
+    return;
+  }
+  return `${orientation.value}deg`;
+}
+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/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;;AAGO,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;AAEO,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;AAEO,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;AAEO,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;AAEO,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/custom-gradient-picker/styles/custom-gradient-picker-styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectWrapper = exports.AccessoryWrapper = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _flex = require("../../flex");
+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)."; }
+const SelectWrapper = ( /*#__PURE__*/0, _base.default)(_flex.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__
+});
+exports.SelectWrapper = SelectWrapper;
+const AccessoryWrapper = ( /*#__PURE__*/0, _base.default)(_flex.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__
+});
+exports.AccessoryWrapper = AccessoryWrapper;
+//# sourceMappingURL=custom-gradient-picker-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_flex","require","_EMOTION_STRINGIFIED_CSS_ERROR__","SelectWrapper","_base","default","FlexBlock","process","env","NODE_ENV","target","label","name","styles","map","toString","exports","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":";;;;;;;;AAOA,IAAAA,KAAA,GAAAC,OAAA;AAAuC,SAAAC,iCAAA;AAEhC,MAAMC,aAAa,GAAG,kBAAAC,KAAA,CAAAC,OAAA,EAAQC,eAAS,EAAAC,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,EAAAb;AAAA,EAE/C;AAACc,OAAA,CAAAb,aAAA,GAAAA,aAAA;AAEK,MAAMc,gBAAgB,GAAG,kBAAAb,KAAA,CAAAC,OAAA,EAAQC,eAAS,EAAAC,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,EAAAb;AAAA,EAElD;AAACc,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

node_modules/@wordpress/components/build/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/custom-gradient-picker/utils.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGradientAstWithControlPoints = getGradientAstWithControlPoints;
+exports.getGradientAstWithDefault = getGradientAstWithDefault;
+exports.getLinearGradientRepresentation = getLinearGradientRepresentation;
+exports.getStopCssColor = getStopCssColor;
+var _gradientParser = _interopRequireDefault(require("gradient-parser"));
+var _colord = require("colord");
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+var _constants = require("./constants");
+var _serializer = require("./serializer");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+(0, _colord.extend)([_names.default]);
+function getLinearGradientRepresentation(gradientAST) {
+  return (0, _serializer.serializeGradient)({
+    type: 'linear-gradient',
+    orientation: _constants.HORIZONTAL_GRADIENT_ORIENTATION,
+    colorStops: gradientAST.colorStops
+  });
+}
+function hasUnsupportedLength(item) {
+  return item.length === undefined || item.length.type !== '%';
+}
+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 : _constants.DEFAULT_GRADIENT;
+  try {
+    gradientAST = _gradientParser.default.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.default.parse(_constants.DEFAULT_GRADIENT)[0];
+    hasGradient = false;
+  }
+  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {
+    gradientAST.orientation = {
+      type: 'angular',
+      value: _constants.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
+  };
+}
+function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
+  return {
+    ...gradientAST,
+    colorStops: newControlPoints.map(({
+      position,
+      color
+    }) => {
+      const {
+        r,
+        g,
+        b,
+        a
+      } = (0, _colord.colord)(color).toRgb();
+      return {
+        length: {
+          type: '%',
+          value: position?.toString()
+        },
+        type: a < 1 ? 'rgba' : 'rgb',
+        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]
+      };
+    })
+  };
+}
+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