@wordpress/components 37.0.0 → 38.0.0

package/build-module/toggle-group-control/toggle-group-control/component.mjs

@@ -1,10 +1,94 @@
 // packages/components/src/toggle-group-control/toggle-group-control/component.tsx
-import { useMemo, useState } from "@wordpress/element";
+import clsx from "clsx";
+import { useState } from "@wordpress/element";
 import { useMergeRefs } from "@wordpress/compose";
 import { contextConnect, useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/hooks/index.mjs";
 import BaseControl, { useBaseControlProps } from "../../base-control/index.mjs";
-import * as styles 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/toggle-group-control/toggle-group-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("ac15433bd4", '.f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:"";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}');
+}
+var style_module_default = { "toggle-group-control": "f3fd102dd2f0e90e__toggle-group-control", "has-border": "_1344586004ce6119__has-border", "has-enclosing-borders": "aa98fad5b5d333be__has-enclosing-borders", "is-block": "_4068eff8d72c19b3__is-block" };
+
+// packages/components/src/toggle-group-control/toggle-group-control/component.tsx
 import { ToggleGroupControlAsRadioGroup } from "./as-radio-group.mjs";
 import { ToggleGroupControlAsButtonGroup } from "./as-button-group.mjs";
 import { useTrackElementOffsetRect } from "../../utils/element-rect.mjs";
@@ -16,7 +100,6 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     __nextHasNoMarginBottom: _,
     size: _size,
     __next40pxDefaultSize: _next40pxDefaultSize,
-    __shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
     className,
     isAdaptiveWidth = false,
     isBlock = false,
@@ -49,11 +132,11 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     transitionEndFilter: (event) => event.pseudoElement === "::before",
     roundRect: false
   });
