@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

package/build/utils/dropdown-motion.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/dropdown-motion.ts"],
-  "sourcesContent": ["// Motion configuration for dropdown-like popovers.\n\nexport const DROPDOWN_MOTION = Object.freeze({\n  SLIDE_DISTANCE: 4,\n  SLIDE_DURATION: 200,\n  SLIDE_EASING: {\n    function: 'cubic-bezier',\n    args: [0, 0, 0, 1]\n  },\n  FADE_DURATION: 80,\n  FADE_EASING: {\n    function: 'linear'\n  }\n});\nconst convertEasingToString = easing => {\n  if (easing.args?.length) {\n    return `${easing.function}(${easing.args.join(',')})`;\n  }\n  return easing.function;\n};\nexport const DROPDOWN_MOTION_CSS = Object.freeze({\n  SLIDE_DISTANCE: `${DROPDOWN_MOTION.SLIDE_DISTANCE}px`,\n  SLIDE_DURATION: `${DROPDOWN_MOTION.SLIDE_DURATION}ms`,\n  SLIDE_EASING: convertEasingToString(DROPDOWN_MOTION.SLIDE_EASING),\n  FADE_DURATION: `${DROPDOWN_MOTION.FADE_DURATION}ms`,\n  FADE_EASING: convertEasingToString(DROPDOWN_MOTION.FADE_EASING)\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,IAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,IACX,UAAU;AAAA,EACZ;AACF,CAAC;AACD,IAAM,wBAAwB,YAAU;AACtC,MAAI,OAAO,MAAM,QAAQ;AACvB,WAAO,GAAG,OAAO,QAAQ,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC;AAAA,EACpD;AACA,SAAO,OAAO;AAChB;AACO,IAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,cAAc,sBAAsB,gBAAgB,YAAY;AAAA,EAChE,eAAe,GAAG,gBAAgB,aAAa;AAAA,EAC/C,aAAa,sBAAsB,gBAAgB,WAAW;AAChE,CAAC;",
+  "sourcesContent": ["// Motion configuration for dropdown-like popovers.\n// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css\n\nexport const DROPDOWN_MOTION = Object.freeze({\n  SLIDE_DISTANCE: 4,\n  SLIDE_DURATION: 200,\n  SLIDE_EASING: {\n    function: 'cubic-bezier',\n    args: [0, 0, 0, 1]\n  },\n  FADE_DURATION: 80,\n  FADE_EASING: {\n    function: 'linear'\n  }\n});\nconst convertEasingToString = easing => {\n  if (easing.args?.length) {\n    return `${easing.function}(${easing.args.join(',')})`;\n  }\n  return easing.function;\n};\nexport const DROPDOWN_MOTION_CSS = Object.freeze({\n  SLIDE_DISTANCE: `${DROPDOWN_MOTION.SLIDE_DISTANCE}px`,\n  SLIDE_DURATION: `${DROPDOWN_MOTION.SLIDE_DURATION}ms`,\n  SLIDE_EASING: convertEasingToString(DROPDOWN_MOTION.SLIDE_EASING),\n  FADE_DURATION: `${DROPDOWN_MOTION.FADE_DURATION}ms`,\n  FADE_EASING: convertEasingToString(DROPDOWN_MOTION.FADE_EASING)\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,IAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,IACX,UAAU;AAAA,EACZ;AACF,CAAC;AACD,IAAM,wBAAwB,YAAU;AACtC,MAAI,OAAO,MAAM,QAAQ;AACvB,WAAO,GAAG,OAAO,QAAQ,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC;AAAA,EACpD;AACA,SAAO,OAAO;AAChB;AACO,IAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,cAAc,sBAAsB,gBAAgB,YAAY;AAAA,EAChE,eAAe,GAAG,gBAAgB,aAAa;AAAA,EAC/C,aAAa,sBAAsB,gBAAgB,WAAW;AAChE,CAAC;",
   "names": []
 }

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

@@ -61,6 +61,7 @@ var UnforwardedValidatedCheckboxControl = ({
   });
 };
 var ValidatedCheckboxControl = (0, import_element.forwardRef)(UnforwardedValidatedCheckboxControl);
