@wordpress/components 38.0.0 → 40.0.0

package/build-module/range-control/tooltip.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/range-control/tooltip.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function SimpleTooltip(props) {\n  const {\n    className,\n    inputRef,\n    tooltipPlacement,\n    show = false,\n    style = {},\n    value = 0,\n    renderTooltipContent = v => v,\n    zIndex = 100,\n    ...restProps\n  } = props;\n  const placement = useTooltipPlacement({\n    inputRef,\n    tooltipPlacement\n  });\n  const classes = clsx('components-simple-tooltip', className);\n  const styles = {\n    ...style,\n    zIndex\n  };\n  return /*#__PURE__*/_jsx(Tooltip, {\n    ...restProps,\n    \"aria-hidden\": \"false\",\n    className: classes,\n    placement: placement,\n    show: show,\n    role: \"tooltip\",\n    style: styles,\n    children: renderTooltipContent(value)\n  });\n}\nfunction useTooltipPlacement({\n  inputRef,\n  tooltipPlacement\n}) {\n  const [placement, setPlacement] = useState();\n  const setTooltipPlacement = useCallback(() => {\n    if (inputRef && inputRef.current) {\n      setPlacement(tooltipPlacement);\n    }\n  }, [tooltipPlacement, inputRef]);\n  useEffect(() => {\n    setTooltipPlacement();\n  }, [setTooltipPlacement]);\n  useEffect(() => {\n    window.addEventListener('resize', setTooltipPlacement);\n    return () => {\n      window.removeEventListener('resize', setTooltipPlacement);\n    };\n  });\n  return placement;\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,aAAa,WAAW,gBAAgB;AAKjD,SAAS,eAAe;AACxB,SAAS,OAAO,YAAY;AACb,SAAR,cAA+B,OAAO;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ,CAAC;AAAA,IACT,QAAQ;AAAA,IACR,uBAAuB,OAAK;AAAA,IAC5B,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,YAAY,oBAAoB;AAAA,IACpC;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,KAAK,6BAA6B,SAAS;AAC3D,QAAM,SAAS;AAAA,IACb,GAAG;AAAA,IACH;AAAA,EACF;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC,GAAG;AAAA,IACH,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU,qBAAqB,KAAK;AAAA,EACtC,CAAC;AACH;AACA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS;AAC3C,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,YAAY,SAAS,SAAS;AAChC,mBAAa,gBAAgB;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,kBAAkB,QAAQ,CAAC;AAC/B,YAAU,MAAM;AACd,wBAAoB;AAAA,EACtB,GAAG,CAAC,mBAAmB,CAAC;AACxB,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,mBAAmB;AACrD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { Tooltip } from './styles/range-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function SimpleTooltip(props) {\n  const {\n    className,\n    inputRef,\n    tooltipPlacement,\n    show = false,\n    style = {},\n    value = 0,\n    renderTooltipContent = v => v,\n    zIndex = 100,\n    ...restProps\n  } = props;\n  const placement = useTooltipPlacement({\n    inputRef,\n    tooltipPlacement\n  });\n  const classes = clsx('components-simple-tooltip', className);\n  const styles = {\n    ...style,\n    zIndex\n  };\n  return /*#__PURE__*/_jsx(Tooltip, {\n    ...restProps,\n    \"aria-hidden\": \"false\",\n    className: classes,\n    placement: placement,\n    show: show,\n    role: \"tooltip\",\n    style: styles,\n    children: renderTooltipContent(value)\n  });\n}\nfunction useTooltipPlacement({\n  inputRef,\n  tooltipPlacement\n}) {\n  const [placement, setPlacement] = useState();\n  const setTooltipPlacement = useCallback(() => {\n    if (inputRef && inputRef.current) {\n      setPlacement(tooltipPlacement);\n    }\n  }, [tooltipPlacement, inputRef]);\n  useEffect(() => {\n    setTooltipPlacement();\n  }, [setTooltipPlacement]);\n  useEffect(() => {\n    window.addEventListener('resize', setTooltipPlacement);\n    return () => {\n      window.removeEventListener('resize', setTooltipPlacement);\n    };\n  });\n  return placement;\n}"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,eAAe;AACxB,SAAS,OAAO,YAAY;AACb,SAAR,cAA+B,OAAO;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ,CAAC;AAAA,IACT,QAAQ;AAAA,IACR,uBAAuB,OAAK;AAAA,IAC5B,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,YAAY,oBAAoB;AAAA,IACpC;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,KAAK,6BAA6B,SAAS;AAC3D,QAAM,SAAS;AAAA,IACb,GAAG;AAAA,IACH;AAAA,EACF;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC,GAAG;AAAA,IACH,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU,qBAAqB,KAAK;AAAA,EACtC,CAAC;AACH;AACA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS;AAC3C,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,YAAY,SAAS,SAAS;AAChC,mBAAa,gBAAgB;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,kBAAkB,QAAQ,CAAC;AAC/B,YAAU,MAAM;AACd,wBAAoB;AAAA,EACtB,GAAG,CAAC,mBAAmB,CAAC;AACxB,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,mBAAmB;AACrD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/build-module/range-control/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/range-control/utils.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n/**\n * A float supported clamp function for a specific value.\n *\n * @param value The value to clamp.\n * @param min   The minimum value.\n * @param max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp(value, min, max) {\n  if (typeof value !== 'number') {\n    return null;\n  }\n  return parseFloat(`${clamp(value, min, max)}`);\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(settings) {\n  const {\n    min,\n    max,\n    value: valueProp,\n    initial\n  } = settings;\n  const [state, setInternalState] = useControlledState(floatClamp(valueProp, min, max), {\n    initial: floatClamp(initial ?? null, min, max),\n    fallback: null\n  });\n  const setState = useCallback(nextValue => {\n    if (nextValue === null) {\n      setInternalState(null);\n    } else {\n      setInternalState(floatClamp(nextValue, min, max));\n    }\n  }, [min, max, setInternalState]);\n\n  // `state` can't be an empty string because we specified a fallback value of\n  // `null` in `useControlledState`\n  return [state, setState];\n}"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAK5B,SAAS,0BAA0B;AACnC,SAAS,aAAa;AAUf,SAAS,WAAW,OAAO,KAAK,KAAK;AAC1C,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO,WAAW,GAAG,MAAM,OAAO,KAAK,GAAG,CAAC,EAAE;AAC/C;AAQO,SAAS,wBAAwB,UAAU;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,OAAO,gBAAgB,IAAI,mBAAmB,WAAW,WAAW,KAAK,GAAG,GAAG;AAAA,IACpF,SAAS,WAAW,WAAW,MAAM,KAAK,GAAG;AAAA,IAC7C,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,WAAW,YAAY,eAAa;AACxC,QAAI,cAAc,MAAM;AACtB,uBAAiB,IAAI;AAAA,IACvB,OAAO;AACL,uBAAiB,WAAW,WAAW,KAAK,GAAG,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,gBAAgB,CAAC;AAI/B,SAAO,CAAC,OAAO,QAAQ;AACzB;",
+  "sourcesContent": ["import { useCallback } from '@wordpress/element';\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n/**\n * A float supported clamp function for a specific value.\n *\n * @param value The value to clamp.\n * @param min   The minimum value.\n * @param max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp(value, min, max) {\n  if (typeof value !== 'number') {\n    return null;\n  }\n  return parseFloat(`${clamp(value, min, max)}`);\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(settings) {\n  const {\n    min,\n    max,\n    value: valueProp,\n    initial\n  } = settings;\n  const [state, setInternalState] = useControlledState(floatClamp(valueProp, min, max), {\n    initial: floatClamp(initial ?? null, min, max),\n    fallback: null\n  });\n  const setState = useCallback(nextValue => {\n    if (nextValue === null) {\n      setInternalState(null);\n    } else {\n      setInternalState(floatClamp(nextValue, min, max));\n    }\n  }, [min, max, setInternalState]);\n\n  // `state` can't be an empty string because we specified a fallback value of\n  // `null` in `useControlledState`\n  return [state, setState];\n}"],
+  "mappings": ";AAAA,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,aAAa;AAUf,SAAS,WAAW,OAAO,KAAK,KAAK;AAC1C,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO,WAAW,GAAG,MAAM,OAAO,KAAK,GAAG,CAAC,EAAE;AAC/C;AAQO,SAAS,wBAAwB,UAAU;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,OAAO,gBAAgB,IAAI,mBAAmB,WAAW,WAAW,KAAK,GAAG,GAAG;AAAA,IACpF,SAAS,WAAW,WAAW,MAAM,KAAK,GAAG;AAAA,IAC7C,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,WAAW,YAAY,eAAa;AACxC,QAAI,cAAc,MAAM;AACtB,uBAAiB,IAAI;AAAA,IACvB,OAAO;AACL,uBAAiB,WAAW,WAAW,KAAK,GAAG,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,gBAAgB,CAAC;AAI/B,SAAO,CAAC,OAAO,QAAQ;AACzB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/resizable-box/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { Resizable } from 're-resizable';\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\nconst HANDLE_CLASSES = {\n  top: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),\n  right: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),\n  bottom: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),\n  left: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),\n  topLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),\n  topRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),\n  bottomRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),\n  bottomLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n  width: undefined,\n  height: undefined,\n  top: undefined,\n  right: undefined,\n  bottom: undefined,\n  left: undefined\n};\nconst HANDLE_STYLES = {\n  top: HANDLE_STYLES_OVERRIDES,\n  right: HANDLE_STYLES_OVERRIDES,\n  bottom: HANDLE_STYLES_OVERRIDES,\n  left: HANDLE_STYLES_OVERRIDES,\n  topLeft: HANDLE_STYLES_OVERRIDES,\n  topRight: HANDLE_STYLES_OVERRIDES,\n  bottomRight: HANDLE_STYLES_OVERRIDES,\n  bottomLeft: HANDLE_STYLES_OVERRIDES\n};\nfunction UnforwardedResizableBox({\n  className,\n  children,\n  showHandle = true,\n  __experimentalShowTooltip: showTooltip = false,\n  __experimentalTooltipProps: tooltipProps = {},\n  ...props\n}, ref) {\n  return /*#__PURE__*/_jsxs(Resizable, {\n    className: clsx('components-resizable-box__container', showHandle && 'has-show-handle', className)\n    // Add a focusable element within the drag handle. Unfortunately,\n    // `re-resizable` does not make them properly focusable by default,\n    // causing focus to move the the block wrapper which triggers block\n    // drag.\n    ,\n    handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/_jsx(\"div\", {\n      tabIndex: -1\n    }, key)])),\n    handleClasses: HANDLE_CLASSES,\n    handleStyles: HANDLE_STYLES,\n    ref: ref,\n    ...props,\n    children: [children, showTooltip && /*#__PURE__*/_jsx(ResizeTooltip, {\n      ...tooltipProps\n    })]\n  });\n}\n\n/**\n * `ResizableBox` wraps content in a container with draggable handles, letting\n * users interactively resize it along one or more edges or corners.\n */\nexport const ResizableBox = forwardRef(UnforwardedResizableBox);\nResizableBox.displayName = 'ResizableBox';\nexport default ResizableBox;"],
-  "mappings": ";AAGA,SAAS,kBAAkB;AAK3B,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAI1B,OAAO,mBAAmB;AAC1B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAC/B,IAAM,2BAA2B;AACjC,IAAM,iBAAiB;AAAA,EACrB,KAAK,KAAK,mBAAmB,wBAAwB,sCAAsC;AAAA,EAC3F,OAAO,KAAK,mBAAmB,wBAAwB,wCAAwC;AAAA,EAC/F,QAAQ,KAAK,mBAAmB,wBAAwB,yCAAyC;AAAA,EACjG,MAAM,KAAK,mBAAmB,wBAAwB,uCAAuC;AAAA,EAC7F,SAAS,KAAK,mBAAmB,0BAA0B,wCAAwC,uCAAuC;AAAA,EAC1I,UAAU,KAAK,mBAAmB,0BAA0B,wCAAwC,wCAAwC;AAAA,EAC5I,aAAa,KAAK,mBAAmB,0BAA0B,2CAA2C,wCAAwC;AAAA,EAClJ,YAAY,KAAK,mBAAmB,0BAA0B,2CAA2C,uCAAuC;AAClJ;AAGA,IAAM,0BAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AACA,IAAM,gBAAgB;AAAA,EACpB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AACd;AACA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,2BAA2B,cAAc;AAAA,EACzC,4BAA4B,eAAe,CAAC;AAAA,EAC5C,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,sBAAM,WAAW;AAAA,IACnC,WAAW,KAAK,uCAAuC,cAAc,mBAAmB,SAAS;AAAA,IAMjG,iBAAiB,OAAO,YAAY,OAAO,KAAK,cAAc,EAAE,IAAI,SAAO,CAAC,KAAkB,qBAAK,OAAO;AAAA,MACxG,UAAU;AAAA,IACZ,GAAG,GAAG,CAAC,CAAC,CAAC;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAC,UAAU,eAA4B,qBAAK,eAAe;AAAA,MACnE,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAMO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport { Resizable } from 're-resizable';\nimport ResizeTooltip from './resize-tooltip';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\nconst HANDLE_CLASSES = {\n  top: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),\n  right: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),\n  bottom: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),\n  left: clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),\n  topLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),\n  topRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),\n  bottomRight: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),\n  bottomLeft: clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n  width: undefined,\n  height: undefined,\n  top: undefined,\n  right: undefined,\n  bottom: undefined,\n  left: undefined\n};\nconst HANDLE_STYLES = {\n  top: HANDLE_STYLES_OVERRIDES,\n  right: HANDLE_STYLES_OVERRIDES,\n  bottom: HANDLE_STYLES_OVERRIDES,\n  left: HANDLE_STYLES_OVERRIDES,\n  topLeft: HANDLE_STYLES_OVERRIDES,\n  topRight: HANDLE_STYLES_OVERRIDES,\n  bottomRight: HANDLE_STYLES_OVERRIDES,\n  bottomLeft: HANDLE_STYLES_OVERRIDES\n};\nfunction UnforwardedResizableBox({\n  className,\n  children,\n  showHandle = true,\n  __experimentalShowTooltip: showTooltip = false,\n  __experimentalTooltipProps: tooltipProps = {},\n  ...props\n}, ref) {\n  return /*#__PURE__*/_jsxs(Resizable, {\n    className: clsx('components-resizable-box__container', showHandle && 'has-show-handle', className)\n    // Add a focusable element within the drag handle. Unfortunately,\n    // `re-resizable` does not make them properly focusable by default,\n    // causing focus to move the the block wrapper which triggers block\n    // drag.\n    ,\n    handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/_jsx(\"div\", {\n      tabIndex: -1\n    }, key)])),\n    handleClasses: HANDLE_CLASSES,\n    handleStyles: HANDLE_STYLES,\n    ref: ref,\n    ...props,\n    children: [children, showTooltip && /*#__PURE__*/_jsx(ResizeTooltip, {\n      ...tooltipProps\n    })]\n  });\n}\n\n/**\n * `ResizableBox` wraps content in a container with draggable handles, letting\n * users interactively resize it along one or more edges or corners.\n */\nexport const ResizableBox = forwardRef(UnforwardedResizableBox);\nResizableBox.displayName = 'ResizableBox';\nexport default ResizableBox;"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAC1B,OAAO,mBAAmB;AAC1B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAC/B,IAAM,2BAA2B;AACjC,IAAM,iBAAiB;AAAA,EACrB,KAAK,KAAK,mBAAmB,wBAAwB,sCAAsC;AAAA,EAC3F,OAAO,KAAK,mBAAmB,wBAAwB,wCAAwC;AAAA,EAC/F,QAAQ,KAAK,mBAAmB,wBAAwB,yCAAyC;AAAA,EACjG,MAAM,KAAK,mBAAmB,wBAAwB,uCAAuC;AAAA,EAC7F,SAAS,KAAK,mBAAmB,0BAA0B,wCAAwC,uCAAuC;AAAA,EAC1I,UAAU,KAAK,mBAAmB,0BAA0B,wCAAwC,wCAAwC;AAAA,EAC5I,aAAa,KAAK,mBAAmB,0BAA0B,2CAA2C,wCAAwC;AAAA,EAClJ,YAAY,KAAK,mBAAmB,0BAA0B,2CAA2C,uCAAuC;AAClJ;AAGA,IAAM,0BAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AACA,IAAM,gBAAgB;AAAA,EACpB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AACd;AACA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,2BAA2B,cAAc;AAAA,EACzC,4BAA4B,eAAe,CAAC;AAAA,EAC5C,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,sBAAM,WAAW;AAAA,IACnC,WAAW,KAAK,uCAAuC,cAAc,mBAAmB,SAAS;AAAA,IAMjG,iBAAiB,OAAO,YAAY,OAAO,KAAK,cAAc,EAAE,IAAI,SAAO,CAAC,KAAkB,qBAAK,OAAO;AAAA,MACxG,UAAU;AAAA,IACZ,GAAG,GAAG,CAAC,CAAC,CAAC;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAC,UAAU,eAA4B,qBAAK,eAAe;AAAA,MACnE,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAMO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/resizable-box/resize-tooltip/index.mjs

@@ -1,13 +1,99 @@
 // packages/components/src/resizable-box/resize-tooltip/index.tsx
 import clsx from "clsx";
 import { forwardRef } from "@wordpress/element";
+import { PolymorphicElement } from "../../utils/polymorphic-element.mjs";
 import Label from "./label.mjs";
 import { useResizeLabel, POSITIONS } from "./utils.mjs";
-import { Root } from "./styles/resize-tooltip.styles.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/resizable-box/resize-tooltip/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("6a3e579287", ".f1c3c2f08c84bcca__root{box-sizing:border-box;inset:0;pointer-events:none;position:absolute}.dd094b49bf71dfd9__tooltip-wrapper{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s linear}.d768357cc581321f__tooltip{background:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));border-radius:2px;box-sizing:border-box;color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:12px;padding:4px 8px;position:relative}.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text{color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));display:block;font-size:13px;line-height:1.4;white-space:nowrap}");
+}
+var style_module_default = { "root": "f1c3c2f08c84bcca__root", "tooltip-wrapper": "dd094b49bf71dfd9__tooltip-wrapper", "tooltip": "d768357cc581321f__tooltip", "label-text": "a32e43dd68941abb__label-text" };
+
+// packages/components/src/resizable-box/resize-tooltip/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
 function ResizeTooltip({
+  as = "div",
   axis,
   className,
   fadeTimeout = 180,
@@ -32,12 +118,13 @@ function ResizeTooltip({
   if (!isVisible) {
     return null;
   }
-  const classes = clsx("components-resize-tooltip", className);
-  return /* @__PURE__ */ _jsxs(Root, {
+  const classes = clsx("components-resize-tooltip", style_module_default.root, className);
+  return /* @__PURE__ */ _jsxs(PolymorphicElement, {
     "aria-hidden": "true",
+    as,
+    ...props,
     className: classes,
     ref,
-    ...props,
     children: [resizeListener, /* @__PURE__ */ _jsx(Label, {
       "aria-hidden": props["aria-hidden"],
       label,

package/build-module/resizable-box/resize-tooltip/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/resizable-box/resize-tooltip/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Label from './label';\nimport { useResizeLabel, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction ResizeTooltip({\n  axis,\n  className,\n  fadeTimeout = 180,\n  isVisible = true,\n  labelRef,\n  onResize = noop,\n  position = POSITIONS.bottom,\n  showPx = true,\n  zIndex = 1000,\n  ...props\n}, ref) {\n  const {\n    label,\n    resizeListener\n  } = useResizeLabel({\n    axis,\n    fadeTimeout,\n    onResize,\n    showPx,\n    position\n  });\n  if (!isVisible) {\n    return null;\n  }\n  const classes = clsx('components-resize-tooltip', className);\n  return /*#__PURE__*/_jsxs(Root, {\n    \"aria-hidden\": \"true\",\n    className: classes,\n    ref: ref,\n    ...props,\n    children: [resizeListener, /*#__PURE__*/_jsx(Label, {\n      \"aria-hidden\": props['aria-hidden'],\n      label: label,\n      position: position,\n      ref: labelRef,\n      zIndex: zIndex\n    })]\n  });\n}\nconst ForwardedComponent = forwardRef(ResizeTooltip);\nexport default ForwardedComponent;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,OAAO,WAAW;AAClB,SAAS,gBAAgB,iBAAiB;AAC1C,SAAS,YAAY;AACrB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,WAAW,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,GAAG;AACL,GAAG,KAAK;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,QAAM,UAAU,KAAK,6BAA6B,SAAS;AAC3D,SAAoB,sBAAM,MAAM;AAAA,IAC9B,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAC,gBAA6B,qBAAK,OAAO;AAAA,MAClD,eAAe,MAAM,aAAa;AAAA,MAClC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAM,qBAAqB,WAAW,aAAa;AACnD,IAAO,yBAAQ;",
+  "sources": ["../../../src/resizable-box/resize-tooltip/index.tsx", "../../../../style-runtime/src/index.ts", "../../../src/resizable-box/resize-tooltip/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { PolymorphicElement } from '../../utils/polymorphic-element';\nimport Label from './label';\nimport { useResizeLabel, POSITIONS } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction ResizeTooltip({\n  as = 'div',\n  axis,\n  className,\n  fadeTimeout = 180,\n  isVisible = true,\n  labelRef,\n  onResize = noop,\n  position = POSITIONS.bottom,\n  showPx = true,\n  zIndex = 1000,\n  ...props\n}, ref) {\n  const {\n    label,\n    resizeListener\n  } = useResizeLabel({\n    axis,\n    fadeTimeout,\n    onResize,\n    showPx,\n    position\n  });\n  if (!isVisible) {\n    return null;\n  }\n  const classes = clsx('components-resize-tooltip', styles.root, className);\n  return /*#__PURE__*/_jsxs(PolymorphicElement, {\n    \"aria-hidden\": \"true\",\n    as: as,\n    ...props,\n    className: classes,\n    ref: ref,\n    children: [resizeListener, /*#__PURE__*/_jsx(Label, {\n      \"aria-hidden\": props['aria-hidden'],\n      label: label,\n      position: position,\n      ref: labelRef,\n      zIndex: zIndex\n    })]\n  });\n}\nconst ForwardedComponent = forwardRef(ResizeTooltip);\nexport default ForwardedComponent;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"6a3e579287\", \".f1c3c2f08c84bcca__root{box-sizing:border-box;inset:0;pointer-events:none;position:absolute}.dd094b49bf71dfd9__tooltip-wrapper{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s linear}.d768357cc581321f__tooltip{background:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));border-radius:2px;box-sizing:border-box;color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:12px;padding:4px 8px;position:relative}.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text{color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));display:block;font-size:13px;line-height:1.4;white-space:nowrap}\");\n}\nexport default {\"root\":\"f1c3c2f08c84bcca__root\",\"tooltip-wrapper\":\"dd094b49bf71dfd9__tooltip-wrapper\",\"tooltip\":\"d768357cc581321f__tooltip\",\"label-text\":\"a32e43dd68941abb__label-text\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/resizable-box/resize-tooltip/label.mjs

@@ -1,8 +1,94 @@
 // packages/components/src/resizable-box/resize-tooltip/label.tsx
+import clsx from "clsx";
 import { forwardRef } from "@wordpress/element";
 import { isRTL } from "@wordpress/i18n";
+import { Text } from "../../text/index.mjs";
 import { POSITIONS } from "./utils.mjs";
-import { TooltipWrapper, Tooltip, LabelText } from "./styles/resize-tooltip.styles.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/resizable-box/resize-tooltip/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("6a3e579287", ".f1c3c2f08c84bcca__root{box-sizing:border-box;inset:0;pointer-events:none;position:absolute}.dd094b49bf71dfd9__tooltip-wrapper{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s linear}.d768357cc581321f__tooltip{background:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));border-radius:2px;box-sizing:border-box;color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:12px;padding:4px 8px;position:relative}.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text{color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));display:block;font-size:13px;line-height:1.4;white-space:nowrap}");
+}
+var style_module_default = { "root": "f1c3c2f08c84bcca__root", "tooltip-wrapper": "dd094b49bf71dfd9__tooltip-wrapper", "tooltip": "d768357cc581321f__tooltip", "label-text": "a32e43dd68941abb__label-text" };
+
+// packages/components/src/resizable-box/resize-tooltip/label.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 var CORNER_OFFSET = 4;
 var CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
@@ -44,17 +130,18 @@ function Label({
       left: isRTL() ? CORNER_OFFSET : void 0
     };
   }
-  return /* @__PURE__ */ _jsx(TooltipWrapper, {
+  return /* @__PURE__ */ _jsx("div", {
     "aria-hidden": "true",
-    className: "components-resizable-tooltip__tooltip-wrapper",
+    className: clsx("components-resizable-tooltip__tooltip-wrapper", style_module_default["tooltip-wrapper"]),
     ref,
     style,
     ...props,
-    children: /* @__PURE__ */ _jsx(Tooltip, {
-      className: "components-resizable-tooltip__tooltip",
+    children: /* @__PURE__ */ _jsx("div", {
+      className: clsx("components-resizable-tooltip__tooltip", style_module_default.tooltip),
       style: labelStyle,
-      children: /* @__PURE__ */ _jsx(LabelText, {
+      children: /* @__PURE__ */ _jsx(Text, {
         as: "span",
+        className: style_module_default["label-text"],
         children: label
       })
     })

package/build-module/resizable-box/resize-tooltip/label.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/resizable-box/resize-tooltip/label.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport { POSITIONS } from './utils';\nimport { TooltipWrapper, Tooltip, LabelText } from './styles/resize-tooltip.styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\nfunction Label({\n  label,\n  position = POSITIONS.corner,\n  zIndex = 1000,\n  ...props\n}, ref) {\n  const showLabel = !!label;\n  const isBottom = position === POSITIONS.bottom;\n  const isCorner = position === POSITIONS.corner;\n  if (!showLabel) {\n    return null;\n  }\n  let style = {\n    opacity: showLabel ? 1 : undefined,\n    zIndex\n  };\n  let labelStyle = {};\n  if (isBottom) {\n    style = {\n      ...style,\n      position: 'absolute',\n      bottom: CURSOR_OFFSET_TOP * -1,\n      left: '50%',\n      transform: 'translate(-50%, 0)'\n    };\n    labelStyle = {\n      transform: `translate(0, 100%)`\n    };\n  }\n  if (isCorner) {\n    style = {\n      ...style,\n      position: 'absolute',\n      top: CORNER_OFFSET,\n      right: isRTL() ? undefined : CORNER_OFFSET,\n      left: isRTL() ? CORNER_OFFSET : undefined\n    };\n  }\n  return /*#__PURE__*/_jsx(TooltipWrapper, {\n    \"aria-hidden\": \"true\",\n    className: \"components-resizable-tooltip__tooltip-wrapper\",\n    ref: ref,\n    style: style,\n    ...props,\n    children: /*#__PURE__*/_jsx(Tooltip, {\n      className: \"components-resizable-tooltip__tooltip\",\n      style: labelStyle,\n      children: /*#__PURE__*/_jsx(LabelText, {\n        as: \"span\",\n        children: label\n      })\n    })\n  });\n}\nconst ForwardedComponent = forwardRef(Label);\nexport default ForwardedComponent;"],
-  "mappings": ";AAOA,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAMtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,SAAS,iBAAiB;AACnD,SAAS,OAAO,YAAY;AAC5B,IAAM,gBAAgB;AACtB,IAAM,oBAAoB,gBAAgB;AAC1C,SAAS,MAAM;AAAA,EACb;AAAA,EACA,WAAW,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,GAAG;AACL,GAAG,KAAK;AACN,QAAM,YAAY,CAAC,CAAC;AACpB,QAAM,WAAW,aAAa,UAAU;AACxC,QAAM,WAAW,aAAa,UAAU;AACxC,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,MAAI,QAAQ;AAAA,IACV,SAAS,YAAY,IAAI;AAAA,IACzB;AAAA,EACF;AACA,MAAI,aAAa,CAAC;AAClB,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,UAAU;AAAA,MACV,QAAQ,oBAAoB;AAAA,MAC5B,MAAM;AAAA,MACN,WAAW;AAAA,IACb;AACA,iBAAa;AAAA,MACX,WAAW;AAAA,IACb;AAAA,EACF;AACA,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO,MAAM,IAAI,SAAY;AAAA,MAC7B,MAAM,MAAM,IAAI,gBAAgB;AAAA,IAClC;AAAA,EACF;AACA,SAAoB,qBAAK,gBAAgB;AAAA,IACvC,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAuB,qBAAK,SAAS;AAAA,MACnC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,UAAuB,qBAAK,WAAW;AAAA,QACrC,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAM,qBAAqB,WAAW,KAAK;AAC3C,IAAO,gBAAQ;",
+  "sources": ["../../../src/resizable-box/resize-tooltip/label.tsx", "../../../../style-runtime/src/index.ts", "../../../src/resizable-box/resize-tooltip/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { Text } from '../../text';\nimport { POSITIONS } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\nfunction Label({\n  label,\n  position = POSITIONS.corner,\n  zIndex = 1000,\n  ...props\n}, ref) {\n  const showLabel = !!label;\n  const isBottom = position === POSITIONS.bottom;\n  const isCorner = position === POSITIONS.corner;\n  if (!showLabel) {\n    return null;\n  }\n  let style = {\n    opacity: showLabel ? 1 : undefined,\n    zIndex\n  };\n  let labelStyle = {};\n  if (isBottom) {\n    style = {\n      ...style,\n      position: 'absolute',\n      bottom: CURSOR_OFFSET_TOP * -1,\n      left: '50%',\n      transform: 'translate(-50%, 0)'\n    };\n    labelStyle = {\n      transform: `translate(0, 100%)`\n    };\n  }\n  if (isCorner) {\n    style = {\n      ...style,\n      position: 'absolute',\n      top: CORNER_OFFSET,\n      right: isRTL() ? undefined : CORNER_OFFSET,\n      left: isRTL() ? CORNER_OFFSET : undefined\n    };\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    \"aria-hidden\": \"true\",\n    className: clsx('components-resizable-tooltip__tooltip-wrapper', styles['tooltip-wrapper']),\n    ref: ref,\n    style: style,\n    ...props,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      className: clsx('components-resizable-tooltip__tooltip', styles.tooltip),\n      style: labelStyle,\n      children: /*#__PURE__*/_jsx(Text, {\n        as: \"span\",\n        className: styles['label-text'],\n        children: label\n      })\n    })\n  });\n}\nconst ForwardedComponent = forwardRef(Label);\nexport default ForwardedComponent;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"6a3e579287\", \".f1c3c2f08c84bcca__root{box-sizing:border-box;inset:0;pointer-events:none;position:absolute}.dd094b49bf71dfd9__tooltip-wrapper{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s linear}.d768357cc581321f__tooltip{background:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));border-radius:2px;box-sizing:border-box;color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:12px;padding:4px 8px;position:relative}.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text{color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));display:block;font-size:13px;line-height:1.4;white-space:nowrap}\");\n}\nexport default {\"root\":\"f1c3c2f08c84bcca__root\",\"tooltip-wrapper\":\"dd094b49bf71dfd9__tooltip-wrapper\",\"tooltip\":\"d768357cc581321f__tooltip\",\"label-text\":\"a32e43dd68941abb__label-text\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/resizable-box/resize-tooltip/utils.mjs.map

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

package/build-module/responsive-wrapper/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/responsive-wrapper/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper({\n  naturalWidth,\n  naturalHeight,\n  children,\n  isInline = false\n}) {\n  if (Children.count(children) !== 1) {\n    return null;\n  }\n  const TagName = isInline ? 'span' : 'div';\n  let aspectRatio;\n  if (naturalWidth && naturalHeight) {\n    aspectRatio = `${naturalWidth} / ${naturalHeight}`;\n  }\n  return /*#__PURE__*/_jsx(TagName, {\n    className: \"components-responsive-wrapper\",\n    children: /*#__PURE__*/_jsx(\"div\", {\n      children: cloneElement(children, {\n        className: clsx('components-responsive-wrapper__content', children.props.className),\n        style: {\n          ...children.props.style,\n          aspectRatio\n        }\n      })\n    })\n  });\n}\nexport default ResponsiveWrapper;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,cAAc,gBAAgB;AAKvC,SAAS,OAAO,YAAY;AAiB5B,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAG;AACD,MAAI,SAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,WAAO;AAAA,EACT;AACA,QAAM,UAAU,WAAW,SAAS;AACpC,MAAI;AACJ,MAAI,gBAAgB,eAAe;AACjC,kBAAc,GAAG,YAAY,MAAM,aAAa;AAAA,EAClD;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC,WAAW;AAAA,IACX,UAAuB,qBAAK,OAAO;AAAA,MACjC,UAAU,aAAa,UAAU;AAAA,QAC/B,WAAW,KAAK,0CAA0C,SAAS,MAAM,SAAS;AAAA,QAClF,OAAO;AAAA,UACL,GAAG,SAAS,MAAM;AAAA,UAClB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,6BAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { cloneElement, Children } from '@wordpress/element';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper({\n  naturalWidth,\n  naturalHeight,\n  children,\n  isInline = false\n}) {\n  if (Children.count(children) !== 1) {\n    return null;\n  }\n  const TagName = isInline ? 'span' : 'div';\n  let aspectRatio;\n  if (naturalWidth && naturalHeight) {\n    aspectRatio = `${naturalWidth} / ${naturalHeight}`;\n  }\n  return /*#__PURE__*/_jsx(TagName, {\n    className: \"components-responsive-wrapper\",\n    children: /*#__PURE__*/_jsx(\"div\", {\n      children: cloneElement(children, {\n        className: clsx('components-responsive-wrapper__content', children.props.className),\n        style: {\n          ...children.props.style,\n          aspectRatio\n        }\n      })\n    })\n  });\n}\nexport default ResponsiveWrapper;"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,cAAc,gBAAgB;AACvC,SAAS,OAAO,YAAY;AAiB5B,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAG;AACD,MAAI,SAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,WAAO;AAAA,EACT;AACA,QAAM,UAAU,WAAW,SAAS;AACpC,MAAI;AACJ,MAAI,gBAAgB,eAAe;AACjC,kBAAc,GAAG,YAAY,MAAM,aAAa;AAAA,EAClD;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC,WAAW;AAAA,IACX,UAAuB,qBAAK,OAAO;AAAA,MACjC,UAAU,aAAa,UAAU;AAAA,QAC/B,WAAW,KAAK,0CAA0C,SAAS,MAAM,SAAS;AAAA,QAClF,OAAO;AAAA,UACL,GAAG,SAAS,MAAM;AAAA,UAClB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,6BAAQ;",
   "names": []
 }

package/build-module/sandbox/index.mjs

@@ -142,13 +142,15 @@ function IsolatedSandBox({
   scripts = [],
   onFocus,
   tabIndex,
-  allowPopups = false
+  allowPopups = false,
+  allowForms = false
 }) {
   const ref = useRef(null);
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
   const sandbox = clsx("allow-scripts", "allow-presentation", {
-    "allow-popups": allowPopups
+    "allow-popups": allowPopups,
+    "allow-forms": allowForms
   });
   const srcDoc = useMemo(() => buildSandBoxDocument({
     html,
@@ -220,13 +222,15 @@ function SameOriginSandBox({
   scripts = [],
   onFocus,
   tabIndex,
-  allowPopups = false
+  allowPopups = false,
+  allowForms = false
 }) {
   const ref = useRef(null);
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
   const sandbox = clsx("allow-scripts", "allow-same-origin", "allow-presentation", {
-    "allow-popups": allowPopups
+    "allow-popups": allowPopups,
+    "allow-forms": allowForms
   });
   function isFrameAccessible() {
     try {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sandbox/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { renderToString, useRef, useState, useEffect, useMemo } from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Matches CSS viewport-relative length values such as `100vh`, `50.5vw`,\n * and `.5dvh`. Used to strip viewport units from user-supplied HTML inside\n * the sandbox iframe, because those units are relative to the iframe's\n * own size and would create a measurement feedback loop with the\n * resize observer.\n *\n * Exported for tests. NOTE: an identical regex literal is duplicated\n * inside `observeAndResizeJS` below because that function is serialized\n * via `.toString()` and embedded into the iframe's `srcdoc` — it has no\n * access to this module's scope at runtime. If you change one, change\n * the other; the \"is embedded in the sandbox iframe srcdoc\" test\n * guards against drift.\n */\nexport const VIEWPORT_UNIT_VALUE_REGEX = /^\\d*\\.?\\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/;\nconst observeAndResizeJS = function () {\n  const {\n    MutationObserver\n  } = window;\n  if (!MutationObserver || !window.parent) {\n    return;\n  }\n  function sendResize() {\n    // This runs in the document <head>, and as a `load`/`resize` listener,\n    // so the body may not exist yet. Bail rather than throw on a null body.\n    if (!document.body) {\n      return;\n    }\n    const clientBoundingRect = document.body.getBoundingClientRect();\n    window.parent.postMessage({\n      action: 'resize',\n      width: clientBoundingRect.width,\n      height: clientBoundingRect.height\n    }, '*');\n  }\n\n  // Runs the body-dependent setup once the document body is available. Reads\n  // `document.body` into a local so the null check narrows it for the rest of\n  // the function: this runs in <head> and via DOMContentLoaded, so the body\n  // isn't guaranteed to exist yet.\n  function connect() {\n    const {\n      body\n    } = document;\n    if (!body) {\n      return;\n    }\n    const observer = new MutationObserver(sendResize);\n    observer.observe(body, {\n      attributes: true,\n      attributeOldValue: false,\n      characterData: true,\n      characterDataOldValue: false,\n      childList: true,\n      subtree: true\n    });\n\n    // Hack: Remove viewport unit styles, as these are relative\n    // the iframe root and interfere with our mechanism for\n    // determining the unconstrained page bounds.\n    function removeViewportStyles(ruleOrNode) {\n      if (ruleOrNode.style) {\n        ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {\n          if (/^\\d*\\.?\\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(ruleOrNode.style[style])) {\n            ruleOrNode.style[style] = '';\n          }\n        });\n      }\n    }\n    Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);\n    Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {\n      let rules;\n      try {\n        rules = stylesheet.cssRules || stylesheet.rules;\n      } catch {\n        // Reading `cssRules` throws a SecurityError for a\n        // cross-origin stylesheet (e.g. a remote <link> in the\n        // user's HTML). Skip those rather than aborting the setup.\n        return;\n      }\n      Array.prototype.forEach.call(rules, removeViewportStyles);\n    });\n    body.style.position = 'absolute';\n    body.style.width = '100%';\n    body.setAttribute('data-resizable-iframe-connected', '');\n    sendResize();\n  }\n  window.addEventListener('load', sendResize, true);\n\n  // Resize events can change the width of elements with 100% width, but we don't\n  // get an DOM mutations for that, so do the resize when the window is resized, too.\n  window.addEventListener('resize', sendResize, true);\n\n  // This script is injected into the document <head> so it parses before the\n  // (possibly malformed) user content in <body>: an unclosed attribute quote\n  // in that content can't then swallow this <script> tag and dump its source\n  // into the preview as visible text. Because <head> runs before <body>\n  // exists, defer the body-dependent setup until the DOM is ready.\n  if (document.body) {\n    connect();\n  } else {\n    document.addEventListener('DOMContentLoaded', connect);\n  }\n};\n\n// TODO: These styles shouldn't be coupled with WordPress.\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\n/**\n * Builds the full HTML document string for the sandbox iframe content. Shared\n * by both the isolated (`srcdoc`) and same-origin (`contentDocument.write`)\n * sandboxes so the two paths always emit the same markup — notably keeping the\n * resize script in `<head>`, ahead of the user content, on both. A single\n * builder means the write path cannot drift back to putting the script in\n * `<body>` while the `srcdoc` path keeps it in `<head>`.\n *\n * `lang` is passed in rather than read here because the two callers source it\n * from different documents: the isolated sandbox uses the module's `document`,\n * while the same-origin sandbox uses the iframe's `ownerDocument`. They are\n * normally the same document, but keeping the argument preserves each path's\n * exact prior behavior.\n *\n * Exported for tests.\n *\n * @param props\n * @param props.html    User-supplied HTML for the iframe body.\n * @param props.title   Document title.\n * @param props.type    Optional class name for the `<html>`/`<body>` elements.\n * @param props.styles  CSS rule strings, injected as `<style>` tags in the head.\n * @param props.scripts External script URLs, injected as `<script src>` in the\n *                      body (embeds expect their scripts there).\n * @param props.lang    Language for the `<html lang>` attribute.\n * @return The full `<!DOCTYPE html>…` document string.\n */\nexport function buildSandBoxDocument({\n  html,\n  title,\n  type,\n  styles,\n  scripts,\n  lang\n}) {\n  const htmlDoc = /*#__PURE__*/_jsxs(\"html\", {\n    lang: lang,\n    className: type,\n    children: [/*#__PURE__*/_jsxs(\"head\", {\n      children: [/*#__PURE__*/_jsx(\"title\", {\n        children: title\n      }), /*#__PURE__*/_jsx(\"style\", {\n        dangerouslySetInnerHTML: {\n          __html: style\n        }\n      }), styles.map((rules, i) => /*#__PURE__*/_jsx(\"style\", {\n        dangerouslySetInnerHTML: {\n          __html: rules\n        }\n      }, i)), /*#__PURE__*/_jsx(\"script\", {\n        type: \"text/javascript\",\n        dangerouslySetInnerHTML: {\n          __html: `(${observeAndResizeJS.toString()})();`\n        }\n      })]\n    }), /*#__PURE__*/_jsxs(\"body\", {\n      \"data-resizable-iframe-connected\": \"data-resizable-iframe-connected\",\n      className: type,\n      children: [/*#__PURE__*/_jsx(\"div\", {\n        dangerouslySetInnerHTML: {\n          __html: html\n        }\n      }), scripts.map(src => /*#__PURE__*/_jsx(\"script\", {\n        src: src\n      }, src))]\n    })]\n  });\n  return '<!DOCTYPE html>' + renderToString(htmlDoc);\n}\n\n/**\n * Isolated sandbox that uses the `srcdoc` attribute to render content\n * without `allow-same-origin`. This is the default for user-controlled\n * content (e.g., the HTML block) where same-origin access would be a\n * security risk.\n *\n * Because `srcdoc` is a declarative attribute, the browser automatically\n * re-renders the content when the iframe is moved in the DOM (e.g.,\n * block reordering), so no `load` event listener is needed.\n * The `message` listener is re-synced on every `load` so\n * it follows the iframe if it's reparented into a different document.\n */\nfunction IsolatedSandBox({\n  html = '',\n  title = '',\n  type,\n  styles = [],\n  scripts = [],\n  onFocus,\n  tabIndex,\n  allowPopups = false\n}) {\n  const ref = useRef(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const sandbox = clsx('allow-scripts', 'allow-presentation', {\n    'allow-popups': allowPopups\n  });\n  const srcDoc = useMemo(() => buildSandBoxDocument({\n    html,\n    title,\n    type,\n    styles,\n    scripts,\n    // Read inside the memo: the `no-dom-globals-in-react-fc` lint\n    // rule forbids DOM globals in the render body. `lang` rarely\n    // changes after load, so leaving it out of the deps is fine.\n    lang: document.documentElement.lang\n  }), [html, title, type, styles, scripts]);\n  useEffect(() => {\n    const iframe = ref.current;\n    if (!iframe) {\n      return;\n    }\n    function checkMessageForResize(event) {\n      // Verify that the mounted element is the source of the message.\n      // iframe.contentWindow is accessible cross-origin as a\n      // WindowProxy reference, so this check still works without\n      // allow-same-origin.\n      if (!iframe || iframe.contentWindow !== event.source) {\n        return;\n      }\n\n      // Attempt to parse the message data as JSON if passed as string.\n      let data = event.data || {};\n      if ('string' === typeof data) {\n        try {\n          data = JSON.parse(data);\n        } catch {}\n      }\n\n      // Update the state only if the message is formatted as we expect,\n      // i.e. as an object with a 'resize' action.\n      if ('resize' !== data.action) {\n        return;\n      }\n      setWidth(data.width);\n      setHeight(data.height);\n    }\n    let currentView = null;\n    function syncListener() {\n      const view = iframe?.ownerDocument?.defaultView ?? null;\n      if (view === currentView) {\n        return;\n      }\n      currentView?.removeEventListener('message', checkMessageForResize);\n      currentView = view;\n      currentView?.addEventListener('message', checkMessageForResize);\n    }\n    syncListener();\n    iframe.addEventListener('load', syncListener);\n    return () => {\n      iframe.removeEventListener('load', syncListener);\n      currentView?.removeEventListener('message', checkMessageForResize);\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(\"iframe\", {\n    ref: useMergeRefs([ref, useFocusableIframe()]),\n    title: title,\n    tabIndex: tabIndex,\n    className: \"components-sandbox\",\n    sandbox: sandbox,\n    srcDoc: srcDoc,\n    onFocus: onFocus,\n    width: Math.ceil(width),\n    height: Math.ceil(height)\n  });\n}\n\n/**\n * Same-origin sandbox that writes to `contentDocument` directly. This\n * preserves the parent page's URL as the iframe's document URL, which\n * provides a valid Referer header for nested iframes (required by\n * providers like YouTube).\n *\n * Only used when `allowSameOrigin` is true — i.e., for server-fetched\n * oEmbed previews that are not directly user-controlled.\n *\n * This implementation is intentionally kept close to the original\n * pre-refactor code to preserve past bugfixes:\n * - load listener for iframe re-initialization after DOM moves (#21916)\n * - forceRerender guard to avoid unnecessary full rewrites (#20176)\n */\nfunction SameOriginSandBox({\n  html = '',\n  title = '',\n  type,\n  styles = [],\n  scripts = [],\n  onFocus,\n  tabIndex,\n  allowPopups = false\n}) {\n  const ref = useRef(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const sandbox = clsx('allow-scripts', 'allow-same-origin', 'allow-presentation', {\n    'allow-popups': allowPopups\n  });\n  function isFrameAccessible() {\n    try {\n      return !!ref.current?.contentDocument?.body;\n    } catch {\n      return false;\n    }\n  }\n  function trySandBox(forceRerender = false) {\n    if (!isFrameAccessible()) {\n      return;\n    }\n    const {\n      contentDocument,\n      ownerDocument\n    } = ref.current;\n    if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) {\n      return;\n    }\n\n    // Put the html snippet into a html document, and then write it to the\n    // iframe's document. The external `scripts` still go into the body to\n    // support embedded content such as Instagram that expects them there;\n    // only the resize helper lives in the head.\n    //\n    // Writing the document like this makes it act in the same way as if it\n    // was loaded over the network, so DOM creation and mutation, script\n    // execution, etc. all work as expected.\n    contentDocument.open();\n    contentDocument.write(buildSandBoxDocument({\n      html,\n      title,\n      type,\n      styles,\n      scripts,\n      lang: ownerDocument.documentElement.lang\n    }));\n    contentDocument.close();\n  }\n  useEffect(() => {\n    trySandBox();\n    function tryNoForceSandBox() {\n      trySandBox(false);\n    }\n    function checkMessageForResize(event) {\n      const iframe = ref.current;\n\n      // Verify that the mounted element is the source of the message.\n      if (!iframe || iframe.contentWindow !== event.source) {\n        return;\n      }\n\n      // Attempt to parse the message data as JSON if passed as string.\n      let data = event.data || {};\n      if ('string' === typeof data) {\n        try {\n          data = JSON.parse(data);\n        } catch {}\n      }\n\n      // Update the state only if the message is formatted as we expect,\n      // i.e. as an object with a 'resize' action.\n      if ('resize' !== data.action) {\n        return;\n      }\n      setWidth(data.width);\n      setHeight(data.height);\n    }\n    const iframe = ref.current;\n    const defaultView = iframe?.ownerDocument?.defaultView;\n\n    // This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n    // after reordering the containing block. See these two issues for more details:\n    // https://github.com/WordPress/gutenberg/issues/6146\n    // https://github.com/facebook/react/issues/18752\n    iframe?.addEventListener('load', tryNoForceSandBox, false);\n    defaultView?.addEventListener('message', checkMessageForResize);\n    return () => {\n      iframe?.removeEventListener('load', tryNoForceSandBox, false);\n      defaultView?.removeEventListener('message', checkMessageForResize);\n    };\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, []);\n  useEffect(() => {\n    trySandBox();\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, [title, styles, scripts]);\n  useEffect(() => {\n    trySandBox(true);\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, [html, type]);\n  return /*#__PURE__*/_jsx(\"iframe\", {\n    ref: useMergeRefs([ref, useFocusableIframe()]),\n    title: title,\n    tabIndex: tabIndex,\n    className: \"components-sandbox\",\n    sandbox: sandbox,\n    onFocus: onFocus,\n    width: Math.ceil(width),\n    height: Math.ceil(height)\n  });\n}\n\n/**\n * This component provides an isolated environment for arbitrary HTML via iframes.\n *\n * ```jsx\n * import { SandBox } from '@wordpress/components';\n *\n * const MySandBox = () => (\n * \t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n * );\n * ```\n */\nfunction SandBox({\n  allowSameOrigin = false,\n  ...contentProps\n}) {\n  if (allowSameOrigin) {\n    return /*#__PURE__*/_jsx(SameOriginSandBox, {\n      ...contentProps\n    });\n  }\n  return /*#__PURE__*/_jsx(IsolatedSandBox, {\n    ...contentProps\n  });\n}\nexport default SandBox;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { renderToString, useRef, useState, useEffect, useMemo } from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Matches CSS viewport-relative length values such as `100vh`, `50.5vw`,\n * and `.5dvh`. Used to strip viewport units from user-supplied HTML inside\n * the sandbox iframe, because those units are relative to the iframe's\n * own size and would create a measurement feedback loop with the\n * resize observer.\n *\n * Exported for tests. NOTE: an identical regex literal is duplicated\n * inside `observeAndResizeJS` below because that function is serialized\n * via `.toString()` and embedded into the iframe's `srcdoc` — it has no\n * access to this module's scope at runtime. If you change one, change\n * the other; the \"is embedded in the sandbox iframe srcdoc\" test\n * guards against drift.\n */\nexport const VIEWPORT_UNIT_VALUE_REGEX = /^\\d*\\.?\\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/;\nconst observeAndResizeJS = function () {\n  const {\n    MutationObserver\n  } = window;\n  if (!MutationObserver || !window.parent) {\n    return;\n  }\n  function sendResize() {\n    // This runs in the document <head>, and as a `load`/`resize` listener,\n    // so the body may not exist yet. Bail rather than throw on a null body.\n    if (!document.body) {\n      return;\n    }\n    const clientBoundingRect = document.body.getBoundingClientRect();\n    window.parent.postMessage({\n      action: 'resize',\n      width: clientBoundingRect.width,\n      height: clientBoundingRect.height\n    }, '*');\n  }\n\n  // Runs the body-dependent setup once the document body is available. Reads\n  // `document.body` into a local so the null check narrows it for the rest of\n  // the function: this runs in <head> and via DOMContentLoaded, so the body\n  // isn't guaranteed to exist yet.\n  function connect() {\n    const {\n      body\n    } = document;\n    if (!body) {\n      return;\n    }\n    const observer = new MutationObserver(sendResize);\n    observer.observe(body, {\n      attributes: true,\n      attributeOldValue: false,\n      characterData: true,\n      characterDataOldValue: false,\n      childList: true,\n      subtree: true\n    });\n\n    // Hack: Remove viewport unit styles, as these are relative\n    // the iframe root and interfere with our mechanism for\n    // determining the unconstrained page bounds.\n    function removeViewportStyles(ruleOrNode) {\n      if (ruleOrNode.style) {\n        ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {\n          if (/^\\d*\\.?\\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(ruleOrNode.style[style])) {\n            ruleOrNode.style[style] = '';\n          }\n        });\n      }\n    }\n    Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);\n    Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {\n      let rules;\n      try {\n        rules = stylesheet.cssRules || stylesheet.rules;\n      } catch {\n        // Reading `cssRules` throws a SecurityError for a\n        // cross-origin stylesheet (e.g. a remote <link> in the\n        // user's HTML). Skip those rather than aborting the setup.\n        return;\n      }\n      Array.prototype.forEach.call(rules, removeViewportStyles);\n    });\n    body.style.position = 'absolute';\n    body.style.width = '100%';\n    body.setAttribute('data-resizable-iframe-connected', '');\n    sendResize();\n  }\n  window.addEventListener('load', sendResize, true);\n\n  // Resize events can change the width of elements with 100% width, but we don't\n  // get an DOM mutations for that, so do the resize when the window is resized, too.\n  window.addEventListener('resize', sendResize, true);\n\n  // This script is injected into the document <head> so it parses before the\n  // (possibly malformed) user content in <body>: an unclosed attribute quote\n  // in that content can't then swallow this <script> tag and dump its source\n  // into the preview as visible text. Because <head> runs before <body>\n  // exists, defer the body-dependent setup until the DOM is ready.\n  if (document.body) {\n    connect();\n  } else {\n    document.addEventListener('DOMContentLoaded', connect);\n  }\n};\n\n// TODO: These styles shouldn't be coupled with WordPress.\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\n/**\n * Builds the full HTML document string for the sandbox iframe content. Shared\n * by both the isolated (`srcdoc`) and same-origin (`contentDocument.write`)\n * sandboxes so the two paths always emit the same markup — notably keeping the\n * resize script in `<head>`, ahead of the user content, on both. A single\n * builder means the write path cannot drift back to putting the script in\n * `<body>` while the `srcdoc` path keeps it in `<head>`.\n *\n * `lang` is passed in rather than read here because the two callers source it\n * from different documents: the isolated sandbox uses the module's `document`,\n * while the same-origin sandbox uses the iframe's `ownerDocument`. They are\n * normally the same document, but keeping the argument preserves each path's\n * exact prior behavior.\n *\n * Exported for tests.\n *\n * @param props\n * @param props.html    User-supplied HTML for the iframe body.\n * @param props.title   Document title.\n * @param props.type    Optional class name for the `<html>`/`<body>` elements.\n * @param props.styles  CSS rule strings, injected as `<style>` tags in the head.\n * @param props.scripts External script URLs, injected as `<script src>` in the\n *                      body (embeds expect their scripts there).\n * @param props.lang    Language for the `<html lang>` attribute.\n * @return The full `<!DOCTYPE html>…` document string.\n */\nexport function buildSandBoxDocument({\n  html,\n  title,\n  type,\n  styles,\n  scripts,\n  lang\n}) {\n  const htmlDoc = /*#__PURE__*/_jsxs(\"html\", {\n    lang: lang,\n    className: type,\n    children: [/*#__PURE__*/_jsxs(\"head\", {\n      children: [/*#__PURE__*/_jsx(\"title\", {\n        children: title\n      }), /*#__PURE__*/_jsx(\"style\", {\n        dangerouslySetInnerHTML: {\n          __html: style\n        }\n      }), styles.map((rules, i) => /*#__PURE__*/_jsx(\"style\", {\n        dangerouslySetInnerHTML: {\n          __html: rules\n        }\n      }, i)), /*#__PURE__*/_jsx(\"script\", {\n        type: \"text/javascript\",\n        dangerouslySetInnerHTML: {\n          __html: `(${observeAndResizeJS.toString()})();`\n        }\n      })]\n    }), /*#__PURE__*/_jsxs(\"body\", {\n      \"data-resizable-iframe-connected\": \"data-resizable-iframe-connected\",\n      className: type,\n      children: [/*#__PURE__*/_jsx(\"div\", {\n        dangerouslySetInnerHTML: {\n          __html: html\n        }\n      }), scripts.map(src => /*#__PURE__*/_jsx(\"script\", {\n        src: src\n      }, src))]\n    })]\n  });\n  return '<!DOCTYPE html>' + renderToString(htmlDoc);\n}\n\n/**\n * Isolated sandbox that uses the `srcdoc` attribute to render content\n * without `allow-same-origin`. This is the default for user-controlled\n * content (e.g., the HTML block) where same-origin access would be a\n * security risk.\n *\n * Because `srcdoc` is a declarative attribute, the browser automatically\n * re-renders the content when the iframe is moved in the DOM (e.g.,\n * block reordering), so no `load` event listener is needed.\n * The `message` listener is re-synced on every `load` so\n * it follows the iframe if it's reparented into a different document.\n */\nfunction IsolatedSandBox({\n  html = '',\n  title = '',\n  type,\n  styles = [],\n  scripts = [],\n  onFocus,\n  tabIndex,\n  allowPopups = false,\n  allowForms = false\n}) {\n  const ref = useRef(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const sandbox = clsx('allow-scripts', 'allow-presentation', {\n    'allow-popups': allowPopups,\n    'allow-forms': allowForms\n  });\n  const srcDoc = useMemo(() => buildSandBoxDocument({\n    html,\n    title,\n    type,\n    styles,\n    scripts,\n    // Read inside the memo: the `no-dom-globals-in-react-fc` lint\n    // rule forbids DOM globals in the render body. `lang` rarely\n    // changes after load, so leaving it out of the deps is fine.\n    lang: document.documentElement.lang\n  }), [html, title, type, styles, scripts]);\n  useEffect(() => {\n    const iframe = ref.current;\n    if (!iframe) {\n      return;\n    }\n    function checkMessageForResize(event) {\n      // Verify that the mounted element is the source of the message.\n      // iframe.contentWindow is accessible cross-origin as a\n      // WindowProxy reference, so this check still works without\n      // allow-same-origin.\n      if (!iframe || iframe.contentWindow !== event.source) {\n        return;\n      }\n\n      // Attempt to parse the message data as JSON if passed as string.\n      let data = event.data || {};\n      if ('string' === typeof data) {\n        try {\n          data = JSON.parse(data);\n        } catch {}\n      }\n\n      // Update the state only if the message is formatted as we expect,\n      // i.e. as an object with a 'resize' action.\n      if ('resize' !== data.action) {\n        return;\n      }\n      setWidth(data.width);\n      setHeight(data.height);\n    }\n    let currentView = null;\n    function syncListener() {\n      const view = iframe?.ownerDocument?.defaultView ?? null;\n      if (view === currentView) {\n        return;\n      }\n      currentView?.removeEventListener('message', checkMessageForResize);\n      currentView = view;\n      currentView?.addEventListener('message', checkMessageForResize);\n    }\n    syncListener();\n    iframe.addEventListener('load', syncListener);\n    return () => {\n      iframe.removeEventListener('load', syncListener);\n      currentView?.removeEventListener('message', checkMessageForResize);\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(\"iframe\", {\n    ref: useMergeRefs([ref, useFocusableIframe()]),\n    title: title,\n    tabIndex: tabIndex,\n    className: \"components-sandbox\",\n    sandbox: sandbox,\n    srcDoc: srcDoc,\n    onFocus: onFocus,\n    width: Math.ceil(width),\n    height: Math.ceil(height)\n  });\n}\n\n/**\n * Same-origin sandbox that writes to `contentDocument` directly. This\n * preserves the parent page's URL as the iframe's document URL, which\n * provides a valid Referer header for nested iframes (required by\n * providers like YouTube).\n *\n * Only used when `allowSameOrigin` is true — i.e., for server-fetched\n * oEmbed previews that are not directly user-controlled.\n *\n * This implementation is intentionally kept close to the original\n * pre-refactor code to preserve past bugfixes:\n * - load listener for iframe re-initialization after DOM moves (#21916)\n * - forceRerender guard to avoid unnecessary full rewrites (#20176)\n */\nfunction SameOriginSandBox({\n  html = '',\n  title = '',\n  type,\n  styles = [],\n  scripts = [],\n  onFocus,\n  tabIndex,\n  allowPopups = false,\n  allowForms = false\n}) {\n  const ref = useRef(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const sandbox = clsx('allow-scripts', 'allow-same-origin', 'allow-presentation', {\n    'allow-popups': allowPopups,\n    'allow-forms': allowForms\n  });\n  function isFrameAccessible() {\n    try {\n      return !!ref.current?.contentDocument?.body;\n    } catch {\n      return false;\n    }\n  }\n  function trySandBox(forceRerender = false) {\n    if (!isFrameAccessible()) {\n      return;\n    }\n    const {\n      contentDocument,\n      ownerDocument\n    } = ref.current;\n    if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) {\n      return;\n    }\n\n    // Put the html snippet into a html document, and then write it to the\n    // iframe's document. The external `scripts` still go into the body to\n    // support embedded content such as Instagram that expects them there;\n    // only the resize helper lives in the head.\n    //\n    // Writing the document like this makes it act in the same way as if it\n    // was loaded over the network, so DOM creation and mutation, script\n    // execution, etc. all work as expected.\n    contentDocument.open();\n    contentDocument.write(buildSandBoxDocument({\n      html,\n      title,\n      type,\n      styles,\n      scripts,\n      lang: ownerDocument.documentElement.lang\n    }));\n    contentDocument.close();\n  }\n  useEffect(() => {\n    trySandBox();\n    function tryNoForceSandBox() {\n      trySandBox(false);\n    }\n    function checkMessageForResize(event) {\n      const iframe = ref.current;\n\n      // Verify that the mounted element is the source of the message.\n      if (!iframe || iframe.contentWindow !== event.source) {\n        return;\n      }\n\n      // Attempt to parse the message data as JSON if passed as string.\n      let data = event.data || {};\n      if ('string' === typeof data) {\n        try {\n          data = JSON.parse(data);\n        } catch {}\n      }\n\n      // Update the state only if the message is formatted as we expect,\n      // i.e. as an object with a 'resize' action.\n      if ('resize' !== data.action) {\n        return;\n      }\n      setWidth(data.width);\n      setHeight(data.height);\n    }\n    const iframe = ref.current;\n    const defaultView = iframe?.ownerDocument?.defaultView;\n\n    // This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n    // after reordering the containing block. See these two issues for more details:\n    // https://github.com/WordPress/gutenberg/issues/6146\n    // https://github.com/facebook/react/issues/18752\n    iframe?.addEventListener('load', tryNoForceSandBox, false);\n    defaultView?.addEventListener('message', checkMessageForResize);\n    return () => {\n      iframe?.removeEventListener('load', tryNoForceSandBox, false);\n      defaultView?.removeEventListener('message', checkMessageForResize);\n    };\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, []);\n  useEffect(() => {\n    trySandBox();\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, [title, styles, scripts]);\n  useEffect(() => {\n    trySandBox(true);\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, [html, type]);\n  return /*#__PURE__*/_jsx(\"iframe\", {\n    ref: useMergeRefs([ref, useFocusableIframe()]),\n    title: title,\n    tabIndex: tabIndex,\n    className: \"components-sandbox\",\n    sandbox: sandbox,\n    onFocus: onFocus,\n    width: Math.ceil(width),\n    height: Math.ceil(height)\n  });\n}\n\n/**\n * This component provides an isolated environment for arbitrary HTML via iframes.\n *\n * ```jsx\n * import { SandBox } from '@wordpress/components';\n *\n * const MySandBox = () => (\n * \t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n * );\n * ```\n */\nfunction SandBox({\n  allowSameOrigin = false,\n  ...contentProps\n}) {\n  if (allowSameOrigin) {\n    return /*#__PURE__*/_jsx(SameOriginSandBox, {\n      ...contentProps\n    });\n  }\n  return /*#__PURE__*/_jsx(IsolatedSandBox, {\n    ...contentProps\n  });\n}\nexport default SandBox;"],
+  "mappings": "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",
   "names": ["style", "iframe"]
 }