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/border-control/border-control-dropdown/component.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _borderControlStylePicker = _interopRequireDefault(require("../border-control-style-picker"));
+var _button = _interopRequireDefault(require("../../button"));
+var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
+var _colorPalette = _interopRequireDefault(require("../../color-palette"));
+var _dropdown = _interopRequireDefault(require("../../dropdown"));
+var _hStack = require("../../h-stack");
+var _vStack = require("../../v-stack");
+var _context = require("../../context");
+var _hook = require("./hook");
+var _baseControlStyles = require("../../base-control/styles/base-control-styles");
+var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));
+var _utils = require("../../color-palette/utils");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const getAriaLabelColorValue = colorValue => {
+  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+  return colorValue.replace(/^var\((.+)\)$/, '$1');
+};
+const getColorObject = (colorValue, colors) => {
+  if (!colorValue || !colors) {
+    return;
+  }
+  if ((0, _utils.isMultiplePaletteArray)(colors)) {
+    // Multiple origins
+    let matchedColor;
+    colors.some(origin => origin.colors.some(color => {
+      if (color.color === colorValue) {
+        matchedColor = color;
+        return true;
+      }
+      return false;
+    }));
+    return matchedColor;
+  }
+
+  // Single origin
+  return colors.find(color => color.color === colorValue);
+};
+const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
+  if (isStyleEnabled) {
+    if (colorObject) {
+      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
+      return style ? (0, _i18n.sprintf)(
+      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0, _i18n.sprintf)(
+      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
+    }
+    if (colorValue) {
+      const ariaLabelValue = getAriaLabelColorValue(colorValue);
+      return style ? (0, _i18n.sprintf)(
+      // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0, _i18n.sprintf)(
+      // translators: %1$s: The color's hex code e.g: "#f00".
+      'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
+    }
+    return (0, _i18n.__)('Border color and style picker.');
+  }
+  if (colorObject) {
+    return (0, _i18n.sprintf)(
+    // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
+    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
+  }
+  if (colorValue) {
+    return (0, _i18n.sprintf)(
+    // translators: %1$s: The color's hex code e.g: "#f00".
+    'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
+  }
+  return (0, _i18n.__)('Border color picker.');
+};
+const BorderControlDropdown = (props, forwardedRef) => {
+  const {
+    __experimentalIsRenderedInSidebar,
+    border,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    enableStyle,
+    indicatorClassName,
+    indicatorWrapperClassName,
+    isStyleSettable,
+    onReset,
+    onColorChange,
+    onStyleChange,
+    popoverContentClassName,
+    popoverControlsClassName,
+    resetButtonClassName,
+    showDropdownHeader,
+    size,
+    __unstablePopoverProps,
+    ...otherProps
+  } = (0, _hook.useBorderControlDropdown)(props);
+  const {
+    color,
+    style
+  } = border || {};
+  const colorObject = getColorObject(color, colors);
+  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
+  const showResetButton = color || style && style !== 'none';
+  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
+  const renderToggle = ({
+    onToggle
+  }) => (0, _react.createElement)(_button.default, {
+    onClick: onToggle,
+    variant: "tertiary",
+    "aria-label": toggleAriaLabel,
+    tooltipPosition: dropdownPosition,
+    label: (0, _i18n.__)('Border color and style picker'),
+    showTooltip: true,
+    __next40pxDefaultSize: size === '__unstable-large' ? true : false
+  }, (0, _react.createElement)("span", {
+    className: indicatorWrapperClassName
+  }, (0, _react.createElement)(_colorIndicator.default, {
+    className: indicatorClassName,
+    colorValue: color
+  })));
+  const renderContent = ({
+    onClose
+  }) => (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_dropdownContentWrapper.default, {
+    paddingSize: "medium"
+  }, (0, _react.createElement)(_vStack.VStack, {
+    className: popoverControlsClassName,
+    spacing: 6
+  }, showDropdownHeader ? (0, _react.createElement)(_hStack.HStack, null, (0, _react.createElement)(_baseControlStyles.StyledLabel, null, (0, _i18n.__)('Border color')), (0, _react.createElement)(_button.default, {
+    size: "small",
+    label: (0, _i18n.__)('Close border color'),
+    icon: _icons.closeSmall,
+    onClick: onClose
+  })) : undefined, (0, _react.createElement)(_colorPalette.default, {
+    className: popoverContentClassName,
+    value: color,
+    onChange: onColorChange,
+    colors,
+    disableCustomColors,
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    clearable: false,
+    enableAlpha: enableAlpha
+  }), enableStyle && isStyleSettable && (0, _react.createElement)(_borderControlStylePicker.default, {
+    label: (0, _i18n.__)('Style'),
+    value: style,
+    onChange: onStyleChange
+  }))), showResetButton && (0, _react.createElement)(_dropdownContentWrapper.default, {
+    paddingSize: "none"
+  }, (0, _react.createElement)(_button.default, {
+    className: resetButtonClassName,
+    variant: "tertiary",
+    onClick: () => {
+      onReset();
+      onClose();
+    }
+  }, (0, _i18n.__)('Reset'))));
+  return (0, _react.createElement)(_dropdown.default, {
+    renderToggle: renderToggle,
+    renderContent: renderContent,
+    popoverProps: {
+      ...__unstablePopoverProps
+    },
+    ...otherProps,
+    ref: forwardedRef
+  });
+};
+const ConnectedBorderControlDropdown = (0, _context.contextConnect)(BorderControlDropdown, 'BorderControlDropdown');
+var _default = ConnectedBorderControlDropdown;
+exports.default = _default;
+//# sourceMappingURL=component.js.map

node_modules/@wordpress/components/build/border-control/border-control-dropdown/hook.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBorderControlDropdown = useBorderControlDropdown;
+var _element = require("@wordpress/element");
+var styles = _interopRequireWildcard(require("../styles"));
+var _utils = require("../../unit-control/utils");
+var _context = require("../../context");
+var _useCx = require("../../utils/hooks/use-cx");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function useBorderControlDropdown(props) {
+  const {
+    border,
+    className,
+    colors = [],
+    enableAlpha = false,
+    enableStyle = true,
+    onChange,
+    previousStyleSelection,
+    size = 'default',
+    __experimentalIsRenderedInSidebar = false,
+    ...otherProps
+  } = (0, _context.useContextSystem)(props, 'BorderControlDropdown');
+  const [widthValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);
+  const hasZeroWidth = widthValue === 0;
+  const onColorChange = color => {
+    const style = border?.style === 'none' ? previousStyleSelection : border?.style;
+    const width = hasZeroWidth && !!color ? '1px' : border?.width;
+    onChange({
+      color,
+      style,
+      width
+    });
+  };
+  const onStyleChange = style => {
+    const width = hasZeroWidth && !!style ? '1px' : border?.width;
+    onChange({
+      ...border,
+      style,
+      width
+    });
+  };
+  const onReset = () => {
+    onChange({
+      ...border,
+      color: undefined,
+      style: undefined
+    });
+  };
+
+  // Generate class names.
+  const cx = (0, _useCx.useCx)();
+  const classes = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlDropdown, className);
+  }, [className, cx]);
+  const indicatorClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderColorIndicator);
+  }, [cx]);
+  const indicatorWrapperClassName = (0, _element.useMemo)(() => {
+    return cx(styles.colorIndicatorWrapper(border, size));
+  }, [border, cx, size]);
+  const popoverControlsClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlPopoverControls);
+  }, [cx]);
+  const popoverContentClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlPopoverContent);
+  }, [cx]);
+  const resetButtonClassName = (0, _element.useMemo)(() => {
+    return cx(styles.resetButton);
+  }, [cx]);
+  return {
+    ...otherProps,
+    border,
+    className: classes,
+    colors,
+    enableAlpha,
+    enableStyle,
+    indicatorClassName,
+    indicatorWrapperClassName,
+    onColorChange,
+    onStyleChange,
+    onReset,
+    popoverContentClassName,
+    popoverControlsClassName,
+    resetButtonClassName,
+    size,
+    __experimentalIsRenderedInSidebar
+  };
+}
+//# sourceMappingURL=hook.js.map

