@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/build/toggle-group-control/toggle-group-control/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAAyB;AACzB,qBAA6B;AAC7B,qBAAiD;AACjD,0BAAiD;;;ACJjD,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,o4DAAs4D;AACn6D;AACA,IAAO,uBAAQ,EAAC,wBAAuB,0CAAyC,cAAa,iCAAgC,yBAAwB,2CAA0C,YAAW,8BAA6B;;;AFEvO,4BAA+C;AAC/C,6BAAgD;AAChD,0BAA0C;AAC1C,sCAAsC;AACtC,yBAA4B;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB;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,QAAI,iCAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,yCAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS;AACrD,QAAM,WAAO,6BAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,mBAAe,+CAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,6DAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,cAAU,YAAAA,SAAK,qBAAO,sBAAsB,GAAG;AAAA,IACnD,CAAC,qBAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAAC,qBAAO,YAAY,CAAC,GAAG,WAAW,CAAC;AAAA,IACpC,CAAC,qBAAO,uBAAuB,CAAC,GAAG,CAAC;AAAA,EACtC,GAAG,SAAS;AACZ,QAAM,cAAc,iBAAiB,yDAAkC;AACvE,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,uCAAAD,KAAK,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,yBAAqB,+BAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\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(\"a4244dfbf1\", \".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{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAAyB;AACzB,qBAA6B;AAC7B,qBAAiD;AACjD,0BAAiD;;;ACJjD,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,mwDAAqwD;AAClyD;AACA,IAAO,uBAAQ,EAAC,wBAAuB,0CAAyC,cAAa,iCAAgC,yBAAwB,2CAA0C,YAAW,8BAA6B;;;AFEvO,4BAA+C;AAC/C,6BAAgD;AAChD,0BAA0C;AAC1C,sCAAsC;AACtC,yBAA4B;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB;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,QAAI,iCAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,yCAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS;AACrD,QAAM,WAAO,6BAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,mBAAe,+CAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,6DAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,cAAU,YAAAA,SAAK,qBAAO,sBAAsB,GAAG;AAAA,IACnD,CAAC,qBAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAAC,qBAAO,YAAY,CAAC,GAAG,WAAW,CAAC;AAAA,IACpC,CAAC,qBAAO,uBAAuB,CAAC,GAAG,CAAC;AAAA,EACtC,GAAG,SAAS;AACZ,QAAM,cAAc,iBAAiB,yDAAkC;AACvE,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,uCAAAD,KAAK,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,yBAAqB,+BAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
   "names": ["clsx", "_jsx", "BaseControl"]
 }

package/build/toggle-group-control/toggle-group-control-option-base/component.cjs

@@ -119,7 +119,7 @@ function registerStyle(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}");
+  registerStyle("94533a674c", "._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{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,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" };
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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": ["import clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\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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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\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(\"94533a674c\", \"._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{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,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": ["import_context", "_jsx", "Tooltip", "_Fragment", "clsx"]
 }

package/build/tools-panel/tools-panel-item/hook.cjs

