@wordpress/components 35.1.1-next.v.202606191442.0 → 36.0.0

package/build/higher-order/with-fallback-styles/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-fallback-styles/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class WithFallbackStyles extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAK1B,qBAA0B;AAC1B,qBAA2C;AAC3C,yBAA2C;AAC3C,IAAO,+BAAQ,wBAAkB,2CAA2B,sBAAoB;AAC9E,SAAO,MAAM,2BAA2B,yBAAU;AAAA,IAChD,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,KAAC,WAAAA,SAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,uCAAAC,KAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,uCAAAC,MAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useIsomorphicLayoutEffect } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return function WithFallbackStyles(props) {\n    const [fallbackStyles, setFallbackStyles] = useState(undefined);\n    const nodeRef = useRef(null);\n\n    // Runs before paint, so the fallback styles apply without a flash.\n    useIsomorphicLayoutEffect(() => {\n      const node = props.node ?? nodeRef.current;\n      // Derived from fallbackStyles: the grab is complete once every\n      // mapped value has resolved to a truthy style.\n      const grabStylesCompleted = !!fallbackStyles && Object.values(fallbackStyles).every(Boolean);\n      if (node && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(node, props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          setFallbackStyles(newFallbackStyles);\n        }\n      }\n    });\n    const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n      ...props,\n      ...fallbackStyles\n    });\n    return props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n      ref: nodeRef,\n      children: [\" \", wrappedComponent, \" \"]\n    });\n  };\n}, 'withFallbackStyles');"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAK1B,qBAAiC;AACjC,qBAAsE;AACtE,yBAA2C;AAC3C,IAAO,+BAAQ,wBAAkB,2CAA2B,sBAAoB;AAC9E,SAAO,SAAS,mBAAmB,OAAO;AACxC,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS,MAAS;AAC9D,UAAM,cAAU,uBAAO,IAAI;AAG3B,kDAA0B,MAAM;AAC9B,YAAM,OAAO,MAAM,QAAQ,QAAQ;AAGnC,YAAM,sBAAsB,CAAC,CAAC,kBAAkB,OAAO,OAAO,cAAc,EAAE,MAAM,OAAO;AAC3F,UAAI,QAAQ,CAAC,qBAAqB;AAChC,cAAM,oBAAoB,eAAe,MAAM,KAAK;AACpD,YAAI,KAAC,WAAAA,SAAc,mBAAmB,cAAc,GAAG;AACrD,4BAAkB,iBAAiB;AAAA,QACrC;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,mBAAgC,uCAAAC,KAAK,kBAAkB;AAAA,MAC3D,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,WAAO,MAAM,OAAO,mBAAgC,uCAAAC,MAAM,OAAO;AAAA,MAC/D,KAAK;AAAA,MACL,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,IACvC,CAAC;AAAA,EACH;AACF,GAAG,oBAAoB;",
   "names": ["fastDeepEqual", "_jsx", "_jsxs"]
 }

package/build/text-control/index.cjs

