@wordpress/components 32.0.1-next.v.0 → 32.0.2-next.v.0

package/build-module/button/deprecated.mjs

@@ -15,14 +15,18 @@ function UnforwardedIconButton({
     alternative: "wp.components.Button",
     version: "6.2"
   });
-  return /* @__PURE__ */ _jsx(Button, {
-    ...props,
-    ref,
-    tooltipPosition: labelPosition,
-    iconSize: size,
-    showTooltip: tooltip !== void 0 ? !!tooltip : void 0,
-    label: tooltip || label
-  });
+  return (
+    // Disable reason: the parent component is taking care of the __next40pxDefaultSize prop.
+    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
+    /* @__PURE__ */ _jsx(Button, {
+      ...props,
+      ref,
+      tooltipPosition: labelPosition,
+      iconSize: size,
+      showTooltip: tooltip !== void 0 ? !!tooltip : void 0,
+      label: tooltip || label
+    })
+  );
 }
 var deprecated_default = forwardRef(UnforwardedIconButton);
 export {

package/build-module/button/deprecated.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/button/deprecated.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '.';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedIconButton({\n  label,\n  labelPosition,\n  size,\n  tooltip,\n  ...props\n}, ref) {\n  deprecated('wp.components.IconButton', {\n    since: '5.4',\n    alternative: 'wp.components.Button',\n    version: '6.2'\n  });\n  return /*#__PURE__*/_jsx(Button, {\n    ...props,\n    ref: ref,\n    tooltipPosition: labelPosition,\n    iconSize: size,\n    showTooltip: tooltip !== undefined ? !!tooltip : undefined,\n    label: tooltip || label\n  });\n}\nexport default forwardRef(UnforwardedIconButton);"],
-  "mappings": ";AAOA,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAK3B,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,aAAW,4BAA4B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX,CAAC;AACD,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,GAAG;AAAA,IACH;AAAA,IACA,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,aAAa,YAAY,SAAY,CAAC,CAAC,UAAU;AAAA,IACjD,OAAO,WAAW;AAAA,EACpB,CAAC;AACH;AACA,IAAO,qBAAQ,WAAW,qBAAqB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '.';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedIconButton({\n  label,\n  labelPosition,\n  size,\n  tooltip,\n  ...props\n}, ref) {\n  deprecated('wp.components.IconButton', {\n    since: '5.4',\n    alternative: 'wp.components.Button',\n    version: '6.2'\n  });\n  return (\n    /*#__PURE__*/\n    // Disable reason: the parent component is taking care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...props,\n      ref: ref,\n      tooltipPosition: labelPosition,\n      iconSize: size,\n      showTooltip: tooltip !== undefined ? !!tooltip : undefined,\n      label: tooltip || label\n    })\n  );\n}\nexport default forwardRef(UnforwardedIconButton);"],
+  "mappings": ";AAOA,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAK3B,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,aAAW,4BAA4B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX,CAAC;AACD;AAAA;AAAA;AAAA,IAIE,qBAAK,QAAQ;AAAA,MACX,GAAG;AAAA,MACH;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,aAAa,YAAY,SAAY,CAAC,CAAC,UAAU;AAAA,MACjD,OAAO,WAAW;AAAA,IACpB,CAAC;AAAA;AAEL;AACA,IAAO,qBAAQ,WAAW,qBAAqB;",
   "names": []
 }

package/build-module/button/index.mjs

@@ -203,6 +203,7 @@ function UnforwardedButton(props, ref) {
   });
 }
 var Button = forwardRef(UnforwardedButton);