+ValidatedCheckboxControl.displayName = "ValidatedCheckboxControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedCheckboxControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/checkbox-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 CheckboxControl from '../../checkbox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCheckboxControl = ({\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    ref: mergedRefs,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"checkbox\"]'),\n    children: /*#__PURE__*/_jsx(CheckboxControl\n    // TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n    , {\n      ...restProps\n    })\n  });\n};\nexport const ValidatedCheckboxControl = forwardRef(UnforwardedValidatedCheckboxControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;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,KAAK;AAAA,IACL;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,IAC1F,UAAuB,uCAAAA;AAAA,MAAK,wBAAAC;AAAA,MAE1B;AAAA,QACA,GAAG;AAAA,MACL;AAAA,IAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;",
+  "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 CheckboxControl from '../../checkbox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCheckboxControl = ({\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    ref: mergedRefs,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"checkbox\"]'),\n    children: /*#__PURE__*/_jsx(CheckboxControl\n    // TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n    , {\n      ...restProps\n    })\n  });\n};\nexport const ValidatedCheckboxControl = forwardRef(UnforwardedValidatedCheckboxControl);\nValidatedCheckboxControl.displayName = 'ValidatedCheckboxControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;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,KAAK;AAAA,IACL;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,IAC1F,UAAuB,uCAAAA;AAAA,MAAK,wBAAAC;AAAA,MAE1B;AAAA,QACA,GAAG;AAAA,MACL;AAAA,IAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
   "names": ["_jsx", "CheckboxControl"]
 }

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

@@ -68,6 +68,7 @@ var UnforwardedValidatedComboboxControl = ({
   );
 };
 var ValidatedComboboxControl = (0, import_element.forwardRef)(UnforwardedValidatedComboboxControl);
+ValidatedComboboxControl.displayName = "ValidatedComboboxControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedComboboxControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/combobox-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ComboboxControl from '../../combobox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedComboboxControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    const input = validityTargetRef.current?.querySelector('input[role=\"combobox\"]');\n    if (input) {\n      input.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return (\n    /*#__PURE__*/\n    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n    _jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      ref: mergedRefs,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role=\"combobox\"]'),\n      children: /*#__PURE__*/_jsx(ComboboxControl, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    })\n  );\n};\nexport const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAA8C;AAK9C,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,UAAM,QAAQ,kBAAkB,SAAS,cAAc,wBAAwB;AAC/E,QAAI,OAAO;AACT,YAAM,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb;AAAA;AAAA,IAGE,uCAAAA,KAAK,4CAAkB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,MAC1F,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,QAC3C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ComboboxControl from '../../combobox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedComboboxControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    const input = validityTargetRef.current?.querySelector('input[role=\"combobox\"]');\n    if (input) {\n      input.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return (\n    /*#__PURE__*/\n    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n    _jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      ref: mergedRefs,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role=\"combobox\"]'),\n      children: /*#__PURE__*/_jsx(ComboboxControl, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    })\n  );\n};\nexport const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);\nValidatedComboboxControl.displayName = 'ValidatedComboboxControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAA8C;AAK9C,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,UAAM,QAAQ,kBAAkB,SAAS,cAAc,wBAAwB;AAC/E,QAAI,OAAO;AACT,YAAM,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb;AAAA;AAAA,IAGE,uCAAAA,KAAK,4CAAkB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,MAC1F,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,QAC3C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
   "names": ["_jsx", "ComboboxControl"]
 }

package/build/validated-form-controls/components/custom-select-control.cjs

@@ -81,6 +81,7 @@ var UnforwardedValidatedCustomSelectControl = ({
   });
 };
 var ValidatedCustomSelectControl = (0, import_element.forwardRef)(UnforwardedValidatedCustomSelectControl);
