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/resizable-box/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ResizableBox = void 0;
+var _react = require("react");
+var _element = require("@wordpress/element");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reResizable = require("re-resizable");
+var _resizeTooltip = _interopRequireDefault(require("./resize-tooltip"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
+const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
+const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
+const HANDLE_CLASSES = {
+  top: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
+  right: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
+  bottom: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
+  left: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
+  topLeft: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
+  topRight: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
+  bottomRight: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
+  bottomLeft: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
+};
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDES = {
+  width: undefined,
+  height: undefined,
+  top: undefined,
+  right: undefined,
+  bottom: undefined,
+  left: undefined
+};
+const HANDLE_STYLES = {
+  top: HANDLE_STYLES_OVERRIDES,
+  right: HANDLE_STYLES_OVERRIDES,
+  bottom: HANDLE_STYLES_OVERRIDES,
+  left: HANDLE_STYLES_OVERRIDES,
+  topLeft: HANDLE_STYLES_OVERRIDES,
+  topRight: HANDLE_STYLES_OVERRIDES,
+  bottomRight: HANDLE_STYLES_OVERRIDES,
+  bottomLeft: HANDLE_STYLES_OVERRIDES
+};
+function UnforwardedResizableBox({
+  className,
+  children,
+  showHandle = true,
+  __experimentalShowTooltip: showTooltip = false,
+  __experimentalTooltipProps: tooltipProps = {},
+  ...props
+}, ref) {
+  return (0, _react.createElement)(_reResizable.Resizable, {
+    className: (0, _classnames.default)('components-resizable-box__container', showHandle && 'has-show-handle', className),
+    handleClasses: HANDLE_CLASSES,
+    handleStyles: HANDLE_STYLES,
+    ref: ref,
+    ...props
+  }, children, showTooltip && (0, _react.createElement)(_resizeTooltip.default, {
+    ...tooltipProps
+  }));
+}
+const ResizableBox = (0, _element.forwardRef)(UnforwardedResizableBox);
+exports.ResizableBox = ResizableBox;
+var _default = ResizableBox;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build/resizable-box/index.native.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _compose = require("@wordpress/compose");
+var _style = _interopRequireDefault(require("./style.scss"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function ResizableBox(props) {
+  const {
+    size,
+    showHandle = true,
+    getStylesFromColorScheme
+  } = props;
+  const {
+    height
+  } = size;
+  const defaultStyle = getStylesFromColorScheme(_style.default.staticSpacer, _style.default.staticDarkSpacer);
+  return (0, _react.createElement)(_reactNative.View, {
+    style: [defaultStyle, showHandle && _style.default.selectedSpacer, {
+      height
+    }]
+  });
+}
+var _default = (0, _compose.withPreferredColorScheme)(ResizableBox);
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

node_modules/@wordpress/components/build/resizable-box/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_compose","_style","_interopRequireDefault","ResizableBox","props","size","showHandle","getStylesFromColorScheme","height","defaultStyle","styles","staticSpacer","staticDarkSpacer","_react","createElement","View","style","selectedSpacer","_default","withPreferredColorScheme","exports","default"],"sources":["@wordpress/components/src/resizable-box/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nfunction ResizableBox( props ) {\n\tconst { size, showHandle = true, getStylesFromColorScheme } = props;\n\tconst { height } = size;\n\tconst defaultStyle = getStylesFromColorScheme(\n\t\tstyles.staticSpacer,\n\t\tstyles.staticDarkSpacer\n\t);\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tdefaultStyle,\n\t\t\t\tshowHandle && styles.selectedSpacer,\n\t\t\t\t{ height },\n\t\t\t] }\n\t\t></View>\n\t);\n}\n\nexport default withPreferredColorScheme( ResizableBox );\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAIA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AAXA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,SAASI,YAAYA,CAAEC,KAAK,EAAG;EAC9B,MAAM;IAAEC,IAAI;IAAEC,UAAU,GAAG,IAAI;IAAEC;EAAyB,CAAC,GAAGH,KAAK;EACnE,MAAM;IAAEI;EAAO,CAAC,GAAGH,IAAI;EACvB,MAAMI,YAAY,GAAGF,wBAAwB,CAC5CG,cAAM,CAACC,YAAY,EACnBD,cAAM,CAACE,gBACR,CAAC;EACD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAChB,YAAA,CAAAiB,IAAI;IACJC,KAAK,EAAG,CACPP,YAAY,EACZH,UAAU,IAAII,cAAM,CAACO,cAAc,EACnC;MAAET;IAAO,CAAC;EACR,CACG,CAAC;AAEV;AAAC,IAAAU,QAAA,GAEc,IAAAC,iCAAwB,EAAEhB,YAAa,CAAC;AAAAiB,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/index.js

@@ -0,0 +1,67 @@
+"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 _element = require("@wordpress/element");
+var _label = _interopRequireDefault(require("./label"));
+var _utils = require("./utils");
+var _resizeTooltip = require("./styles/resize-tooltip.styles");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const noop = () => {};
+function ResizeTooltip({
+  axis,
+  className,
+  fadeTimeout = 180,
+  isVisible = true,
+  labelRef,
+  onResize = noop,
+  position = _utils.POSITIONS.bottom,
+  showPx = true,
+  zIndex = 1000,
+  ...props
+}, ref) {
+  const {
+    label,
+    resizeListener
+  } = (0, _utils.useResizeLabel)({
+    axis,
+    fadeTimeout,
+    onResize,
+    showPx,
+    position
+  });
+  if (!isVisible) return null;
+  const classes = (0, _classnames.default)('components-resize-tooltip', className);
+  return (0, _react.createElement)(_resizeTooltip.Root, {
+    "aria-hidden": "true",
+    className: classes,
+    ref: ref,
+    ...props
+  }, resizeListener, (0, _react.createElement)(_label.default, {
+    "aria-hidden": props['aria-hidden'],
+    label: label,
+    position: position,
+    ref: labelRef,
+    zIndex: zIndex
+  }));
+}
+const ForwardedComponent = (0, _element.forwardRef)(ResizeTooltip);
+var _default = ForwardedComponent;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_label","_utils","_resizeTooltip","noop","ResizeTooltip","axis","className","fadeTimeout","isVisible","labelRef","onResize","position","POSITIONS","bottom","showPx","zIndex","props","ref","label","resizeListener","useResizeLabel","classes","classnames","_react","createElement","Root","default","ForwardedComponent","forwardRef","_default","exports"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { Ref, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Label from './label';\nimport type { Axis, Position } from './utils';\nimport { useResizeLabel, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\n\ntype ResizeTooltipProps = React.ComponentProps< typeof Root > & {\n\t'aria-hidden'?: boolean;\n\taxis?: Axis;\n\tclassName?: string;\n\tfadeTimeout?: number;\n\tisVisible?: boolean;\n\tlabelRef?: Ref< HTMLDivElement >;\n\tonResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];\n\tposition?: Position;\n\tshowPx?: boolean;\n\tzIndex?: number;\n};\n\nconst noop = () => {};\n\nfunction ResizeTooltip(\n\t{\n\t\taxis,\n\t\tclassName,\n\t\tfadeTimeout = 180,\n\t\tisVisible = true,\n\t\tlabelRef,\n\t\tonResize = noop,\n\t\tposition = POSITIONS.bottom,\n\t\tshowPx = true,\n\t\tzIndex = 1000,\n\t\t...props\n\t}: ResizeTooltipProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element | null {\n\tconst { label, resizeListener } = useResizeLabel( {\n\t\taxis,\n\t\tfadeTimeout,\n\t\tonResize,\n\t\tshowPx,\n\t\tposition,\n\t} );\n\n\tif ( ! isVisible ) return null;\n\n\tconst classes = classnames( 'components-resize-tooltip', className );\n\n\treturn (\n\t\t<Root aria-hidden=\"true\" className={ classes } ref={ ref } { ...props }>\n\t\t\t{ resizeListener }\n\t\t\t<Label\n\t\t\t\taria-hidden={ props[ 'aria-hidden' ] }\n\t\t\t\tlabel={ label }\n\t\t\t\tposition={ position }\n\t\t\t\tref={ labelRef }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( ResizeTooltip );\n\nexport default ForwardedComponent;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAmBA,MAAMK,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,aAAaA,CACrB;EACCC,IAAI;EACJC,SAAS;EACTC,WAAW,GAAG,GAAG;EACjBC,SAAS,GAAG,IAAI;EAChBC,QAAQ;EACRC,QAAQ,GAAGP,IAAI;EACfQ,QAAQ,GAAGC,gBAAS,CAACC,MAAM;EAC3BC,MAAM,GAAG,IAAI;EACbC,MAAM,GAAG,IAAI;EACb,GAAGC;AACgB,CAAC,EACrBC,GAAmC,EACd;EACrB,MAAM;IAAEC,KAAK;IAAEC;EAAe,CAAC,GAAG,IAAAC,qBAAc,EAAE;IACjDf,IAAI;IACJE,WAAW;IACXG,QAAQ;IACRI,MAAM;IACNH;EACD,CAAE,CAAC;EAEH,IAAK,CAAEH,SAAS,EAAG,OAAO,IAAI;EAE9B,MAAMa,OAAO,GAAG,IAAAC,mBAAU,EAAE,2BAA2B,EAAEhB,SAAU,CAAC;EAEpE,OACC,IAAAiB,MAAA,CAAAC,aAAA,EAACtB,cAAA,CAAAuB,IAAI;IAAC,eAAY,MAAM;IAACnB,SAAS,EAAGe,OAAS;IAACJ,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAK,GAClEG,cAAc,EAChB,IAAAI,MAAA,CAAAC,aAAA,EAACxB,MAAA,CAAA0B,OAAK;IACL,eAAcV,KAAK,CAAE,aAAa,CAAI;IACtCE,KAAK,EAAGA,KAAO;IACfP,QAAQ,EAAGA,QAAU;IACrBM,GAAG,EAAGR,QAAU;IAChBM,MAAM,EAAGA;EAAQ,CACjB,CACI,CAAC;AAET;AAEA,MAAMY,kBAAkB,GAAG,IAAAC,mBAAU,EAAExB,aAAc,CAAC;AAAC,IAAAyB,QAAA,GAExCF,kBAAkB;AAAAG,OAAA,CAAAJ,OAAA,GAAAG,QAAA"}

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/label.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _utils = require("./utils");
+var _resizeTooltip = require("./styles/resize-tooltip.styles");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+const CORNER_OFFSET = 4;
+const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
+function Label({
+  label,
+  position = _utils.POSITIONS.corner,
+  zIndex = 1000,
+  ...props
+}, ref) {
+  const showLabel = !!label;
+  const isBottom = position === _utils.POSITIONS.bottom;
+  const isCorner = position === _utils.POSITIONS.corner;
+  if (!showLabel) return null;
+  let style = {
+    opacity: showLabel ? 1 : undefined,
+    zIndex
+  };
+  let labelStyle = {};
+  if (isBottom) {
+    style = {
+      ...style,
+      position: 'absolute',
+      bottom: CURSOR_OFFSET_TOP * -1,
+      left: '50%',
+      transform: 'translate(-50%, 0)'
+    };
+    labelStyle = {
+      transform: `translate(0, 100%)`
+    };
+  }
+  if (isCorner) {
+    style = {
+      ...style,
+      position: 'absolute',
+      top: CORNER_OFFSET,
+      right: (0, _i18n.isRTL)() ? undefined : CORNER_OFFSET,
+      left: (0, _i18n.isRTL)() ? CORNER_OFFSET : undefined
+    };
+  }
+  return (0, _react.createElement)(_resizeTooltip.TooltipWrapper, {
+    "aria-hidden": "true",
+    className: "components-resizable-tooltip__tooltip-wrapper",
+    ref: ref,
+    style: style,
+    ...props
+  }, (0, _react.createElement)(_resizeTooltip.Tooltip, {
+    className: "components-resizable-tooltip__tooltip",
+    style: labelStyle
+  }, (0, _react.createElement)(_resizeTooltip.LabelText, {
+    as: "span"
+  }, label)));
+}
+const ForwardedComponent = (0, _element.forwardRef)(Label);
+var _default = ForwardedComponent;
+exports.default = _default;
+//# sourceMappingURL=label.js.map

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/label.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_i18n","_utils","_resizeTooltip","CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","label","position","POSITIONS","corner","zIndex","props","ref","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","isRTL","_react","createElement","TooltipWrapper","className","Tooltip","LabelText","as","ForwardedComponent","forwardRef","_default","exports","default"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { Position } from './utils';\nimport { POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element | null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) return null;\n\n\tlet style: React.CSSProperties = {\n\t\topacity: showLabel ? 1 : undefined,\n\t\tzIndex,\n\t};\n\n\tlet labelStyle = {};\n\n\tif ( isBottom ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\tbottom: CURSOR_OFFSET_TOP * -1,\n\t\t\tleft: '50%',\n\t\t\ttransform: 'translate(-50%, 0)',\n\t\t};\n\n\t\tlabelStyle = {\n\t\t\ttransform: `translate(0, 100%)`,\n\t\t};\n\t}\n\n\tif ( isCorner ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\ttop: CORNER_OFFSET,\n\t\t\tright: isRTL() ? undefined : CORNER_OFFSET,\n\t\t\tleft: isRTL() ? CORNER_OFFSET : undefined,\n\t\t};\n\t}\n\n\treturn (\n\t\t<TooltipWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-resizable-tooltip__tooltip-wrapper\"\n\t\t\tref={ ref }\n\t\t\tstyle={ style }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<Tooltip\n\t\t\t\tclassName=\"components-resizable-tooltip__tooltip\"\n\t\t\t\tstyle={ labelStyle }\n\t\t\t>\n\t\t\t\t<LabelText as=\"span\">{ label }</LabelText>\n\t\t\t</Tooltip>\n\t\t</TooltipWrapper>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( Label );\n\nexport default ForwardedComponent;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAeA,MAAMI,aAAa,GAAG,CAAC;AACvB,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAAG;AAW7C,SAASE,KAAKA,CACb;EAAEC,KAAK;EAAEC,QAAQ,GAAGC,gBAAS,CAACC,MAAM;EAAEC,MAAM,GAAG,IAAI;EAAE,GAAGC;AAAkB,CAAC,EAC3EC,GAAmC,EACd;EACrB,MAAMC,SAAS,GAAG,CAAC,CAAEP,KAAK;EAE1B,MAAMQ,QAAQ,GAAGP,QAAQ,KAAKC,gBAAS,CAACO,MAAM;EAC9C,MAAMC,QAAQ,GAAGT,QAAQ,KAAKC,gBAAS,CAACC,MAAM;EAE9C,IAAK,CAAEI,SAAS,EAAG,OAAO,IAAI;EAE9B,IAAII,KAA0B,GAAG;IAChCC,OAAO,EAAEL,SAAS,GAAG,CAAC,GAAGM,SAAS;IAClCT;EACD,CAAC;EAED,IAAIU,UAAU,GAAG,CAAC,CAAC;EAEnB,IAAKN,QAAQ,EAAG;IACfG,KAAK,GAAG;MACP,GAAGA,KAAK;MACRV,QAAQ,EAAE,UAAU;MACpBQ,MAAM,EAAEX,iBAAiB,GAAG,CAAC,CAAC;MAC9BiB,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE;IACZ,CAAC;IAEDF,UAAU,GAAG;MACZE,SAAS,EAAG;IACb,CAAC;EACF;EAEA,IAAKN,QAAQ,EAAG;IACfC,KAAK,GAAG;MACP,GAAGA,KAAK;MACRV,QAAQ,EAAE,UAAU;MACpBgB,GAAG,EAAEpB,aAAa;MAClBqB,KAAK,EAAE,IAAAC,WAAK,EAAC,CAAC,GAAGN,SAAS,GAAGhB,aAAa;MAC1CkB,IAAI,EAAE,IAAAI,WAAK,EAAC,CAAC,GAAGtB,aAAa,GAAGgB;IACjC,CAAC;EACF;EAEA,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACzB,cAAA,CAAA0B,cAAc;IACd,eAAY,MAAM;IAClBC,SAAS,EAAC,+CAA+C;IACzDjB,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IAAA,GACVN;EAAK,GAEV,IAAAe,MAAA,CAAAC,aAAA,EAACzB,cAAA,CAAA4B,OAAO;IACPD,SAAS,EAAC,uCAAuC;IACjDZ,KAAK,EAAGG;EAAY,GAEpB,IAAAM,MAAA,CAAAC,aAAA,EAACzB,cAAA,CAAA6B,SAAS;IAACC,EAAE,EAAC;EAAM,GAAG1B,KAAkB,CACjC,CACM,CAAC;AAEnB;AAEA,MAAM2B,kBAAkB,GAAG,IAAAC,mBAAU,EAAE7B,KAAM,CAAC;AAAC,IAAA8B,QAAA,GAEhCF,kBAAkB;AAAAG,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = exports.Tooltip = exports.Root = exports.LabelText = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _text = require("../../../text");
+var _utils = require("../../../utils");
+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 Root = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k3"
+} : {
+  target: "e1wq7y4k3",
+  label: "Root"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1cd7zoc",
+  styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0"
+} : {
+  name: "1cd7zoc",
+  styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Jlc2l6YWJsZS1ib3gvcmVzaXplLXRvb2x0aXAvc3R5bGVzL3Jlc2l6ZS10b29sdGlwLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uLy4uL3RleHQnO1xuaW1wb3J0IHsgZm9udCwgQ09MT1JTIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bGVmdDogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0b3BhY2l0eTogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuYDtcblxuZXhwb3J0IGNvbnN0IFRvb2x0aXAgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6IDEycHg7XG5cdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0cGFkZGluZzogNHB4IDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgTGFiZWxUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdCYmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50ZXh0RGFyayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGZvbnQtc2l6ZTogMTNweDtcblx0XHRsaW5lLWhlaWdodDogMS40O1xuXHRcdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdH1cbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.Root = Root;
+const TooltipWrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k2"
+} : {
+  target: "e1wq7y4k2",
+  label: "TooltipWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "ajymcs",
+  styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear"
+} : {
+  name: "ajymcs",
+  styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCd0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.TooltipWrapper = TooltipWrapper;
+const Tooltip = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k1"
+} : {
+  target: "e1wq7y4k1",
+  label: "Tooltip"
+})("background:", _utils.COLORS.gray[900], ";border-radius:2px;box-sizing:border-box;font-family:", (0, _utils.font)('default.fontFamily'), ";font-size:12px;color:", _utils.COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */"));
+
+// TODO: Resolve need to use &&& to increase specificity
+// https://github.com/WordPress/gutenberg/issues/18483
+exports.Tooltip = Tooltip;
+const LabelText = ( /*#__PURE__*/0, _base.default)(_text.Text, process.env.NODE_ENV === "production" ? {
+  target: "e1wq7y4k0"
+} : {
+  target: "e1wq7y4k0",
+  label: "LabelText"
+})("&&&{color:", _utils.COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */"));
+exports.LabelText = LabelText;
+//# sourceMappingURL=resize-tooltip.styles.js.map

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_text","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","Root","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","exports","TooltipWrapper","Tooltip","COLORS","gray","font","ui","textDark","LabelText","Text"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../../../text';\nimport { font, COLORS } from '../../../utils';\n\nexport const Root = styled.div`\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n`;\n\nexport const TooltipWrapper = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n`;\n\nexport const Tooltip = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tfont-size: 12px;\n\tcolor: ${ COLORS.ui.textDark };\n\tpadding: 4px 8px;\n\tposition: relative;\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const LabelText = styled( Text )`\n\t&&& {\n\t\tcolor: ${ COLORS.ui.textDark };\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.4;\n\t\twhite-space: nowrap;\n\t}\n`;\n"],"mappings":";;;;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA8C,SAAAE,iCAAA;AAEvC,MAAMC,IAAI,OAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,EAQhB;AAACa,OAAA,CAAAZ,IAAA,GAAAA,IAAA;AAEK,MAAMa,cAAc,OAAAZ,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,EAQ1B;AAACa,OAAA,CAAAC,cAAA,GAAAA,cAAA;AAEK,MAAMC,OAAO,OAAAb,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,kBACJQ,aAAM,CAACC,IAAI,CAAE,GAAG,CAAE,2DAGjB,IAAAC,WAAI,EAAE,oBAAqB,CAAC,4BAElCF,aAAM,CAACG,EAAE,CAACC,QAAQ,2CAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,w+DAG5B;;AAED;AACA;AAAAO,OAAA,CAAAE,OAAA,GAAAA,OAAA;AAEO,MAAMM,SAAS,GAAG,kBAAAnB,KAAA,CAAAC,OAAA,EAAQmB,UAAI,EAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,eAE3BQ,aAAM,CAACG,EAAE,CAACC,QAAQ,0EAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,w+DAM7B;AAACO,OAAA,CAAAQ,SAAA,GAAAA,SAAA"}

