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

@@ -0,0 +1,176 @@
+import { createElement, Fragment } from "react";
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BorderControlStylePicker from '../border-control-style-picker';
+import Button from '../../button';
+import ColorIndicator from '../../color-indicator';
+import ColorPalette from '../../color-palette';
+import Dropdown from '../../dropdown';
+import { HStack } from '../../h-stack';
+import { VStack } from '../../v-stack';
+import { contextConnect } from '../../context';
+import { useBorderControlDropdown } from './hook';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
+import { isMultiplePaletteArray } from '../../color-palette/utils';
+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 (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 ? 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) : 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 ? 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) : 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 __('Border color and style picker.');
+  }
+  if (colorObject) {
+    return 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 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 __('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
+  } = 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
+  }) => createElement(Button, {
+    onClick: onToggle,
+    variant: "tertiary",
+    "aria-label": toggleAriaLabel,
+    tooltipPosition: dropdownPosition,
+    label: __('Border color and style picker'),
+    showTooltip: true,
+    __next40pxDefaultSize: size === '__unstable-large' ? true : false
+  }, createElement("span", {
+    className: indicatorWrapperClassName
+  }, createElement(ColorIndicator, {
+    className: indicatorClassName,
+    colorValue: color
+  })));
+  const renderContent = ({
+    onClose
+  }) => createElement(Fragment, null, createElement(DropdownContentWrapper, {
+    paddingSize: "medium"
+  }, createElement(VStack, {
+    className: popoverControlsClassName,
+    spacing: 6
+  }, showDropdownHeader ? createElement(HStack, null, createElement(StyledLabel, null, __('Border color')), createElement(Button, {
+    size: "small",
+    label: __('Close border color'),
+    icon: closeSmall,
+    onClick: onClose
+  })) : undefined, createElement(ColorPalette, {
+    className: popoverContentClassName,
+    value: color,
+    onChange: onColorChange,
+    colors,
+    disableCustomColors,
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    clearable: false,
+    enableAlpha: enableAlpha
+  }), enableStyle && isStyleSettable && createElement(BorderControlStylePicker, {
+    label: __('Style'),
+    value: style,
+    onChange: onStyleChange
+  }))), showResetButton && createElement(DropdownContentWrapper, {
+    paddingSize: "none"
+  }, createElement(Button, {
+    className: resetButtonClassName,
+    variant: "tertiary",
+    onClick: () => {
+      onReset();
+      onClose();
+    }
+  }, __('Reset'))));
+  return createElement(Dropdown, {
+    renderToggle: renderToggle,
+    renderContent: renderContent,
+    popoverProps: {
+      ...__unstablePopoverProps
+    },
+    ...otherProps,
+    ref: forwardedRef
+  });
+};
+const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
+export default ConnectedBorderControlDropdown;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
+import { useContextSystem } from '../../context';
+import { useCx } from '../../utils/hooks/use-cx';
+export function useBorderControlDropdown(props) {
+  const {
+    border,
+    className,
+    colors = [],
+    enableAlpha = false,
+    enableStyle = true,
+    onChange,
+    previousStyleSelection,
+    size = 'default',
+    __experimentalIsRenderedInSidebar = false,
+    ...otherProps
+  } = useContextSystem(props, 'BorderControlDropdown');
+  const [widthValue] = 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 = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.borderControlDropdown, className);
+  }, [className, cx]);
+  const indicatorClassName = useMemo(() => {
+    return cx(styles.borderColorIndicator);
+  }, [cx]);
+  const indicatorWrapperClassName = useMemo(() => {
+    return cx(styles.colorIndicatorWrapper(border, size));
+  }, [border, cx, size]);
+  const popoverControlsClassName = useMemo(() => {
+    return cx(styles.borderControlPopoverControls);
+  }, [cx]);
+  const popoverContentClassName = useMemo(() => {
+    return cx(styles.borderControlPopoverContent);
+  }, [cx]);
+  const resetButtonClassName = 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-module/border-control/border-control-dropdown/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/index.ts"],"sourcesContent":["export { default } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,aAAa"}

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