+ValidatedCustomSelectControl.displayName = "ValidatedCustomSelectControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedCustomSelectControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/custom-select-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport CustomSelectControl from '../../custom-select-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCustomSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(CustomSelectControl\n      // TODO: Upstream limitation - Required isn't passed down correctly,\n      // so it needs to be set on a delegate element.\n      , {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsxs(\"select\", {\n      className: \"components-validated-control__error-delegate\",\n      ref: validityTargetRef,\n      required: required,\n      tabIndex: -1,\n      value: restProps.value?.key ? 'hasvalue' : '',\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"combobox\"]')?.focus();\n      },\n      children: [/*#__PURE__*/_jsx(\"option\", {\n        value: \"\",\n        children: \"No selection\"\n      }), /*#__PURE__*/_jsx(\"option\", {\n        value: \"hasvalue\",\n        children: \"Has selection\"\n      })]\n    })]\n  });\n};\nexport const ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AAKnC,gCAAiC;AACjC,mCAAgC;AAChC,yBAA2C;AAC3C,IAAM,0CAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA;AAAA,QAAK,6BAAAC;AAAA,QAG1B;AAAA,UACA,uBAAuB;AAAA,UACvB,GAAG;AAAA,QACL;AAAA,MAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,MAAM,UAAU;AAAA,MAC/B,WAAW;AAAA,MACX,KAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,MAAM,aAAa;AAAA,MAC3C,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,mBAAmB,GAAG,MAAM;AAAA,MAC7E;AAAA,MACA,UAAU,CAAc,uCAAAC,KAAK,UAAU;AAAA,QACrC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,UAAU;AAAA,QAC9B,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,mCAA+B,2BAAW,uCAAuC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport CustomSelectControl from '../../custom-select-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCustomSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(CustomSelectControl\n      // TODO: Upstream limitation - Required isn't passed down correctly,\n      // so it needs to be set on a delegate element.\n      , {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsxs(\"select\", {\n      className: \"components-validated-control__error-delegate\",\n      ref: validityTargetRef,\n      required: required,\n      tabIndex: -1,\n      value: restProps.value?.key ? 'hasvalue' : '',\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"combobox\"]')?.focus();\n      },\n      children: [/*#__PURE__*/_jsx(\"option\", {\n        value: \"\",\n        children: \"No selection\"\n      }), /*#__PURE__*/_jsx(\"option\", {\n        value: \"hasvalue\",\n        children: \"Has selection\"\n      })]\n    })]\n  });\n};\nexport const ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);\nValidatedCustomSelectControl.displayName = 'ValidatedCustomSelectControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AAKnC,gCAAiC;AACjC,mCAAgC;AAChC,yBAA2C;AAC3C,IAAM,0CAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA;AAAA,QAAK,6BAAAC;AAAA,QAG1B;AAAA,UACA,uBAAuB;AAAA,UACvB,GAAG;AAAA,QACL;AAAA,MAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,MAAM,UAAU;AAAA,MAC/B,WAAW;AAAA,MACX,KAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,MAAM,aAAa;AAAA,MAC3C,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,mBAAmB,GAAG,MAAM;AAAA,MAC7E;AAAA,MACA,UAAU,CAAc,uCAAAC,KAAK,UAAU;AAAA,QACrC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,UAAU;AAAA,QAC9B,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,mCAA+B,2BAAW,uCAAuC;AAC9F,6BAA6B,cAAc;",
   "names": ["_jsxs", "_jsx", "CustomSelectControl"]
 }

package/build/validated-form-controls/components/form-token-field.cjs

@@ -62,6 +62,7 @@ var UnforwardedValidatedFormTokenField = ({
   });
 };
 var ValidatedFormTokenField = (0, import_element.forwardRef)(UnforwardedValidatedFormTokenField);
+ValidatedFormTokenField.displayName = "ValidatedFormTokenField";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedFormTokenField

package/build/validated-form-controls/components/form-token-field.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/form-token-field.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { FormTokenField } from '../../form-token-field';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedFormTokenField = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(FormTokenField, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required,\n      value: restProps.value && restProps.value.length > 0 ? 'hasvalue' : '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('input[type=\"text\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedFormTokenField = forwardRef(UnforwardedValidatedFormTokenField);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AAKnC,gCAAiC;AACjC,8BAA+B;AAC/B,yBAA2C;AAC3C,IAAM,qCAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,wCAAgB;AAAA,QAC1C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,OAAO,UAAU,SAAS,UAAU,MAAM,SAAS,IAAI,aAAa;AAAA,MACpE,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,oBAAoB,GAAG,MAAM;AAAA,MAC9E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,8BAA0B,2BAAW,kCAAkC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { FormTokenField } from '../../form-token-field';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedFormTokenField = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(FormTokenField, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required,\n      value: restProps.value && restProps.value.length > 0 ? 'hasvalue' : '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('input[type=\"text\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedFormTokenField = forwardRef(UnforwardedValidatedFormTokenField);\nValidatedFormTokenField.displayName = 'ValidatedFormTokenField';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AAKnC,gCAAiC;AACjC,8BAA+B;AAC/B,yBAA2C;AAC3C,IAAM,qCAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,wCAAgB;AAAA,QAC1C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,OAAO,UAAU,SAAS,UAAU,MAAM,SAAS,IAAI,aAAa;AAAA,MACpE,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,oBAAoB,GAAG,MAAM;AAAA,MAC9E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,8BAA0B,2BAAW,kCAAkC;AACpF,wBAAwB,cAAc;",
   "names": ["_jsxs", "_jsx"]
 }

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

@@ -59,6 +59,7 @@ var UnforwardedValidatedInputControl = ({
   });
 };
 var ValidatedInputControl = (0, import_element.forwardRef)(UnforwardedValidatedInputControl);