node_modules/@wordpress/components/build/resizable-box/resize-tooltip/utils.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POSITIONS = void 0;
+exports.useResizeLabel = useResizeLabel;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+/**
+ * WordPress dependencies
+ */
+
+const noop = () => {};
+const POSITIONS = {
+  bottom: 'bottom',
+  corner: 'corner'
+};
+exports.POSITIONS = POSITIONS;
+/**
+ * Custom hook that manages resize listener events. It also provides a label
+ * based on current resize width x height values.
+ *
+ * @param props
+ * @param props.axis        Only shows the label corresponding to the axis.
+ * @param props.fadeTimeout Duration (ms) before deactivating the resize label.
+ * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.
+ * @param props.position    Adjusts label value.
+ * @param props.showPx      Whether to add `PX` to the label.
+ *
+ * @return Properties for hook.
+ */
+function useResizeLabel({
+  axis,
+  fadeTimeout = 180,
+  onResize = noop,
+  position = POSITIONS.bottom,
+  showPx = false
+}) {
+  /*
+   * The width/height values derive from this special useResizeObserver hook.
+   * This custom hook uses the ResizeObserver API to listen for resize events.
+   */
+  const [resizeListener, sizes] = (0, _compose.useResizeObserver)();
+
+  /*
+   * Indicates if the x/y axis is preferred.
+   * If set, we will avoid resetting the moveX and moveY values.
+   * This will allow for the preferred axis values to persist in the label.
+   */
+  const isAxisControlled = !!axis;
+
+  /*
+   * The moveX and moveY values are used to track whether the label should
+   * display width, height, or width x height.
+   */
+  const [moveX, setMoveX] = (0, _element.useState)(false);
+  const [moveY, setMoveY] = (0, _element.useState)(false);
+
+  /*
+   * Cached dimension values to check for width/height updates from the
+   * sizes property from useResizeAware()
+   */
+  const {
+    width,
+    height
+  } = sizes;
+  const heightRef = (0, _element.useRef)(height);
+  const widthRef = (0, _element.useRef)(width);
+
+  /*
+   * This timeout is used with setMoveX and setMoveY to determine of
+   * both width and height values have changed at (roughly) the same time.
+   */
+  const moveTimeoutRef = (0, _element.useRef)();
+  const debounceUnsetMoveXY = (0, _element.useCallback)(() => {
+    const unsetMoveXY = () => {
+      /*
+       * If axis is controlled, we will avoid resetting the moveX and moveY values.
+       * This will allow for the preferred axis values to persist in the label.
+       */
+      if (isAxisControlled) return;
+      setMoveX(false);
+      setMoveY(false);
+    };
+    if (moveTimeoutRef.current) {
+      window.clearTimeout(moveTimeoutRef.current);
+    }
+    moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
+  }, [fadeTimeout, isAxisControlled]);
+  (0, _element.useEffect)(() => {
+    /*
+     * On the initial render of useResizeAware, the height and width values are
+     * null. They are calculated then set using via an internal useEffect hook.
+     */
+    const isRendered = width !== null || height !== null;
+    if (!isRendered) return;
+    const didWidthChange = width !== widthRef.current;
+    const didHeightChange = height !== heightRef.current;
+    if (!didWidthChange && !didHeightChange) return;
+
+    /*
+     * After the initial render, the useResizeAware will set the first
+     * width and height values. We'll sync those values with our
+     * width and height refs. However, we shouldn't render our Tooltip
+     * label on this first cycle.
+     */
+    if (width && !widthRef.current && height && !heightRef.current) {
+      widthRef.current = width;
+      heightRef.current = height;
+      return;
+    }
+
+    /*
+     * After the first cycle, we can track width and height changes.
+     */
+    if (didWidthChange) {
+      setMoveX(true);
+      widthRef.current = width;
+    }
+    if (didHeightChange) {
+      setMoveY(true);
+      heightRef.current = height;
+    }
+    onResize({
+      width,
+      height
+    });
+    debounceUnsetMoveXY();
+  }, [width, height, onResize, debounceUnsetMoveXY]);
+  const label = getSizeLabel({
+    axis,
+    height,
+    moveX,
+    moveY,
+    position,
+    showPx,
+    width
+  });
+  return {
+    label,
+    resizeListener
+  };
+}
+/**
+ * Gets the resize label based on width and height values (as well as recent changes).
+ *
+ * @param props
+ * @param props.axis     Only shows the label corresponding to the axis.
+ * @param props.height   Height value.
+ * @param props.moveX    Recent width (x axis) changes.
+ * @param props.moveY    Recent width (y axis) changes.
+ * @param props.position Adjusts label value.
+ * @param props.showPx   Whether to add `PX` to the label.
+ * @param props.width    Width value.
+ *
+ * @return The rendered label.
+ */
+function getSizeLabel({
+  axis,
+  height,
+  moveX = false,
+  moveY = false,
+  position = POSITIONS.bottom,
+  showPx = false,
+  width
+}) {
+  if (!moveX && !moveY) return undefined;
+
+  /*
+   * Corner position...
+   * We want the label to appear like width x height.
+   */
+  if (position === POSITIONS.corner) {
+    return `${width} x ${height}`;
+  }
+
+  /*
+   * Other POSITIONS...
+   * The label will combine both width x height values if both
+   * values have recently been changed.
+   *
+   * Otherwise, only width or height will be displayed.
+   * The `PX` unit will be added, if specified by the `showPx` prop.
+   */
+  const labelUnit = showPx ? ' px' : '';
+  if (axis) {
+    if (axis === 'x' && moveX) {
+      return `${width}${labelUnit}`;
+    }
+    if (axis === 'y' && moveY) {
+      return `${height}${labelUnit}`;
+    }
+  }
+  if (moveX && moveY) {
+    return `${width} x ${height}`;
+  }
+  if (moveX) {
+    return `${width}${labelUnit}`;
+  }
+  if (moveY) {
+    return `${height}${labelUnit}`;
+  }
+  return undefined;
+}
+//# sourceMappingURL=utils.js.map