node_modules/@wordpress/components/build/border-control/border-control-dropdown/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _component.default;
+  }
+});
+var _component = _interopRequireDefault(require("./component"));
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build/border-control/border-control-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/index.ts"],"sourcesContent":["export { default } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

node_modules/@wordpress/components/build/border-control/border-control-style-picker/component.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
+var _context = require("../../context");
+var _toggleGroupControl = require("../../toggle-group-control");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const BORDER_STYLES = [{
+  label: (0, _i18n.__)('Solid'),
+  icon: _icons.lineSolid,
+  value: 'solid'
+}, {
+  label: (0, _i18n.__)('Dashed'),
+  icon: _icons.lineDashed,
+  value: 'dashed'
+}, {
+  label: (0, _i18n.__)('Dotted'),
+  icon: _icons.lineDotted,
+  value: 'dotted'
+}];
+function UnconnectedBorderControlStylePicker({
+  onChange,
+  ...restProps
+}, forwardedRef) {
+  return (0, _react.createElement)(_toggleGroupControl.ToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    ref: forwardedRef,
+    isDeselectable: true,
+    onChange: value => {
+      onChange?.(value);
+    },
+    ...restProps
+  }, BORDER_STYLES.map(borderStyle => (0, _react.createElement)(_toggleGroupControl.ToggleGroupControlOptionIcon, {
+    key: borderStyle.value,
+    value: borderStyle.value,
+    icon: borderStyle.icon,
+    label: borderStyle.label
+  })));
+}
+const BorderControlStylePicker = (0, _context.contextConnect)(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');
+var _default = BorderControlStylePicker;
+exports.default = _default;
+//# sourceMappingURL=component.js.map

node_modules/@wordpress/components/build/border-control/border-control-style-picker/component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_icons","require","_i18n","_context","_toggleGroupControl","BORDER_STYLES","label","__","icon","lineSolid","value","lineDashed","lineDotted","UnconnectedBorderControlStylePicker","onChange","restProps","forwardedRef","_react","createElement","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","isDeselectable","map","borderStyle","ToggleGroupControlOptionIcon","key","BorderControlStylePicker","contextConnect","_default","exports","default"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../context';\nimport type { StylePickerProps } from '../types';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOptionIcon,\n} from '../../toggle-group-control';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nfunction UnconnectedBorderControlStylePicker(\n\t{ onChange, ...restProps }: StylePickerProps,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ forwardedRef }\n\t\t\tisDeselectable\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange?.( value as string | undefined );\n\t\t\t} }\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\tvalue={ borderStyle.value }\n\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nconst BorderControlStylePicker = contextConnect(\n\tUnconnectedBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default BorderControlStylePicker;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AAXA;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMI,aAAa,GAAG,CACrB;EAAEC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EAAEC,IAAI,EAAEC,gBAAS;EAAEC,KAAK,EAAE;AAAQ,CAAC,EACzD;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEG,iBAAU;EAAED,KAAK,EAAE;AAAS,CAAC,EAC5D;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEI,iBAAU;EAAEF,KAAK,EAAE;AAAS,CAAC,CAC5D;AAED,SAASG,mCAAmCA,CAC3C;EAAEC,QAAQ;EAAE,GAAGC;AAA4B,CAAC,EAC5CC,YAAuC,EACtC;EACD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACd,mBAAA,CAAAe,kBAAkB;IAClBC,uBAAuB;IACvBC,qBAAqB;IACrBC,GAAG,EAAGN,YAAc;IACpBO,cAAc;IACdT,QAAQ,EAAKJ,KAAK,IAAM;MACvBI,QAAQ,GAAIJ,KAA4B,CAAC;IAC1C,CAAG;IAAA,GACEK;EAAS,GAEZV,aAAa,CAACmB,GAAG,CAAIC,WAAW,IACjC,IAAAR,MAAA,CAAAC,aAAA,EAACd,mBAAA,CAAAsB,4BAA4B;IAC5BC,GAAG,EAAGF,WAAW,CAACf,KAAO;IACzBA,KAAK,EAAGe,WAAW,CAACf,KAAO;IAC3BF,IAAI,EAAGiB,WAAW,CAACjB,IAAM;IACzBF,KAAK,EAAGmB,WAAW,CAACnB;EAAO,CAC3B,CACA,CACiB,CAAC;AAEvB;AAEA,MAAMsB,wBAAwB,GAAG,IAAAC,uBAAc,EAC9ChB,mCAAmC,EACnC,0BACD,CAAC;AAAC,IAAAiB,QAAA,GAEaF,wBAAwB;AAAAG,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

node_modules/@wordpress/components/build/border-control/border-control-style-picker/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _component.default;
+  }
+});
+var _component = _interopRequireDefault(require("./component"));
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build/border-control/border-control-style-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/index.ts"],"sourcesContent":["export { default } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