+ValidatedInputControl.displayName = "ValidatedInputControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedInputControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/input-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\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(InputControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;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,qBAAAC,SAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\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(InputControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);\nValidatedInputControl.displayName = 'ValidatedInputControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;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,qBAAAC,SAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
   "names": ["_jsx", "InputControl"]
 }

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

@@ -59,6 +59,7 @@ var UnforwardedValidatedNumberControl = ({
   });
 };
 var ValidatedNumberControl = (0, import_element.forwardRef)(UnforwardedValidatedNumberControl);
+ValidatedNumberControl.displayName = "ValidatedNumberControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedNumberControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/number-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedNumberControl = ({\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(NumberControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedNumberControl = forwardRef(UnforwardedValidatedNumberControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAC1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;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,sBAAAC,SAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedNumberControl = ({\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(NumberControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedNumberControl = forwardRef(UnforwardedValidatedNumberControl);\nValidatedNumberControl.displayName = 'ValidatedNumberControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAC1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;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,sBAAAC,SAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
   "names": ["_jsx", "NumberControl"]
 }

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

@@ -58,6 +58,7 @@ var UnforwardedValidatedRadioControl = ({
   });
 };
 var ValidatedRadioControl = (0, import_element.forwardRef)(UnforwardedValidatedRadioControl);
+ValidatedRadioControl.displayName = "ValidatedRadioControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedRadioControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/radio-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 RadioControl from '../../radio-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRadioControl = ({\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    // TODO: Upstream limitation - RadioControl does not accept a ref.\n    ,\n    ref: mergedRefs,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"radio\"]'),\n    children: /*#__PURE__*/_jsx(RadioControl, {\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRadioControl = forwardRef(UnforwardedValidatedRadioControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;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,IAGA,KAAK;AAAA,IACL;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,qBAAqB;AAAA,IACvF,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;",
+  "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 RadioControl from '../../radio-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRadioControl = ({\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    // TODO: Upstream limitation - RadioControl does not accept a ref.\n    ,\n    ref: mergedRefs,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"radio\"]'),\n    children: /*#__PURE__*/_jsx(RadioControl, {\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRadioControl = forwardRef(UnforwardedValidatedRadioControl);\nValidatedRadioControl.displayName = 'ValidatedRadioControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;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,IAGA,KAAK;AAAA,IACL;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,qBAAqB;AAAA,IACvF,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
   "names": ["_jsx", "RadioControl"]
 }

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

@@ -59,6 +59,7 @@ var UnforwardedValidatedRangeControl = ({
   });
 };
 var ValidatedRangeControl = (0, import_element.forwardRef)(UnforwardedValidatedRangeControl);
+ValidatedRangeControl.displayName = "ValidatedRangeControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedRangeControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/range-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 RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\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(RangeControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;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,qBAAAC,SAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;",
+  "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 RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\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(RangeControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;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,qBAAAC,SAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
   "names": ["_jsx", "RangeControl"]
 }

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

@@ -59,6 +59,7 @@ var UnforwardedValidatedSelectControl = ({
   });
 };
 var ValidatedSelectControl = (0, import_element.forwardRef)(UnforwardedValidatedSelectControl);
+ValidatedSelectControl.displayName = "ValidatedSelectControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedSelectControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/select-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedSelectControl = ({\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(SelectControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAC1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;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,sBAAAC,SAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedSelectControl = ({\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(SelectControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);\nValidatedSelectControl.displayName = 'ValidatedSelectControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAC1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;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,sBAAAC,SAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
   "names": ["_jsx", "SelectControl"]
 }

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

@@ -59,6 +59,7 @@ var UnforwardedValidatedTextControl = ({
   });
 };
 var ValidatedTextControl = (0, import_element.forwardRef)(UnforwardedValidatedTextControl);
+ValidatedTextControl.displayName = "ValidatedTextControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedTextControl

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);"],
-  "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;",
+  "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;",
   "names": ["_jsx", "TextControl"]
 }

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