-  const cx = useCx();
-  const classes = useMemo(() => cx(styles.toggleGroupControl({
-    isBlock,
-    isDeselectable
-  }), className), [className, cx, isBlock, isDeselectable]);
+  const classes = clsx(style_module_default["toggle-group-control"], {
+    [style_module_default["is-block"]]: isBlock,
+    [style_module_default["has-border"]]: isBlock && !isDeselectable,
+    [style_module_default["has-enclosing-borders"]]: !isDeselectable
+  }, className);
   const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
   return /* @__PURE__ */ _jsx(BaseControl, {
     ...baseControlProps,

package/build-module/toggle-group-control/toggle-group-control/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/toggle-group-control/toggle-group-control/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __nextHasNoMarginBottom: _,\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.toggleGroupControl({\n    isBlock,\n    isDeselectable\n  }), className), [className, cx, isBlock, isDeselectable]);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      value: value,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;"],
-  "mappings": ";AAOA,SAAS,SAAS,gBAAgB;AAClC,SAAS,oBAAoB;AAM7B,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,aAAa;AACtB,OAAO,eAAe,2BAA2B;AACjD,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,OAAO,YAAY;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB,mCAAmC;AAAA,IACnC;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AACrD,QAAM,OAAO,aAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,eAAe,0BAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,wBAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM,GAAU,0BAAmB;AAAA,IACzD;AAAA,IACA;AAAA,EACF,CAAC,GAAG,SAAS,GAAG,CAAC,WAAW,IAAI,SAAS,cAAc,CAAC;AACxD,QAAM,cAAc,iBAAiB,kCAAkC;AACvE,SAAoB,qBAAK,aAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,qBAAK,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAIA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAmCO,IAAM,qBAAqB,eAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
+  "sources": ["../../../src/toggle-group-control/toggle-group-control/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/toggle-group-control/toggle-group-control/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport styles from './style.module.scss';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __nextHasNoMarginBottom: _,\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const classes = clsx(styles['toggle-group-control'], {\n    [styles['is-block']]: isBlock,\n    [styles['has-border']]: isBlock && !isDeselectable,\n    [styles['has-enclosing-borders']]: !isDeselectable\n  }, className);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      value: value,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;", "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(\"ac15433bd4\", \".f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:\\\"\\\";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}\");\n}\nexport default {\"toggle-group-control\":\"f3fd102dd2f0e90e__toggle-group-control\",\"has-border\":\"_1344586004ce6119__has-border\",\"has-enclosing-borders\":\"aa98fad5b5d333be__has-enclosing-borders\",\"is-block\":\"_4068eff8d72c19b3__is-block\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option-base/component.mjs

@@ -1,17 +1,97 @@
 // packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+import clsx from "clsx";
 import * as Ariakit from "@ariakit/react";
 import { useInstanceId } from "@wordpress/compose";
-import { useLayoutEffect, useMemo, useRef } from "@wordpress/element";
+import { useLayoutEffect, useRef } from "@wordpress/element";
 import { contextConnect, useContextSystem } from "../../context/index.mjs";
 import { useToggleGroupControlContext } from "../context.mjs";
-import * as styles from "./styles.mjs";
-import { useCx } from "../../utils/hooks/index.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/toggle-group-control/toggle-group-control-option-base/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a044fd0bb7", "._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}");
+}
+var style_module_default = { "label": "_1dec843460a3c9d5__label", "label-block": "_50ddec5669c9d4a6__label-block", "button": "_1563c8aa5e21d063__button", "is-deselectable": "e1b6a1f76b7eb2bb__is-deselectable", "is-icon": "_407216dd3e301287__is-icon", "is-pressed": "_617c0f0a1c161590__is-pressed", "button-content": "_2850882d974e5419__button-content" };
+
+// packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
 import Tooltip from "../../tooltip/index.mjs";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-var {
-  ButtonContentView,
-  LabelView
-} = styles;
 var WithToolTip = ({
   showTooltip,
   text,
@@ -49,13 +129,12 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     ...otherButtonProps
   } = buttonProps;
   const isPressed = toggleGroupControlContext.value === value;
-  const cx = useCx();
-  const labelViewClasses = useMemo(() => cx(isBlock && styles.labelBlock), [cx, isBlock]);
-  const itemClasses = useMemo(() => cx(styles.buttonView({
-    isDeselectable,
-    isIcon,
-    isPressed
-  }), className), [cx, isDeselectable, isIcon, isPressed, className]);
+  const labelClasses = clsx(style_module_default.label, isBlock && style_module_default["label-block"]);
+  const itemClasses = clsx(style_module_default.button, {
+    [style_module_default["is-deselectable"]]: isDeselectable,
+    [style_module_default["is-icon"]]: isIcon,
+    [style_module_default["is-pressed"]]: isPressed
+  }, className);
   const buttonOnClick = () => {
     if (isDeselectable && isPressed) {
       toggleGroupControlContext.setValue(void 0);
@@ -75,9 +154,9 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       toggleGroupControlContext.setSelectedElement(labelRef.current);
     }
   }, [isPressed, toggleGroupControlContext]);