node_modules/@wordpress/components/build/border-control/border-control/component.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BorderControl = void 0;
+var _react = require("react");
+var _i18n = require("@wordpress/i18n");
+var _borderControlDropdown = _interopRequireDefault(require("../border-control-dropdown"));
+var _unitControl = _interopRequireDefault(require("../../unit-control"));
+var _rangeControl = _interopRequireDefault(require("../../range-control"));
+var _hStack = require("../../h-stack");
+var _baseControlStyles = require("../../base-control/styles/base-control-styles");
+var _view = require("../../view");
+var _visuallyHidden = require("../../visually-hidden");
+var _context = require("../../context");
+var _hook = require("./hook");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const BorderLabel = props => {
+  const {
+    label,
+    hideLabelFromVision
+  } = props;
+  if (!label) {
+    return null;
+  }
+  return hideLabelFromVision ? (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
+    as: "legend"
+  }, label) : (0, _react.createElement)(_baseControlStyles.StyledLabel, {
+    as: "legend"
+  }, label);
+};
+const UnconnectedBorderControl = (props, forwardedRef) => {
+  const {
+    __next40pxDefaultSize = false,
+    colors,
+    disableCustomColors,
+    disableUnits,
+    enableAlpha,
+    enableStyle,
+    hideLabelFromVision,
+    innerWrapperClassName,
+    inputWidth,
+    isStyleSettable,
+    label,
+    onBorderChange,
+    onSliderChange,
+    onWidthChange,
+    placeholder,
+    __unstablePopoverProps,
+    previousStyleSelection,
+    showDropdownHeader,
+    size,
+    sliderClassName,
+    value: border,
+    widthUnit,
+    widthValue,
+    withSlider,
+    __experimentalIsRenderedInSidebar,
+    ...otherProps
+  } = (0, _hook.useBorderControl)(props);
+  return (0, _react.createElement)(_view.View, {
+    as: "fieldset",
+    ...otherProps,
+    ref: forwardedRef
+  }, (0, _react.createElement)(BorderLabel, {
+    label: label,
+    hideLabelFromVision: hideLabelFromVision
+  }), (0, _react.createElement)(_hStack.HStack, {
+    spacing: 4,
+    className: innerWrapperClassName
+  }, (0, _react.createElement)(_unitControl.default, {
+    prefix: (0, _react.createElement)(_borderControlDropdown.default, {
+      border: border,
+      colors: colors,
+      __unstablePopoverProps: __unstablePopoverProps,
+      disableCustomColors: disableCustomColors,
+      enableAlpha: enableAlpha,
+      enableStyle: enableStyle,
+      isStyleSettable: isStyleSettable,
+      onChange: onBorderChange,
+      previousStyleSelection: previousStyleSelection,
+      showDropdownHeader: showDropdownHeader,
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      size: size
+    }),
+    label: (0, _i18n.__)('Border width'),
+    hideLabelFromVision: true,
+    min: 0,
+    onChange: onWidthChange,
+    value: border?.width || '',
+    placeholder: placeholder,
+    disableUnits: disableUnits,
+    __unstableInputWidth: inputWidth,
+    size: size
+  }), withSlider && (0, _react.createElement)(_rangeControl.default, {
+    __nextHasNoMarginBottom: true,
+    label: (0, _i18n.__)('Border width'),
+    hideLabelFromVision: true,
+    className: sliderClassName,
+    initialPosition: 0,
+    max: 100,
+    min: 0,
+    onChange: onSliderChange,
+    step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
+    value: widthValue || undefined,
+    withInputField: false,
+    __next40pxDefaultSize: __next40pxDefaultSize
+  })));
+};
+
+/**
+ * The `BorderControl` brings together internal sub-components which allow users to
+ * set the various properties of a border. The first sub-component, a
+ * `BorderDropdown` contains options representing border color and style. The
+ * border width is controlled via a `UnitControl` and an optional `RangeControl`.
+ *
+ * Border radius is not covered by this control as it may be desired separate to
+ * color, style, and width. For example, the border radius may be absorbed under
+ * a "shape" abstraction.
+ *
+ * ```jsx
+ * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderControl = () => {
+ * 	const [ border, setBorder ] = useState();
+ * 	const onChange = ( newBorder ) => setBorder( newBorder );
+ *
+ * 	return (
+ * 		<BorderControl
+ * 			colors={ colors }
+ * 			label={ __( 'Border' ) }
+ * 			onChange={ onChange }
+ * 			value={ border }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+const BorderControl = (0, _context.contextConnect)(UnconnectedBorderControl, 'BorderControl');
+exports.BorderControl = BorderControl;
+var _default = BorderControl;
+exports.default = _default;
+//# sourceMappingURL=component.js.map

node_modules/@wordpress/components/build/border-control/border-control/hook.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBorderControl = useBorderControl;
+var _element = require("@wordpress/element");
+var styles = _interopRequireWildcard(require("../styles"));
+var _utils = require("../../unit-control/utils");
+var _context = require("../../context");
+var _useCx = require("../../utils/hooks/use-cx");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// If either width or color are defined, the border is considered valid
+// and a border style can be set as well.
+const isValidBorder = border => {
+  const hasWidth = border?.width !== undefined && border.width !== '';
+  const hasColor = border?.color !== undefined;
+  return hasWidth || hasColor;
+};
+function useBorderControl(props) {
+  const {
+    className,
+    colors = [],
+    isCompact,
+    onChange,
+    enableAlpha = true,
+    enableStyle = true,
+    shouldSanitizeBorder = true,
+    size = 'default',
+    value: border,
+    width,
+    __experimentalIsRenderedInSidebar = false,
+    __next40pxDefaultSize,
+    ...otherProps
+  } = (0, _context.useContextSystem)(props, 'BorderControl');
+  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+  const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);
+  const widthUnit = originalWidthUnit || 'px';
+  const hadPreviousZeroWidth = widthValue === 0;
+  const [colorSelection, setColorSelection] = (0, _element.useState)();
+  const [styleSelection, setStyleSelection] = (0, _element.useState)();
+  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
+  const onBorderChange = (0, _element.useCallback)(newBorder => {
+    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
+      onChange(undefined);
+      return;
+    }
+    onChange(newBorder);
+  }, [onChange, shouldSanitizeBorder]);
+  const onWidthChange = (0, _element.useCallback)(newWidth => {
+    const newWidthValue = newWidth === '' ? undefined : newWidth;
+    const [parsedValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(newWidth);
+    const hasZeroWidth = parsedValue === 0;
+    const updatedBorder = {
+      ...border,
+      width: newWidthValue
+    };
+
+    // Setting the border width explicitly to zero will also set the
+    // border style to `none` and clear the border color.
+    if (hasZeroWidth && !hadPreviousZeroWidth) {
+      // Before clearing the color and style selections, keep track of
+      // the current selections so they can be restored when the width
+      // changes to a non-zero value.
+      setColorSelection(border?.color);
+      setStyleSelection(border?.style);
+
+      // Clear the color and style border properties.
+      updatedBorder.color = undefined;
+      updatedBorder.style = 'none';
+    }
+
+    // Selection has changed from zero border width to non-zero width.
+    if (!hasZeroWidth && hadPreviousZeroWidth) {
+      // Restore previous border color and style selections if width
+      // is now not zero.
+      if (updatedBorder.color === undefined) {
+        updatedBorder.color = colorSelection;
+      }
+      if (updatedBorder.style === 'none') {
+        updatedBorder.style = styleSelection;
+      }
+    }
+    onBorderChange(updatedBorder);
+  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
+  const onSliderChange = (0, _element.useCallback)(value => {
+    onWidthChange(`${value}${widthUnit}`);
+  }, [onWidthChange, widthUnit]);
+
+  // Generate class names.
+  const cx = (0, _useCx.useCx)();
+  const classes = (0, _element.useMemo)(() => {
+    return cx(styles.borderControl, className);
+  }, [className, cx]);
+  let wrapperWidth = width;
+  if (isCompact) {
+    // Widths below represent the minimum usable width for compact controls.
+    // Taller controls contain greater internal padding, thus greater width.
+    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+  }
+  const innerWrapperClassName = (0, _element.useMemo)(() => {
+    const widthStyle = !!wrapperWidth && styles.wrapperWidth;
+    const heightStyle = styles.wrapperHeight(computedSize);
+    return cx(styles.innerWrapper(), widthStyle, heightStyle);
+  }, [wrapperWidth, cx, computedSize]);
+  const sliderClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderSlider());
+  }, [cx]);
+  return {
+    ...otherProps,
+    className: classes,
+    colors,
+    enableAlpha,
+    enableStyle,
+    innerWrapperClassName,
+    inputWidth: wrapperWidth,
+    isStyleSettable,
+    onBorderChange,
+    onSliderChange,
+    onWidthChange,
+    previousStyleSelection: styleSelection,
+    sliderClassName,
+    value: border,
+    widthUnit,
+    widthValue,
+    size: computedSize,
+    __experimentalIsRenderedInSidebar,
+    __next40pxDefaultSize
+  };
+}
+//# sourceMappingURL=hook.js.map

node_modules/@wordpress/components/build/border-control/border-control/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BorderControl", {
+  enumerable: true,
+  get: function () {
+    return _component.default;
+  }
+});
+Object.defineProperty(exports, "useBorderControl", {
+  enumerable: true,
+  get: function () {
+    return _hook.useBorderControl;
+  }
+});
+var _component = _interopRequireDefault(require("./component"));
+var _hook = require("./hook");
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build/border-control/border-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_component","_interopRequireDefault","require","_hook"],"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA"}

node_modules/@wordpress/components/build/border-control/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BorderControl", {
+  enumerable: true,
+  get: function () {
+    return _component.default;
+  }
+});
+Object.defineProperty(exports, "useBorderControl", {
+  enumerable: true,
+  get: function () {
+    return _hook.useBorderControl;
+  }
+});
+var _component = _interopRequireDefault(require("./border-control/component"));
+var _hook = require("./border-control/hook");
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build/border-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_component","_interopRequireDefault","require","_hook"],"sources":["@wordpress/components/src/border-control/index.ts"],"sourcesContent":["export { default as BorderControl } from './border-control/component';\nexport { useBorderControl } from './border-control/hook';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA"}

node_modules/@wordpress/components/build/border-control/types.js

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