@@ -58,6 +58,7 @@ var UnforwardedValidatedTextareaControl = ({
   });
 };
 var ValidatedTextareaControl = (0, import_element.forwardRef)(UnforwardedValidatedTextareaControl);
+ValidatedTextareaControl.displayName = "ValidatedTextareaControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedTextareaControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/textarea-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\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(TextareaControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;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,wBAAAC,SAAiB;AAAA,MAC3C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\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(TextareaControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);\nValidatedTextareaControl.displayName = 'ValidatedTextareaControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;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,wBAAAC,SAAiB;AAAA,MAC3C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
   "names": ["_jsx", "TextareaControl"]
 }

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

@@ -63,6 +63,7 @@ var UnforwardedValidatedToggleControl = ({
   });
 };
 var ValidatedToggleControl = (0, import_element.forwardRef)(UnforwardedValidatedToggleControl);
+ValidatedToggleControl.displayName = "ValidatedToggleControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedToggleControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/toggle-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ToggleControl from '../../toggle-control';\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    if (validityTargetRef.current) {\n      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(ToggleControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAG1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IAC7F;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ToggleControl from '../../toggle-control';\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    if (validityTargetRef.current) {\n      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(ToggleControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);\nValidatedToggleControl.displayName = 'ValidatedToggleControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAG1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IAC7F;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
   "names": ["_jsx", "ToggleControl"]
 }

package/build/validated-form-controls/components/toggle-group-control.cjs

@@ -64,6 +64,7 @@ var UnforwardedValidatedToggleGroupControl = ({
   });
 };
 var ValidatedToggleGroupControl = (0, import_element.forwardRef)(UnforwardedValidatedToggleGroupControl);
+ValidatedToggleGroupControl.displayName = "ValidatedToggleGroupControl";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ValidatedToggleGroupControl

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/toggle-group-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleGroupControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const nameAttr = useId();\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ToggleGroupControl, {\n        __next40pxDefaultSize: true,\n        ref: forwardedRef,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"radio\",\n      ref: validityTargetRef,\n      required: required,\n      checked: restProps.value !== undefined,\n      tabIndex: -1\n      // A name attribute is needed for the `required` behavior to work.\n      ,\n      name: nameAttr,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[data-active-item=\"true\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,gCAAiC;AACjC,kCAAmC;AACnC,yBAA2C;AAC3C,IAAM,yCAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,eAAW,sBAAM;AACvB,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gDAAoB;AAAA,QAC9C,uBAAuB;AAAA,QACvB,KAAK;AAAA,QACL,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,SAAS,UAAU,UAAU;AAAA,MAC7B,UAAU;AAAA,MAGV,MAAM;AAAA,MACN,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,2BAA2B,GAAG,MAAM;AAAA,MACrF;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,kCAA8B,2BAAW,sCAAsC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleGroupControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const nameAttr = useId();\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ToggleGroupControl, {\n        __next40pxDefaultSize: true,\n        ref: forwardedRef,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"radio\",\n      ref: validityTargetRef,\n      required: required,\n      checked: restProps.value !== undefined,\n      tabIndex: -1\n      // A name attribute is needed for the `required` behavior to work.\n      ,\n      name: nameAttr,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[data-active-item=\"true\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);\nValidatedToggleGroupControl.displayName = 'ValidatedToggleGroupControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,gCAAiC;AACjC,kCAAmC;AACnC,yBAA2C;AAC3C,IAAM,yCAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,eAAW,sBAAM;AACvB,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gDAAoB;AAAA,QAC9C,uBAAuB;AAAA,QACvB,KAAK;AAAA,QACL,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,SAAS,UAAU,UAAU;AAAA,MAC7B,UAAU;AAAA,MAGV,MAAM;AAAA,MACN,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,2BAA2B,GAAG,MAAM;AAAA,MACrF;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,kCAA8B,2BAAW,sCAAsC;AAC5F,4BAA4B,cAAc;",
   "names": ["_jsxs", "_jsx"]
 }

package/build/validated-form-controls/control-with-error.cjs

@@ -168,6 +168,7 @@ function UnforwardedControlWithError({
   });
 }
 var ControlWithError = (0, import_element.forwardRef)(UnforwardedControlWithError);
+ControlWithError.displayName = "ControlWithError";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ControlWithError