+Button.displayName = "Button";
 var button_default = Button;
 export {
   Button,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { positionToPlacement } from '../popover/utils';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];\nfunction useDeprecatedProps({\n  __experimentalIsFocusable,\n  isDefault,\n  isPrimary,\n  isSecondary,\n  isTertiary,\n  isLink,\n  isPressed,\n  isSmall,\n  size,\n  variant,\n  describedBy,\n  ...otherProps\n}) {\n  let computedSize = size;\n  let computedVariant = variant;\n  const newProps = {\n    accessibleWhenDisabled: __experimentalIsFocusable,\n    // @todo Mark `isPressed` as deprecated\n    'aria-pressed': isPressed,\n    description: describedBy\n  };\n  if (isSmall) {\n    var _computedSize;\n    (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small';\n  }\n  if (isPrimary) {\n    var _computedVariant;\n    (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary';\n  }\n  if (isTertiary) {\n    var _computedVariant2;\n    (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary';\n  }\n  if (isSecondary) {\n    var _computedVariant3;\n    (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary';\n  }\n  if (isDefault) {\n    var _computedVariant4;\n    deprecated('wp.components.Button `isDefault` prop', {\n      since: '5.4',\n      alternative: 'variant=\"secondary\"'\n    });\n    (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary';\n  }\n  if (isLink) {\n    var _computedVariant5;\n    (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link';\n  }\n  return {\n    ...newProps,\n    ...otherProps,\n    size: computedSize,\n    variant: computedVariant\n  };\n}\nexport function UnforwardedButton(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    accessibleWhenDisabled,\n    isBusy,\n    isDestructive,\n    className,\n    disabled,\n    icon,\n    iconPosition = 'left',\n    iconSize,\n    showTooltip,\n    tooltipPosition,\n    shortcut,\n    label,\n    children,\n    size = 'default',\n    text,\n    variant,\n    description,\n    ...buttonOrAnchorProps\n  } = useDeprecatedProps(props);\n  const {\n    href,\n    target,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected,\n    ...additionalProps\n  } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {\n    href: undefined,\n    target: undefined,\n    ...buttonOrAnchorProps\n  };\n  const instanceId = useInstanceId(Button, 'components-button__description');\n  const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null &&\n  // Tooltip should not considered as a child\n  children?.[0]?.props?.className !== 'components-tooltip';\n  const truthyAriaPressedValues = [true, 'true', 'mixed'];\n  const classes = clsx('components-button', className, {\n    'is-next-40px-default-size': __next40pxDefaultSize,\n    'is-secondary': variant === 'secondary',\n    'is-primary': variant === 'primary',\n    'is-small': size === 'small',\n    'is-compact': size === 'compact',\n    'is-tertiary': variant === 'tertiary',\n    'is-pressed': truthyAriaPressedValues.includes(ariaPressed),\n    'is-pressed-mixed': ariaPressed === 'mixed',\n    'is-busy': isBusy,\n    'is-link': variant === 'link',\n    'is-destructive': isDestructive,\n    'has-text': !!icon && (hasChildren || text),\n    'has-icon': !!icon,\n    'has-icon-right': iconPosition === 'right'\n  });\n  const trulyDisabled = disabled && !accessibleWhenDisabled;\n  const Tag = href !== undefined && !disabled ? 'a' : 'button';\n  const buttonProps = Tag === 'button' ? {\n    type: 'button',\n    disabled: trulyDisabled,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected\n  } : {};\n  const anchorProps = Tag === 'a' ? {\n    href,\n    target\n  } : {};\n  const disableEventProps = {};\n  if (disabled && accessibleWhenDisabled) {\n    // In this case, the button will be disabled, but still focusable and\n    // perceivable by screen reader users.\n    buttonProps['aria-disabled'] = true;\n    anchorProps['aria-disabled'] = true;\n    for (const disabledEvent of disabledEventsOnDisabledButton) {\n      disableEventProps[disabledEvent] = event => {\n        if (event) {\n          event.stopPropagation();\n          event.preventDefault();\n        }\n      };\n    }\n  }\n\n  // Should show the tooltip if...\n  const shouldShowTooltip = !trulyDisabled && (\n  // An explicit tooltip is passed or...\n  showTooltip && !!label ||\n  // There's a shortcut or...\n  !!shortcut ||\n  // There's a label and...\n  !!label &&\n  // The children are empty and...\n  !children?.length &&\n  // The tooltip is not explicitly disabled.\n  false !== showTooltip);\n  const descriptionId = description ? instanceId : undefined;\n  const describedById = additionalProps['aria-describedby'] || descriptionId;\n  const commonProps = {\n    className: classes,\n    'aria-label': additionalProps['aria-label'] || label,\n    'aria-describedby': describedById,\n    ref\n  };\n  const elementChildren = /*#__PURE__*/_jsxs(_Fragment, {\n    children: [icon && iconPosition === 'left' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    }), text && /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    }), children, icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    })]\n  });\n  const element = Tag === 'a' ? /*#__PURE__*/_jsx(\"a\", {\n    ...anchorProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  }) : /*#__PURE__*/_jsx(\"button\", {\n    ...buttonProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  });\n\n  // In order to avoid some React reconciliation issues, we are always rendering\n  // the `Tooltip` component even when `shouldShowTooltip` is `false`.\n  // In order to make sure that the tooltip doesn't show when it shouldn't,\n  // we don't pass the props to the `Tooltip` component.\n  const tooltipProps = shouldShowTooltip ? {\n    text: children?.length && description ? description : label,\n    shortcut,\n    placement: tooltipPosition &&\n    // Convert legacy `position` values to be used with the new `placement` prop\n    positionToPlacement(tooltipPosition)\n  } : {};\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Tooltip, {\n      ...tooltipProps,\n      children: element\n    }), description && /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: description\n      })\n    })]\n  });\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef(UnforwardedButton);\nexport default Button;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { positionToPlacement } from '../popover/utils';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];\nfunction useDeprecatedProps({\n  __experimentalIsFocusable,\n  isDefault,\n  isPrimary,\n  isSecondary,\n  isTertiary,\n  isLink,\n  isPressed,\n  isSmall,\n  size,\n  variant,\n  describedBy,\n  ...otherProps\n}) {\n  let computedSize = size;\n  let computedVariant = variant;\n  const newProps = {\n    accessibleWhenDisabled: __experimentalIsFocusable,\n    // @todo Mark `isPressed` as deprecated\n    'aria-pressed': isPressed,\n    description: describedBy\n  };\n  if (isSmall) {\n    var _computedSize;\n    (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small';\n  }\n  if (isPrimary) {\n    var _computedVariant;\n    (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary';\n  }\n  if (isTertiary) {\n    var _computedVariant2;\n    (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary';\n  }\n  if (isSecondary) {\n    var _computedVariant3;\n    (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary';\n  }\n  if (isDefault) {\n    var _computedVariant4;\n    deprecated('wp.components.Button `isDefault` prop', {\n      since: '5.4',\n      alternative: 'variant=\"secondary\"'\n    });\n    (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary';\n  }\n  if (isLink) {\n    var _computedVariant5;\n    (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link';\n  }\n  return {\n    ...newProps,\n    ...otherProps,\n    size: computedSize,\n    variant: computedVariant\n  };\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport function UnforwardedButton(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    accessibleWhenDisabled,\n    isBusy,\n    isDestructive,\n    className,\n    disabled,\n    icon,\n    iconPosition = 'left',\n    iconSize,\n    showTooltip,\n    tooltipPosition,\n    shortcut,\n    label,\n    children,\n    size = 'default',\n    text,\n    variant,\n    description,\n    ...buttonOrAnchorProps\n  } = useDeprecatedProps(props);\n  const {\n    href,\n    target,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected,\n    ...additionalProps\n  } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {\n    href: undefined,\n    target: undefined,\n    ...buttonOrAnchorProps\n  };\n  const instanceId = useInstanceId(Button, 'components-button__description');\n  const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null &&\n  // Tooltip should not considered as a child\n  children?.[0]?.props?.className !== 'components-tooltip';\n  const truthyAriaPressedValues = [true, 'true', 'mixed'];\n  const classes = clsx('components-button', className, {\n    'is-next-40px-default-size': __next40pxDefaultSize,\n    'is-secondary': variant === 'secondary',\n    'is-primary': variant === 'primary',\n    'is-small': size === 'small',\n    'is-compact': size === 'compact',\n    'is-tertiary': variant === 'tertiary',\n    'is-pressed': truthyAriaPressedValues.includes(ariaPressed),\n    'is-pressed-mixed': ariaPressed === 'mixed',\n    'is-busy': isBusy,\n    'is-link': variant === 'link',\n    'is-destructive': isDestructive,\n    'has-text': !!icon && (hasChildren || text),\n    'has-icon': !!icon,\n    'has-icon-right': iconPosition === 'right'\n  });\n  const trulyDisabled = disabled && !accessibleWhenDisabled;\n  const Tag = href !== undefined && !disabled ? 'a' : 'button';\n  const buttonProps = Tag === 'button' ? {\n    type: 'button',\n    disabled: trulyDisabled,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected\n  } : {};\n  const anchorProps = Tag === 'a' ? {\n    href,\n    target\n  } : {};\n  const disableEventProps = {};\n  if (disabled && accessibleWhenDisabled) {\n    // In this case, the button will be disabled, but still focusable and\n    // perceivable by screen reader users.\n    buttonProps['aria-disabled'] = true;\n    anchorProps['aria-disabled'] = true;\n    for (const disabledEvent of disabledEventsOnDisabledButton) {\n      disableEventProps[disabledEvent] = event => {\n        if (event) {\n          event.stopPropagation();\n          event.preventDefault();\n        }\n      };\n    }\n  }\n\n  // Should show the tooltip if...\n  const shouldShowTooltip = !trulyDisabled && (\n  // An explicit tooltip is passed or...\n  showTooltip && !!label ||\n  // There's a shortcut or...\n  !!shortcut ||\n  // There's a label and...\n  !!label &&\n  // The children are empty and...\n  !children?.length &&\n  // The tooltip is not explicitly disabled.\n  false !== showTooltip);\n  const descriptionId = description ? instanceId : undefined;\n  const describedById = additionalProps['aria-describedby'] || descriptionId;\n  const commonProps = {\n    className: classes,\n    'aria-label': additionalProps['aria-label'] || label,\n    'aria-describedby': describedById,\n    ref\n  };\n  const elementChildren = /*#__PURE__*/_jsxs(_Fragment, {\n    children: [icon && iconPosition === 'left' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    }), text && /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    }), children, icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    })]\n  });\n  const element = Tag === 'a' ? /*#__PURE__*/_jsx(\"a\", {\n    ...anchorProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  }) : /*#__PURE__*/_jsx(\"button\", {\n    ...buttonProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  });\n\n  // In order to avoid some React reconciliation issues, we are always rendering\n  // the `Tooltip` component even when `shouldShowTooltip` is `false`.\n  // In order to make sure that the tooltip doesn't show when it shouldn't,\n  // we don't pass the props to the `Tooltip` component.\n  const tooltipProps = shouldShowTooltip ? {\n    text: children?.length && description ? description : label,\n    shortcut,\n    placement: tooltipPosition &&\n    // Convert legacy `position` values to be used with the new `placement` prop\n    positionToPlacement(tooltipPosition)\n  } : {};\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Tooltip, {\n      ...tooltipProps,\n      children: element\n    }), description && /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: description\n      })\n    })]\n  });\n}\nexport const Button = forwardRef(UnforwardedButton);\nButton.displayName = 'Button';\nexport default Button;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/button-group/index.mjs

@@ -24,6 +24,7 @@ function UnforwardedButtonGroup(props, ref) {
   });
 }
 var ButtonGroup = forwardRef(UnforwardedButtonGroup);