@@ -0,0 +1,48 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect } from '../../context';
+import { ToggleGroupControl, ToggleGroupControlOptionIcon } from '../../toggle-group-control';
+const BORDER_STYLES = [{
+  label: __('Solid'),
+  icon: lineSolid,
+  value: 'solid'
+}, {
+  label: __('Dashed'),
+  icon: lineDashed,
+  value: 'dashed'
+}, {
+  label: __('Dotted'),
+  icon: lineDotted,
+  value: 'dotted'
+}];
+function UnconnectedBorderControlStylePicker({
+  onChange,
+  ...restProps
+}, forwardedRef) {
+  return createElement(ToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    ref: forwardedRef,
+    isDeselectable: true,
+    onChange: value => {
+      onChange?.(value);
+    },
+    ...restProps
+  }, BORDER_STYLES.map(borderStyle => createElement(ToggleGroupControlOptionIcon, {
+    key: borderStyle.value,
+    value: borderStyle.value,
+    icon: borderStyle.icon,
+    label: borderStyle.label
+  })));
+}
+const BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');
+export default BorderControlStylePicker;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["lineDashed","lineDotted","lineSolid","__","contextConnect","ToggleGroupControl","ToggleGroupControlOptionIcon","BORDER_STYLES","label","icon","value","UnconnectedBorderControlStylePicker","onChange","restProps","forwardedRef","createElement","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","isDeselectable","map","borderStyle","key","BorderControlStylePicker"],"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":";AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,UAAU,EAAEC,SAAS,QAAQ,kBAAkB;AACpE,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,cAAc,QAAQ,eAAe;AAE9C,SACCC,kBAAkB,EAClBC,4BAA4B,QACtB,4BAA4B;AAEnC,MAAMC,aAAa,GAAG,CACrB;EAAEC,KAAK,EAAEL,EAAE,CAAE,OAAQ,CAAC;EAAEM,IAAI,EAAEP,SAAS;EAAEQ,KAAK,EAAE;AAAQ,CAAC,EACzD;EAAEF,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,IAAI,EAAET,UAAU;EAAEU,KAAK,EAAE;AAAS,CAAC,EAC5D;EAAEF,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,IAAI,EAAER,UAAU;EAAES,KAAK,EAAE;AAAS,CAAC,CAC5D;AAED,SAASC,mCAAmCA,CAC3C;EAAEC,QAAQ;EAAE,GAAGC;AAA4B,CAAC,EAC5CC,YAAuC,EACtC;EACD,OACCC,aAAA,CAACV,kBAAkB;IAClBW,uBAAuB;IACvBC,qBAAqB;IACrBC,GAAG,EAAGJ,YAAc;IACpBK,cAAc;IACdP,QAAQ,EAAKF,KAAK,IAAM;MACvBE,QAAQ,GAAIF,KAA4B,CAAC;IAC1C,CAAG;IAAA,GACEG;EAAS,GAEZN,aAAa,CAACa,GAAG,CAAIC,WAAW,IACjCN,aAAA,CAACT,4BAA4B;IAC5BgB,GAAG,EAAGD,WAAW,CAACX,KAAO;IACzBA,KAAK,EAAGW,WAAW,CAACX,KAAO;IAC3BD,IAAI,EAAGY,WAAW,CAACZ,IAAM;IACzBD,KAAK,EAAGa,WAAW,CAACb;EAAO,CAC3B,CACA,CACiB,CAAC;AAEvB;AAEA,MAAMe,wBAAwB,GAAGnB,cAAc,CAC9CO,mCAAmC,EACnC,0BACD,CAAC;AAED,eAAeY,wBAAwB"}

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

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/index.ts"],"sourcesContent":["export { default } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,aAAa"}

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