package/build/validated-form-controls/control-with-error.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/control-with-error.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    var _validityTarget$close;\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      var _target$form$elements;\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from((_target$form$elements = target.form?.elements) !== null && _target$form$elements !== void 0 ? _target$form$elements : []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from((_validityTarget$close = validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`)) !== null && _validityTarget$close !== void 0 ? _validityTarget$close : []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          var _customValidity$messa;\n          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const message = () => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: showMessage && message()\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    var _validityTarget$close;\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      var _target$form$elements;\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from((_target$form$elements = target.form?.elements) !== null && _target$form$elements !== void 0 ? _target$form$elements : []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from((_validityTarget$close = validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`)) !== null && _validityTarget$close !== void 0 ? _validityTarget$close : []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          var _customValidity$messa;\n          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const message = () => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: showMessage && message()\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
+  "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build-module/angle-picker-control/index.mjs

@@ -64,6 +64,7 @@ function UnforwardedAnglePickerControl(props, ref) {
   });
 }
 var AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);
+AnglePickerControl.displayName = "AnglePickerControl";
 var angle_picker_control_default = AnglePickerControl;
 export {
   AnglePickerControl,

package/build-module/angle-picker-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/angle-picker-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Flex, FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';\nimport AngleCircle from './angle-circle';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedAnglePickerControl(props, ref) {\n  const {\n    className,\n    label = __('Angle'),\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  const handleOnNumberChange = unprocessedValue => {\n    if (onChange === undefined) {\n      return;\n    }\n    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;\n    onChange(inputValue);\n  };\n  const classes = clsx('components-angle-picker-control', className);\n\n  // Override the default behavior and position the degree symbol to the\n  // right of the number, regardless of the language direction.\n  const prefixOrSuffixProp = isRTL() ? {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: \"\\xB0\"\n    })\n  } : {\n    suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {\n      children: \"\\xB0\"\n    })\n  };\n  return /*#__PURE__*/_jsxs(Flex, {\n    ...restProps,\n    ref: ref,\n    className: classes,\n    gap: 2,\n    children: [/*#__PURE__*/_jsx(FlexBlock, {\n      children: /*#__PURE__*/_jsx(NumberControl, {\n        __next40pxDefaultSize: true,\n        label: label,\n        className: \"components-angle-picker-control__input-field\",\n        max: 360,\n        min: 0,\n        onChange: handleOnNumberChange,\n        step: \"1\",\n        value: value,\n        spinControls: \"none\",\n        ...prefixOrSuffixProp\n      })\n    }), /*#__PURE__*/_jsx(Spacer, {\n      marginBottom: \"1\",\n      marginTop: \"auto\",\n      children: /*#__PURE__*/_jsx(AngleCircle, {\n        \"aria-hidden\": \"true\",\n        value: value,\n        onChange: onChange\n      })\n    })]\n  });\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *     />\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);\nexport default AnglePickerControl;"],
-  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,UAAU;AAK1B,SAAS,MAAM,iBAAiB;AAChC,SAAS,cAAc;AACvB,OAAO,mBAAmB;AAC1B,OAAO,+BAA+B;AACtC,OAAO,+BAA+B;AACtC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,8BAA8B,OAAO,KAAK;AACjD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,GAAG,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,uBAAuB,sBAAoB;AAC/C,QAAI,aAAa,QAAW;AAC1B;AAAA,IACF;AACA,UAAM,aAAa,qBAAqB,UAAa,qBAAqB,KAAK,SAAS,kBAAkB,EAAE,IAAI;AAChH,aAAS,UAAU;AAAA,EACrB;AACA,QAAM,UAAU,KAAK,mCAAmC,SAAS;AAIjE,QAAM,qBAAqB,MAAM,IAAI;AAAA,IACnC,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAU;AAAA,IACZ,CAAC;AAAA,EACH,IAAI;AAAA,IACF,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,WAAW;AAAA,MACtC,UAAuB,qBAAK,eAAe;AAAA,QACzC,uBAAuB;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA,cAAc;AAAA,QACd,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,cAAc;AAAA,MACd,WAAW;AAAA,MACX,UAAuB,qBAAK,aAAa;AAAA,QACvC,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAuBO,IAAM,qBAAqB,WAAW,6BAA6B;AAC1E,IAAO,+BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Flex, FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';\nimport AngleCircle from './angle-circle';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedAnglePickerControl(props, ref) {\n  const {\n    className,\n    label = __('Angle'),\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  const handleOnNumberChange = unprocessedValue => {\n    if (onChange === undefined) {\n      return;\n    }\n    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;\n    onChange(inputValue);\n  };\n  const classes = clsx('components-angle-picker-control', className);\n\n  // Override the default behavior and position the degree symbol to the\n  // right of the number, regardless of the language direction.\n  const prefixOrSuffixProp = isRTL() ? {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: \"\\xB0\"\n    })\n  } : {\n    suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {\n      children: \"\\xB0\"\n    })\n  };\n  return /*#__PURE__*/_jsxs(Flex, {\n    ...restProps,\n    ref: ref,\n    className: classes,\n    gap: 2,\n    children: [/*#__PURE__*/_jsx(FlexBlock, {\n      children: /*#__PURE__*/_jsx(NumberControl, {\n        __next40pxDefaultSize: true,\n        label: label,\n        className: \"components-angle-picker-control__input-field\",\n        max: 360,\n        min: 0,\n        onChange: handleOnNumberChange,\n        step: \"1\",\n        value: value,\n        spinControls: \"none\",\n        ...prefixOrSuffixProp\n      })\n    }), /*#__PURE__*/_jsx(Spacer, {\n      marginBottom: \"1\",\n      marginTop: \"auto\",\n      children: /*#__PURE__*/_jsx(AngleCircle, {\n        \"aria-hidden\": \"true\",\n        value: value,\n        onChange: onChange\n      })\n    })]\n  });\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *     />\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);\nAnglePickerControl.displayName = 'AnglePickerControl';\nexport default AnglePickerControl;"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,UAAU;AAK1B,SAAS,MAAM,iBAAiB;AAChC,SAAS,cAAc;AACvB,OAAO,mBAAmB;AAC1B,OAAO,+BAA+B;AACtC,OAAO,+BAA+B;AACtC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,8BAA8B,OAAO,KAAK;AACjD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,GAAG,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,uBAAuB,sBAAoB;AAC/C,QAAI,aAAa,QAAW;AAC1B;AAAA,IACF;AACA,UAAM,aAAa,qBAAqB,UAAa,qBAAqB,KAAK,SAAS,kBAAkB,EAAE,IAAI;AAChH,aAAS,UAAU;AAAA,EACrB;AACA,QAAM,UAAU,KAAK,mCAAmC,SAAS;AAIjE,QAAM,qBAAqB,MAAM,IAAI;AAAA,IACnC,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAU;AAAA,IACZ,CAAC;AAAA,EACH,IAAI;AAAA,IACF,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,WAAW;AAAA,MACtC,UAAuB,qBAAK,eAAe;AAAA,QACzC,uBAAuB;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA,cAAc;AAAA,QACd,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,cAAc;AAAA,MACd,WAAW;AAAA,MACX,UAAuB,qBAAK,aAAa;AAAA,QACvC,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAuBO,IAAM,qBAAqB,WAAW,6BAA6B;AAC1E,mBAAmB,cAAc;AACjC,IAAO,+BAAQ;",
   "names": []
 }

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