+ButtonGroup.displayName = "ButtonGroup";
 var button_group_default = ButtonGroup;
 export {
   ButtonGroup,

package/build-module/button-group/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/button-group/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedButtonGroup(props, ref) {\n  const {\n    className,\n    __shouldNotWarnDeprecated,\n    ...restProps\n  } = props;\n  const classes = clsx('components-button-group', className);\n  if (!__shouldNotWarnDeprecated) {\n    deprecated('wp.components.ButtonGroup', {\n      since: '6.8',\n      alternative: 'wp.components.__experimentalToggleGroupControl'\n    });\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    role: \"group\",\n    className: classes,\n    ...restProps\n  });\n}\n\n/**\n * ButtonGroup can be used to group any related buttons together. To emphasize\n * related buttons, a group should share a common container.\n *\n * @deprecated Use `ToggleGroupControl` instead.\n *\n * ```jsx\n * import { Button, ButtonGroup } from '@wordpress/components';\n *\n * const MyButtonGroup = () => (\n *   <ButtonGroup>\n *     <Button variant=\"primary\">Button 1</Button>\n *     <Button variant=\"primary\">Button 2</Button>\n *   </ButtonGroup>\n * );\n * ```\n */\nexport const ButtonGroup = forwardRef(UnforwardedButtonGroup);\nexport default ButtonGroup;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;AAKvB,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,UAAU,KAAK,2BAA2B,SAAS;AACzD,MAAI,CAAC,2BAA2B;AAC9B,eAAW,6BAA6B;AAAA,MACtC,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,MAAM;AAAA,IACN,WAAW;AAAA,IACX,GAAG;AAAA,EACL,CAAC;AACH;AAmBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,IAAO,uBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedButtonGroup(props, ref) {\n  const {\n    className,\n    __shouldNotWarnDeprecated,\n    ...restProps\n  } = props;\n  const classes = clsx('components-button-group', className);\n  if (!__shouldNotWarnDeprecated) {\n    deprecated('wp.components.ButtonGroup', {\n      since: '6.8',\n      alternative: 'wp.components.__experimentalToggleGroupControl'\n    });\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    role: \"group\",\n    className: classes,\n    ...restProps\n  });\n}\n\n/**\n * ButtonGroup can be used to group any related buttons together. To emphasize\n * related buttons, a group should share a common container.\n *\n * @deprecated Use `ToggleGroupControl` instead.\n *\n * ```jsx\n * import { Button, ButtonGroup } from '@wordpress/components';\n *\n * const MyButtonGroup = () => (\n *   <ButtonGroup>\n *     <Button variant=\"primary\">Button 1</Button>\n *     <Button variant=\"primary\">Button 2</Button>\n *   </ButtonGroup>\n * );\n * ```\n */\nexport const ButtonGroup = forwardRef(UnforwardedButtonGroup);\nButtonGroup.displayName = 'ButtonGroup';\nexport default ButtonGroup;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;AAKvB,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,UAAU,KAAK,2BAA2B,SAAS;AACzD,MAAI,CAAC,2BAA2B;AAC9B,eAAW,6BAA6B;AAAA,MACtC,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,MAAM;AAAA,IACN,WAAW;AAAA,IACX,GAAG;AAAA,EACL,CAAC;AACH;AAmBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
   "names": []
 }

package/build-module/circular-option-picker/circular-option-picker-option.mjs

@@ -14,6 +14,7 @@ function UnforwardedOptionAsButton(props, forwardedRef) {
     ...additionalProps
   } = props;
   return /* @__PURE__ */ _jsx(Button, {
+    __next40pxDefaultSize: true,
     ...additionalProps,
     "aria-pressed": isPressed,
     ref: forwardedRef,
@@ -39,6 +40,7 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   }, [isSelected, setActiveId, activeId, id]);
   return /* @__PURE__ */ _jsx(Composite.Item, {
     render: /* @__PURE__ */ _jsx(Button, {
+      __next40pxDefaultSize: true,
       ...additionalProps,
       role: "option",
       "aria-selected": !!isSelected,
@@ -64,7 +66,6 @@ function Option({
   const commonProps = {
     id,
     className: "components-circular-option-picker__option",
-    __next40pxDefaultSize: true,
     ...additionalProps
   };
   const isListbox = setActiveId !== void 0;

package/build-module/circular-option-picker/circular-option-picker-option.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/circular-option-picker-option.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedOptionAsButton(props, forwardedRef) {\n  const {\n    isPressed,\n    label,\n    ...additionalProps\n  } = props;\n  return /*#__PURE__*/_jsx(Button, {\n    ...additionalProps,\n    \"aria-pressed\": isPressed,\n    ref: forwardedRef,\n    label: label\n  });\n}\nconst OptionAsButton = forwardRef(UnforwardedOptionAsButton);\nfunction UnforwardedOptionAsOption(props, forwardedRef) {\n  const {\n    id,\n    isSelected,\n    label,\n    ...additionalProps\n  } = props;\n  const {\n    setActiveId,\n    activeId\n  } = useContext(CircularOptionPickerContext);\n  useEffect(() => {\n    if (isSelected && !activeId) {\n      // The setTimeout call is necessary to make sure that this update\n      // doesn't get overridden by `Composite`'s internal logic, which picks\n      // an initial active item if one is not specifically set.\n      window.setTimeout(() => setActiveId?.(id), 0);\n    }\n  }, [isSelected, setActiveId, activeId, id]);\n  return /*#__PURE__*/_jsx(Composite.Item, {\n    render: /*#__PURE__*/_jsx(Button, {\n      ...additionalProps,\n      role: \"option\",\n      \"aria-selected\": !!isSelected,\n      ref: forwardedRef,\n      label: label\n    }),\n    id: id\n  });\n}\nconst OptionAsOption = forwardRef(UnforwardedOptionAsOption);\nexport function Option({\n  className,\n  isSelected,\n  selectedIconProps = {},\n  tooltipText,\n  ...additionalProps\n}) {\n  const {\n    baseId,\n    setActiveId\n  } = useContext(CircularOptionPickerContext);\n  const id = useInstanceId(Option, baseId || 'components-circular-option-picker__option');\n  const commonProps = {\n    id,\n    className: 'components-circular-option-picker__option',\n    __next40pxDefaultSize: true,\n    ...additionalProps\n  };\n  const isListbox = setActiveId !== undefined;\n  const optionControl = isListbox ? /*#__PURE__*/_jsx(OptionAsOption, {\n    ...commonProps,\n    label: tooltipText,\n    isSelected: isSelected\n  }) : /*#__PURE__*/_jsx(OptionAsButton, {\n    ...commonProps,\n    label: tooltipText,\n    isPressed: isSelected\n  });\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx(className, 'components-circular-option-picker__option-wrapper'),\n    children: [optionControl, isSelected && /*#__PURE__*/_jsx(Icon, {\n      icon: check,\n      ...selectedIconProps\n    })]\n  });\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,YAAY,iBAAiB;AAClD,SAAS,MAAM,aAAa;AAK5B,SAAS,mCAAmC;AAC5C,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAC1B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,GAAG;AAAA,IACH,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;AACA,IAAM,iBAAiB,WAAW,yBAAyB;AAC3D,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,WAAW,2BAA2B;AAC1C,YAAU,MAAM;AACd,QAAI,cAAc,CAAC,UAAU;AAI3B,aAAO,WAAW,MAAM,cAAc,EAAE,GAAG,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,YAAY,aAAa,UAAU,EAAE,CAAC;AAC1C,SAAoB,qBAAK,UAAU,MAAM;AAAA,IACvC,QAAqB,qBAAK,QAAQ;AAAA,MAChC,GAAG;AAAA,MACH,MAAM;AAAA,MACN,iBAAiB,CAAC,CAAC;AAAA,MACnB,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,IACD;AAAA,EACF,CAAC;AACH;AACA,IAAM,iBAAiB,WAAW,yBAAyB;AACpD,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,WAAW,2BAA2B;AAC1C,QAAM,KAAK,cAAc,QAAQ,UAAU,2CAA2C;AACtF,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,IACX,uBAAuB;AAAA,IACvB,GAAG;AAAA,EACL;AACA,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,YAAyB,qBAAK,gBAAgB;AAAA,IAClE,GAAG;AAAA,IACH,OAAO;AAAA,IACP;AAAA,EACF,CAAC,IAAiB,qBAAK,gBAAgB;AAAA,IACrC,GAAG;AAAA,IACH,OAAO;AAAA,IACP,WAAW;AAAA,EACb,CAAC;AACD,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW,KAAK,WAAW,mDAAmD;AAAA,IAC9E,UAAU,CAAC,eAAe,cAA2B,qBAAK,MAAM;AAAA,MAC9D,MAAM;AAAA,MACN,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedOptionAsButton(props, forwardedRef) {\n  const {\n    isPressed,\n    label,\n    ...additionalProps\n  } = props;\n  return /*#__PURE__*/_jsx(Button, {\n    __next40pxDefaultSize: true,\n    ...additionalProps,\n    \"aria-pressed\": isPressed,\n    ref: forwardedRef,\n    label: label\n  });\n}\nconst OptionAsButton = forwardRef(UnforwardedOptionAsButton);\nfunction UnforwardedOptionAsOption(props, forwardedRef) {\n  const {\n    id,\n    isSelected,\n    label,\n    ...additionalProps\n  } = props;\n  const {\n    setActiveId,\n    activeId\n  } = useContext(CircularOptionPickerContext);\n  useEffect(() => {\n    if (isSelected && !activeId) {\n      // The setTimeout call is necessary to make sure that this update\n      // doesn't get overridden by `Composite`'s internal logic, which picks\n      // an initial active item if one is not specifically set.\n      window.setTimeout(() => setActiveId?.(id), 0);\n    }\n  }, [isSelected, setActiveId, activeId, id]);\n  return /*#__PURE__*/_jsx(Composite.Item, {\n    render: /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      ...additionalProps,\n      role: \"option\",\n      \"aria-selected\": !!isSelected,\n      ref: forwardedRef,\n      label: label\n    }),\n    id: id\n  });\n}\nconst OptionAsOption = forwardRef(UnforwardedOptionAsOption);\nexport function Option({\n  className,\n  isSelected,\n  selectedIconProps = {},\n  tooltipText,\n  ...additionalProps\n}) {\n  const {\n    baseId,\n    setActiveId\n  } = useContext(CircularOptionPickerContext);\n  const id = useInstanceId(Option, baseId || 'components-circular-option-picker__option');\n  const commonProps = {\n    id,\n    className: 'components-circular-option-picker__option',\n    ...additionalProps\n  };\n  const isListbox = setActiveId !== undefined;\n  const optionControl = isListbox ? /*#__PURE__*/_jsx(OptionAsOption, {\n    ...commonProps,\n    label: tooltipText,\n    isSelected: isSelected\n  }) : /*#__PURE__*/_jsx(OptionAsButton, {\n    ...commonProps,\n    label: tooltipText,\n    isPressed: isSelected\n  });\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx(className, 'components-circular-option-picker__option-wrapper'),\n    children: [optionControl, isSelected && /*#__PURE__*/_jsx(Icon, {\n      icon: check,\n      ...selectedIconProps\n    })]\n  });\n}"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,YAAY,iBAAiB;AAClD,SAAS,MAAM,aAAa;AAK5B,SAAS,mCAAmC;AAC5C,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAC1B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,uBAAuB;AAAA,IACvB,GAAG;AAAA,IACH,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;AACA,IAAM,iBAAiB,WAAW,yBAAyB;AAC3D,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,WAAW,2BAA2B;AAC1C,YAAU,MAAM;AACd,QAAI,cAAc,CAAC,UAAU;AAI3B,aAAO,WAAW,MAAM,cAAc,EAAE,GAAG,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,YAAY,aAAa,UAAU,EAAE,CAAC;AAC1C,SAAoB,qBAAK,UAAU,MAAM;AAAA,IACvC,QAAqB,qBAAK,QAAQ;AAAA,MAChC,uBAAuB;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,iBAAiB,CAAC,CAAC;AAAA,MACnB,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,IACD;AAAA,EACF,CAAC;AACH;AACA,IAAM,iBAAiB,WAAW,yBAAyB;AACpD,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,WAAW,2BAA2B;AAC1C,QAAM,KAAK,cAAc,QAAQ,UAAU,2CAA2C;AACtF,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL;AACA,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,YAAyB,qBAAK,gBAAgB;AAAA,IAClE,GAAG;AAAA,IACH,OAAO;AAAA,IACP;AAAA,EACF,CAAC,IAAiB,qBAAK,gBAAgB;AAAA,IACrC,GAAG;AAAA,IACH,OAAO;AAAA,IACP,WAAW;AAAA,EACb,CAAC;AACD,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW,KAAK,WAAW,mDAAmD;AAAA,IAC9E,UAAU,CAAC,eAAe,cAA2B,qBAAK,MAAM;AAAA,MAC9D,MAAM;AAAA,MACN,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": []
 }

package/build-module/circular-option-picker/circular-option-picker.mjs

@@ -95,6 +95,7 @@ CircularOptionPicker.Option = Option;
 CircularOptionPicker.OptionGroup = OptionGroup;
 CircularOptionPicker.ButtonAction = ButtonAction;
 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+CircularOptionPicker.displayName = "CircularOptionPicker";
 var circular_option_picker_default = CircularOptionPicker;
 export {
   circular_option_picker_default as default

package/build-module/circular-option-picker/circular-option-picker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/circular-option-picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListboxCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    baseId,\n    className,\n    loop = true,\n    children,\n    ...additionalProps\n  } = props;\n  const [activeId, setActiveId] = useState(undefined);\n  const contextValue = useMemo(() => ({\n    baseId,\n    activeId,\n    setActiveId\n  }), [baseId, activeId, setActiveId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: className,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [/*#__PURE__*/_jsx(Composite, {\n        ...additionalProps,\n        id: baseId,\n        focusLoop: loop,\n        rtl: isRTL(),\n        role: \"listbox\",\n        activeId: activeId,\n        setActiveId: setActiveId,\n        children: options\n      }), children, actions]\n    })\n  });\n}\nfunction ButtonsCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    children,\n    baseId,\n    ...additionalProps\n  } = props;\n  const contextValue = useMemo(() => ({\n    baseId\n  }), [baseId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...additionalProps,\n    role: \"group\",\n    id: baseId,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [options, children, actions]\n    })\n  });\n}\nfunction CircularOptionPicker(props) {\n  const {\n    asButtons,\n    actions: actionsProp,\n    options: optionsProp,\n    children,\n    className,\n    ...additionalProps\n  } = props;\n  const baseId = useInstanceId(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);\n  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;\n  const actions = actionsProp ? /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__custom-clear-wrapper\",\n    children: actionsProp\n  }) : undefined;\n  const options = /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__swatches\",\n    children: optionsProp\n  });\n  return /*#__PURE__*/_jsx(OptionPickerImplementation, {\n    ...additionalProps,\n    baseId: baseId,\n    className: clsx('components-circular-option-picker', className),\n    actions: actions,\n    options: options,\n    children: children\n  });\n}\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\nexport default CircularOptionPicker;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB;AAKlC,SAAS,mCAAmC;AAC5C,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AA8CjD,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAS;AAClD,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,UAAU,WAAW,CAAC;AACnC,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAc,qBAAK,WAAW;AAAA,QACtC,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,KAAK,MAAM;AAAA,QACX,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,UAAU;AAAA,MACZ,CAAC,GAAG,UAAU,OAAO;AAAA,IACvB,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,MAAM,CAAC;AACZ,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAC,SAAS,UAAU,OAAO;AAAA,IACvC,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,qBAAqB,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,cAAc,sBAAsB,qCAAqC,gBAAgB,EAAE;AAC1G,QAAM,6BAA6B,YAAY,8BAA8B;AAC7E,QAAM,UAAU,cAA2B,qBAAK,OAAO;AAAA,IACrD,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC,IAAI;AACL,QAAM,UAAuB,qBAAK,OAAO;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AACD,SAAoB,qBAAK,4BAA4B;AAAA,IACnD,GAAG;AAAA,IACH;AAAA,IACA,WAAW,KAAK,qCAAqC,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,qBAAqB,SAAS;AAC9B,qBAAqB,cAAc;AACnC,qBAAqB,eAAe;AACpC,qBAAqB,qBAAqB;AAC1C,IAAO,iCAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListboxCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    baseId,\n    className,\n    loop = true,\n    children,\n    ...additionalProps\n  } = props;\n  const [activeId, setActiveId] = useState(undefined);\n  const contextValue = useMemo(() => ({\n    baseId,\n    activeId,\n    setActiveId\n  }), [baseId, activeId, setActiveId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: className,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [/*#__PURE__*/_jsx(Composite, {\n        ...additionalProps,\n        id: baseId,\n        focusLoop: loop,\n        rtl: isRTL(),\n        role: \"listbox\",\n        activeId: activeId,\n        setActiveId: setActiveId,\n        children: options\n      }), children, actions]\n    })\n  });\n}\nfunction ButtonsCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    children,\n    baseId,\n    ...additionalProps\n  } = props;\n  const contextValue = useMemo(() => ({\n    baseId\n  }), [baseId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...additionalProps,\n    role: \"group\",\n    id: baseId,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [options, children, actions]\n    })\n  });\n}\nfunction CircularOptionPicker(props) {\n  const {\n    asButtons,\n    actions: actionsProp,\n    options: optionsProp,\n    children,\n    className,\n    ...additionalProps\n  } = props;\n  const baseId = useInstanceId(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);\n  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;\n  const actions = actionsProp ? /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__custom-clear-wrapper\",\n    children: actionsProp\n  }) : undefined;\n  const options = /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__swatches\",\n    children: optionsProp\n  });\n  return /*#__PURE__*/_jsx(OptionPickerImplementation, {\n    ...additionalProps,\n    baseId: baseId,\n    className: clsx('components-circular-option-picker', className),\n    actions: actions,\n    options: options,\n    children: children\n  });\n}\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\nCircularOptionPicker.displayName = 'CircularOptionPicker';\nexport default CircularOptionPicker;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB;AAKlC,SAAS,mCAAmC;AAC5C,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AA8CjD,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAS;AAClD,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,UAAU,WAAW,CAAC;AACnC,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAc,qBAAK,WAAW;AAAA,QACtC,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,KAAK,MAAM;AAAA,QACX,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,UAAU;AAAA,MACZ,CAAC,GAAG,UAAU,OAAO;AAAA,IACvB,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,MAAM,CAAC;AACZ,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAC,SAAS,UAAU,OAAO;AAAA,IACvC,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,qBAAqB,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,cAAc,sBAAsB,qCAAqC,gBAAgB,EAAE;AAC1G,QAAM,6BAA6B,YAAY,8BAA8B;AAC7E,QAAM,UAAU,cAA2B,qBAAK,OAAO;AAAA,IACrD,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC,IAAI;AACL,QAAM,UAAuB,qBAAK,OAAO;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AACD,SAAoB,qBAAK,4BAA4B;AAAA,IACnD,GAAG;AAAA,IACH;AAAA,IACA,WAAW,KAAK,qCAAqC,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,qBAAqB,SAAS;AAC9B,qBAAqB,cAAc;AACnC,qBAAqB,eAAe;AACpC,qBAAqB,qBAAqB;AAC1C,qBAAqB,cAAc;AACnC,IAAO,iCAAQ;",
   "names": []
 }

package/build-module/clipboard-button/index.mjs

@@ -39,13 +39,17 @@ function ClipboardButton({
   const focusOnCopyEventTarget = (event) => {
     event.target.focus();
   };
-  return /* @__PURE__ */ _jsx(Button, {
-    ...buttonProps,
-    className: classes,
-    ref,
-    onCopy: focusOnCopyEventTarget,
-    children
-  });
+  return (
+    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.
+    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
+    /* @__PURE__ */ _jsx(Button, {
+      ...buttonProps,
+      className: classes,
+      ref,
+      onCopy: focusOnCopyEventTarget,
+      children
+    })
+  );
 }
 export {
   ClipboardButton as default

package/build-module/clipboard-button/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/clipboard-button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef();\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return /*#__PURE__*/_jsx(Button, {\n    ...buttonProps,\n    className: classes,\n    ref: ref,\n    onCopy: focusOnCopyEventTarget,\n    children: children\n  });\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,aAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,eAAe,OAAO;AAC5B,QAAM,MAAM,mBAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef();\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,aAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,eAAe,OAAO;AAC5B,QAAM,MAAM,mBAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,qBAAK,QAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
   "names": []
 }

package/build-module/color-indicator/index.mjs

@@ -18,6 +18,7 @@ function UnforwardedColorIndicator(props, forwardedRef) {
   });
 }
 var ColorIndicator = forwardRef(UnforwardedColorIndicator);
+ColorIndicator.displayName = "ColorIndicator";
 var color_indicator_default = ColorIndicator;
 export {
   ColorIndicator,

package/build-module/color-indicator/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-indicator/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedColorIndicator(props, forwardedRef) {\n  const {\n    className,\n    colorValue,\n    ...additionalProps\n  } = props;\n  return /*#__PURE__*/_jsx(\"span\", {\n    className: clsx('component-color-indicator', className),\n    style: {\n      background: colorValue\n    },\n    ref: forwardedRef,\n    ...additionalProps\n  });\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef(UnforwardedColorIndicator);\nexport default ColorIndicator;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAC5B,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AACH;AAaO,IAAM,iBAAiB,WAAW,yBAAyB;AAClE,IAAO,0BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedColorIndicator(props, forwardedRef) {\n  const {\n    className,\n    colorValue,\n    ...additionalProps\n  } = props;\n  return /*#__PURE__*/_jsx(\"span\", {\n    className: clsx('component-color-indicator', className),\n    style: {\n      background: colorValue\n    },\n    ref: forwardedRef,\n    ...additionalProps\n  });\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef(UnforwardedColorIndicator);\nColorIndicator.displayName = 'ColorIndicator';\nexport default ColorIndicator;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAC5B,SAAS,0BAA0B,OAAO,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AACH;AAaO,IAAM,iBAAiB,WAAW,yBAAyB;AAClE,eAAe,cAAc;AAC7B,IAAO,0BAAQ;",
   "names": []
 }

package/build-module/color-palette/index.mjs

@@ -228,6 +228,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
   });
 }
 var ColorPalette = forwardRef(UnforwardedColorPalette);
+ColorPalette.displayName = "ColorPalette";
 var color_palette_default = ColorPalette;
 export {
   ColorPalette,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-palette/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name\n    }, index) => {\n      const colordColor = colord(color);\n      const isSelected = value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index)\n      }, `${color}-${index}`);\n    });\n  }, [colors, value, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: newColor => onChange(newColor, index),\n          value: value,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\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    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nexport default ColorPalette;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name\n    }, index) => {\n      const colordColor = colord(color);\n      const isSelected = value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index)\n      }, `${color}-${index}`);\n    });\n  }, [colors, value, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: newColor => onChange(newColor, index),\n          value: value,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\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    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -21,7 +21,7 @@ import Spinner from "../spinner/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
-var DetectOutside = withFocusOutside(class extends Component {
+var DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {
   handleFocusOutside(event) {
     this.props.onFocusOutside(event);
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/combobox-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  var _currentOption$label;\n  const {\n    __next40pxDefaultSize = false,\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ComboboxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  var _currentOption$label;\n  const {\n    __next40pxDefaultSize = false,\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ComboboxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/date-time/date-time/index.mjs

@@ -38,6 +38,7 @@ function UnforwardedDateTimePicker({
   });
 }
 var DateTimePicker = forwardRef(UnforwardedDateTimePicker);
+DateTimePicker.displayName = "DateTimePicker";
 var date_time_default = DateTimePicker;
 export {
   DatePicker,

package/build-module/date-time/date-time/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/date-time/date-time/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport { Wrapper } from './styles';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport { DatePicker, TimePicker };\nconst noop = () => {};\nfunction UnforwardedDateTimePicker({\n  currentDate,\n  is12Hour,\n  dateOrder,\n  isInvalidDate,\n  onMonthPreviewed = noop,\n  onChange,\n  events,\n  startOfWeek\n}, ref) {\n  return /*#__PURE__*/_jsx(Wrapper, {\n    ref: ref,\n    className: \"components-datetime\",\n    spacing: 4,\n    children: /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(TimePicker, {\n        currentTime: currentDate,\n        onChange: onChange,\n        is12Hour: is12Hour,\n        dateOrder: dateOrder\n      }), /*#__PURE__*/_jsx(DatePicker, {\n        currentDate: currentDate,\n        onChange: onChange,\n        isInvalidDate: isInvalidDate,\n        events: events,\n        onMonthPreviewed: onMonthPreviewed,\n        startOfWeek: startOfWeek\n      })]\n    })\n  });\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef(UnforwardedDateTimePicker);\nexport default DateTimePicker;"],
-  "mappings": ";AAOA,SAAS,kBAAkB;AAK3B,SAAS,WAAW,kBAAkB;AACtC,SAAS,WAAW,kBAAkB;AACtC,SAAS,eAAe;AACxB,SAAS,OAAO,MAAM,YAAY,WAAW,QAAQ,aAAa;AAElE,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,0BAA0B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,SAAoB,qBAAK,SAAS;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAuB,sBAAM,WAAW;AAAA,MACtC,UAAU,CAAc,qBAAK,YAAY;AAAA,QACvC,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,qBAAK,YAAY;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAwBO,IAAM,iBAAiB,WAAW,yBAAyB;AAClE,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport { Wrapper } from './styles';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport { DatePicker, TimePicker };\nconst noop = () => {};\nfunction UnforwardedDateTimePicker({\n  currentDate,\n  is12Hour,\n  dateOrder,\n  isInvalidDate,\n  onMonthPreviewed = noop,\n  onChange,\n  events,\n  startOfWeek\n}, ref) {\n  return /*#__PURE__*/_jsx(Wrapper, {\n    ref: ref,\n    className: \"components-datetime\",\n    spacing: 4,\n    children: /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(TimePicker, {\n        currentTime: currentDate,\n        onChange: onChange,\n        is12Hour: is12Hour,\n        dateOrder: dateOrder\n      }), /*#__PURE__*/_jsx(DatePicker, {\n        currentDate: currentDate,\n        onChange: onChange,\n        isInvalidDate: isInvalidDate,\n        events: events,\n        onMonthPreviewed: onMonthPreviewed,\n        startOfWeek: startOfWeek\n      })]\n    })\n  });\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef(UnforwardedDateTimePicker);\nDateTimePicker.displayName = 'DateTimePicker';\nexport default DateTimePicker;"],
+  "mappings": ";AAOA,SAAS,kBAAkB;AAK3B,SAAS,WAAW,kBAAkB;AACtC,SAAS,WAAW,kBAAkB;AACtC,SAAS,eAAe;AACxB,SAAS,OAAO,MAAM,YAAY,WAAW,QAAQ,aAAa;AAElE,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,0BAA0B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,SAAoB,qBAAK,SAAS;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAuB,sBAAM,WAAW;AAAA,MACtC,UAAU,CAAc,qBAAK,YAAY;AAAA,QACvC,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,qBAAK,YAAY;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAwBO,IAAM,iBAAiB,WAAW,yBAAyB;AAClE,eAAe,cAAc;AAC7B,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/disclosure/index.mjs

@@ -18,6 +18,7 @@ var UnforwardedDisclosureContent = ({
   });
 };
 var DisclosureContent2 = forwardRef(UnforwardedDisclosureContent);
+DisclosureContent2.displayName = "DisclosureContent";
 var disclosure_default = DisclosureContent2;
 export {
   DisclosureContent2 as DisclosureContent,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/disclosure/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Accessible Disclosure component that controls visibility of a section of\n * content. It follows the WAI-ARIA Disclosure Pattern.\n */\nconst UnforwardedDisclosureContent = ({\n  visible,\n  children,\n  ...props\n}, ref) => {\n  const disclosure = Ariakit.useDisclosureStore({\n    open: visible\n  });\n  return /*#__PURE__*/_jsx(Ariakit.DisclosureContent, {\n    store: disclosure,\n    ref: ref,\n    ...props,\n    children: children\n  });\n};\nexport const DisclosureContent = forwardRef(UnforwardedDisclosureContent);\nexport default DisclosureContent;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAK5B,IAAM,+BAA+B,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,aAAqB,2BAAmB;AAAA,IAC5C,MAAM;AAAA,EACR,CAAC;AACD,SAAoB,qBAAa,2BAAmB;AAAA,IAClD,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACO,IAAMA,qBAAoB,WAAW,4BAA4B;AACxE,IAAO,qBAAQA;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Accessible Disclosure component that controls visibility of a section of\n * content. It follows the WAI-ARIA Disclosure Pattern.\n */\nconst UnforwardedDisclosureContent = ({\n  visible,\n  children,\n  ...props\n}, ref) => {\n  const disclosure = Ariakit.useDisclosureStore({\n    open: visible\n  });\n  return /*#__PURE__*/_jsx(Ariakit.DisclosureContent, {\n    store: disclosure,\n    ref: ref,\n    ...props,\n    children: children\n  });\n};\nexport const DisclosureContent = forwardRef(UnforwardedDisclosureContent);\nDisclosureContent.displayName = 'DisclosureContent';\nexport default DisclosureContent;"],
+  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAK5B,IAAM,+BAA+B,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,aAAqB,2BAAmB;AAAA,IAC5C,MAAM;AAAA,EACR,CAAC;AACD,SAAoB,qBAAa,2BAAmB;AAAA,IAClD,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACO,IAAMA,qBAAoB,WAAW,4BAA4B;AACxEA,mBAAkB,cAAc;AAChC,IAAO,qBAAQA;",
   "names": ["DisclosureContent"]
 }

package/build-module/external-link/index.mjs

@@ -47,6 +47,7 @@ function UnforwardedExternalLink(props, ref) {
   );
 }
 var ExternalLink = forwardRef(UnforwardedExternalLink);
+ExternalLink.displayName = "ExternalLink";
 var external_link_default = ExternalLink;
 export {
   ExternalLink,