@@ -0,0 +1,148 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BorderControlDropdown from '../border-control-dropdown';
+import UnitControl from '../../unit-control';
+import RangeControl from '../../range-control';
+import { HStack } from '../../h-stack';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import { View } from '../../view';
+import { VisuallyHidden } from '../../visually-hidden';
+import { contextConnect } from '../../context';
+import { useBorderControl } from './hook';
+const BorderLabel = props => {
+  const {
+    label,
+    hideLabelFromVision
+  } = props;
+  if (!label) {
+    return null;
+  }
+  return hideLabelFromVision ? createElement(VisuallyHidden, {
+    as: "legend"
+  }, label) : createElement(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
+  } = useBorderControl(props);
+  return createElement(View, {
+    as: "fieldset",
+    ...otherProps,
+    ref: forwardedRef
+  }, createElement(BorderLabel, {
+    label: label,
+    hideLabelFromVision: hideLabelFromVision
+  }), createElement(HStack, {
+    spacing: 4,
+    className: innerWrapperClassName
+  }, createElement(UnitControl, {
+    prefix: createElement(BorderControlDropdown, {
+      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: __('Border width'),
+    hideLabelFromVision: true,
+    min: 0,
+    onChange: onWidthChange,
+    value: border?.width || '',
+    placeholder: placeholder,
+    disableUnits: disableUnits,
+    __unstableInputWidth: inputWidth,
+    size: size
+  }), withSlider && createElement(RangeControl, {
+    __nextHasNoMarginBottom: true,
+    label: __('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 }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
+export default BorderControl;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
+import { useContextSystem } from '../../context';
+import { useCx } from '../../utils/hooks/use-cx';
+// 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;
+};
+export function useBorderControl(props) {
+  const {
+    className,
+    colors = [],
+    isCompact,
+    onChange,
+    enableAlpha = true,
+    enableStyle = true,
+    shouldSanitizeBorder = true,
+    size = 'default',
+    value: border,
+    width,
+    __experimentalIsRenderedInSidebar = false,
+    __next40pxDefaultSize,
+    ...otherProps
+  } = useContextSystem(props, 'BorderControl');
+  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
+  const widthUnit = originalWidthUnit || 'px';
+  const hadPreviousZeroWidth = widthValue === 0;
+  const [colorSelection, setColorSelection] = useState();
+  const [styleSelection, setStyleSelection] = useState();
+  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
+  const onBorderChange = useCallback(newBorder => {
+    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
+      onChange(undefined);
+      return;
+    }
+    onChange(newBorder);
+  }, [onChange, shouldSanitizeBorder]);
+  const onWidthChange = useCallback(newWidth => {
+    const newWidthValue = newWidth === '' ? undefined : newWidth;
+    const [parsedValue] = 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 = useCallback(value => {
+    onWidthChange(`${value}${widthUnit}`);
+  }, [onWidthChange, widthUnit]);
+
+  // Generate class names.
+  const cx = useCx();
+  const classes = 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 = useMemo(() => {
+    const widthStyle = !!wrapperWidth && styles.wrapperWidth;
+    const heightStyle = styles.wrapperHeight(computedSize);
+    return cx(styles.innerWrapper(), widthStyle, heightStyle);
+  }, [wrapperWidth, cx, computedSize]);
+  const sliderClassName = 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-module/border-control/border-control/index.js

@@ -0,0 +1,3 @@
+export { default as BorderControl } from './component';
+export { useBorderControl } from './hook';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","BorderControl","useBorderControl"],"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,aAAa;AACtD,SAASC,gBAAgB,QAAQ,QAAQ"}

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

@@ -0,0 +1,3 @@
+export { default as BorderControl } from './border-control/component';
+export { useBorderControl } from './border-control/hook';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","BorderControl","useBorderControl"],"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,SAASA,OAAO,IAAIC,aAAa,QAAQ,4BAA4B;AACrE,SAASC,gBAAgB,QAAQ,uBAAuB"}

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

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