@@ -34,17 +34,15 @@ __export(text_control_exports, {
   default: () => text_control_default
 });
 module.exports = __toCommonJS(text_control_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
 var import_base_control = __toESM(require("../base-control/index.cjs"));
-var import_deprecated_36px_size = require("../utils/deprecated-36px-size.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function UnforwardedTextControl(props, ref) {
   const {
-    // Prevent passing this to `input`.
+    // Prevent passing legacy props to `input`.
     __nextHasNoMarginBottom: _,
-    __next40pxDefaultSize = false,
+    __next40pxDefaultSize: __,
     label,
     hideLabelFromVision,
     value,
@@ -57,11 +55,6 @@ function UnforwardedTextControl(props, ref) {
   } = props;
   const id = (0, import_compose.useInstanceId)(TextControl, "inspector-text-control", idProp);
   const onChangeValue = (event) => onChange(event.target.value);
-  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
-    componentName: "TextControl",
-    size: void 0,
-    __next40pxDefaultSize
-  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default, {
     label,
     hideLabelFromVision,
@@ -69,9 +62,7 @@ function UnforwardedTextControl(props, ref) {
     help,
     className,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
-      className: (0, import_clsx.default)("components-text-control__input", {
-        "is-next-40px-default-size": __next40pxDefaultSize
-      }),
+      className: "components-text-control__input",
       type,
       id,
       value,

package/build/text-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/text-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextControl(props, ref) {\n  const {\n    // Prevent passing this to `input`.\n    __nextHasNoMarginBottom: _,\n    __next40pxDefaultSize = false,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    id: idProp,\n    className,\n    onChange,\n    type = 'text',\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(TextControl, 'inspector-text-control', idProp);\n  const onChangeValue = event => onChange(event.target.value);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'TextControl',\n    size: undefined,\n    __next40pxDefaultSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: className,\n    children: /*#__PURE__*/_jsx(\"input\", {\n      className: clsx('components-text-control__input', {\n        'is-next-40px-default-size': __next40pxDefaultSize\n      }),\n      type: type,\n      id: id,\n      value: value,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       __next40pxDefaultSize\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef(UnforwardedTextControl);\nTextControl.displayName = 'TextControl';\nexport default TextControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,kCAA4C;AAC5C,yBAA4B;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAK,8BAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,SAAS;AAAA,MACnC,eAAW,YAAAE,SAAK,kCAAkC;AAAA,QAChD,6BAA6B;AAAA,MAC/B,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,kBAAc,2BAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
-  "names": ["_jsx", "BaseControl", "clsx"]
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextControl(props, ref) {\n  const {\n    // Prevent passing legacy props to `input`.\n    __nextHasNoMarginBottom: _,\n    __next40pxDefaultSize: __,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    id: idProp,\n    className,\n    onChange,\n    type = 'text',\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(TextControl, 'inspector-text-control', idProp);\n  const onChangeValue = event => onChange(event.target.value);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: className,\n    children: /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-text-control__input\",\n      type: type,\n      id: id,\n      value: value,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef(UnforwardedTextControl);\nTextControl.displayName = 'TextControl';\nexport default TextControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,yBAA4B;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,uBAAuB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAK,8BAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,SAAS;AAAA,MACnC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,kBAAc,2BAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
+  "names": ["_jsx", "BaseControl"]
 }

package/build/validated-form-controls/components/text-control.cjs

@@ -52,7 +52,6 @@ var UnforwardedValidatedTextControl = ({
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text_control.default, {
-      __next40pxDefaultSize: true,
       ref: mergedRefs,
       ...restProps
     })

package/build/validated-form-controls/components/text-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/text-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport TextControl from '../../text-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(TextControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextControl = forwardRef(UnforwardedValidatedTextControl);\nValidatedTextControl.displayName = 'ValidatedTextControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,0BAAwB;AACxB,yBAA4B;AAC5B,IAAM,kCAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,MACvC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,2BAAuB,2BAAW,+BAA+B;AAC9E,qBAAqB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport TextControl from '../../text-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(TextControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextControl = forwardRef(UnforwardedValidatedTextControl);\nValidatedTextControl.displayName = 'ValidatedTextControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,0BAAwB;AACxB,yBAA4B;AAC5B,IAAM,kCAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,MACvC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,2BAAuB,2BAAW,+BAA+B;AAC9E,qBAAqB,cAAc;",
   "names": ["_jsx", "TextControl"]
 }

package/build-module/box-control/{input-control.mjs → box-input-control.mjs}

@@ -1,4 +1,4 @@
-// packages/components/src/box-control/input-control.tsx
+// packages/components/src/box-control/box-input-control.tsx
 import { useInstanceId } from "@wordpress/compose";
 import { __ } from "@wordpress/i18n";
 import { useState } from "@wordpress/element";
@@ -46,7 +46,6 @@ function getSidesToModify(side, sides, isAlt) {
   return modifiedSides.filter((s) => allowedSides.has(s));
 }
 function BoxInputControl({
-  __next40pxDefaultSize,
   onChange = noop,
   onFocus = noop,
   values,
@@ -57,6 +56,7 @@ function BoxInputControl({
   min = 0,
   presets,
   presetKey,
+  placeholder: placeholderProp,
   ...props
 }) {
   const defaultValuesToModify = getSidesToModify(side, sides);
@@ -145,7 +145,7 @@ function BoxInputControl({
           ...props,
           min,
           __shouldNotWarnDeprecated36pxSize: true,
-          __next40pxDefaultSize,
+          __next40pxDefaultSize: true,
           className: "component-box-control__unit-control",
           id: inputId,
           isPressEnterToChange: true,
@@ -155,11 +155,11 @@ function BoxInputControl({
           onUnitChange: handleOnUnitChange,
           onFocus: handleOnFocus,
           label: LABELS[side],
-          placeholder: mixedPlaceholder,
+          placeholder: mixedPlaceholder ?? placeholderProp,
           hideLabelFromVision: true
         })
       }), /* @__PURE__ */ _jsx(FlexedRangeControl, {
-        __next40pxDefaultSize,
+        __next40pxDefaultSize: true,
         __shouldNotWarnDeprecated36pxSize: true,
         "aria-controls": inputId,
         label: LABELS[side],
@@ -205,4 +205,4 @@ function BoxInputControl({
 export {
   BoxInputControl as default
 };
-//# sourceMappingURL=input-control.mjs.map
+//# sourceMappingURL=box-input-control.mjs.map

package/build-module/box-control/box-input-control.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/box-control/box-input-control.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('left');\n        break;\n      case 'right':\n        modifiedSides.push('right');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  placeholder: placeholderProp,\n  ...props\n}) {\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => ({\n    value: index + 1,\n    label: '',\n    tooltip: preset.name ?? preset.slug\n  }))] : [];\n  return /*#__PURE__*/_jsxs(InputWrapper, {\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(StyledUnitControl, {\n          ...props,\n          min: min,\n          __shouldNotWarnDeprecated36pxSize: true,\n          __next40pxDefaultSize: true,\n          className: \"component-box-control__unit-control\",\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder ?? placeholderProp,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n        __next40pxDefaultSize: true,\n        __shouldNotWarnDeprecated36pxSize: true,\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        max: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.max ?? 10,\n        step: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.step ?? 0.1,\n        value: parsedQuantity ?? 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n      __next40pxDefaultSize: true,\n      className: \"spacing-sizes-control__range-control\",\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/box-control/index.mjs

@@ -4,14 +4,13 @@ import { useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import warning from "@wordpress/warning";
 import { BaseControl } from "../base-control/index.mjs";
-import InputControl from "./input-control.mjs";
+import BoxInputControl from "./box-input-control.mjs";
 import LinkedButton from "./linked-button.mjs";
 import { Grid } from "../grid/index.mjs";
 import { InputWrapper, ResetButton, LinkedButtonWrapper } from "./styles/box-control-styles.mjs";
 import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils.mjs";
 import { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from "./utils.mjs";
 import { useControlledState } from "../utils/hooks/index.mjs";
-import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var defaultInputProps = {
   min: 0
@@ -23,7 +22,6 @@ function useUniqueId(idProp) {
   return idProp || instanceId;
 }
 function BoxControl({
-  __next40pxDefaultSize = false,
   id: idProp,
   inputProps = defaultInputProps,
   onChange = noop,
@@ -80,15 +78,9 @@ function BoxControl({
     setSelectedUnits,
     sides,
     values: inputValues,
-    __next40pxDefaultSize,
     presets,
     presetKey
   };
-  maybeWarnDeprecated36pxSize({
-    componentName: "BoxControl",
-    __next40pxDefaultSize,
-    size: void 0
-  });
   const sidesToRender = getAllowedSides(sides);
   if (presets && !presetKey || !presets && presetKey) {
     const definedProp = presets ? "presets" : "presetKey";
@@ -105,7 +97,7 @@ function BoxControl({
       id: headingId,
       children: label
     }), isLinked && /* @__PURE__ */ _jsx(InputWrapper, {
-      children: /* @__PURE__ */ _jsx(InputControl, {
+      children: /* @__PURE__ */ _jsx(BoxInputControl, {
         side: "all",
         ...inputControlProps
       })
@@ -114,21 +106,13 @@ function BoxControl({
         onClick: toggleLinked,
         isLinked
       })
-    }), !isLinked && splitOnAxis && ["vertical", "horizontal"].map((axis) => (
-      // Disable reason: the parent component is handling the __next40pxDefaultSize prop
-      // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-      /* @__PURE__ */ _jsx(InputControl, {
-        side: axis,
-        ...inputControlProps
-      }, axis)
-    )), !isLinked && !splitOnAxis && Array.from(sidesToRender).map((axis) => (
-      // Disable reason: the parent component is handling the __next40pxDefaultSize prop
-      // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-      /* @__PURE__ */ _jsx(InputControl, {
-        side: axis,
-        ...inputControlProps
-      }, axis)
-    )), allowReset && /* @__PURE__ */ _jsx(ResetButton, {
+    }), !isLinked && splitOnAxis && ["vertical", "horizontal"].map((axis) => /* @__PURE__ */ _jsx(BoxInputControl, {
+      side: axis,
+      ...inputControlProps
+    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map((axis) => /* @__PURE__ */ _jsx(BoxInputControl, {
+      side: axis,
+      ...inputControlProps
+    }, axis)), allowReset && /* @__PURE__ */ _jsx(ResetButton, {
       className: "component-box-control__reset-button",
       variant: "secondary",
       size: "small",

package/build-module/box-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/box-control/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n  min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n  return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl({\n  __next40pxDefaultSize = false,\n  id: idProp,\n  inputProps = defaultInputProps,\n  onChange = noop,\n  label = __('Box Control'),\n  values: valuesProp,\n  units,\n  sides,\n  splitOnAxis = false,\n  allowReset = true,\n  resetValues = DEFAULT_VALUES,\n  presets,\n  presetKey,\n  onMouseOver,\n  onMouseOut\n}) {\n  const [values, setValues] = useControlledState(valuesProp, {\n    fallback: DEFAULT_VALUES\n  });\n  const inputValues = values || DEFAULT_VALUES;\n  const hasInitialValue = isValuesDefined(valuesProp);\n  const hasOneSide = sides?.length === 1;\n  const [isDirty, setIsDirty] = useState(hasInitialValue);\n  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n  // Tracking selected units via internal state allows filtering of CSS unit\n  // only values from being saved while maintaining preexisting unit selection\n  // behaviour. Filtering CSS only values prevents invalid style values.\n  const [selectedUnits, setSelectedUnits] = useState({\n    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n  });\n  const id = useUniqueId(idProp);\n  const headingId = `${id}-heading`;\n  const toggleLinked = () => {\n    setIsLinked(!isLinked);\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n    setValues(nextValues);\n    setIsDirty(true);\n  };\n  const handleOnReset = () => {\n    onChange(resetValues);\n    setValues(resetValues);\n    setSelectedUnits(resetValues);\n    setIsDirty(false);\n  };\n  const inputControlProps = {\n    onMouseOver,\n    onMouseOut,\n    ...inputProps,\n    onChange: handleOnChange,\n    isLinked,\n    units,\n    selectedUnits,\n    setSelectedUnits,\n    sides,\n    values: inputValues,\n    __next40pxDefaultSize,\n    presets,\n    presetKey\n  };\n  maybeWarnDeprecated36pxSize({\n    componentName: 'BoxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n  const sidesToRender = getAllowedSides(sides);\n  if (presets && !presetKey || !presets && presetKey) {\n    const definedProp = presets ? 'presets' : 'presetKey';\n    const missingProp = presets ? 'presetKey' : 'presets';\n    globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n  }\n  return /*#__PURE__*/_jsxs(Grid, {\n    id: id,\n    columns: 3,\n    templateColumns: \"1fr min-content min-content\",\n    role: \"group\",\n    \"aria-labelledby\": headingId,\n    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: headingId,\n      children: label\n    }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n      children: /*#__PURE__*/_jsx(InputControl, {\n        side: \"all\",\n        ...inputControlProps\n      })\n    }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n      children: /*#__PURE__*/_jsx(LinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })\n    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis =>\n    /*#__PURE__*/\n    // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis =>\n    /*#__PURE__*/\n    // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n      className: \"component-box-control__reset-button\",\n      variant: \"secondary\",\n      size: \"small\",\n      onClick: handleOnReset,\n      disabled: !isDirty,\n      children: __('Reset')\n    })]\n  });\n}\nexport default BoxControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport BoxInputControl from './box-input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n  min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n  return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl values={ values } onChange={ setValues } />\n *   );\n * };\n * ```\n */\nfunction BoxControl({\n  id: idProp,\n  inputProps = defaultInputProps,\n  onChange = noop,\n  label = __('Box Control'),\n  values: valuesProp,\n  units,\n  sides,\n  splitOnAxis = false,\n  allowReset = true,\n  resetValues = DEFAULT_VALUES,\n  presets,\n  presetKey,\n  onMouseOver,\n  onMouseOut\n}) {\n  const [values, setValues] = useControlledState(valuesProp, {\n    fallback: DEFAULT_VALUES\n  });\n  const inputValues = values || DEFAULT_VALUES;\n  const hasInitialValue = isValuesDefined(valuesProp);\n  const hasOneSide = sides?.length === 1;\n  const [isDirty, setIsDirty] = useState(hasInitialValue);\n  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n  // Tracking selected units via internal state allows filtering of CSS unit\n  // only values from being saved while maintaining preexisting unit selection\n  // behaviour. Filtering CSS only values prevents invalid style values.\n  const [selectedUnits, setSelectedUnits] = useState({\n    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n  });\n  const id = useUniqueId(idProp);\n  const headingId = `${id}-heading`;\n  const toggleLinked = () => {\n    setIsLinked(!isLinked);\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n    setValues(nextValues);\n    setIsDirty(true);\n  };\n  const handleOnReset = () => {\n    onChange(resetValues);\n    setValues(resetValues);\n    setSelectedUnits(resetValues);\n    setIsDirty(false);\n  };\n  const inputControlProps = {\n    onMouseOver,\n    onMouseOut,\n    ...inputProps,\n    onChange: handleOnChange,\n    isLinked,\n    units,\n    selectedUnits,\n    setSelectedUnits,\n    sides,\n    values: inputValues,\n    presets,\n    presetKey\n  };\n  const sidesToRender = getAllowedSides(sides);\n  if (presets && !presetKey || !presets && presetKey) {\n    const definedProp = presets ? 'presets' : 'presetKey';\n    const missingProp = presets ? 'presetKey' : 'presets';\n    globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n  }\n  return /*#__PURE__*/_jsxs(Grid, {\n    id: id,\n    columns: 3,\n    templateColumns: \"1fr min-content min-content\",\n    role: \"group\",\n    \"aria-labelledby\": headingId,\n    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: headingId,\n      children: label\n    }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n      children: /*#__PURE__*/_jsx(BoxInputControl, {\n        side: \"all\",\n        ...inputControlProps\n      })\n    }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n      children: /*#__PURE__*/_jsx(LinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })\n    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis => /*#__PURE__*/_jsx(BoxInputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/_jsx(BoxInputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n      className: \"component-box-control__reset-button\",\n      variant: \"secondary\",\n      size: \"small\",\n      onClick: handleOnReset,\n      disabled: !isDirty,\n      children: __('Reset')\n    })]\n  });\n}\nexport default BoxControl;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/disabled/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/disabled/index.tsx"],
-  "sourcesContent": ["import { disabledStyles } from './styles/disabled-styles';\nimport { useCx } from '../utils';\nimport Context from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\t__next40pxDefaultSize\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  const cx = useCx();\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-ignore Reason: inert is a recent HTML attribute\n      inert: isDisabled ? 'true' : undefined,\n      className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;"],
-  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AAC5B,IAAM;AAAA,EACJ;AAAA,EACA;AACF,IAAI;AA6CJ,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAAG;AACD,QAAM,KAAK,MAAM;AACjB,SAAoB,qBAAK,UAAU;AAAA,IACjC,OAAO;AAAA,IACP,UAAuB,qBAAK,OAAO;AAAA;AAAA,MAEjC,OAAO,aAAa,SAAS;AAAA,MAC7B,WAAW,aAAa,GAAG,gBAAgB,WAAW,qBAAqB,IAAI;AAAA,MAC/E,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,UAAU;AACnB,SAAS,WAAW;AACpB,IAAO,mBAAQ;",
+  "sourcesContent": ["import { disabledStyles } from './styles/disabled-styles';\nimport { useCx } from '../utils';\nimport Context from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  const cx = useCx();\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-ignore Reason: inert is a recent HTML attribute\n      inert: isDisabled ? 'true' : undefined,\n      className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;"],
+  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AAC5B,IAAM;AAAA,EACJ;AAAA,EACA;AACF,IAAI;AA4CJ,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAAG;AACD,QAAM,KAAK,MAAM;AACjB,SAAoB,qBAAK,UAAU;AAAA,IACjC,OAAO;AAAA,IACP,UAAuB,qBAAK,OAAO;AAAA;AAAA,MAEjC,OAAO,aAAa,SAAS;AAAA,MAC7B,WAAW,aAAa,GAAG,gBAAgB,WAAW,qBAAqB,IAAI;AAAA,MAC/E,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,UAAU;AACnB,SAAS,WAAW;AACpB,IAAO,mBAAQ;",
   "names": []
 }

package/build-module/divider/component.mjs

@@ -1,12 +1,117 @@
 // packages/components/src/divider/component.tsx
 import * as Ariakit from "@ariakit/react";
+import clsx from "clsx";
 import { contextConnect, useContextSystem } from "../context/index.mjs";
-import { DividerView } from "./styles.mjs";
+import { space } from "../utils/space.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/divider/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("f2c8d759d8", ".e10c29fc10c181dc__divider{border:0;margin:0}.e10c29fc10c181dc__divider[aria-orientation=horizontal]{block-size:0;border-block-end:1px solid currentColor;inline-size:auto;margin-block-end:var(--wp-components-divider-margin-end,0);margin-block-start:var(--wp-components-divider-margin-start,0)}.e10c29fc10c181dc__divider[aria-orientation=vertical]{block-size:auto;border-inline-end:1px solid currentColor;display:inline;inline-size:0;margin-inline-end:var(--wp-components-divider-margin-end,0);margin-inline-start:var(--wp-components-divider-margin-start,0)}");
+}
+var style_module_default = { "divider": "e10c29fc10c181dc__divider" };
+
+// packages/components/src/divider/component.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedDivider(props, forwardedRef) {
-  const contextProps = useContextSystem(props, "Divider");
+  const {
+    className,
+    margin,
+    marginEnd,
+    marginStart,
+    style,
+    ...contextProps
+  } = useContextSystem(props, "Divider");
+  const dividerStyle = {
+    ...style
+  };
+  const resolvedMarginStart = space(marginStart ?? margin);
+  const resolvedMarginEnd = space(marginEnd ?? margin);
+  if (resolvedMarginStart) {
+    dividerStyle["--wp-components-divider-margin-start"] = resolvedMarginStart;
+  }
+  if (resolvedMarginEnd) {
+    dividerStyle["--wp-components-divider-margin-end"] = resolvedMarginEnd;
+  }
   return /* @__PURE__ */ _jsx(Ariakit.Separator, {
-    render: /* @__PURE__ */ _jsx(DividerView, {}),
+    className: clsx(style_module_default.divider, className),
+    style: dividerStyle,
     ...contextProps,
     ref: forwardedRef
   });

package/build-module/divider/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/divider/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../context';\nimport { DividerView } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedDivider(props, forwardedRef) {\n  const contextProps = useContextSystem(props, 'Divider');\n  return /*#__PURE__*/_jsx(Ariakit.Separator, {\n    render: /*#__PURE__*/_jsx(DividerView, {}),\n    ...contextProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Divider` is a layout component that separates groups of related content.\n *\n * ```js\n * import {\n * \t\t__experimentalDivider as Divider,\n * \t\t__experimentalText as Text,\n * \t\t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack spacing={4}>\n * \t\t\t<Text>Some text here</Text>\n * \t\t\t<Divider />\n * \t\t\t<Text>Some more text here</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const Divider = contextConnect(UnconnectedDivider, 'Divider');\nexport default Divider;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAMzB,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB,OAAO,cAAc;AAC/C,QAAM,eAAe,iBAAiB,OAAO,SAAS;AACtD,SAAoB,qBAAa,mBAAW;AAAA,IAC1C,QAAqB,qBAAK,aAAa,CAAC,CAAC;AAAA,IACzC,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAuBO,IAAM,UAAU,eAAe,oBAAoB,SAAS;AACnE,IAAO,oBAAQ;",
+  "sources": ["../../src/divider/component.tsx", "../../../style-runtime/src/index.ts", "../../src/divider/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../context';\nimport { space } from '../utils/space';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedDivider(props, forwardedRef) {\n  const {\n    className,\n    margin,\n    marginEnd,\n    marginStart,\n    style,\n    ...contextProps\n  } = useContextSystem(props, 'Divider');\n  const dividerStyle = {\n    ...style\n  };\n  const resolvedMarginStart = space(marginStart ?? margin);\n  const resolvedMarginEnd = space(marginEnd ?? margin);\n  if (resolvedMarginStart) {\n    dividerStyle['--wp-components-divider-margin-start'] = resolvedMarginStart;\n  }\n  if (resolvedMarginEnd) {\n    dividerStyle['--wp-components-divider-margin-end'] = resolvedMarginEnd;\n  }\n  return /*#__PURE__*/_jsx(Ariakit.Separator, {\n    className: clsx(styles.divider, className),\n    style: dividerStyle,\n    ...contextProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Divider` is a layout component that separates groups of related content.\n *\n * ```js\n * import {\n * \t\t__experimentalDivider as Divider,\n * \t\t__experimentalText as Text,\n * \t\t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack spacing={4}>\n * \t\t\t<Text>Some text here</Text>\n * \t\t\t<Divider />\n * \t\t\t<Text>Some more text here</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const Divider = contextConnect(UnconnectedDivider, 'Divider');\nexport default Divider;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"f2c8d759d8\", \".e10c29fc10c181dc__divider{border:0;margin:0}.e10c29fc10c181dc__divider[aria-orientation=horizontal]{block-size:0;border-block-end:1px solid currentColor;inline-size:auto;margin-block-end:var(--wp-components-divider-margin-end,0);margin-block-start:var(--wp-components-divider-margin-start,0)}.e10c29fc10c181dc__divider[aria-orientation=vertical]{block-size:auto;border-inline-end:1px solid currentColor;display:inline;inline-size:0;margin-inline-end:var(--wp-components-divider-margin-end,0);margin-inline-start:var(--wp-components-divider-margin-start,0)}\");\n}\nexport default {\"divider\":\"e10c29fc10c181dc__divider\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/higher-order/with-fallback-styles/index.mjs

@@ -1,56 +1,30 @@
 // packages/components/src/higher-order/with-fallback-styles/index.tsx
 import fastDeepEqual from "fast-deep-equal/es6/index.js";
-import { Component } from "@wordpress/element";
-import { createHigherOrderComponent } from "@wordpress/compose";
+import { useState, useRef } from "@wordpress/element";
+import { createHigherOrderComponent, useIsomorphicLayoutEffect } from "@wordpress/compose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var with_fallback_styles_default = (mapNodeToProps) => createHigherOrderComponent((WrappedComponent) => {
-  return class WithFallbackStyles extends Component {
-    constructor(props) {
-      super(props);
-      this.nodeRef = this.props.node;
-      this.state = {
-        fallbackStyles: void 0,
-        grabStylesCompleted: false
-      };
-      this.bindRef = this.bindRef.bind(this);
-    }
-    bindRef(node) {
-      if (!node) {
-        return;
-      }
-      this.nodeRef = node;
-    }
-    componentDidMount() {
-      this.grabFallbackStyles();
-    }
-    componentDidUpdate() {
-      this.grabFallbackStyles();
-    }
-    grabFallbackStyles() {
-      const {
-        grabStylesCompleted,
-        fallbackStyles
-      } = this.state;
-      if (this.nodeRef && !grabStylesCompleted) {
-        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);
+  return function WithFallbackStyles(props) {
+    const [fallbackStyles, setFallbackStyles] = useState(void 0);
+    const nodeRef = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+      const node = props.node ?? nodeRef.current;
+      const grabStylesCompleted = !!fallbackStyles && Object.values(fallbackStyles).every(Boolean);
+      if (node && !grabStylesCompleted) {
+        const newFallbackStyles = mapNodeToProps(node, props);
         if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {
-          this.setState({
-            fallbackStyles: newFallbackStyles,
-            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)
-          });
+          setFallbackStyles(newFallbackStyles);
         }
       }
-    }
-    render() {
-      const wrappedComponent = /* @__PURE__ */ _jsx(WrappedComponent, {
-        ...this.props,
-        ...this.state.fallbackStyles
-      });
-      return this.props.node ? wrappedComponent : /* @__PURE__ */ _jsxs("div", {
-        ref: this.bindRef,
-        children: [" ", wrappedComponent, " "]
-      });
-    }
+    });
+    const wrappedComponent = /* @__PURE__ */ _jsx(WrappedComponent, {
+      ...props,
+      ...fallbackStyles
+    });
+    return props.node ? wrappedComponent : /* @__PURE__ */ _jsxs("div", {
+      ref: nodeRef,
+      children: [" ", wrappedComponent, " "]
+    });
   };
 }, "withFallbackStyles");
 export {

package/build-module/higher-order/with-fallback-styles/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-fallback-styles/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class WithFallbackStyles extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
-  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAO,+BAAQ,oBAAkB,2BAA2B,sBAAoB;AAC9E,SAAO,MAAM,2BAA2B,UAAU;AAAA,IAChD,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,CAAC,cAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,qBAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,sBAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useIsomorphicLayoutEffect } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return function WithFallbackStyles(props) {\n    const [fallbackStyles, setFallbackStyles] = useState(undefined);\n    const nodeRef = useRef(null);\n\n    // Runs before paint, so the fallback styles apply without a flash.\n    useIsomorphicLayoutEffect(() => {\n      const node = props.node ?? nodeRef.current;\n      // Derived from fallbackStyles: the grab is complete once every\n      // mapped value has resolved to a truthy style.\n      const grabStylesCompleted = !!fallbackStyles && Object.values(fallbackStyles).every(Boolean);\n      if (node && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(node, props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          setFallbackStyles(newFallbackStyles);\n        }\n      }\n    });\n    const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n      ...props,\n      ...fallbackStyles\n    });\n    return props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n      ref: nodeRef,\n      children: [\" \", wrappedComponent, \" \"]\n    });\n  };\n}, 'withFallbackStyles');"],
+  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,iCAAiC;AACtE,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAO,+BAAQ,oBAAkB,2BAA2B,sBAAoB;AAC9E,SAAO,SAAS,mBAAmB,OAAO;AACxC,UAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAS;AAC9D,UAAM,UAAU,OAAO,IAAI;AAG3B,8BAA0B,MAAM;AAC9B,YAAM,OAAO,MAAM,QAAQ,QAAQ;AAGnC,YAAM,sBAAsB,CAAC,CAAC,kBAAkB,OAAO,OAAO,cAAc,EAAE,MAAM,OAAO;AAC3F,UAAI,QAAQ,CAAC,qBAAqB;AAChC,cAAM,oBAAoB,eAAe,MAAM,KAAK;AACpD,YAAI,CAAC,cAAc,mBAAmB,cAAc,GAAG;AACrD,4BAAkB,iBAAiB;AAAA,QACrC;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,mBAAgC,qBAAK,kBAAkB;AAAA,MAC3D,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,WAAO,MAAM,OAAO,mBAAgC,sBAAM,OAAO;AAAA,MAC/D,KAAK;AAAA,MACL,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,IACvC,CAAC;AAAA,EACH;AACF,GAAG,oBAAoB;",
   "names": []
 }