@wordpress/components 39.0.0 → 40.1.0

package/build-module/progress-bar/index.mjs

@@ -1,7 +1,92 @@
 // packages/components/src/progress-bar/index.tsx
+import clsx from "clsx";
 import { __ } from "@wordpress/i18n";
 import { forwardRef } from "@wordpress/element";
-import * as ProgressBarStyled from "./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/progress-bar/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("582b000aec", "._1d8296bd910bb7bb__track{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 90%);border-radius:9999px;height:1.5px;outline:2px solid transparent;outline-offset:2px;overflow:hidden;position:relative}:where(._1d8296bd910bb7bb__track){width:160px}.be702ee1b0a3c396__indicator{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 10%);border-radius:9999px;display:inline-block;height:100%;outline:2px solid transparent;outline-offset:-2px;position:absolute;top:0;width:var(--indicator-width)}@media not (prefers-reduced-motion){.be702ee1b0a3c396__indicator{transition:width .4s ease-in-out}}.be702ee1b0a3c396__indicator._125afa179e2803a2__is-indeterminate{--indicator-width:50%;animation:_7c6b2fa174e0d687__indeterminate-slide 1.5s ease-in-out infinite;transition:none}@media (prefers-reduced-motion:reduce){.be702ee1b0a3c396__indicator._125afa179e2803a2__is-indeterminate{animation-duration:3s;animation-timing-function:steps(4)}}@keyframes _7c6b2fa174e0d687__indeterminate-slide{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}._4c47edc54d8dcb46__progress-element{height:100%;inset-inline-start:0;opacity:0;position:absolute;top:0;width:100%}");
+}
+var style_module_default = { "track": "_1d8296bd910bb7bb__track", "indicator": "be702ee1b0a3c396__indicator", "is-indeterminate": "_125afa179e2803a2__is-indeterminate", "indeterminate-slide": "_7c6b2fa174e0d687__indeterminate-slide", "progress-element": "_4c47edc54d8dcb46__progress-element" };
+
+// packages/components/src/progress-bar/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedProgressBar(props, ref) {
   const {
@@ -10,14 +95,17 @@ function UnforwardedProgressBar(props, ref) {
     ...progressProps
   } = props;
   const isIndeterminate = !Number.isFinite(value);
-  return /* @__PURE__ */ _jsxs(ProgressBarStyled.Track, {
-    className,
-    children: [/* @__PURE__ */ _jsx(ProgressBarStyled.Indicator, {
+  return /* @__PURE__ */ _jsxs("div", {
+    className: clsx(style_module_default.track, className),
+    children: [/* @__PURE__ */ _jsx("div", {
+      className: clsx(style_module_default.indicator, {
+        [style_module_default["is-indeterminate"]]: isIndeterminate
+      }),
       style: {
         "--indicator-width": !isIndeterminate ? `${value}%` : void 0
-      },
-      isIndeterminate
-    }), /* @__PURE__ */ _jsx(ProgressBarStyled.ProgressElement, {
+      }
+    }), /* @__PURE__ */ _jsx("progress", {
+      className: style_module_default["progress-element"],
       max: 100,
       value,
       "aria-label": __("Loading …"),

package/build-module/progress-bar/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/progress-bar/index.tsx"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport * as ProgressBarStyled from './styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedProgressBar(props, ref) {\n  const {\n    className,\n    value,\n    ...progressProps\n  } = props;\n  const isIndeterminate = !Number.isFinite(value);\n  return /*#__PURE__*/_jsxs(ProgressBarStyled.Track, {\n    className: className,\n    children: [/*#__PURE__*/_jsx(ProgressBarStyled.Indicator, {\n      style: {\n        '--indicator-width': !isIndeterminate ? `${value}%` : undefined\n      },\n      isIndeterminate: isIndeterminate\n    }), /*#__PURE__*/_jsx(ProgressBarStyled.ProgressElement, {\n      max: 100,\n      value: value,\n      \"aria-label\": __('Loading …'),\n      ref: ref,\n      ...progressProps\n    })]\n  });\n}\n\n/**\n * A simple horizontal progress bar component.\n *\n * Supports two modes: determinate and indeterminate. A progress bar is determinate\n * when a specific progress value has been specified (from 0 to 100), and indeterminate\n * when a value hasn't been specified.\n *\n * ```jsx\n * import { ProgressBar } from '@wordpress/components';\n *\n * const MyLoadingComponent = () => {\n * \treturn <ProgressBar />;\n * };\n * ```\n */\nexport const ProgressBar = forwardRef(UnforwardedProgressBar);\nProgressBar.displayName = 'ProgressBar';\nexport default ProgressBar;"],
-  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,YAAY,uBAAuB;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,kBAAkB,CAAC,OAAO,SAAS,KAAK;AAC9C,SAAoB,sBAAwB,yBAAO;AAAA,IACjD;AAAA,IACA,UAAU,CAAc,qBAAuB,6BAAW;AAAA,MACxD,OAAO;AAAA,QACL,qBAAqB,CAAC,kBAAkB,GAAG,KAAK,MAAM;AAAA,MACxD;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,qBAAuB,mCAAiB;AAAA,MACvD,KAAK;AAAA,MACL;AAAA,MACA,cAAc,GAAG,WAAW;AAAA,MAC5B;AAAA,MACA,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAiBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
+  "sources": ["../../src/progress-bar/index.tsx", "../../../style-runtime/src/index.ts", "../../src/progress-bar/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedProgressBar(props, ref) {\n  const {\n    className,\n    value,\n    ...progressProps\n  } = props;\n  const isIndeterminate = !Number.isFinite(value);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx(styles.track, className),\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: clsx(styles.indicator, {\n        [styles['is-indeterminate']]: isIndeterminate\n      }),\n      style: {\n        '--indicator-width': !isIndeterminate ? `${value}%` : undefined\n      }\n    }), /*#__PURE__*/_jsx(\"progress\", {\n      className: styles['progress-element'],\n      max: 100,\n      value: value,\n      \"aria-label\": __('Loading …'),\n      ref: ref,\n      ...progressProps\n    })]\n  });\n}\n\n/**\n * A simple horizontal progress bar component.\n *\n * Supports two modes: determinate and indeterminate. A progress bar is determinate\n * when a specific progress value has been specified (from 0 to 100), and indeterminate\n * when a value hasn't been specified.\n *\n * ```jsx\n * import { ProgressBar } from '@wordpress/components';\n *\n * const MyLoadingComponent = () => {\n * \treturn <ProgressBar />;\n * };\n * ```\n */\nexport const ProgressBar = forwardRef(UnforwardedProgressBar);\nProgressBar.displayName = 'ProgressBar';\nexport default ProgressBar;", "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(\"582b000aec\", \"._1d8296bd910bb7bb__track{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 90%);border-radius:9999px;height:1.5px;outline:2px solid transparent;outline-offset:2px;overflow:hidden;position:relative}:where(._1d8296bd910bb7bb__track){width:160px}.be702ee1b0a3c396__indicator{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 10%);border-radius:9999px;display:inline-block;height:100%;outline:2px solid transparent;outline-offset:-2px;position:absolute;top:0;width:var(--indicator-width)}@media not (prefers-reduced-motion){.be702ee1b0a3c396__indicator{transition:width .4s ease-in-out}}.be702ee1b0a3c396__indicator._125afa179e2803a2__is-indeterminate{--indicator-width:50%;animation:_7c6b2fa174e0d687__indeterminate-slide 1.5s ease-in-out infinite;transition:none}@media (prefers-reduced-motion:reduce){.be702ee1b0a3c396__indicator._125afa179e2803a2__is-indeterminate{animation-duration:3s;animation-timing-function:steps(4)}}@keyframes _7c6b2fa174e0d687__indeterminate-slide{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}._4c47edc54d8dcb46__progress-element{height:100%;inset-inline-start:0;opacity:0;position:absolute;top:0;width:100%}\");\n}\nexport default {\"track\":\"_1d8296bd910bb7bb__track\",\"indicator\":\"be702ee1b0a3c396__indicator\",\"is-indeterminate\":\"_125afa179e2803a2__is-indeterminate\",\"indeterminate-slide\":\"_7c6b2fa174e0d687__indeterminate-slide\",\"progress-element\":\"_4c47edc54d8dcb46__progress-element\"};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -59,6 +59,7 @@ function RadioControl(props) {
           type: "radio",
           name: id,
           value: option.value,
+          disabled: option.disabled,
           onChange: onChangeValue,
           checked: option.value === selected,
           "aria-describedby": !!option.description ? generateOptionDescriptionId(id, index) : void 0,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/radio-control/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n  return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(props) {\n  const {\n    label,\n    className,\n    selected,\n    help,\n    onChange,\n    onClick,\n    hideLabelFromVision,\n    disabled,\n    options = [],\n    id: preferredId,\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n  const onChangeValue = event => onChange(event.target.value);\n  if (!options?.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(\"fieldset\", {\n    id: id,\n    role: \"radiogroup\",\n    className: clsx(className, 'components-radio-control'),\n    disabled: disabled,\n    \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(VStack, {\n      spacing: 3,\n      className: clsx('components-radio-control__group-wrapper', {\n        'has-help': !!help\n      }),\n      children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-radio-control__option\",\n        children: [/*#__PURE__*/_jsx(\"input\", {\n          id: generateOptionId(id, index),\n          className: \"components-radio-control__input\",\n          type: \"radio\",\n          name: id,\n          value: option.value,\n          onChange: onChangeValue,\n          checked: option.value === selected,\n          \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n          onClick: event => {\n            // Compat code for Safari to ensure that the radio is focused when clicked.\n            event.currentTarget.focus();\n            onClick?.(event);\n          },\n          ...additionalProps\n        }), /*#__PURE__*/_jsx(\"label\", {\n          className: \"components-radio-control__label\",\n          htmlFor: generateOptionId(id, index),\n          children: option.label\n        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n          id: generateOptionDescriptionId(id, index),\n          className: \"components-radio-control__option-description\",\n          children: option.description\n        }) : null]\n      }, generateOptionId(id, index)))\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      id: generateHelpId(id),\n      className: \"components-base-control__help\",\n      children: help\n    })]\n  });\n}\nexport default RadioControl;"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,sBAAM,YAAY;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,IACN,WAAW,KAAK,WAAW,0BAA0B;AAAA,IACrD;AAAA,IACA,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,qBAAK,gBAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,qBAAK,YAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,WAAW,KAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,sBAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,qBAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,qBAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,qBAAK,YAAY;AAAA,UACvD,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,qBAAK,YAAY;AAAA,MAC1C,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n  return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(props) {\n  const {\n    label,\n    className,\n    selected,\n    help,\n    onChange,\n    onClick,\n    hideLabelFromVision,\n    disabled,\n    options = [],\n    id: preferredId,\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n  const onChangeValue = event => onChange(event.target.value);\n  if (!options?.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(\"fieldset\", {\n    id: id,\n    role: \"radiogroup\",\n    className: clsx(className, 'components-radio-control'),\n    disabled: disabled,\n    \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(VStack, {\n      spacing: 3,\n      className: clsx('components-radio-control__group-wrapper', {\n        'has-help': !!help\n      }),\n      children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-radio-control__option\",\n        children: [/*#__PURE__*/_jsx(\"input\", {\n          id: generateOptionId(id, index),\n          className: \"components-radio-control__input\",\n          type: \"radio\",\n          name: id,\n          value: option.value,\n          disabled: option.disabled,\n          onChange: onChangeValue,\n          checked: option.value === selected,\n          \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n          onClick: event => {\n            // Compat code for Safari to ensure that the radio is focused when clicked.\n            event.currentTarget.focus();\n            onClick?.(event);\n          },\n          ...additionalProps\n        }), /*#__PURE__*/_jsx(\"label\", {\n          className: \"components-radio-control__label\",\n          htmlFor: generateOptionId(id, index),\n          children: option.label\n        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n          id: generateOptionDescriptionId(id, index),\n          className: \"components-radio-control__option-description\",\n          children: option.description\n        }) : null]\n      }, generateOptionId(id, index)))\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      id: generateHelpId(id),\n      className: \"components-base-control__help\",\n      children: help\n    })]\n  });\n}\nexport default RadioControl;"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,sBAAM,YAAY;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,IACN,WAAW,KAAK,WAAW,0BAA0B;AAAA,IACrD;AAAA,IACA,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,qBAAK,gBAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,qBAAK,YAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,WAAW,KAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,sBAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,qBAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,qBAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,qBAAK,YAAY;AAAA,UACvD,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,qBAAK,YAAY;AAAA,MAC1C,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/resizable-box/index.tsx"],
-  "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;"],
+  "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 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": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\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": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,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": ["import { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\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": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,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": []
 }