-  return /* @__PURE__ */ _jsx(LabelView, {
+  return /* @__PURE__ */ _jsx("div", {
     ref: labelRef,
-    className: labelViewClasses,
+    className: labelClasses,
     children: /* @__PURE__ */ _jsx(WithToolTip, {
       showTooltip,
       text: otherButtonProps["aria-label"],
@@ -87,7 +166,8 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
         "aria-pressed": isPressed,
         type: "button",
         onClick: buttonOnClick,
-        children: /* @__PURE__ */ _jsx(ButtonContentView, {
+        children: /* @__PURE__ */ _jsx("div", {
+          className: style_module_default["button-content"],
           children
         })
       }) : /* @__PURE__ */ _jsx(Ariakit.Radio, {
@@ -103,7 +183,8 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
           ...commonProps
         }),
         value,
-        children: /* @__PURE__ */ _jsx(ButtonContentView, {
+        children: /* @__PURE__ */ _jsx("div", {
+          className: style_module_default["button-content"],
           children
         })
       })

package/build-module/toggle-group-control/toggle-group-control-option-base/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst {\n  ButtonContentView,\n  LabelView\n} = styles;\nconst WithToolTip = ({\n  showTooltip,\n  text,\n  children\n}) => {\n  if (showTooltip && text) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: text,\n      placement: \"top\",\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n  const toggleGroupControlContext = useToggleGroupControlContext();\n  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n  const buttonProps = useContextSystem({\n    ...props,\n    id\n  }, 'ToggleGroupControlOptionBase');\n  const {\n    isBlock = false,\n    isDeselectable = false\n  } = toggleGroupControlContext;\n  const {\n    className,\n    isIcon = false,\n    value,\n    children,\n    showTooltip = false,\n    disabled,\n    ...otherButtonProps\n  } = buttonProps;\n  const isPressed = toggleGroupControlContext.value === value;\n  const cx = useCx();\n  const labelViewClasses = useMemo(() => cx(isBlock && styles.labelBlock), [cx, isBlock]);\n  const itemClasses = useMemo(() => cx(styles.buttonView({\n    isDeselectable,\n    isIcon,\n    isPressed\n  }), className), [cx, isDeselectable, isIcon, isPressed, className]);\n  const buttonOnClick = () => {\n    if (isDeselectable && isPressed) {\n      toggleGroupControlContext.setValue(undefined);\n    } else {\n      toggleGroupControlContext.setValue(value);\n    }\n  };\n  const commonProps = {\n    ...otherButtonProps,\n    className: itemClasses,\n    'data-value': value,\n    ref: forwardedRef\n  };\n  const labelRef = useRef(null);\n  useLayoutEffect(() => {\n    if (isPressed && labelRef.current) {\n      toggleGroupControlContext.setSelectedElement(labelRef.current);\n    }\n  }, [isPressed, toggleGroupControlContext]);\n  return /*#__PURE__*/_jsx(LabelView, {\n    ref: labelRef,\n    className: labelViewClasses,\n    children: /*#__PURE__*/_jsx(WithToolTip, {\n      showTooltip: showTooltip,\n      text: otherButtonProps['aria-label'],\n      children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n        ...commonProps,\n        disabled: disabled,\n        \"aria-pressed\": isPressed,\n        type: \"button\",\n        onClick: buttonOnClick,\n        children: /*#__PURE__*/_jsx(ButtonContentView, {\n          children: children\n        })\n      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n        disabled: disabled,\n        onFocusVisible: () => {\n          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n          // Conditions ensure that the first visible focus to a radio group\n          // without a selected option will not automatically select the option.\n          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n            toggleGroupControlContext.setValue(value);\n          }\n        },\n        render: /*#__PURE__*/_jsx(\"button\", {\n          type: \"button\",\n          ...commonProps\n        }),\n        value: value,\n        children: /*#__PURE__*/_jsx(ButtonContentView, {\n          children: children\n        })\n      })\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;"],
-  "mappings": "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",
+  "sources": ["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/toggle-group-control/toggle-group-control-option-base/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport styles from './style.module.scss';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst WithToolTip = ({\n  showTooltip,\n  text,\n  children\n}) => {\n  if (showTooltip && text) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: text,\n      placement: \"top\",\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n  const toggleGroupControlContext = useToggleGroupControlContext();\n  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n  const buttonProps = useContextSystem({\n    ...props,\n    id\n  }, 'ToggleGroupControlOptionBase');\n  const {\n    isBlock = false,\n    isDeselectable = false\n  } = toggleGroupControlContext;\n  const {\n    className,\n    isIcon = false,\n    value,\n    children,\n    showTooltip = false,\n    disabled,\n    ...otherButtonProps\n  } = buttonProps;\n  const isPressed = toggleGroupControlContext.value === value;\n  const labelClasses = clsx(styles.label, isBlock && styles['label-block']);\n  const itemClasses = clsx(styles.button, {\n    [styles['is-deselectable']]: isDeselectable,\n    [styles['is-icon']]: isIcon,\n    [styles['is-pressed']]: isPressed\n  }, className);\n  const buttonOnClick = () => {\n    if (isDeselectable && isPressed) {\n      toggleGroupControlContext.setValue(undefined);\n    } else {\n      toggleGroupControlContext.setValue(value);\n    }\n  };\n  const commonProps = {\n    ...otherButtonProps,\n    className: itemClasses,\n    'data-value': value,\n    ref: forwardedRef\n  };\n  const labelRef = useRef(null);\n  useLayoutEffect(() => {\n    if (isPressed && labelRef.current) {\n      toggleGroupControlContext.setSelectedElement(labelRef.current);\n    }\n  }, [isPressed, toggleGroupControlContext]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: labelRef,\n    className: labelClasses,\n    children: /*#__PURE__*/_jsx(WithToolTip, {\n      showTooltip: showTooltip,\n      text: otherButtonProps['aria-label'],\n      children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n        ...commonProps,\n        disabled: disabled,\n        \"aria-pressed\": isPressed,\n        type: \"button\",\n        onClick: buttonOnClick,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n        disabled: disabled,\n        onFocusVisible: () => {\n          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n          // Conditions ensure that the first visible focus to a radio group\n          // without a selected option will not automatically select the option.\n          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n            toggleGroupControlContext.setValue(value);\n          }\n        },\n        render: /*#__PURE__*/_jsx(\"button\", {\n          type: \"button\",\n          ...commonProps\n        }),\n        value: value,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      })\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;", "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(\"a044fd0bb7\", \"._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}\");\n}\nexport default {\"label\":\"_1dec843460a3c9d5__label\",\"label-block\":\"_50ddec5669c9d4a6__label-block\",\"button\":\"_1563c8aa5e21d063__button\",\"is-deselectable\":\"e1b6a1f76b7eb2bb__is-deselectable\",\"is-icon\":\"_407216dd3e301287__is-icon\",\"is-pressed\":\"_617c0f0a1c161590__is-pressed\",\"button-content\":\"_2850882d974e5419__button-content\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/tools-panel/tools-panel/component.mjs

@@ -4,7 +4,9 @@ import { ToolsPanelContext } from "../context.mjs";
 import { useToolsPanel } from "./hook.mjs";
 import { Grid } from "../../grid/index.mjs";
 import { contextConnect } from "../../context/index.mjs";
+import { space } from "../../utils/space.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TOOLS_PANEL_GAP = space(4);
 var UnconnectedToolsPanel = (props, forwardedRef) => {
   const {
     children,
@@ -19,6 +21,10 @@ var UnconnectedToolsPanel = (props, forwardedRef) => {
   return /* @__PURE__ */ _jsx(Grid, {
     ...toolsPanelProps,
     columns: 2,
+    gap: 4,
+    columnGap: TOOLS_PANEL_GAP,
+    rowGap: TOOLS_PANEL_GAP,
+    templateColumns: "repeat( 2, minmax(0, 1fr) )",
     ref: forwardedRef,
     children: /* @__PURE__ */ _jsxs(ToolsPanelContext.Provider, {
       value: panelContext,

package/build-module/tools-panel/tools-panel/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tools-panel/tools-panel/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { Grid } from '../../grid';\nimport { contextConnect } from '../../context';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnconnectedToolsPanel = (props, forwardedRef) => {\n  const {\n    children,\n    label,\n    panelContext,\n    resetAllItems,\n    toggleItem,\n    headingLevel,\n    dropdownMenuProps,\n    ...toolsPanelProps\n  } = useToolsPanel(props);\n  return /*#__PURE__*/_jsx(Grid, {\n    ...toolsPanelProps,\n    columns: 2,\n    ref: forwardedRef,\n    children: /*#__PURE__*/_jsxs(ToolsPanelContext.Provider, {\n      value: panelContext,\n      children: [/*#__PURE__*/_jsx(ToolsPanelHeader, {\n        label: label,\n        resetAll: resetAllItems,\n        toggleItem: toggleItem,\n        headingLevel: headingLevel,\n        dropdownMenuProps: dropdownMenuProps\n      }), children]\n    })\n  });\n};\n\n/**\n * The `ToolsPanel` is a container component that displays its children preceded\n * by a header. The header includes a dropdown menu which is automatically\n * generated from the panel's inner `ToolsPanelItems`.\n *\n * ```jsx\n * import { __ } from '@wordpress/i18n';\n * import {\n *   __experimentalToolsPanel as ToolsPanel,\n *   __experimentalToolsPanelItem as ToolsPanelItem,\n *   __experimentalUnitControl as UnitControl\n * } from '@wordpress/components';\n *\n * function Example() {\n *   const [ height, setHeight ] = useState();\n *   const [ width, setWidth ] = useState();\n *\n *   const resetAll = () => {\n *     setHeight();\n *     setWidth();\n *   }\n *\n *   return (\n *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>\n *       <ToolsPanelItem\n *         hasValue={ () => !! height }\n *         label={ __( 'Height' ) }\n *         onDeselect={ () => setHeight() }\n *       >\n *         <UnitControl\n *           label={ __( 'Height' ) }\n *           onChange={ setHeight }\n *           value={ height }\n *         />\n *       </ToolsPanelItem>\n *       <ToolsPanelItem\n *         hasValue={ () => !! width }\n *         label={ __( 'Width' ) }\n *         onDeselect={ () => setWidth() }\n *       >\n *         <UnitControl\n *           label={ __( 'Width' ) }\n *           onChange={ setWidth }\n *           value={ width }\n *         />\n *       </ToolsPanelItem>\n *     </ToolsPanel>\n *   );\n * }\n * ```\n */\nexport const ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel');\nexport default ToolsPanel;"],
-  "mappings": ";AAOA,OAAO,sBAAsB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,wBAAwB,CAAC,OAAO,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,KAAK;AACvB,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,SAAS;AAAA,IACT,KAAK;AAAA,IACL,UAAuB,sBAAM,kBAAkB,UAAU;AAAA,MACvD,OAAO;AAAA,MACP,UAAU,CAAc,qBAAK,kBAAkB;AAAA,QAC7C;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GAAG,QAAQ;AAAA,IACd,CAAC;AAAA,EACH,CAAC;AACH;AAqDO,IAAM,aAAa,eAAe,uBAAuB,YAAY;AAC5E,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { Grid } from '../../grid';\nimport { contextConnect } from '../../context';\nimport { space } from '../../utils/space';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst TOOLS_PANEL_GAP = space(4);\nconst UnconnectedToolsPanel = (props, forwardedRef) => {\n  const {\n    children,\n    label,\n    panelContext,\n    resetAllItems,\n    toggleItem,\n    headingLevel,\n    dropdownMenuProps,\n    ...toolsPanelProps\n  } = useToolsPanel(props);\n  return /*#__PURE__*/_jsx(Grid, {\n    ...toolsPanelProps,\n    columns: 2,\n    gap: 4,\n    columnGap: TOOLS_PANEL_GAP,\n    rowGap: TOOLS_PANEL_GAP,\n    templateColumns: \"repeat( 2, minmax(0, 1fr) )\",\n    ref: forwardedRef,\n    children: /*#__PURE__*/_jsxs(ToolsPanelContext.Provider, {\n      value: panelContext,\n      children: [/*#__PURE__*/_jsx(ToolsPanelHeader, {\n        label: label,\n        resetAll: resetAllItems,\n        toggleItem: toggleItem,\n        headingLevel: headingLevel,\n        dropdownMenuProps: dropdownMenuProps\n      }), children]\n    })\n  });\n};\n\n/**\n * The `ToolsPanel` is a container component that displays its children preceded\n * by a header. The header includes a dropdown menu which is automatically\n * generated from the panel's inner `ToolsPanelItems`.\n *\n * ```jsx\n * import { __ } from '@wordpress/i18n';\n * import {\n *   __experimentalToolsPanel as ToolsPanel,\n *   __experimentalToolsPanelItem as ToolsPanelItem,\n *   __experimentalUnitControl as UnitControl\n * } from '@wordpress/components';\n *\n * function Example() {\n *   const [ height, setHeight ] = useState();\n *   const [ width, setWidth ] = useState();\n *\n *   const resetAll = () => {\n *     setHeight();\n *     setWidth();\n *   }\n *\n *   return (\n *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>\n *       <ToolsPanelItem\n *         hasValue={ () => !! height }\n *         label={ __( 'Height' ) }\n *         onDeselect={ () => setHeight() }\n *       >\n *         <UnitControl\n *           label={ __( 'Height' ) }\n *           onChange={ setHeight }\n *           value={ height }\n *         />\n *       </ToolsPanelItem>\n *       <ToolsPanelItem\n *         hasValue={ () => !! width }\n *         label={ __( 'Width' ) }\n *         onDeselect={ () => setWidth() }\n *       >\n *         <UnitControl\n *           label={ __( 'Width' ) }\n *           onChange={ setWidth }\n *           value={ width }\n *         />\n *       </ToolsPanelItem>\n *     </ToolsPanel>\n *   );\n * }\n * ```\n */\nexport const ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel');\nexport default ToolsPanel;"],
+  "mappings": ";AAOA,OAAO,sBAAsB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,kBAAkB,MAAM,CAAC;AAC/B,IAAM,wBAAwB,CAAC,OAAO,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,KAAK;AACvB,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,SAAS;AAAA,IACT,KAAK;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,KAAK;AAAA,IACL,UAAuB,sBAAM,kBAAkB,UAAU;AAAA,MACvD,OAAO;AAAA,MACP,UAAU,CAAc,qBAAK,kBAAkB;AAAA,QAC7C;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GAAG,QAAQ;AAAA,IACd,CAAC;AAAA,EACH,CAAC;AACH;AAqDO,IAAM,aAAa,eAAe,uBAAuB,YAAY;AAC5E,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/tools-panel/tools-panel/hook.mjs

@@ -1,9 +1,92 @@
 // packages/components/src/tools-panel/tools-panel/hook.ts
+import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useReducer, useRef } from "@wordpress/element";
-import * as styles 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/tools-panel/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("29b739f451", "._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}");
+}
+var style_module_default = { "tools-panel": "_62d714739f4dc308__tools-panel", "tools-panel-with-inner-wrapper": "_40db7f4f897b683d__tools-panel-with-inner-wrapper", "tools-panel-hidden-inner-wrapper": "_95a15674966f30a3__tools-panel-hidden-inner-wrapper", "tools-panel-header": "_322a049b9b7d8674__tools-panel-header", "tools-panel-heading": "b92a382d3b30104d__tools-panel-heading", "tools-panel-item": "_8005d68fffa9db91__tools-panel-item", "tools-panel-item-placeholder": "_4f55e1a6e373746e__tools-panel-item-placeholder", "dropdown-menu": "d40032517bff9e12__dropdown-menu", "reset-label": "f135b96aa96ca6bb__reset-label", "default-controls-item": "_69b138dfa5570d9c__default-controls-item" };
+
+// packages/components/src/tools-panel/tools-panel/hook.ts
 import { useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/hooks/use-cx.mjs";
-var DEFAULT_COLUMNS = 2;
 function emptyMenuItems() {
   return {
     default: {},
@@ -223,14 +306,7 @@ function useToolsPanel(props) {
   const areAllOptionalControlsHidden = useMemo(() => {
     return isMenuItemTypeEmpty(menuItems.default) && !isMenuItemTypeEmpty(menuItems.optional) && Object.values(menuItems.optional).every((isSelected) => !isSelected);
   }, [menuItems]);
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.getToolsPanelStyles({
-      columns: DEFAULT_COLUMNS,
-      hasInnerWrapper,
-      areAllOptionalControlsHidden
-    }), className);
-  }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper]);
+  const classes = clsx(style_module_default["tools-panel"], hasInnerWrapper && style_module_default["tools-panel-with-inner-wrapper"], areAllOptionalControlsHidden && style_module_default["tools-panel-hidden-inner-wrapper"], className);
   const toggleItem = useCallback((label) => {
     panelDispatch({
       type: "TOGGLE_VALUE",