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

package/build-module/palette-edit/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/palette-edit/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexBlock, FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { Item, ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst DEFAULT_COLOR = '#000';\nfunction NameInput({\n  value,\n  onChange,\n  label\n}) {\n  return /*#__PURE__*/_jsx(NameInputControl, {\n    size: \"compact\",\n    label: label,\n    hideLabelFromVision: true,\n    value: value,\n    onChange: onChange\n  });\n}\n\n/*\n * Deduplicates the slugs of the provided elements.\n */\nexport function deduplicateElementSlugs(elements) {\n  const slugCounts = {};\n  return elements.map(element => {\n    let newSlug;\n    const {\n      slug\n    } = element;\n    slugCounts[slug] = (slugCounts[slug] || 0) + 1;\n    if (slugCounts[slug] > 1) {\n      newSlug = `${slug}-${slugCounts[slug] - 1}`;\n    }\n    return {\n      ...element,\n      slug: newSlug ?? slug\n    };\n  });\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements   An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(elements, slugPrefix) {\n  const nameRegex = new RegExp(`^${slugPrefix}color-([\\\\d]+)$`);\n  const position = elements.reduce((previousValue, currentValue) => {\n    if (typeof currentValue?.slug === 'string') {\n      const matches = currentValue?.slug.match(nameRegex);\n      if (matches) {\n        const id = parseInt(matches[1], 10);\n        if (id >= previousValue) {\n          return id + 1;\n        }\n      }\n    }\n    return previousValue;\n  }, 1);\n  return {\n    name: sprintf(/* translators: %d: is an id for a custom color */\n    __('Color %d'), position),\n    slug: `${slugPrefix}color-${position}`\n  };\n}\nfunction ColorPickerPopover({\n  isGradient,\n  element,\n  onChange,\n  popoverProps: receivedPopoverProps,\n  onClose = () => {}\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    offset: 20,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    placement: 'left-start',\n    ...receivedPopoverProps,\n    className: clsx('components-palette-edit__popover', receivedPopoverProps?.className)\n  }), [receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Popover, {\n    ...popoverProps,\n    onClose: onClose,\n    children: [!isGradient && /*#__PURE__*/_jsx(ColorPicker, {\n      color: element.color,\n      enableAlpha: true,\n      onChange: newColor => {\n        onChange({\n          ...element,\n          color: newColor\n        });\n      }\n    }), isGradient && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-palette-edit__popover-gradient-picker\",\n      children: /*#__PURE__*/_jsx(CustomGradientPicker, {\n        __experimentalIsRenderedInSidebar: true,\n        value: element.gradient,\n        onChange: newGradient => {\n          onChange({\n            ...element,\n            gradient: newGradient\n          });\n        }\n      })\n    })]\n  });\n}\nfunction Option({\n  canOnlyChangeValues,\n  element,\n  onChange,\n  onRemove,\n  popoverProps: receivedPopoverProps,\n  slugPrefix,\n  isGradient\n}) {\n  const value = isGradient ? element.gradient : element.color;\n  const [isEditingColor, setIsEditingColor] = useState(false);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n  const popoverProps = useMemo(() => ({\n    ...receivedPopoverProps,\n    // Use the custom palette color item as the popover anchor.\n    anchor: popoverAnchor\n  }), [popoverAnchor, receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Item, {\n    ref: setPopoverAnchor,\n    size: \"small\",\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      children: [/*#__PURE__*/_jsx(Button, {\n        size: \"small\",\n        onClick: () => {\n          setIsEditingColor(true);\n        },\n        \"aria-label\": sprintf(\n        // translators: %s is a color or gradient name, e.g. \"Red\".\n        __('Edit: %s'), element.name.trim().length ? element.name : value || ''),\n        style: {\n          padding: 0\n        },\n        children: /*#__PURE__*/_jsx(IndicatorStyled, {\n          colorValue: value\n        })\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        children: !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {\n          label: isGradient ? __('Gradient name') : __('Color name'),\n          value: element.name,\n          onChange: nextName => onChange({\n            ...element,\n            name: nextName,\n            slug: slugPrefix + kebabCase(nextName ?? '')\n          })\n        }) : /*#__PURE__*/_jsx(NameContainer, {\n          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */\n          '\\u00A0'\n        })\n      }), !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {\n        children: /*#__PURE__*/_jsx(RemoveButton, {\n          size: \"small\",\n          icon: lineSolid,\n          label: sprintf(\n          // translators: %s is a color or gradient name, e.g. \"Red\".\n          __('Remove color: %s'), element.name.trim().length ? element.name : value || ''),\n          onClick: onRemove\n        })\n      })]\n    }), isEditingColor && /*#__PURE__*/_jsx(ColorPickerPopover, {\n      isGradient: isGradient,\n      onChange: onChange,\n      element: element,\n      popoverProps: popoverProps,\n      onClose: () => setIsEditingColor(false)\n    })]\n  });\n}\nfunction PaletteEditListView({\n  elements,\n  onChange,\n  canOnlyChangeValues,\n  slugPrefix,\n  isGradient,\n  popoverProps,\n  addColorRef\n}) {\n  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n  const elementsReferenceRef = useRef(undefined);\n  useEffect(() => {\n    elementsReferenceRef.current = elements;\n  }, [elements]);\n  const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    children: /*#__PURE__*/_jsx(ItemGroup, {\n      isRounded: true,\n      isBordered: true,\n      isSeparated: true,\n      children: elements.map((element, index) => /*#__PURE__*/_jsx(Option, {\n        isGradient: isGradient,\n        canOnlyChangeValues: canOnlyChangeValues,\n        element: element,\n        onChange: newElement => {\n          debounceOnChange(elements.map((currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        onRemove: () => {\n          const newElements = elements.filter((_currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return false;\n            }\n            return true;\n          });\n          onChange(newElements.length ? newElements : undefined);\n          addColorRef.current?.focus();\n        },\n        slugPrefix: slugPrefix,\n        popoverProps: popoverProps\n      }, index))\n    })\n  });\n}\nconst EMPTY_ARRAY = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n *   const [ controlledColors, setControlledColors ] = useState( colors );\n *\n *   return (\n *     <PaletteEdit\n *       colors={ controlledColors }\n *       onChange={ ( newColors?: Color[] ) => {\n *         setControlledColors( newColors );\n *       } }\n *       paletteLabel=\"Here is a label\"\n *     />\n *   );\n * };\n * ```\n */\nexport function PaletteEdit({\n  gradients,\n  colors = EMPTY_ARRAY,\n  onChange,\n  paletteLabel,\n  paletteLabelHeadingLevel = 2,\n  emptyMessage,\n  canOnlyChangeValues,\n  canReset,\n  slugPrefix = '',\n  popoverProps\n}) {\n  const isGradient = !!gradients;\n  const elements = isGradient ? gradients : colors;\n  const [isEditing, setIsEditing] = useState(false);\n  const [editingElement, setEditingElement] = useState(null);\n  const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;\n  const elementsLength = elements.length;\n  const hasElements = elementsLength > 0;\n  const debounceOnChange = useDebounce(onChange, 100);\n  const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {\n    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];\n    const key = isGradient ? 'gradient' : 'color';\n    // Ensures that the index returned matches a known element value.\n    if (!!selectedElement && selectedElement[key] === value) {\n      setEditingElement(newEditingElementIndex);\n    } else {\n      setIsEditing(true);\n    }\n  }, [isGradient, elements]);\n  const addColorRef = useRef(null);\n  return /*#__PURE__*/_jsxs(PaletteEditStyles, {\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      children: [/*#__PURE__*/_jsx(PaletteHeading, {\n        level: paletteLabelHeadingLevel,\n        children: paletteLabel\n      }), /*#__PURE__*/_jsxs(PaletteActionsContainer, {\n        children: [hasElements && isEditing && /*#__PURE__*/_jsx(DoneButton, {\n          size: \"small\",\n          onClick: () => {\n            setIsEditing(false);\n            setEditingElement(null);\n          },\n          children: __('Done')\n        }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n          ref: addColorRef,\n          size: \"small\",\n          isPressed: isAdding,\n          icon: plus,\n          label: isGradient ? __('Add gradient') : __('Add color'),\n          onClick: () => {\n            const {\n              name,\n              slug\n            } = getNameAndSlugForPosition(elements, slugPrefix);\n            if (!!gradients) {\n              onChange([...gradients, {\n                gradient: DEFAULT_GRADIENT,\n                name,\n                slug\n              }]);\n            } else {\n              onChange([...colors, {\n                color: DEFAULT_COLOR,\n                name,\n                slug\n              }]);\n            }\n            setIsEditing(true);\n            setEditingElement(elements.length);\n          }\n        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/_jsx(DropdownMenu, {\n          icon: moreVertical,\n          label: isGradient ? __('Gradient options') : __('Color options'),\n          toggleProps: {\n            size: 'small'\n          },\n          children: ({\n            onClose\n          }) => /*#__PURE__*/_jsx(_Fragment, {\n            children: /*#__PURE__*/_jsxs(NavigableMenu, {\n              role: \"menu\",\n              children: [!isEditing && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setIsEditing(true);\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: __('Show details')\n              }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  setIsEditing(false);\n                  onChange();\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: isGradient ? __('Remove all gradients') : __('Remove all colors')\n              }), canReset && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                className: \"components-palette-edit__menu-button\",\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  onChange();\n                  onClose();\n                },\n                children: isGradient ? __('Reset gradient') : __('Reset colors')\n              })]\n            })\n          })\n        })]\n      })]\n    }), hasElements && /*#__PURE__*/_jsxs(PaletteEditContents, {\n      children: [isEditing && /*#__PURE__*/_jsx(PaletteEditListView, {\n        canOnlyChangeValues: canOnlyChangeValues,\n        elements: elements\n        // @ts-expect-error TODO: Don't know how to resolve\n        ,\n        onChange: onChange,\n        slugPrefix: slugPrefix,\n        isGradient: isGradient,\n        popoverProps: popoverProps,\n        addColorRef: addColorRef\n      }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {\n        isGradient: isGradient,\n        onClose: () => setEditingElement(null),\n        onChange: newElement => {\n          debounceOnChange(\n          // @ts-expect-error TODO: Don't know how to resolve\n          elements.map((currentElement, currentIndex) => {\n            if (currentIndex === editingElement) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        element: elements[editingElement ?? -1],\n        popoverProps: popoverProps\n      }), !isEditing && (isGradient ? /*#__PURE__*/_jsx(GradientPicker, {\n        gradients: gradients,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomGradients: true\n      }) : /*#__PURE__*/_jsx(ColorPalette, {\n        colors: colors,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomColors: true\n      }))]\n    }), !hasElements && emptyMessage && /*#__PURE__*/_jsx(PaletteEditContents, {\n      children: emptyMessage\n    })]\n  });\n}\nexport default PaletteEdit;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce, useInstanceId } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexBlock, FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { Item, ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport { DuotonePicker } from '../duotone-picker';\nimport ColorListPicker from '../duotone-picker/color-list-picker';\nimport CustomDuotoneBar from '../duotone-picker/custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from '../duotone-picker/utils';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nextend([namesPlugin]);\nconst DEFAULT_COLOR = '#000';\n\n/**\n * Filters a color palette down to the colors a duotone can actually be built\n * from, and normalizes each one to hex.\n *\n * Duotone values are turned into SVG filter matrices, so each color has to\n * resolve to a concrete value. A theme palette may legitimately contain CSS\n * that does not, such as `color-mix()` or `currentColor` — Twenty Twenty-Five\n * ships one — and picking such a color would produce a duotone that neither the\n * editor nor the front end can render.\n *\n * Surviving colors are normalized because the two ends disagree on syntax. The\n * front end parses duotone colors with a PHP port of colord that only accepts\n * hex, `rgb()` and `hsl()` (`WP_Duotone::colord_parse`), while colord in the\n * editor also accepts CSS named colors such as `red`, since `namesPlugin` is\n * registered. Passing a palette value straight through would let a named color\n * be saved as a duotone that renders in the editor and is dropped, with a\n * `_doing_it_wrong` notice, on the front end.\n *\n * @param colorPalette The colors to filter.\n *\n * @return The colors usable in a duotone, as hex.\n */\nfunction getUsableDuotoneColors(colorPalette = []) {\n  return colorPalette.flatMap(paletteColor => {\n    if (typeof paletteColor.color !== 'string') {\n      return [];\n    }\n    const parsed = colord(paletteColor.color);\n    return parsed.isValid() ? [{\n      ...paletteColor,\n      color: parsed.toHex()\n    }] : [];\n  });\n}\n\n/**\n * Reads the colors off a duotone element. Duotone presets can come from a\n * theme's `theme.json`, so the value is not guaranteed to be an array.\n *\n * @param element The palette element.\n *\n * @return The duotone's colors, or an empty array if it has none usable.\n */\nfunction getDuotoneColors(element) {\n  const colors = element?.colors;\n  return Array.isArray(colors) ? colors : [];\n}\n\n/**\n * Returns the single CSS value that represents a palette element, used both for\n * its swatch and for the labels that refer to it. Duotones have two colors, so\n * they are represented by the same gradient the duotone swatches use.\n *\n * @param element The palette element.\n * @param variant The kind of preset being edited.\n *\n * @return A CSS color or gradient string.\n */\nfunction getElementValue(element, variant) {\n  if (!element) {\n    return undefined;\n  }\n  switch (variant) {\n    case 'duotone':\n      return getGradientFromCSSColors(getDuotoneColors(element), '135deg');\n    case 'gradient':\n      return element.gradient;\n    default:\n      return element.color;\n  }\n}\n\n/**\n * Returns the hidden label for the name input of a palette element.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getNameInputLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Duotone name');\n    case 'gradient':\n      return __('Gradient name');\n    default:\n      return __('Color name');\n  }\n}\n\n/**\n * Returns the `sprintf` format string for the remove button label.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getRemoveLabelFormat(variant) {\n  return variant === 'duotone' ? /* translators: %s is a duotone name, e.g. \"Purple and yellow\". */\n  __('Remove duotone: %s') : /* translators: %s is a color or gradient name, e.g. \"Red\". */\n  __('Remove color: %s');\n}\n\n/**\n * Returns the label for the button that adds a new palette element.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getAddLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Add duotone');\n    case 'gradient':\n      return __('Add gradient');\n    default:\n      return __('Add color');\n  }\n}\n\n/**\n * Returns the label for the palette's options menu.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getOptionsLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Duotone options');\n    case 'gradient':\n      return __('Gradient options');\n    default:\n      return __('Color options');\n  }\n}\n\n/**\n * Returns the label for the menu item that empties the palette.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getRemoveAllLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Remove all duotones');\n    case 'gradient':\n      return __('Remove all gradients');\n    default:\n      return __('Remove all colors');\n  }\n}\n\n/**\n * Returns the label for the menu item that resets the palette.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getResetLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Reset duotones');\n    case 'gradient':\n      return __('Reset gradient');\n    default:\n      return __('Reset colors');\n  }\n}\nfunction NameInput({\n  value,\n  onChange,\n  label\n}) {\n  return /*#__PURE__*/_jsx(NameInputControl, {\n    size: \"compact\",\n    label: label,\n    hideLabelFromVision: true,\n    value: value,\n    onChange: onChange\n  });\n}\n\n/*\n * Deduplicates the slugs of the provided elements.\n */\nexport function deduplicateElementSlugs(elements) {\n  const slugCounts = {};\n  return elements.map(element => {\n    let newSlug;\n    const {\n      slug\n    } = element;\n    slugCounts[slug] = (slugCounts[slug] || 0) + 1;\n    if (slugCounts[slug] > 1) {\n      newSlug = `${slug}-${slugCounts[slug] - 1}`;\n    }\n    return {\n      ...element,\n      slug: newSlug ?? slug\n    };\n  });\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements   An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n * @param variant    The kind of preset being edited. Duotones are named\n *                   \"Duotone + id\" and slugged with a `duotone-` stem;\n *                   colors and gradients both use `color-`.\n *\n * @return A name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(elements, slugPrefix, variant = 'color') {\n  const stem = variant === 'duotone' ? 'duotone' : 'color';\n  const nameRegex = new RegExp(`^${slugPrefix}${stem}-([\\\\d]+)$`);\n  const position = elements.reduce((previousValue, currentValue) => {\n    if (typeof currentValue?.slug === 'string') {\n      const matches = currentValue?.slug.match(nameRegex);\n      if (matches) {\n        const id = parseInt(matches[1], 10);\n        if (id >= previousValue) {\n          return id + 1;\n        }\n      }\n    }\n    return previousValue;\n  }, 1);\n  return {\n    name: variant === 'duotone' ? sprintf(/* translators: %d: is an id for a custom duotone */\n    __('Duotone %d'), position) : sprintf(/* translators: %d: is an id for a custom color */\n    __('Color %d'), position),\n    slug: `${slugPrefix}${stem}-${position}`\n  };\n}\nfunction ColorPickerPopover({\n  variant,\n  colorPalette,\n  element,\n  onChange,\n  popoverProps: receivedPopoverProps,\n  onClose = () => {}\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    offset: 20,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    placement: 'left-start',\n    ...receivedPopoverProps,\n    className: clsx('components-palette-edit__popover', receivedPopoverProps?.className)\n  }), [receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Popover, {\n    ...popoverProps,\n    onClose: onClose,\n    children: [variant === 'color' && /*#__PURE__*/_jsx(ColorPicker, {\n      color: element.color,\n      enableAlpha: true,\n      onChange: newColor => {\n        onChange({\n          ...element,\n          color: newColor\n        });\n      }\n    }), variant === 'gradient' && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-palette-edit__popover-gradient-picker\",\n      children: /*#__PURE__*/_jsx(CustomGradientPicker, {\n        __experimentalIsRenderedInSidebar: true,\n        value: element.gradient,\n        onChange: newGradient => {\n          onChange({\n            ...element,\n            gradient: newGradient\n          });\n        }\n      })\n    }), variant === 'duotone' && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-palette-edit__popover-duotone-picker\",\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [/*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: getDuotoneColors(element),\n          onChange: newColors => {\n            // A duotone needs two colors to render, and the\n            // bar refuses to drop below two stops, so an\n            // empty value means there is nothing to save.\n            if (!newColors?.length) {\n              return;\n            }\n            onChange({\n              ...element,\n              colors: newColors\n            });\n          }\n        }), /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette ?? [],\n          value: getDuotoneColors(element),\n          enableAlpha: true,\n          onChange: newColors => {\n            const [defaultDark, defaultLight] = getDefaultColors(colorPalette ?? []);\n            onChange({\n              ...element,\n              colors: [\n              // Falsy rather than nullish, to match\n              // how `DuotonePicker` fills a cleared\n              // shadow or highlight.\n              newColors[0] || defaultDark, newColors[1] || defaultLight]\n            });\n          }\n        })]\n      })\n    })]\n  });\n}\nfunction Option({\n  canOnlyChangeValues,\n  element,\n  onChange,\n  onRemove,\n  popoverProps: receivedPopoverProps,\n  slugPrefix,\n  variant,\n  colorPalette\n}) {\n  const value = getElementValue(element, variant);\n  const [isEditingColor, setIsEditingColor] = useState(false);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n  const popoverProps = useMemo(() => ({\n    ...receivedPopoverProps,\n    // Use the custom palette color item as the popover anchor.\n    anchor: popoverAnchor\n  }), [popoverAnchor, receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Item, {\n    ref: setPopoverAnchor,\n    size: \"small\",\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      children: [/*#__PURE__*/_jsx(Button, {\n        size: \"small\",\n        onClick: () => {\n          setIsEditingColor(true);\n        },\n        \"aria-label\": sprintf(\n        // translators: %s is a color, gradient or duotone name, e.g. \"Red\".\n        __('Edit: %s'), element.name.trim().length ? element.name : value || ''),\n        style: {\n          padding: 0\n        },\n        children: /*#__PURE__*/_jsx(IndicatorStyled, {\n          colorValue: value\n        })\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        children: !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {\n          label: getNameInputLabel(variant),\n          value: element.name,\n          onChange: nextName => onChange({\n            ...element,\n            name: nextName,\n            slug: slugPrefix + kebabCase(nextName ?? '')\n          })\n        }) : /*#__PURE__*/_jsx(NameContainer, {\n          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */\n          '\\u00A0'\n        })\n      }), !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {\n        children: /*#__PURE__*/_jsx(RemoveButton, {\n          size: \"small\",\n          icon: lineSolid,\n          label: sprintf(getRemoveLabelFormat(variant), element.name.trim().length ? element.name : value || ''),\n          onClick: onRemove\n        })\n      })]\n    }), isEditingColor && /*#__PURE__*/_jsx(ColorPickerPopover, {\n      variant: variant,\n      colorPalette: colorPalette,\n      onChange: onChange,\n      element: element,\n      popoverProps: popoverProps,\n      onClose: () => setIsEditingColor(false)\n    })]\n  });\n}\nfunction PaletteEditListView({\n  elements,\n  onChange,\n  canOnlyChangeValues,\n  slugPrefix,\n  variant,\n  colorPalette,\n  popoverProps,\n  addColorRef\n}) {\n  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n  const elementsReferenceRef = useRef(undefined);\n  useEffect(() => {\n    elementsReferenceRef.current = elements;\n  }, [elements]);\n  const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    children: /*#__PURE__*/_jsx(ItemGroup, {\n      isRounded: true,\n      isBordered: true,\n      isSeparated: true,\n      children: elements.map((element, index) => /*#__PURE__*/_jsx(Option, {\n        variant: variant,\n        colorPalette: colorPalette,\n        canOnlyChangeValues: canOnlyChangeValues,\n        element: element,\n        onChange: newElement => {\n          debounceOnChange(elements.map((currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        onRemove: () => {\n          const newElements = elements.filter((_currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return false;\n            }\n            return true;\n          });\n          onChange(newElements.length ? newElements : undefined);\n          addColorRef.current?.focus();\n        },\n        slugPrefix: slugPrefix,\n        popoverProps: popoverProps\n      }, index))\n    })\n  });\n}\nconst EMPTY_ARRAY = [];\n\n/**\n * Allows editing a palette of colors, gradients or duotones.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n *   const [ controlledColors, setControlledColors ] = useState( colors );\n *\n *   return (\n *     <PaletteEdit\n *       colors={ controlledColors }\n *       onChange={ ( newColors?: Color[] ) => {\n *         setControlledColors( newColors );\n *       } }\n *       paletteLabel=\"Here is a label\"\n *     />\n *   );\n * };\n * ```\n */\nexport function PaletteEdit({\n  gradients,\n  duotones,\n  colors = EMPTY_ARRAY,\n  colorPalette,\n  onChange,\n  paletteLabel,\n  paletteLabelHeadingLevel = 2,\n  emptyMessage,\n  canOnlyChangeValues,\n  canReset,\n  slugPrefix = '',\n  popoverProps\n}) {\n  let variant = 'color';\n  if (gradients) {\n    variant = 'gradient';\n  } else if (duotones) {\n    variant = 'duotone';\n  }\n  const elements = gradients ?? duotones ?? colors;\n  // Filtered once here so every duotone path — the swatches, the shadows and\n  // highlights pickers, and the value a newly added duotone starts from —\n  // works from colors a duotone can actually be built with.\n  const duotoneColorPalette = useMemo(() => getUsableDuotoneColors(colorPalette), [colorPalette]);\n  const [isEditing, setIsEditing] = useState(false);\n  const [editingElement, setEditingElement] = useState(null);\n  const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;\n  const elementsLength = elements.length;\n  const hasElements = elementsLength > 0;\n  const debounceOnChange = useDebounce(onChange, 100);\n  const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {\n    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];\n    const key = variant === 'gradient' ? 'gradient' : 'color';\n    // Ensures that the index returned matches a known element value.\n    if (!!selectedElement && selectedElement[key] === value) {\n      setEditingElement(newEditingElementIndex);\n    } else {\n      setIsEditing(true);\n    }\n  }, [variant, elements]);\n\n  // Two duotones can hold the same pair of colors, so the picker's reported\n  // index is what identifies the one that was clicked. Matching on the colors\n  // instead would edit whichever duotone happened to come first.\n  const onSelectDuotoneItem = useCallback((value, newEditingElementIndex) => {\n    if (newEditingElementIndex !== undefined && (duotones ?? [])[newEditingElementIndex]) {\n      setEditingElement(newEditingElementIndex);\n    } else {\n      setIsEditing(true);\n    }\n  }, [duotones]);\n  const addColorRef = useRef(null);\n\n  // Names the swatch picker after this palette's heading, so a screen reader\n  // announces \"Theme\", \"Default\" or \"Custom\" rather than an unlabelled list.\n  const paletteLabelId = useInstanceId(PaletteEdit, 'components-palette-edit__heading');\n  return /*#__PURE__*/_jsxs(PaletteEditStyles, {\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      children: [/*#__PURE__*/_jsx(PaletteHeading, {\n        id: paletteLabelId,\n        level: paletteLabelHeadingLevel,\n        children: paletteLabel\n      }), /*#__PURE__*/_jsxs(PaletteActionsContainer, {\n        children: [hasElements && isEditing && /*#__PURE__*/_jsx(DoneButton, {\n          size: \"small\",\n          onClick: () => {\n            setIsEditing(false);\n            setEditingElement(null);\n          },\n          children: __('Done')\n        }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n          ref: addColorRef,\n          size: \"small\",\n          isPressed: isAdding,\n          icon: plus,\n          label: getAddLabel(variant),\n          onClick: () => {\n            const {\n              name,\n              slug\n            } = getNameAndSlugForPosition(elements, slugPrefix, variant);\n            if (!!gradients) {\n              onChange([...gradients, {\n                gradient: DEFAULT_GRADIENT,\n                name,\n                slug\n              }]);\n            } else if (!!duotones) {\n              onChange([...duotones, {\n                colors: getDefaultColors(duotoneColorPalette),\n                name,\n                slug\n              }]);\n            } else {\n              onChange([...colors, {\n                color: DEFAULT_COLOR,\n                name,\n                slug\n              }]);\n            }\n            setIsEditing(true);\n            setEditingElement(elements.length);\n          }\n        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/_jsx(DropdownMenu, {\n          icon: moreVertical,\n          label: getOptionsLabel(variant),\n          toggleProps: {\n            size: 'small'\n          },\n          children: ({\n            onClose\n          }) => /*#__PURE__*/_jsx(_Fragment, {\n            children: /*#__PURE__*/_jsxs(NavigableMenu, {\n              role: \"menu\",\n              children: [!isEditing && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setIsEditing(true);\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: __('Show details')\n              }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  setIsEditing(false);\n                  onChange();\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: getRemoveAllLabel(variant)\n              }), canReset && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                className: \"components-palette-edit__menu-button\",\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  onChange();\n                  onClose();\n                },\n                children: getResetLabel(variant)\n              })]\n            })\n          })\n        })]\n      })]\n    }), hasElements && /*#__PURE__*/_jsxs(PaletteEditContents, {\n      children: [isEditing && /*#__PURE__*/_jsx(PaletteEditListView, {\n        canOnlyChangeValues: canOnlyChangeValues,\n        elements: elements\n        // @ts-expect-error TODO: Don't know how to resolve\n        ,\n        onChange: onChange,\n        slugPrefix: slugPrefix,\n        variant: variant,\n        colorPalette: duotoneColorPalette,\n        popoverProps: popoverProps,\n        addColorRef: addColorRef\n      }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {\n        variant: variant,\n        colorPalette: duotoneColorPalette,\n        onClose: () => setEditingElement(null),\n        onChange: newElement => {\n          debounceOnChange(\n          // @ts-expect-error TODO: Don't know how to resolve\n          elements.map((currentElement, currentIndex) => {\n            if (currentIndex === editingElement) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        element: elements[editingElement ?? -1],\n        popoverProps: popoverProps\n      }), !isEditing && variant === 'gradient' && /*#__PURE__*/_jsx(GradientPicker, {\n        presentation: \"command-buttons\",\n        \"aria-labelledby\": paletteLabelId,\n        gradients: gradients,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomGradients: true\n      }), !isEditing && variant === 'duotone' && /*#__PURE__*/_jsx(DuotonePicker, {\n        presentation: \"command-buttons\",\n        \"aria-labelledby\": paletteLabelId,\n        duotonePalette: duotones ?? [],\n        colorPalette: duotoneColorPalette,\n        onChange: onSelectDuotoneItem,\n        clearable: false,\n        unsetable: false,\n        disableCustomDuotone: true,\n        disableCustomColors: true\n      }), !isEditing && variant === 'color' && /*#__PURE__*/_jsx(ColorPalette, {\n        presentation: \"command-buttons\",\n        \"aria-labelledby\": paletteLabelId,\n        colors: colors,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomColors: true\n      })]\n    }), !hasElements && emptyMessage && /*#__PURE__*/_jsx(PaletteEditContents, {\n      children: emptyMessage\n    })]\n  });\n}\nexport default PaletteEdit;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/private-apis.mjs

@@ -6,8 +6,7 @@ import { ComponentsContext } from "./context/context-system-provider.mjs";
 import { Tabs } from "./tabs/index.mjs";
 import { lock } from "./lock-unlock.mjs";
 import Badge from "./badge/index.mjs";
-import { ValidatedComboboxControl, ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from "./validated-form-controls/index.mjs";
-import { ValidatedFormTokenField } from "./validated-form-controls/components/form-token-field.mjs";
+import { ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl } from "./validated-form-controls/index.mjs";
 import ContentEditableControl from "./content-editable-control/index.mjs";
 var privateApis = {};
 lock(privateApis, {
@@ -19,12 +18,8 @@ lock(privateApis, {
   Badge,
   useDrag,
   ValidatedInputControl,
-  ValidatedComboboxControl,
   ValidatedContentEditableControl,
-  ValidatedTextareaControl,
-  ValidatedToggleControl,
-  ValidatedToggleGroupControl,
-  ValidatedFormTokenField
+  ValidatedTextareaControl
 });
 export {
   privateApis

package/build-module/private-apis.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/private-apis.ts"],
-  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport { Tabs } from './tabs';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\nimport { ValidatedComboboxControl, ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from './validated-form-controls';\nimport { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';\nimport ContentEditableControl from './content-editable-control';\nexport const privateApis = {};\nlock(privateApis, {\n  ContentEditableControl,\n  __experimentalPopoverLegacyPositionToPlacement,\n  ComponentsContext,\n  Tabs,\n  Menu,\n  Badge,\n  useDrag,\n  ValidatedInputControl,\n  ValidatedComboboxControl,\n  ValidatedContentEditableControl,\n  ValidatedTextareaControl,\n  ValidatedToggleControl,\n  ValidatedToggleGroupControl,\n  ValidatedFormTokenField\n});"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,uBAAuB,sDAAsD;AACtF,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,OAAO,WAAW;AAClB,SAAS,0BAA0B,uBAAuB,iCAAiC,0BAA0B,wBAAwB,mCAAmC;AAChL,SAAS,+BAA+B;AACxC,OAAO,4BAA4B;AAC5B,IAAM,cAAc,CAAC;AAC5B,KAAK,aAAa;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport { Tabs } from './tabs';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\nimport { ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl } from './validated-form-controls';\nimport ContentEditableControl from './content-editable-control';\nexport const privateApis = {};\nlock(privateApis, {\n  ContentEditableControl,\n  __experimentalPopoverLegacyPositionToPlacement,\n  ComponentsContext,\n  Tabs,\n  Menu,\n  Badge,\n  useDrag,\n  ValidatedInputControl,\n  ValidatedContentEditableControl,\n  ValidatedTextareaControl\n});"],
+  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,uBAAuB,sDAAsD;AACtF,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,OAAO,WAAW;AAClB,SAAS,uBAAuB,iCAAiC,gCAAgC;AACjG,OAAO,4BAA4B;AAC5B,IAAM,cAAc,CAAC;AAC5B,KAAK,aAAa;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

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

@@ -1,7 +1,92 @@
 // packages/components/src/progress-bar/index.tsx
+import clsx from "clsx";
 import { __ } from "@wordpress/i18n";
 import { forwardRef } from "@wordpress/element";
-import * as ProgressBarStyled from "./styles.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/progress-bar/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("5902509e23", "._1d8296bd910bb7bb__track{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 90%);border-radius:9999px;height:1.5px;outline:2px solid transparent;outline-offset:2px;overflow:hidden;position:relative}:where(._1d8296bd910bb7bb__track){width:160px}.be702ee1b0a3c396__indicator{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 10%);border-radius:9999px;display:inline-block;height:100%;outline:2px solid transparent;outline-offset:-2px;position:absolute;top:0;transition:width .4s ease-in-out;width:var(--indicator-width)}.be702ee1b0a3c396__indicator._125afa179e2803a2__is-indeterminate{--indicator-width:50%;animation:_7c6b2fa174e0d687__indeterminate-slide 1.5s ease-in-out infinite;transition:none}@keyframes _7c6b2fa174e0d687__indeterminate-slide{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}._4c47edc54d8dcb46__progress-element{height:100%;inset-inline-start:0;opacity:0;position:absolute;top:0;width:100%}");
+}
+var style_module_default = { "track": "_1d8296bd910bb7bb__track", "indicator": "be702ee1b0a3c396__indicator", "is-indeterminate": "_125afa179e2803a2__is-indeterminate", "indeterminate-slide": "_7c6b2fa174e0d687__indeterminate-slide", "progress-element": "_4c47edc54d8dcb46__progress-element" };
+
+// packages/components/src/progress-bar/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedProgressBar(props, ref) {
   const {
@@ -10,14 +95,17 @@ function UnforwardedProgressBar(props, ref) {
     ...progressProps
   } = props;
   const isIndeterminate = !Number.isFinite(value);
-  return /* @__PURE__ */ _jsxs(ProgressBarStyled.Track, {
-    className,
-    children: [/* @__PURE__ */ _jsx(ProgressBarStyled.Indicator, {
+  return /* @__PURE__ */ _jsxs("div", {
+    className: clsx(style_module_default.track, className),
+    children: [/* @__PURE__ */ _jsx("div", {
+      className: clsx(style_module_default.indicator, {
+        [style_module_default["is-indeterminate"]]: isIndeterminate
+      }),
       style: {
         "--indicator-width": !isIndeterminate ? `${value}%` : void 0
-      },
-      isIndeterminate
-    }), /* @__PURE__ */ _jsx(ProgressBarStyled.ProgressElement, {
+      }
+    }), /* @__PURE__ */ _jsx("progress", {
+      className: style_module_default["progress-element"],
       max: 100,
       value,
       "aria-label": __("Loading …"),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/progress-bar/index.tsx"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport * as ProgressBarStyled from './styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedProgressBar(props, ref) {\n  const {\n    className,\n    value,\n    ...progressProps\n  } = props;\n  const isIndeterminate = !Number.isFinite(value);\n  return /*#__PURE__*/_jsxs(ProgressBarStyled.Track, {\n    className: className,\n    children: [/*#__PURE__*/_jsx(ProgressBarStyled.Indicator, {\n      style: {\n        '--indicator-width': !isIndeterminate ? `${value}%` : undefined\n      },\n      isIndeterminate: isIndeterminate\n    }), /*#__PURE__*/_jsx(ProgressBarStyled.ProgressElement, {\n      max: 100,\n      value: value,\n      \"aria-label\": __('Loading …'),\n      ref: ref,\n      ...progressProps\n    })]\n  });\n}\n\n/**\n * A simple horizontal progress bar component.\n *\n * Supports two modes: determinate and indeterminate. A progress bar is determinate\n * when a specific progress value has been specified (from 0 to 100), and indeterminate\n * when a value hasn't been specified.\n *\n * ```jsx\n * import { ProgressBar } from '@wordpress/components';\n *\n * const MyLoadingComponent = () => {\n * \treturn <ProgressBar />;\n * };\n * ```\n */\nexport const ProgressBar = forwardRef(UnforwardedProgressBar);\nProgressBar.displayName = 'ProgressBar';\nexport default ProgressBar;"],
-  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,YAAY,uBAAuB;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,kBAAkB,CAAC,OAAO,SAAS,KAAK;AAC9C,SAAoB,sBAAwB,yBAAO;AAAA,IACjD;AAAA,IACA,UAAU,CAAc,qBAAuB,6BAAW;AAAA,MACxD,OAAO;AAAA,QACL,qBAAqB,CAAC,kBAAkB,GAAG,KAAK,MAAM;AAAA,MACxD;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,qBAAuB,mCAAiB;AAAA,MACvD,KAAK;AAAA,MACL;AAAA,MACA,cAAc,GAAG,WAAW;AAAA,MAC5B;AAAA,MACA,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAiBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
+  "sources": ["../../src/progress-bar/index.tsx", "../../../style-runtime/src/index.ts", "../../src/progress-bar/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedProgressBar(props, ref) {\n  const {\n    className,\n    value,\n    ...progressProps\n  } = props;\n  const isIndeterminate = !Number.isFinite(value);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx(styles.track, className),\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: clsx(styles.indicator, {\n        [styles['is-indeterminate']]: isIndeterminate\n      }),\n      style: {\n        '--indicator-width': !isIndeterminate ? `${value}%` : undefined\n      }\n    }), /*#__PURE__*/_jsx(\"progress\", {\n      className: styles['progress-element'],\n      max: 100,\n      value: value,\n      \"aria-label\": __('Loading …'),\n      ref: ref,\n      ...progressProps\n    })]\n  });\n}\n\n/**\n * A simple horizontal progress bar component.\n *\n * Supports two modes: determinate and indeterminate. A progress bar is determinate\n * when a specific progress value has been specified (from 0 to 100), and indeterminate\n * when a value hasn't been specified.\n *\n * ```jsx\n * import { ProgressBar } from '@wordpress/components';\n *\n * const MyLoadingComponent = () => {\n * \treturn <ProgressBar />;\n * };\n * ```\n */\nexport const ProgressBar = forwardRef(UnforwardedProgressBar);\nProgressBar.displayName = 'ProgressBar';\nexport default ProgressBar;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"5902509e23\", \"._1d8296bd910bb7bb__track{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 90%);border-radius:9999px;height:1.5px;outline:2px solid transparent;outline-offset:2px;overflow:hidden;position:relative}:where(._1d8296bd910bb7bb__track){width:160px}.be702ee1b0a3c396__indicator{background-color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 10%);border-radius:9999px;display:inline-block;height:100%;outline:2px solid transparent;outline-offset:-2px;position:absolute;top:0;transition:width .4s ease-in-out;width:var(--indicator-width)}.be702ee1b0a3c396__indicator._125afa179e2803a2__is-indeterminate{--indicator-width:50%;animation:_7c6b2fa174e0d687__indeterminate-slide 1.5s ease-in-out infinite;transition:none}@keyframes _7c6b2fa174e0d687__indeterminate-slide{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}._4c47edc54d8dcb46__progress-element{height:100%;inset-inline-start:0;opacity:0;position:absolute;top:0;width:100%}\");\n}\nexport default {\"track\":\"_1d8296bd910bb7bb__track\",\"indicator\":\"be702ee1b0a3c396__indicator\",\"is-indeterminate\":\"_125afa179e2803a2__is-indeterminate\",\"indeterminate-slide\":\"_7c6b2fa174e0d687__indeterminate-slide\",\"progress-element\":\"_4c47edc54d8dcb46__progress-element\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,UAAU;AACnB,SAAS,kBAAkB;;;ACF3B,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,skCAAskC;AACnmC;AACA,IAAO,uBAAQ,EAAC,SAAQ,4BAA2B,aAAY,+BAA8B,oBAAmB,uCAAsC,uBAAsB,0CAAyC,oBAAmB,sCAAqC;;;AFA7Q,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,kBAAkB,CAAC,OAAO,SAAS,KAAK;AAC9C,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW,KAAK,qBAAO,OAAO,SAAS;AAAA,IACvC,UAAU,CAAc,qBAAK,OAAO;AAAA,MAClC,WAAW,KAAK,qBAAO,WAAW;AAAA,QAChC,CAAC,qBAAO,kBAAkB,CAAC,GAAG;AAAA,MAChC,CAAC;AAAA,MACD,OAAO;AAAA,QACL,qBAAqB,CAAC,kBAAkB,GAAG,KAAK,MAAM;AAAA,MACxD;AAAA,IACF,CAAC,GAAgB,qBAAK,YAAY;AAAA,MAChC,WAAW,qBAAO,kBAAkB;AAAA,MACpC,KAAK;AAAA,MACL;AAAA,MACA,cAAc,GAAG,WAAW;AAAA,MAC5B;AAAA,MACA,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAiBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
   "names": []
 }

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

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

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

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

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

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

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

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