@@ -187,11 +187,11 @@ function useToolsPanelItem(props) {
   const isRegistered = menuItems?.[menuGroup]?.[label] !== void 0;
   const isValueSet = hasValue();
   (0, import_element.useEffect)(() => {
-    if (!isShownByDefault && !isValueSet) {
+    if (!hasMatchingPanel || !isShownByDefault && !isValueSet) {
       return;
     }
     flagItemCustomization(isValueSet, label, menuGroup);
-  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);
+  }, [hasMatchingPanel, isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);
   (0, import_element.useEffect)(() => {
     if (!isRegistered || isResetting || !hasMatchingPanel) {
       return;

package/build/tools-panel/tools-panel-item/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tools-panel/tools-panel-item/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  useEffect(() => {\n    if (!isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n  const classes = clsx(styles['tools-panel-item'], shouldApplyPlaceholderStyles && styles['tools-panel-item-placeholder'], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\n    className: classes\n  };\n}", "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(\"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}\");\n}\nexport 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\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  // Items that don't belong to the panel on screen stay silent, otherwise\n  // they would leave an orphaned entry in its menu.\n  useEffect(() => {\n    if (!hasMatchingPanel || !isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [hasMatchingPanel, isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n  const classes = clsx(styles['tools-panel-item'], shouldApplyPlaceholderStyles && styles['tools-panel-item-placeholder'], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\n    className: classes\n  };\n}", "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(\"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}\");\n}\nexport 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\"};\n"],
+  "mappings": "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",
   "names": ["import_context", "clsx"]
 }

package/build/utils/config-values.cjs

@@ -40,9 +40,6 @@ var CONTROL_PROPS = {
 };
 var config_values_default = Object.assign({}, CONTROL_PROPS, {
   colorDivider: "rgba(0, 0, 0, 0.1)",
-  colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
-  colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
-  colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
   elevationIntensity: 1,
   radiusXSmall: "1px",
   radiusSmall: "2px",

package/build/utils/config-values.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/config-values.js"],
-  "sourcesContent": ["import { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n  colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n  colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightEmphasis: '600',\n  gridBase: '4px',\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceColor: COLORS.white,\n  // Modal exit animation: `use-modal-exit-animation` parses this for the\n  // `animationend` timeout race; keep the numeric duration equal to the WPDS\n  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AACvB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,4BAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc,4BAAO;AAAA;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
+  "sourcesContent": ["import { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightEmphasis: '600',\n  gridBase: '4px',\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceColor: COLORS.white,\n  // Modal exit animation: `use-modal-exit-animation` parses this for the\n  // `animationend` timeout race; keep the numeric duration equal to the WPDS\n  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AACvB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,4BAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc,4BAAO;AAAA;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
   "names": []
 }

package/build/validated-form-controls/components/content-editable-control.cjs

@@ -35,7 +35,7 @@ __export(content_editable_control_exports, {
 module.exports = __toCommonJS(content_editable_control_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_ui = require("@wordpress/ui");
 var import_content_editable_control = __toESM(require("../../content-editable-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedContentEditableControl = ({
@@ -49,7 +49,8 @@ var UnforwardedValidatedContentEditableControl = ({
   const validityTargetRef = (0, import_element.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+      className: "components-validated-control",
       required,
       markWhenOptional,
       customValidity,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/content-editable-control.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '../control-with-error';\nimport ContentEditableControl from '../../content-editable-control';\n\n/**\n * A `contentEditable` field does not participate in the Constraint Validation\n * API, so — like `ValidatedToggleGroupControl` — the validity state lives on a\n * visually hidden delegate input that mirrors whether the field has content.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedContentEditableControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  value,\n  className,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ContentEditableControl, {\n        ref: forwardedRef,\n        className: clsx('components-validated-control__content-editable', className),\n        \"aria-invalid\": customValidity?.type === 'invalid' || undefined,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required\n      // Whitespace-only content reads as empty, matching how a\n      // text-oriented form field is expected to validate `required`.\n      ,\n      value: value?.trim() ?? '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"textbox\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedContentEditableControl = forwardRef(UnforwardedValidatedContentEditableControl);\nValidatedContentEditableControl.displayName = 'ValidatedContentEditableControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAAmC;AACnC,gCAAiC;AACjC,sCAAmC;AAOnC,yBAA2C;AAC3C,IAAM,6CAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gCAAAC,SAAwB;AAAA,QAClD,KAAK;AAAA,QACL,eAAW,YAAAC,SAAK,kDAAkD,SAAS;AAAA,QAC3E,gBAAgB,gBAAgB,SAAS,aAAa;AAAA,QACtD,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MAIA,OAAO,OAAO,KAAK,KAAK;AAAA,MACxB,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,kBAAkB,GAAG,MAAM;AAAA,MAC5E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '@wordpress/ui';\nimport ContentEditableControl from '../../content-editable-control';\n\n/**\n * A `contentEditable` field does not participate in the Constraint Validation\n * API, so — like `ValidatedToggleGroupControl` — the validity state lives on a\n * visually hidden delegate input that mirrors whether the field has content.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedContentEditableControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  value,\n  className,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      className: \"components-validated-control\",\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ContentEditableControl, {\n        ref: forwardedRef,\n        className: clsx('components-validated-control__content-editable', className),\n        \"aria-invalid\": customValidity?.type === 'invalid' || undefined,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required\n      // Whitespace-only content reads as empty, matching how a\n      // text-oriented form field is expected to validate `required`.\n      ,\n      value: value?.trim() ?? '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"textbox\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedContentEditableControl = forwardRef(UnforwardedValidatedContentEditableControl);\nValidatedContentEditableControl.displayName = 'ValidatedContentEditableControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAAmC;AACnC,gBAAiC;AACjC,sCAAmC;AAOnC,yBAA2C;AAC3C,IAAM,6CAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4BAAkB;AAAA,MAC7C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gCAAAC,SAAwB;AAAA,QAClD,KAAK;AAAA,QACL,eAAW,YAAAC,SAAK,kDAAkD,SAAS;AAAA,QAC3E,gBAAgB,gBAAgB,SAAS,aAAa;AAAA,QACtD,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MAIA,OAAO,OAAO,KAAK,KAAK;AAAA,MACxB,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,kBAAkB,GAAG,MAAM;AAAA,MAC5E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": ["_jsxs", "_jsx", "ContentEditableControl", "clsx"]
 }

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

@@ -34,7 +34,7 @@ __export(custom_select_control_exports, {
 });
 module.exports = __toCommonJS(custom_select_control_exports);
 var import_element = require("@wordpress/element");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_ui = require("@wordpress/ui");
 var import_custom_select_control = __toESM(require("../../custom-select-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedCustomSelectControl = ({
@@ -47,7 +47,8 @@ var UnforwardedValidatedCustomSelectControl = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
     ref: forwardedRef,
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+      className: "components-validated-control",
       required,
       markWhenOptional,
       customValidity,

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

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

package/build/validated-form-controls/components/index.cjs

@@ -17,25 +17,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/components/src/validated-form-controls/components/index.ts
 var components_exports = {};
 module.exports = __toCommonJS(components_exports);
-__reExport(components_exports, require("./combobox-control.cjs"), module.exports);
 __reExport(components_exports, require("./custom-select-control.cjs"), module.exports);
-__reExport(components_exports, require("./form-token-field.cjs"), module.exports);
 __reExport(components_exports, require("./input-control.cjs"), module.exports);
 __reExport(components_exports, require("./range-control.cjs"), module.exports);
 __reExport(components_exports, require("./content-editable-control.cjs"), module.exports);
 __reExport(components_exports, require("./textarea-control.cjs"), module.exports);
-__reExport(components_exports, require("./toggle-control.cjs"), module.exports);
-__reExport(components_exports, require("./toggle-group-control.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./combobox-control.cjs"),
   ...require("./custom-select-control.cjs"),
-  ...require("./form-token-field.cjs"),
   ...require("./input-control.cjs"),
   ...require("./range-control.cjs"),
   ...require("./content-editable-control.cjs"),
-  ...require("./textarea-control.cjs"),
-  ...require("./toggle-control.cjs"),
-  ...require("./toggle-group-control.cjs")
+  ...require("./textarea-control.cjs")
 });
 //# sourceMappingURL=index.cjs.map

package/build/validated-form-controls/components/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/index.ts"],
-  "sourcesContent": ["export * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './form-token-field';\nexport * from './input-control';\nexport * from './range-control';\nexport * from './content-editable-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,mCAAd;AACA,+BAAc,wCADd;AAEA,+BAAc,mCAFd;AAGA,+BAAc,gCAHd;AAIA,+BAAc,gCAJd;AAKA,+BAAc,2CALd;AAMA,+BAAc,mCANd;AAOA,+BAAc,iCAPd;AAQA,+BAAc,uCARd;",
+  "sourcesContent": ["export * from './custom-select-control';\nexport * from './input-control';\nexport * from './range-control';\nexport * from './content-editable-control';\nexport * from './textarea-control';"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wCAAd;AACA,+BAAc,gCADd;AAEA,+BAAc,gCAFd;AAGA,+BAAc,2CAHd;AAIA,+BAAc,mCAJd;",
   "names": []
 }

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

@@ -35,7 +35,8 @@ __export(input_control_exports, {
 module.exports = __toCommonJS(input_control_exports);
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_ui = require("@wordpress/ui");
 var import_input_control = __toESM(require("../../input-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedInputControl = ({
@@ -44,9 +45,15 @@ var UnforwardedValidatedInputControl = ({
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
+  (0, import_deprecated.default)("wp.components.privateApis.ValidatedInputControl", {
+    since: "7.2",
+    alternative: "ValidatedInputControl from @wordpress/ui",
+    hint: "This private API will be completely removed within a few Gutenberg plugin releases."
+  });
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+    className: "components-validated-control",
     required,
     markWhenOptional,
     customValidity,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/input-control.tsx"],
-  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { ControlWithError } from '../control-with-error';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(InputControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);\nValidatedInputControl.displayName = 'ValidatedInputControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
-  "names": ["_jsx", "InputControl"]
+  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { ControlWithError } from '@wordpress/ui';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  deprecated('wp.components.privateApis.ValidatedInputControl', {\n    since: '7.2',\n    alternative: 'ValidatedInputControl from @wordpress/ui',\n    hint: 'This private API will be completely removed within a few Gutenberg plugin releases.'\n  });\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    className: \"components-validated-control\",\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(InputControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);\nValidatedInputControl.displayName = 'ValidatedInputControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,wBAAuB;AACvB,gBAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,wBAAAA,SAAW,mDAAmD;AAAA,IAC5D,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AACD,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAC,KAAK,4BAAkB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
+  "names": ["deprecated", "_jsx", "InputControl"]
 }

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

@@ -35,7 +35,7 @@ __export(range_control_exports, {
 module.exports = __toCommonJS(range_control_exports);
 var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_ui = require("@wordpress/ui");
 var import_range_control = __toESM(require("../../range-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedRangeControl = ({
@@ -46,7 +46,8 @@ var UnforwardedValidatedRangeControl = ({
 }, forwardedRef) => {
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+    className: "components-validated-control",
     required,
     markWhenOptional,
     customValidity,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/range-control.tsx"],
-  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '../control-with-error';\nimport RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(RangeControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA6B;AAC7B,qBAAmC;AACnC,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
+  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '@wordpress/ui';\nimport RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    className: \"components-validated-control\",\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(RangeControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA6B;AAC7B,qBAAmC;AACnC,gBAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4BAAkB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
   "names": ["_jsx", "RangeControl"]
 }

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

@@ -35,7 +35,8 @@ __export(textarea_control_exports, {
 module.exports = __toCommonJS(textarea_control_exports);
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_ui = require("@wordpress/ui");
 var import_textarea_control = __toESM(require("../../textarea-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedTextareaControl = ({
@@ -44,9 +45,15 @@ var UnforwardedValidatedTextareaControl = ({
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
+  (0, import_deprecated.default)("wp.components.privateApis.ValidatedTextareaControl", {
+    since: "7.2",
+    alternative: "ValidatedTextareaControl from @wordpress/ui",
+    hint: "This private API will be completely removed within a few Gutenberg plugin releases."
+  });
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+    className: "components-validated-control",
     required,
     markWhenOptional,
     customValidity,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/textarea-control.tsx"],
-  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { ControlWithError } from '../control-with-error';\nimport TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(TextareaControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);\nValidatedTextareaControl.displayName = 'ValidatedTextareaControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,MAC3C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
-  "names": ["_jsx", "TextareaControl"]
+  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { ControlWithError } from '@wordpress/ui';\nimport TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  deprecated('wp.components.privateApis.ValidatedTextareaControl', {\n    since: '7.2',\n    alternative: 'ValidatedTextareaControl from @wordpress/ui',\n    hint: 'This private API will be completely removed within a few Gutenberg plugin releases.'\n  });\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    className: \"components-validated-control\",\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(TextareaControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);\nValidatedTextareaControl.displayName = 'ValidatedTextareaControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,wBAAuB;AACvB,gBAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,wBAAAA,SAAW,sDAAsD;AAAA,IAC/D,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AACD,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAC,KAAK,4BAAkB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,MAC3C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
+  "names": ["deprecated", "_jsx", "TextareaControl"]
 }