@@ -123,13 +123,21 @@ function BoxControl({
         onClick: toggleLinked,
         isLinked
       })
-    }), !isLinked && splitOnAxis && ["vertical", "horizontal"].map((axis) => /* @__PURE__ */ _jsx(InputControl, {
-      side: axis,
-      ...inputControlProps
-    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map((axis) => /* @__PURE__ */ _jsx(InputControl, {
-      side: axis,
-      ...inputControlProps
-    }, axis)), allowReset && /* @__PURE__ */ _jsx(ResetButton, {
+    }), !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, {
       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, getInitialSide, 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  const [side, setSide] = useState(getInitialSide(isLinked, splitOnAxis));\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    setSide(getInitialSide(!isLinked, splitOnAxis));\n  };\n  const handleOnFocus = (_event, {\n    side: nextSide\n  }) => {\n    setSide(nextSide);\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    onFocus: handleOnFocus,\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 => /*#__PURE__*/_jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/_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 { applyValueToSides } from './utils';\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 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, getInitialSide, 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  const [side, setSide] = useState(getInitialSide(isLinked, splitOnAxis));\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    setSide(getInitialSide(!isLinked, splitOnAxis));\n  };\n  const handleOnFocus = (_event, {\n    side: nextSide\n  }) => {\n    setSide(nextSide);\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    onFocus: handleOnFocus,\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 { applyValueToSides } from './utils';\nexport default BoxControl;"],
+  "mappings": "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",
   "names": []
 }