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

package/build-module/tabs/tab.mjs

@@ -12,11 +12,10 @@ var Tab = forwardRef(function Tab2({
   render,
   ...otherProps
 }, ref) {
-  var _useTabsContext;
   const {
     store,
     instanceId
-  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+  } = useTabsContext() ?? {};
   if (!store) {
     globalThis.SCRIPT_DEBUG === true ? warning("`Tabs.Tab` must be wrapped in a `Tabs` component.") : void 0;
     return null;

package/build-module/tabs/tab.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/tab.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab, TabChildren as StyledTabChildren, TabChevron as StyledTabChevron } from './styles';\nimport { chevronRight } from '@wordpress/icons';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Tab = forwardRef(function Tab({\n  children,\n  tabId,\n  disabled,\n  render,\n  ...otherProps\n}, ref) {\n  var _useTabsContext;\n  const {\n    store,\n    instanceId\n  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.Tab` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  const instancedTabId = `${instanceId}-${tabId}`;\n  return /*#__PURE__*/_jsxs(StyledTab, {\n    ref: ref,\n    store: store,\n    id: instancedTabId,\n    disabled: disabled,\n    render: render,\n    ...otherProps,\n    children: [/*#__PURE__*/_jsx(StyledTabChildren, {\n      children: children\n    }), /*#__PURE__*/_jsx(StyledTabChevron, {\n      icon: chevronRight\n    })]\n  });\n});"],
-  "mappings": ";AAIA,SAAS,kBAAkB;AAM3B,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,WAAW,eAAe,mBAAmB,cAAc,wBAAwB;AACnG,SAAS,oBAAoB;AAC7B,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,MAAM,WAAW,SAASA,KAAI;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,MAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,KAAK,kBAAkB,eAAe,OAAO,QAAQ,oBAAoB,SAAS,kBAAkB,CAAC;AACrG,MAAI,CAAC,OAAO;AACV,eAAW,iBAAiB,OAAO,QAAQ,mDAAmD,IAAI;AAClG,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,GAAG,UAAU,IAAI,KAAK;AAC7C,SAAoB,sBAAM,WAAW;AAAA,IACnC;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAc,qBAAK,mBAAmB;AAAA,MAC9C;AAAA,IACF,CAAC,GAAgB,qBAAK,kBAAkB;AAAA,MACtC,MAAM;AAAA,IACR,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab, TabChildren as StyledTabChildren, TabChevron as StyledTabChevron } from './styles';\nimport { chevronRight } from '@wordpress/icons';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Tab = forwardRef(function Tab({\n  children,\n  tabId,\n  disabled,\n  render,\n  ...otherProps\n}, ref) {\n  const {\n    store,\n    instanceId\n  } = useTabsContext() ?? {};\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.Tab` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  const instancedTabId = `${instanceId}-${tabId}`;\n  return /*#__PURE__*/_jsxs(StyledTab, {\n    ref: ref,\n    store: store,\n    id: instancedTabId,\n    disabled: disabled,\n    render: render,\n    ...otherProps,\n    children: [/*#__PURE__*/_jsx(StyledTabChildren, {\n      children: children\n    }), /*#__PURE__*/_jsx(StyledTabChevron, {\n      icon: chevronRight\n    })]\n  });\n});"],
+  "mappings": ";AAIA,SAAS,kBAAkB;AAM3B,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,WAAW,eAAe,mBAAmB,cAAc,wBAAwB;AACnG,SAAS,oBAAoB;AAC7B,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,MAAM,WAAW,SAASA,KAAI;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,eAAe,KAAK,CAAC;AACzB,MAAI,CAAC,OAAO;AACV,eAAW,iBAAiB,OAAO,QAAQ,mDAAmD,IAAI;AAClG,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,GAAG,UAAU,IAAI,KAAK;AAC7C,SAAoB,sBAAM,WAAW;AAAA,IACnC;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAc,qBAAK,mBAAmB;AAAA,MAC9C;AAAA,IACF,CAAC,GAAgB,qBAAK,kBAAkB;AAAA,MACtC,MAAM;AAAA,IACR,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
   "names": ["Tab"]
 }

package/build-module/tabs/tablist.mjs

@@ -47,10 +47,9 @@ var TabList = forwardRef(function TabList2({
   children,
   ...otherProps
 }, ref) {
-  var _useTabsContext;
   const {
     store
-  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+  } = useTabsContext() ?? {};
   const selectedId = Ariakit.useStoreState(store, "selectedId");
   const activeId = Ariakit.useStoreState(store, "activeId");
   const selectOnMove = Ariakit.useStoreState(store, "selectOnMove");
@@ -87,15 +86,12 @@ var TabList = forwardRef(function TabList2({
   return /* @__PURE__ */ _jsx(StyledTabList, {
     ref: refs,
     store,
-    render: (props) => {
-      var _props$tabIndex;
-      return /* @__PURE__ */ _jsx("div", {
-        ...props,
-        // Fallback to -1 to prevent browsers from making the tablist
-        // tabbable when it is a scrolling container.
-        tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1
-      });
-    },
+    render: (props) => /* @__PURE__ */ _jsx("div", {
+      ...props,
+      // Fallback to -1 to prevent browsers from making the tablist
+      // tabbable when it is a scrolling container.
+      tabIndex: props.tabIndex ?? -1
+    }),
     onBlur,
     "data-select-on-move": selectOnMove ? "true" : "false",
     ...otherProps,

package/build-module/tabs/tablist.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/tablist.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useLayoutEffect, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { useTabsContext } from './context';\nimport { StyledTabList } from './styles';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useTrackOverflow } from './use-track-overflow';\nimport { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_SCROLL_MARGIN = 24;\n\n/**\n * Scrolls a given parent element so that a given rect is visible.\n *\n * The scroll is updated initially and whenever the rect changes.\n */\nfunction useScrollRectIntoView(parent, rect, {\n  margin = DEFAULT_SCROLL_MARGIN\n} = {}) {\n  useLayoutEffect(() => {\n    if (!parent || !rect) {\n      return;\n    }\n    const {\n      scrollLeft: parentScroll\n    } = parent;\n    const parentWidth = parent.getBoundingClientRect().width;\n    const {\n      left: childLeft,\n      width: childWidth\n    } = rect;\n    const parentRightEdge = parentScroll + parentWidth;\n    const childRightEdge = childLeft + childWidth;\n    const rightOverflow = childRightEdge + margin - parentRightEdge;\n    const leftOverflow = parentScroll - (childLeft - margin);\n    let scrollLeft = null;\n    if (leftOverflow > 0) {\n      scrollLeft = parentScroll - leftOverflow;\n    } else if (rightOverflow > 0) {\n      scrollLeft = parentScroll + rightOverflow;\n    }\n    if (scrollLeft !== null) {\n      /**\n       * The optional chaining is used here to avoid unit test failures.\n       * It can be removed when JSDOM supports `Element` scroll methods.\n       * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096\n       */\n      parent.scroll?.({\n        left: scrollLeft\n      });\n    }\n  }, [margin, parent, rect]);\n}\nexport const TabList = forwardRef(function TabList({\n  children,\n  ...otherProps\n}, ref) {\n  var _useTabsContext;\n  const {\n    store\n  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};\n  const selectedId = Ariakit.useStoreState(store, 'selectedId');\n  const activeId = Ariakit.useStoreState(store, 'activeId');\n  const selectOnMove = Ariakit.useStoreState(store, 'selectOnMove');\n  const items = Ariakit.useStoreState(store, 'items');\n  const [parent, setParent] = useState();\n  const refs = useMergeRefs([ref, setParent]);\n  const selectedItem = store?.item(selectedId);\n  const renderedItems = Ariakit.useStoreState(store, 'renderedItems');\n  const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1;\n  // Use selectedItemIndex as a dependency to force recalculation when the\n  // selected item index changes (elements are swapped / added / removed).\n  const selectedRect = useTrackElementOffsetRect(selectedItem?.element, [selectedItemIndex]);\n\n  // Track overflow to show scroll hints.\n  const overflow = useTrackOverflow(parent, {\n    first: items?.at(0)?.element,\n    last: items?.at(-1)?.element\n  });\n\n  // Size, position, and animate the indicator.\n  useAnimatedOffsetRect(parent, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: true\n  });\n\n  // Make sure selected tab is scrolled into view.\n  useScrollRectIntoView(parent, selectedRect);\n  const onBlur = () => {\n    if (!selectOnMove) {\n      return;\n    }\n\n    // When automatic tab selection is on, make sure that the active tab is up\n    // to date with the selected tab when leaving the tablist. This makes sure\n    // that the selected tab will receive keyboard focus when tabbing back into\n    // the tablist.\n    if (selectedId !== activeId) {\n      store?.setActiveId(selectedId);\n    }\n  };\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  return /*#__PURE__*/_jsx(StyledTabList, {\n    ref: refs,\n    store: store,\n    render: props => {\n      var _props$tabIndex;\n      return /*#__PURE__*/_jsx(\"div\", {\n        ...props,\n        // Fallback to -1 to prevent browsers from making the tablist\n        // tabbable when it is a scrolling container.\n        tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1\n      });\n    },\n    onBlur: onBlur,\n    \"data-select-on-move\": selectOnMove ? 'true' : 'false',\n    ...otherProps,\n    className: clsx(overflow.first && 'is-overflowing-first', overflow.last && 'is-overflowing-last', otherProps.className),\n    children: children\n  });\n});"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useLayoutEffect, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { useTabsContext } from './context';\nimport { StyledTabList } from './styles';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useTrackOverflow } from './use-track-overflow';\nimport { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_SCROLL_MARGIN = 24;\n\n/**\n * Scrolls a given parent element so that a given rect is visible.\n *\n * The scroll is updated initially and whenever the rect changes.\n */\nfunction useScrollRectIntoView(parent, rect, {\n  margin = DEFAULT_SCROLL_MARGIN\n} = {}) {\n  useLayoutEffect(() => {\n    if (!parent || !rect) {\n      return;\n    }\n    const {\n      scrollLeft: parentScroll\n    } = parent;\n    const parentWidth = parent.getBoundingClientRect().width;\n    const {\n      left: childLeft,\n      width: childWidth\n    } = rect;\n    const parentRightEdge = parentScroll + parentWidth;\n    const childRightEdge = childLeft + childWidth;\n    const rightOverflow = childRightEdge + margin - parentRightEdge;\n    const leftOverflow = parentScroll - (childLeft - margin);\n    let scrollLeft = null;\n    if (leftOverflow > 0) {\n      scrollLeft = parentScroll - leftOverflow;\n    } else if (rightOverflow > 0) {\n      scrollLeft = parentScroll + rightOverflow;\n    }\n    if (scrollLeft !== null) {\n      /**\n       * The optional chaining is used here to avoid unit test failures.\n       * It can be removed when JSDOM supports `Element` scroll methods.\n       * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096\n       */\n      parent.scroll?.({\n        left: scrollLeft\n      });\n    }\n  }, [margin, parent, rect]);\n}\nexport const TabList = forwardRef(function TabList({\n  children,\n  ...otherProps\n}, ref) {\n  const {\n    store\n  } = useTabsContext() ?? {};\n  const selectedId = Ariakit.useStoreState(store, 'selectedId');\n  const activeId = Ariakit.useStoreState(store, 'activeId');\n  const selectOnMove = Ariakit.useStoreState(store, 'selectOnMove');\n  const items = Ariakit.useStoreState(store, 'items');\n  const [parent, setParent] = useState();\n  const refs = useMergeRefs([ref, setParent]);\n  const selectedItem = store?.item(selectedId);\n  const renderedItems = Ariakit.useStoreState(store, 'renderedItems');\n  const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1;\n  // Use selectedItemIndex as a dependency to force recalculation when the\n  // selected item index changes (elements are swapped / added / removed).\n  const selectedRect = useTrackElementOffsetRect(selectedItem?.element, [selectedItemIndex]);\n\n  // Track overflow to show scroll hints.\n  const overflow = useTrackOverflow(parent, {\n    first: items?.at(0)?.element,\n    last: items?.at(-1)?.element\n  });\n\n  // Size, position, and animate the indicator.\n  useAnimatedOffsetRect(parent, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: true\n  });\n\n  // Make sure selected tab is scrolled into view.\n  useScrollRectIntoView(parent, selectedRect);\n  const onBlur = () => {\n    if (!selectOnMove) {\n      return;\n    }\n\n    // When automatic tab selection is on, make sure that the active tab is up\n    // to date with the selected tab when leaving the tablist. This makes sure\n    // that the selected tab will receive keyboard focus when tabbing back into\n    // the tablist.\n    if (selectedId !== activeId) {\n      store?.setActiveId(selectedId);\n    }\n  };\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  return /*#__PURE__*/_jsx(StyledTabList, {\n    ref: refs,\n    store: store,\n    render: props => /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      // Fallback to -1 to prevent browsers from making the tablist\n      // tabbable when it is a scrolling container.\n      tabIndex: props.tabIndex ?? -1\n    }),\n    onBlur: onBlur,\n    \"data-select-on-move\": selectOnMove ? 'true' : 'false',\n    ...otherProps,\n    className: clsx(overflow.first && 'is-overflowing-first', overflow.last && 'is-overflowing-last', otherProps.className),\n    children: children\n  });\n});"],
+  "mappings": "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",
   "names": ["TabList"]
 }

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

@@ -48,6 +48,7 @@ function UnforwardedTextControl(props, ref) {
   });
 }
 var TextControl = forwardRef(UnforwardedTextControl);
+TextControl.displayName = "TextControl";
 var text_control_default = TextControl;
 export {
   TextControl,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/text-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextControl(props, ref) {\n  const {\n    // Prevent passing this to `input`.\n    __nextHasNoMarginBottom: _,\n    __next40pxDefaultSize = false,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    id: idProp,\n    className,\n    onChange,\n    type = 'text',\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(TextControl, 'inspector-text-control', idProp);\n  const onChangeValue = event => onChange(event.target.value);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'TextControl',\n    size: undefined,\n    __next40pxDefaultSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: className,\n    children: /*#__PURE__*/_jsx(\"input\", {\n      className: clsx('components-text-control__input', {\n        'is-next-40px-default-size': __next40pxDefaultSize\n      }),\n      type: type,\n      id: id,\n      value: value,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       __next40pxDefaultSize\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef(UnforwardedTextControl);\nexport default TextControl;"],
-  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,iBAAiB;AACxB,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,qBAAK,SAAS;AAAA,MACnC,WAAW,KAAK,kCAAkC;AAAA,QAChD,6BAA6B;AAAA,MAC/B,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,IAAO,uBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextControl(props, ref) {\n  const {\n    // Prevent passing this to `input`.\n    __nextHasNoMarginBottom: _,\n    __next40pxDefaultSize = false,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    id: idProp,\n    className,\n    onChange,\n    type = 'text',\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(TextControl, 'inspector-text-control', idProp);\n  const onChangeValue = event => onChange(event.target.value);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'TextControl',\n    size: undefined,\n    __next40pxDefaultSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: className,\n    children: /*#__PURE__*/_jsx(\"input\", {\n      className: clsx('components-text-control__input', {\n        'is-next-40px-default-size': __next40pxDefaultSize\n      }),\n      type: type,\n      id: id,\n      value: value,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       __next40pxDefaultSize\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef(UnforwardedTextControl);\nTextControl.displayName = 'TextControl';\nexport default TextControl;"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,iBAAiB;AACxB,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,qBAAK,SAAS;AAAA,MACnC,WAAW,KAAK,kCAAkC;AAAA,QAChD,6BAA6B;AAAA,MAC/B,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,cAAc,WAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
   "names": []
 }

package/build-module/text-highlight/index.mjs

@@ -18,6 +18,7 @@ var TextHighlight = (props) => {
     mark: /* @__PURE__ */ _jsx("mark", {})
   });
 };
+TextHighlight.displayName = "TextHighlight";
 var text_highlight_default = TextHighlight;
 export {
   TextHighlight,

package/build-module/text-highlight/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/text-highlight/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n *   <TextHighlight\n *     text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n *     highlight=\"Gutenberg\"\n *   />\n * );\n * ```\n */\nexport const TextHighlight = props => {\n  const {\n    text = '',\n    highlight = ''\n  } = props;\n  const trimmedHighlightText = highlight.trim();\n  if (!trimmedHighlightText) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    });\n  }\n  const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi');\n  return createInterpolateElement(text.replace(regex, '<mark>$&</mark>'), {\n    mark: /*#__PURE__*/_jsx(\"mark\", {})\n  });\n};\nexport default TextHighlight;"],
-  "mappings": ";AAGA,SAAS,gCAAgC;AAKzC,SAAS,oBAAoB;AAC7B,SAAS,YAAY,WAAW,OAAO,YAAY;AAgB5C,IAAM,gBAAgB,WAAS;AACpC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,uBAAuB,UAAU,KAAK;AAC5C,MAAI,CAAC,sBAAsB;AACzB,WAAoB,qBAAK,WAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,IAAI,aAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,SAAO,yBAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,qBAAK,QAAQ,CAAC,CAAC;AAAA,EACpC,CAAC;AACH;AACA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n *   <TextHighlight\n *     text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n *     highlight=\"Gutenberg\"\n *   />\n * );\n * ```\n */\nexport const TextHighlight = props => {\n  const {\n    text = '',\n    highlight = ''\n  } = props;\n  const trimmedHighlightText = highlight.trim();\n  if (!trimmedHighlightText) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    });\n  }\n  const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi');\n  return createInterpolateElement(text.replace(regex, '<mark>$&</mark>'), {\n    mark: /*#__PURE__*/_jsx(\"mark\", {})\n  });\n};\nTextHighlight.displayName = 'TextHighlight';\nexport default TextHighlight;"],
+  "mappings": ";AAGA,SAAS,gCAAgC;AAKzC,SAAS,oBAAoB;AAC7B,SAAS,YAAY,WAAW,OAAO,YAAY;AAgB5C,IAAM,gBAAgB,WAAS;AACpC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,uBAAuB,UAAU,KAAK;AAC5C,MAAI,CAAC,sBAAsB;AACzB,WAAoB,qBAAK,WAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,IAAI,aAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,SAAO,yBAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,qBAAK,QAAQ,CAAC,CAAC;AAAA,EACpC,CAAC;AACH;AACA,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": []
 }

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

@@ -41,6 +41,7 @@ function UnforwardedTextareaControl(props, ref) {
   });
 }
 var TextareaControl = forwardRef(UnforwardedTextareaControl);
+TextareaControl.displayName = "TextareaControl";
 var textarea_control_default = TextareaControl;
 export {
   TextareaControl,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/textarea-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextareaControl(props, ref) {\n  const {\n    // Prevent passing this to `textarea`.\n    __nextHasNoMarginBottom: _,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    onChange,\n    rows = 4,\n    className,\n    ...additionalProps\n  } = props;\n  const instanceId = useInstanceId(TextareaControl);\n  const id = `inspector-textarea-control-${instanceId}`;\n  const onChangeValue = event => onChange(event.target.value);\n  const classes = clsx('components-textarea-control', className);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledTextarea, {\n      className: \"components-textarea-control__input\",\n      id: id,\n      rows: rows,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      value: value,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef(UnforwardedTextareaControl);\nexport default TextareaControl;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,iBAAiB;AACxB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,YAAY;AAC5B,SAAS,2BAA2B,OAAO,KAAK;AAC9C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,cAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAC7D,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,qBAAK,gBAAgB;AAAA,MAC1C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAyBO,IAAM,kBAAkB,WAAW,0BAA0B;AACpE,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextareaControl(props, ref) {\n  const {\n    // Prevent passing this to `textarea`.\n    __nextHasNoMarginBottom: _,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    onChange,\n    rows = 4,\n    className,\n    ...additionalProps\n  } = props;\n  const instanceId = useInstanceId(TextareaControl);\n  const id = `inspector-textarea-control-${instanceId}`;\n  const onChangeValue = event => onChange(event.target.value);\n  const classes = clsx('components-textarea-control', className);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledTextarea, {\n      className: \"components-textarea-control__input\",\n      id: id,\n      rows: rows,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      value: value,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef(UnforwardedTextareaControl);\nTextareaControl.displayName = 'TextareaControl';\nexport default TextareaControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,iBAAiB;AACxB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,YAAY;AAC5B,SAAS,2BAA2B,OAAO,KAAK;AAC9C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,cAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAC7D,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,qBAAK,gBAAgB;AAAA,MAC1C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAyBO,IAAM,kBAAkB,WAAW,0BAA0B;AACpE,gBAAgB,cAAc;AAC9B,IAAO,2BAAQ;",
   "names": []
 }

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

@@ -62,6 +62,7 @@ function UnforwardedToggleControl({
   });
 }
 var ToggleControl = forwardRef(UnforwardedToggleControl);
+ToggleControl.displayName = "ToggleControl";
 var toggle_control_default = ToggleControl;
 export {
   ToggleControl,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/toggle-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedToggleControl({\n  label,\n  checked,\n  help,\n  className,\n  onChange,\n  disabled\n}, ref) {\n  function onChangeToggle(event) {\n    onChange(event.target.checked);\n  }\n  const instanceId = useInstanceId(ToggleControl);\n  const id = `inspector-toggle-control-${instanceId}`;\n  let describedBy, helpLabel;\n  if (help) {\n    if (typeof help === 'function') {\n      // `help` as a function works only for controlled components where\n      // `checked` is passed down from parent component. Uncontrolled\n      // component can show only a static help label.\n      if (checked !== undefined) {\n        helpLabel = help(checked);\n      }\n    } else {\n      helpLabel = help;\n    }\n    if (helpLabel) {\n      describedBy = id + '__help';\n    }\n  }\n  return /*#__PURE__*/_jsx(BaseControl, {\n    id: id,\n    help: helpLabel && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-toggle-control__help\",\n      children: helpLabel\n    }),\n    className: clsx('components-toggle-control', className),\n    children: /*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      spacing: 2,\n      children: [/*#__PURE__*/_jsx(FormToggle, {\n        id: id,\n        checked: checked,\n        onChange: onChangeToggle,\n        \"aria-describedby\": describedBy,\n        disabled: disabled,\n        ref: ref\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        as: \"label\",\n        htmlFor: id,\n        className: clsx('components-toggle-control__label', {\n          'is-disabled': disabled\n        }),\n        children: label\n      })]\n    })\n  });\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef(UnforwardedToggleControl);\nexport default ToggleControl;"],
-  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAK9B,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,WAAS,eAAe,OAAO;AAC7B,aAAS,MAAM,OAAO,OAAO;AAAA,EAC/B;AACA,QAAM,aAAa,cAAc,aAAa;AAC9C,QAAM,KAAK,4BAA4B,UAAU;AACjD,MAAI,aAAa;AACjB,MAAI,MAAM;AACR,QAAI,OAAO,SAAS,YAAY;AAI9B,UAAI,YAAY,QAAW;AACzB,oBAAY,KAAK,OAAO;AAAA,MAC1B;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AACA,QAAI,WAAW;AACb,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,qBAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,sBAAM,QAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,qBAAK,YAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,qBAAK,WAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,KAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedToggleControl({\n  label,\n  checked,\n  help,\n  className,\n  onChange,\n  disabled\n}, ref) {\n  function onChangeToggle(event) {\n    onChange(event.target.checked);\n  }\n  const instanceId = useInstanceId(ToggleControl);\n  const id = `inspector-toggle-control-${instanceId}`;\n  let describedBy, helpLabel;\n  if (help) {\n    if (typeof help === 'function') {\n      // `help` as a function works only for controlled components where\n      // `checked` is passed down from parent component. Uncontrolled\n      // component can show only a static help label.\n      if (checked !== undefined) {\n        helpLabel = help(checked);\n      }\n    } else {\n      helpLabel = help;\n    }\n    if (helpLabel) {\n      describedBy = id + '__help';\n    }\n  }\n  return /*#__PURE__*/_jsx(BaseControl, {\n    id: id,\n    help: helpLabel && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-toggle-control__help\",\n      children: helpLabel\n    }),\n    className: clsx('components-toggle-control', className),\n    children: /*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      spacing: 2,\n      children: [/*#__PURE__*/_jsx(FormToggle, {\n        id: id,\n        checked: checked,\n        onChange: onChangeToggle,\n        \"aria-describedby\": describedBy,\n        disabled: disabled,\n        ref: ref\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        as: \"label\",\n        htmlFor: id,\n        className: clsx('components-toggle-control__label', {\n          'is-disabled': disabled\n        }),\n        children: label\n      })]\n    })\n  });\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef(UnforwardedToggleControl);\nToggleControl.displayName = 'ToggleControl';\nexport default ToggleControl;"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAK9B,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,WAAS,eAAe,OAAO;AAC7B,aAAS,MAAM,OAAO,OAAO;AAAA,EAC/B;AACA,QAAM,aAAa,cAAc,aAAa;AAC9C,QAAM,KAAK,4BAA4B,UAAU;AACjD,MAAI,aAAa;AACjB,MAAI,MAAM;AACR,QAAI,OAAO,SAAS,YAAY;AAI9B,UAAI,YAAY,QAAW;AACzB,oBAAY,KAAK,OAAO;AAAA,MAC1B;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AACA,QAAI,WAAW;AACb,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,qBAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,sBAAM,QAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,qBAAK,YAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,qBAAK,WAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,KAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs

@@ -49,6 +49,7 @@ function UnforwardedToggleGroupControlAsButtonGroup({
   });
 }
 var ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);
+ToggleGroupControlAsButtonGroup.displayName = "ToggleGroupControlAsButtonGroup";
 export {
   ToggleGroupControlAsButtonGroup
 };

package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/as-button-group.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    size,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);"],
-  "mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AAKpC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,mBAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,MAAM,kBAAkB,CAAC;AACxF,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAK,MAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,kCAAkC,WAAW,0CAA0C;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    size,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);\nToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';"],
+  "mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AAKpC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,mBAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,MAAM,kBAAkB,CAAC;AACxF,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAK,MAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,kCAAkC,WAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs

@@ -25,7 +25,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
     defaultValue
   } = useComputeControlledOrUncontrolledValue(valueProp);
   const wrappedOnChangeProp = onChangeProp ? (v) => {
-    onChangeProp(v !== null && v !== void 0 ? v : void 0);
+    onChangeProp(v ?? void 0);
   } : void 0;
   const radio = Ariakit.useRadioStore({
     defaultValue,
@@ -65,6 +65,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   });
 }
 var ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);
+ToggleGroupControlAsRadioGroup.displayName = "ToggleGroupControlAsRadioGroup";
 export {
   ToggleGroupControlAsRadioGroup
 };

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsRadioGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange: onChangeProp,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n\n  // `useRadioStore`'s `setValue` prop can be called with `null`, while\n  // the component's `onChange` prop only expects `undefined`\n  const wrappedOnChangeProp = onChangeProp ? v => {\n    onChangeProp(v !== null && v !== void 0 ? v : undefined);\n  } : undefined;\n  const radio = Ariakit.useRadioStore({\n    defaultValue,\n    value,\n    setValue: wrappedOnChangeProp,\n    rtl: isRTL()\n  });\n  const selectedValue = Ariakit.useStoreState(radio, 'value');\n  const setValue = radio.setValue;\n\n  // Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n  useEffect(() => {\n    if (selectedValue === '') {\n      radio.setActiveId(undefined);\n    }\n  }, [radio, selectedValue]);\n  const groupContextValue = useMemo(() => ({\n    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),\n    baseId,\n    isBlock: !isAdaptiveWidth,\n    size,\n    // @ts-expect-error - This is wrong and we should fix it.\n    value: selectedValue,\n    // @ts-expect-error - This is wrong and we should fix it.\n    setValue,\n    setSelectedElement\n  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {\n      store: radio,\n      \"aria-label\": label,\n      render: /*#__PURE__*/_jsx(View, {}),\n      ...otherProps,\n      id: baseId,\n      ref: forwardedRef,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);"],
-  "mappings": ";AAIA,YAAY,aAAa;AAKzB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,WAAW,eAAe;AAC/C,SAAS,aAAa;AAKtB,SAAS,YAAY;AACrB,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,0CAA0C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AAIrD,QAAM,sBAAsB,eAAe,OAAK;AAC9C,iBAAa,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAS;AAAA,EACzD,IAAI;AACJ,QAAM,QAAgB,sBAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,KAAK,MAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,YAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC,0BAA0B,MAAM,MAAM,SAAS,EAAE,aAAa,MAAM,MAAM;AAAA,IAC1E;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA;AAAA,IAEA,OAAO;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,iBAAiB,OAAO,eAAe,oBAAoB,UAAU,IAAI,CAAC;AACvF,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,qBAAK,MAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,iCAAiC,WAAW,yCAAyC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsRadioGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange: onChangeProp,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n\n  // `useRadioStore`'s `setValue` prop can be called with `null`, while\n  // the component's `onChange` prop only expects `undefined`\n  const wrappedOnChangeProp = onChangeProp ? v => {\n    onChangeProp(v ?? undefined);\n  } : undefined;\n  const radio = Ariakit.useRadioStore({\n    defaultValue,\n    value,\n    setValue: wrappedOnChangeProp,\n    rtl: isRTL()\n  });\n  const selectedValue = Ariakit.useStoreState(radio, 'value');\n  const setValue = radio.setValue;\n\n  // Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n  useEffect(() => {\n    if (selectedValue === '') {\n      radio.setActiveId(undefined);\n    }\n  }, [radio, selectedValue]);\n  const groupContextValue = useMemo(() => ({\n    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),\n    baseId,\n    isBlock: !isAdaptiveWidth,\n    size,\n    // @ts-expect-error - This is wrong and we should fix it.\n    value: selectedValue,\n    // @ts-expect-error - This is wrong and we should fix it.\n    setValue,\n    setSelectedElement\n  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {\n      store: radio,\n      \"aria-label\": label,\n      render: /*#__PURE__*/_jsx(View, {}),\n      ...otherProps,\n      id: baseId,\n      ref: forwardedRef,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);\nToggleGroupControlAsRadioGroup.displayName = 'ToggleGroupControlAsRadioGroup';"],
+  "mappings": ";AAIA,YAAY,aAAa;AAKzB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,WAAW,eAAe;AAC/C,SAAS,aAAa;AAKtB,SAAS,YAAY;AACrB,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,0CAA0C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AAIrD,QAAM,sBAAsB,eAAe,OAAK;AAC9C,iBAAa,KAAK,MAAS;AAAA,EAC7B,IAAI;AACJ,QAAM,QAAgB,sBAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,KAAK,MAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,YAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC,0BAA0B,MAAM,MAAM,SAAS,EAAE,aAAa,MAAM,MAAM;AAAA,IAC1E;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA;AAAA,IAEA,OAAO;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,iBAAiB,OAAO,eAAe,oBAAoB,UAAU,IAAI,CAAC;AACvF,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,qBAAK,MAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,iCAAiC,WAAW,yCAAyC;AAClG,+BAA+B,cAAc;",
   "names": []
 }

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

@@ -16,7 +16,7 @@ function useComputeControlledOrUncontrolledValue(valueProp) {
   }, [isControlled]);
   if (isControlled) {
     return {
-      value: valueProp !== null && valueProp !== void 0 ? valueProp : "",
+      value: valueProp ?? "",
       defaultValue: void 0
     };
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/utils.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(valueProp) {\n  const isInitialRenderRef = useRef(true);\n  const prevValueProp = usePrevious(valueProp);\n  const prevIsControlledRef = useRef(false);\n  useEffect(() => {\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n    }\n  }, []);\n\n  // Assume the component is being used in controlled mode on the first re-render\n  // that has a different `valueProp` from the previous render.\n  const isControlled = prevIsControlledRef.current || !isInitialRenderRef.current && prevValueProp !== valueProp;\n  useEffect(() => {\n    prevIsControlledRef.current = isControlled;\n  }, [isControlled]);\n  if (isControlled) {\n    // When in controlled mode, use `''` instead of `undefined`\n    return {\n      value: valueProp !== null && valueProp !== void 0 ? valueProp : '',\n      defaultValue: undefined\n    };\n  }\n\n  // When in uncontrolled mode, the `value` should be intended as the initial value\n  return {\n    value: undefined,\n    defaultValue: valueProp\n  };\n}"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,cAAc;AAa3B,SAAS,wCAAwC,WAAW;AACjE,QAAM,qBAAqB,OAAO,IAAI;AACtC,QAAM,gBAAgB,YAAY,SAAS;AAC3C,QAAM,sBAAsB,OAAO,KAAK;AACxC,YAAU,MAAM;AACd,QAAI,mBAAmB,SAAS;AAC9B,yBAAmB,UAAU;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAIL,QAAM,eAAe,oBAAoB,WAAW,CAAC,mBAAmB,WAAW,kBAAkB;AACrG,YAAU,MAAM;AACd,wBAAoB,UAAU;AAAA,EAChC,GAAG,CAAC,YAAY,CAAC;AACjB,MAAI,cAAc;AAEhB,WAAO;AAAA,MACL,OAAO,cAAc,QAAQ,cAAc,SAAS,YAAY;AAAA,MAChE,cAAc;AAAA,IAChB;AAAA,EACF;AAGA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,EAChB;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(valueProp) {\n  const isInitialRenderRef = useRef(true);\n  const prevValueProp = usePrevious(valueProp);\n  const prevIsControlledRef = useRef(false);\n  useEffect(() => {\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n    }\n  }, []);\n\n  // Assume the component is being used in controlled mode on the first re-render\n  // that has a different `valueProp` from the previous render.\n  const isControlled = prevIsControlledRef.current || !isInitialRenderRef.current && prevValueProp !== valueProp;\n  useEffect(() => {\n    prevIsControlledRef.current = isControlled;\n  }, [isControlled]);\n  if (isControlled) {\n    // When in controlled mode, use `''` instead of `undefined`\n    return {\n      value: valueProp ?? '',\n      defaultValue: undefined\n    };\n  }\n\n  // When in uncontrolled mode, the `value` should be intended as the initial value\n  return {\n    value: undefined,\n    defaultValue: valueProp\n  };\n}"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,cAAc;AAa3B,SAAS,wCAAwC,WAAW;AACjE,QAAM,qBAAqB,OAAO,IAAI;AACtC,QAAM,gBAAgB,YAAY,SAAS;AAC3C,QAAM,sBAAsB,OAAO,KAAK;AACxC,YAAU,MAAM;AACd,QAAI,mBAAmB,SAAS;AAC9B,yBAAmB,UAAU;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAIL,QAAM,eAAe,oBAAoB,WAAW,CAAC,mBAAmB,WAAW,kBAAkB;AACrG,YAAU,MAAM;AACd,wBAAoB,UAAU;AAAA,EAChC,GAAG,CAAC,YAAY,CAAC;AACjB,MAAI,cAAc;AAEhB,WAAO;AAAA,MACL,OAAO,aAAa;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAGA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,EAChB;AACF;",
   "names": []
 }

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

@@ -16,6 +16,7 @@ function UnforwardedToggleGroupControlOption(props, ref) {
   });
 }
 var ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);
+ToggleGroupControlOption.displayName = "ToggleGroupControlOption";
 var component_default = ToggleGroupControlOption;
 export {
   ToggleGroupControlOption,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nexport default ToggleGroupControlOption;"],
-  "mappings": ";AAOA,SAAS,kBAAkB;AAM3B,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA2BO,IAAM,2BAA2B,WAAW,mCAAmC;AACtF,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nToggleGroupControlOption.displayName = 'ToggleGroupControlOption';\nexport default ToggleGroupControlOption;"],
+  "mappings": ";AAOA,SAAS,kBAAkB;AAM3B,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA2BO,IAAM,2BAA2B,WAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
   "names": []
 }

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

@@ -21,6 +21,7 @@ function UnforwardedToggleGroupControlOptionIcon(props, ref) {
   });
 }
 var ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);
+ToggleGroupControlOptionIcon.displayName = "ToggleGroupControlOptionIcon";
 var component_default = ToggleGroupControlOptionIcon;
 export {
   ToggleGroupControlOptionIcon,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOptionIcon(props, ref) {\n  const {\n    icon,\n    label,\n    ...restProps\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    isIcon: true,\n    \"aria-label\": label,\n    showTooltip: true,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *  return (\n *    <ToggleGroupControl __next40pxDefaultSize>\n *      <ToggleGroupControlOptionIcon\n *        value=\"uppercase\"\n *        label=\"Uppercase\"\n *        icon={ formatUppercase }\n *      />\n *      <ToggleGroupControlOptionIcon\n *        value=\"lowercase\"\n *        label=\"Lowercase\"\n *        icon={ formatLowercase }\n *      />\n *    </ToggleGroupControl>\n *  );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);\nexport default ToggleGroupControlOptionIcon;"],
-  "mappings": ";AAOA,SAAS,kBAAkB;AAM3B,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,qBAAK,MAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,+BAA+B,WAAW,uCAAuC;AAC9F,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOptionIcon(props, ref) {\n  const {\n    icon,\n    label,\n    ...restProps\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    isIcon: true,\n    \"aria-label\": label,\n    showTooltip: true,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *  return (\n *    <ToggleGroupControl __next40pxDefaultSize>\n *      <ToggleGroupControlOptionIcon\n *        value=\"uppercase\"\n *        label=\"Uppercase\"\n *        icon={ formatUppercase }\n *      />\n *      <ToggleGroupControlOptionIcon\n *        value=\"lowercase\"\n *        label=\"Lowercase\"\n *        icon={ formatLowercase }\n *      />\n *    </ToggleGroupControl>\n *  );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);\nToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';\nexport default ToggleGroupControlOptionIcon;"],
+  "mappings": ";AAOA,SAAS,kBAAkB;AAM3B,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,qBAAK,MAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,+BAA+B,WAAW,uCAAuC;AAC9F,6BAA6B,cAAc;AAC3C,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/toolbar/toolbar/index.mjs

@@ -57,6 +57,7 @@ function UnforwardedToolbar({
   });
 }
 var Toolbar = forwardRef(UnforwardedToolbar);
+Toolbar.displayName = "Toolbar";
 var toolbar_default = Toolbar;
 export {
   Toolbar,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toolbar/toolbar/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ToolbarGroup from '../toolbar-group';\nimport ToolbarContainer from './toolbar-container';\nimport { ContextSystemProvider } from '../../context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbar({\n  className,\n  label,\n  variant,\n  ...props\n}, ref) {\n  const isVariantDefined = variant !== undefined;\n  const contextSystemValue = useMemo(() => {\n    if (isVariantDefined) {\n      return {};\n    }\n    return {\n      DropdownMenu: {\n        variant: 'toolbar'\n      },\n      Dropdown: {\n        variant: 'toolbar'\n      },\n      Menu: {\n        variant: 'toolbar'\n      }\n    };\n  }, [isVariantDefined]);\n  if (!label) {\n    deprecated('Using Toolbar without label prop', {\n      since: '5.6',\n      alternative: 'ToolbarGroup component',\n      link: 'https://developer.wordpress.org/block-editor/components/toolbar/'\n    });\n    // Extracting title from `props` because `ToolbarGroup` doesn't accept it.\n    const {\n      title: _title,\n      ...restProps\n    } = props;\n    return /*#__PURE__*/_jsx(ToolbarGroup, {\n      isCollapsed: false,\n      ...restProps,\n      className: className\n    });\n  }\n  // `ToolbarGroup` already uses components-toolbar for compatibility reasons.\n  const finalClassName = clsx('components-accessible-toolbar', className, variant && `is-${variant}`);\n  return /*#__PURE__*/_jsx(ContextSystemProvider, {\n    value: contextSystemValue,\n    children: /*#__PURE__*/_jsx(ToolbarContainer, {\n      className: finalClassName,\n      label: label,\n      ref: ref,\n      ...props\n    })\n  });\n}\n\n/**\n * Renders a toolbar.\n *\n * To add controls, simply pass `ToolbarButton` components as children.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { formatBold, formatItalic, link } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *     <Toolbar label=\"Options\">\n *       <ToolbarButton icon={ formatBold } label=\"Bold\" />\n *       <ToolbarButton icon={ formatItalic } label=\"Italic\" />\n *       <ToolbarButton icon={ link } label=\"Link\" />\n *     </Toolbar>\n *   );\n * }\n * ```\n */\nexport const Toolbar = forwardRef(UnforwardedToolbar);\nexport default Toolbar;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,eAAe;AACpC,OAAO,gBAAgB;AAKvB,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,mBAAmB,YAAY;AACrC,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,kBAAkB;AACpB,aAAO,CAAC;AAAA,IACV;AACA,WAAO;AAAA,MACL,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AACrB,MAAI,CAAC,OAAO;AACV,eAAW,oCAAoC;AAAA,MAC7C,OAAO;AAAA,MACP,aAAa;AAAA,MACb,MAAM;AAAA,IACR,CAAC;AAED,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AACJ,WAAoB,qBAAK,cAAc;AAAA,MACrC,aAAa;AAAA,MACb,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,KAAK,iCAAiC,WAAW,WAAW,MAAM,OAAO,EAAE;AAClG,SAAoB,qBAAK,uBAAuB;AAAA,IAC9C,OAAO;AAAA,IACP,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,UAAU,WAAW,kBAAkB;AACpD,IAAO,kBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ToolbarGroup from '../toolbar-group';\nimport ToolbarContainer from './toolbar-container';\nimport { ContextSystemProvider } from '../../context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbar({\n  className,\n  label,\n  variant,\n  ...props\n}, ref) {\n  const isVariantDefined = variant !== undefined;\n  const contextSystemValue = useMemo(() => {\n    if (isVariantDefined) {\n      return {};\n    }\n    return {\n      DropdownMenu: {\n        variant: 'toolbar'\n      },\n      Dropdown: {\n        variant: 'toolbar'\n      },\n      Menu: {\n        variant: 'toolbar'\n      }\n    };\n  }, [isVariantDefined]);\n  if (!label) {\n    deprecated('Using Toolbar without label prop', {\n      since: '5.6',\n      alternative: 'ToolbarGroup component',\n      link: 'https://developer.wordpress.org/block-editor/components/toolbar/'\n    });\n    // Extracting title from `props` because `ToolbarGroup` doesn't accept it.\n    const {\n      title: _title,\n      ...restProps\n    } = props;\n    return /*#__PURE__*/_jsx(ToolbarGroup, {\n      isCollapsed: false,\n      ...restProps,\n      className: className\n    });\n  }\n  // `ToolbarGroup` already uses components-toolbar for compatibility reasons.\n  const finalClassName = clsx('components-accessible-toolbar', className, variant && `is-${variant}`);\n  return /*#__PURE__*/_jsx(ContextSystemProvider, {\n    value: contextSystemValue,\n    children: /*#__PURE__*/_jsx(ToolbarContainer, {\n      className: finalClassName,\n      label: label,\n      ref: ref,\n      ...props\n    })\n  });\n}\n\n/**\n * Renders a toolbar.\n *\n * To add controls, simply pass `ToolbarButton` components as children.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { formatBold, formatItalic, link } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *     <Toolbar label=\"Options\">\n *       <ToolbarButton icon={ formatBold } label=\"Bold\" />\n *       <ToolbarButton icon={ formatItalic } label=\"Italic\" />\n *       <ToolbarButton icon={ link } label=\"Link\" />\n *     </Toolbar>\n *   );\n * }\n * ```\n */\nexport const Toolbar = forwardRef(UnforwardedToolbar);\nToolbar.displayName = 'Toolbar';\nexport default Toolbar;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,eAAe;AACpC,OAAO,gBAAgB;AAKvB,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,mBAAmB,YAAY;AACrC,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,kBAAkB;AACpB,aAAO,CAAC;AAAA,IACV;AACA,WAAO;AAAA,MACL,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AACrB,MAAI,CAAC,OAAO;AACV,eAAW,oCAAoC;AAAA,MAC7C,OAAO;AAAA,MACP,aAAa;AAAA,MACb,MAAM;AAAA,IACR,CAAC;AAED,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AACJ,WAAoB,qBAAK,cAAc;AAAA,MACrC,aAAa;AAAA,MACb,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,KAAK,iCAAiC,WAAW,WAAW,MAAM,OAAO,EAAE;AAClG,SAAoB,qBAAK,uBAAuB;AAAA,IAC9C,OAAO;AAAA,IACP,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,UAAU,WAAW,kBAAkB;AACpD,QAAQ,cAAc;AACtB,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/toolbar/toolbar/toolbar-container.mjs

@@ -26,6 +26,7 @@ function UnforwardedToolbarContainer({
   );
 }
 var ToolbarContainer = forwardRef(UnforwardedToolbarContainer);
+ToolbarContainer.displayName = "ToolbarContainer";
 var toolbar_container_default = ToolbarContainer;
 export {
   ToolbarContainer,

package/build-module/toolbar/toolbar/toolbar-container.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toolbar/toolbar/toolbar-container.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbarContainer({\n  label,\n  ...props\n}, ref) {\n  const toolbarStore = Ariakit.useToolbarStore({\n    focusLoop: true,\n    rtl: isRTL()\n  });\n  return (\n    /*#__PURE__*/\n    // This will provide state for `ToolbarButton`'s\n    _jsx(ToolbarContext.Provider, {\n      value: toolbarStore,\n      children: /*#__PURE__*/_jsx(Ariakit.Toolbar, {\n        ref: ref,\n        \"aria-label\": label,\n        store: toolbarStore,\n        ...props\n      })\n    })\n  );\n}\nexport const ToolbarContainer = forwardRef(UnforwardedToolbarContainer);\nexport default ToolbarContainer;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAIzB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAKtB,OAAO,oBAAoB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,eAAuB,wBAAgB;AAAA,IAC3C,WAAW;AAAA,IACX,KAAK,MAAM;AAAA,EACb,CAAC;AACD;AAAA;AAAA,IAGE,qBAAK,eAAe,UAAU;AAAA,MAC5B,OAAO;AAAA,MACP,UAAuB,qBAAa,iBAAS;AAAA,QAC3C;AAAA,QACA,cAAc;AAAA,QACd,OAAO;AAAA,QACP,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,mBAAmB,WAAW,2BAA2B;AACtE,IAAO,4BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbarContainer({\n  label,\n  ...props\n}, ref) {\n  const toolbarStore = Ariakit.useToolbarStore({\n    focusLoop: true,\n    rtl: isRTL()\n  });\n  return (\n    /*#__PURE__*/\n    // This will provide state for `ToolbarButton`'s\n    _jsx(ToolbarContext.Provider, {\n      value: toolbarStore,\n      children: /*#__PURE__*/_jsx(Ariakit.Toolbar, {\n        ref: ref,\n        \"aria-label\": label,\n        store: toolbarStore,\n        ...props\n      })\n    })\n  );\n}\nexport const ToolbarContainer = forwardRef(UnforwardedToolbarContainer);\nToolbarContainer.displayName = 'ToolbarContainer';\nexport default ToolbarContainer;"],
+  "mappings": ";AAGA,YAAY,aAAa;AAIzB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAKtB,OAAO,oBAAoB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,eAAuB,wBAAgB;AAAA,IAC3C,WAAW;AAAA,IACX,KAAK,MAAM;AAAA,EACb,CAAC;AACD;AAAA;AAAA,IAGE,qBAAK,eAAe,UAAU;AAAA,MAC5B,OAAO;AAAA,MACP,UAAuB,qBAAa,iBAAS;AAAA,QAC3C;AAAA,QACA,cAAc;AAAA,QACd,OAAO;AAAA,QACP,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,mBAAmB,WAAW,2BAA2B;AACtE,iBAAiB,cAAc;AAC/B,IAAO,4BAAQ;",
   "names": []
 }

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

@@ -67,6 +67,7 @@ function UnforwardedToolbarButton(props, ref) {
   });
 }
 var ToolbarButton = forwardRef(UnforwardedToolbarButton);
+ToolbarButton.displayName = "ToolbarButton";
 var toolbar_button_default = ToolbarButton;
 export {
   ToolbarButton,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toolbar/toolbar-button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarButtonContainer from './toolbar-button-container';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  isDisabled,\n  ...otherProps\n}) {\n  return {\n    disabled: isDisabled,\n    ...otherProps\n  };\n}\nfunction UnforwardedToolbarButton(props, ref) {\n  const {\n    children,\n    className,\n    containerClassName,\n    extraProps,\n    isActive,\n    title,\n    ...restProps\n  } = useDeprecatedProps(props);\n  const accessibleToolbarState = useContext(ToolbarContext);\n  if (!accessibleToolbarState) {\n    return /*#__PURE__*/_jsx(ToolbarButtonContainer, {\n      className: containerClassName,\n      children: /*#__PURE__*/_jsx(Button, {\n        ref: ref,\n        icon: restProps.icon,\n        size: \"compact\",\n        label: title,\n        shortcut: restProps.shortcut,\n        \"data-subscript\": restProps.subscript,\n        onClick: event => {\n          event.stopPropagation();\n          // TODO: Possible bug; maybe use onClick instead of restProps.onClick.\n          if (restProps.onClick) {\n            restProps.onClick(event);\n          }\n        },\n        className: clsx('components-toolbar__control', className),\n        isPressed: isActive,\n        accessibleWhenDisabled: true,\n        \"data-toolbar-item\": true,\n        ...extraProps,\n        ...restProps,\n        children: children\n      })\n    });\n  }\n\n  // ToobarItem will pass all props to the render prop child, which will pass\n  // all props to Button. This means that ToolbarButton has the same API as\n  // Button.\n  return /*#__PURE__*/_jsx(ToolbarItem, {\n    className: clsx('components-toolbar-button', className),\n    ...extraProps,\n    ...restProps,\n    ref: ref,\n    children: toolbarItemProps => /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      label: title,\n      isPressed: isActive,\n      ...toolbarItemProps,\n      children: children\n    })\n  });\n}\n\n/**\n * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar\n * or ToolbarGroup when used to create general interfaces.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { pencil } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *\t\t<Toolbar label=\"Options\">\n *\t\t\t<ToolbarButton\n *\t\t\t\ticon={ pencil }\n *\t\t\t\tlabel=\"Edit\"\n *\t\t\t\tonClick={ () => alert( 'Editing' ) }\n *\t\t\t/>\n *\t\t</Toolbar>\n *   );\n * }\n * ```\n */\nexport const ToolbarButton = forwardRef(UnforwardedToolbarButton);\nexport default ToolbarButton;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,kBAAkB;AAKvC,OAAO,YAAY;AACnB,OAAO,iBAAiB;AACxB,OAAO,oBAAoB;AAC3B,OAAO,4BAA4B;AACnC,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,GAAG;AAAA,EACL;AACF;AACA,SAAS,yBAAyB,OAAO,KAAK;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,mBAAmB,KAAK;AAC5B,QAAM,yBAAyB,WAAW,cAAc;AACxD,MAAI,CAAC,wBAAwB;AAC3B,WAAoB,qBAAK,wBAAwB;AAAA,MAC/C,WAAW;AAAA,MACX,UAAuB,qBAAK,QAAQ;AAAA,QAClC;AAAA,QACA,MAAM,UAAU;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,QACP,UAAU,UAAU;AAAA,QACpB,kBAAkB,UAAU;AAAA,QAC5B,SAAS,WAAS;AAChB,gBAAM,gBAAgB;AAEtB,cAAI,UAAU,SAAS;AACrB,sBAAU,QAAQ,KAAK;AAAA,UACzB;AAAA,QACF;AAAA,QACA,WAAW,KAAK,+BAA+B,SAAS;AAAA,QACxD,WAAW;AAAA,QACX,wBAAwB;AAAA,QACxB,qBAAqB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAKA,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,UAAU,sBAAiC,qBAAK,QAAQ;AAAA,MACtD,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarButtonContainer from './toolbar-button-container';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  isDisabled,\n  ...otherProps\n}) {\n  return {\n    disabled: isDisabled,\n    ...otherProps\n  };\n}\nfunction UnforwardedToolbarButton(props, ref) {\n  const {\n    children,\n    className,\n    containerClassName,\n    extraProps,\n    isActive,\n    title,\n    ...restProps\n  } = useDeprecatedProps(props);\n  const accessibleToolbarState = useContext(ToolbarContext);\n  if (!accessibleToolbarState) {\n    return /*#__PURE__*/_jsx(ToolbarButtonContainer, {\n      className: containerClassName,\n      children: /*#__PURE__*/_jsx(Button, {\n        ref: ref,\n        icon: restProps.icon,\n        size: \"compact\",\n        label: title,\n        shortcut: restProps.shortcut,\n        \"data-subscript\": restProps.subscript,\n        onClick: event => {\n          event.stopPropagation();\n          // TODO: Possible bug; maybe use onClick instead of restProps.onClick.\n          if (restProps.onClick) {\n            restProps.onClick(event);\n          }\n        },\n        className: clsx('components-toolbar__control', className),\n        isPressed: isActive,\n        accessibleWhenDisabled: true,\n        \"data-toolbar-item\": true,\n        ...extraProps,\n        ...restProps,\n        children: children\n      })\n    });\n  }\n\n  // ToobarItem will pass all props to the render prop child, which will pass\n  // all props to Button. This means that ToolbarButton has the same API as\n  // Button.\n  return /*#__PURE__*/_jsx(ToolbarItem, {\n    className: clsx('components-toolbar-button', className),\n    ...extraProps,\n    ...restProps,\n    ref: ref,\n    children: toolbarItemProps => /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      label: title,\n      isPressed: isActive,\n      ...toolbarItemProps,\n      children: children\n    })\n  });\n}\n\n/**\n * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar\n * or ToolbarGroup when used to create general interfaces.\n *\n * ```jsx\n * import { Toolbar, ToolbarButton } from '@wordpress/components';\n * import { pencil } from '@wordpress/icons';\n *\n * function MyToolbar() {\n *   return (\n *\t\t<Toolbar label=\"Options\">\n *\t\t\t<ToolbarButton\n *\t\t\t\ticon={ pencil }\n *\t\t\t\tlabel=\"Edit\"\n *\t\t\t\tonClick={ () => alert( 'Editing' ) }\n *\t\t\t/>\n *\t\t</Toolbar>\n *   );\n * }\n * ```\n */\nexport const ToolbarButton = forwardRef(UnforwardedToolbarButton);\nToolbarButton.displayName = 'ToolbarButton';\nexport default ToolbarButton;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,kBAAkB;AAKvC,OAAO,YAAY;AACnB,OAAO,iBAAiB;AACxB,OAAO,oBAAoB;AAC3B,OAAO,4BAA4B;AACnC,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,GAAG;AAAA,EACL;AACF;AACA,SAAS,yBAAyB,OAAO,KAAK;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,mBAAmB,KAAK;AAC5B,QAAM,yBAAyB,WAAW,cAAc;AACxD,MAAI,CAAC,wBAAwB;AAC3B,WAAoB,qBAAK,wBAAwB;AAAA,MAC/C,WAAW;AAAA,MACX,UAAuB,qBAAK,QAAQ;AAAA,QAClC;AAAA,QACA,MAAM,UAAU;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,QACP,UAAU,UAAU;AAAA,QACpB,kBAAkB,UAAU;AAAA,QAC5B,SAAS,WAAS;AAChB,gBAAM,gBAAgB;AAEtB,cAAI,UAAU,SAAS;AACrB,sBAAU,QAAQ,KAAK;AAAA,UACzB;AAAA,QACF;AAAA,QACA,WAAW,KAAK,+BAA+B,SAAS;AAAA,QACxD,WAAW;AAAA,QACX,wBAAwB;AAAA,QACxB,qBAAqB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAKA,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,UAAU,sBAAiC,qBAAK,QAAQ;AAAA,MACtD,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": []
 }

package/build-module/toolbar/toolbar-dropdown-menu/index.mjs

@@ -24,6 +24,7 @@ function UnforwardedToolbarDropdownMenu(props, ref) {
   });
 }
 var ToolbarDropdownMenu = forwardRef(UnforwardedToolbarDropdownMenu);
+ToolbarDropdownMenu.displayName = "ToolbarDropdownMenu";
 var toolbar_dropdown_menu_default = ToolbarDropdownMenu;
 export {
   ToolbarDropdownMenu,

package/build-module/toolbar/toolbar-dropdown-menu/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toolbar/toolbar-dropdown-menu/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport DropdownMenu from '../../dropdown-menu';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbarDropdownMenu(props, ref) {\n  const accessibleToolbarState = useContext(ToolbarContext);\n  if (!accessibleToolbarState) {\n    return /*#__PURE__*/_jsx(DropdownMenu, {\n      ...props\n    });\n  }\n\n  // ToolbarItem will pass all props to the render prop child, which will pass\n  // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu\n  // has the same API as DropdownMenu.\n  return /*#__PURE__*/_jsx(ToolbarItem, {\n    ref: ref,\n    ...props.toggleProps,\n    children: toolbarItemProps => /*#__PURE__*/_jsx(DropdownMenu, {\n      ...props,\n      popoverProps: {\n        ...props.popoverProps\n      },\n      toggleProps: toolbarItemProps\n    })\n  });\n}\nexport const ToolbarDropdownMenu = forwardRef(UnforwardedToolbarDropdownMenu);\nexport default ToolbarDropdownMenu;"],
-  "mappings": ";AAGA,SAAS,YAAY,kBAAkB;AASvC,OAAO,iBAAiB;AACxB,OAAO,oBAAoB;AAC3B,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,SAAS,+BAA+B,OAAO,KAAK;AAClD,QAAM,yBAAyB,WAAW,cAAc;AACxD,MAAI,CAAC,wBAAwB;AAC3B,WAAoB,qBAAK,cAAc;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AAKA,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA,GAAG,MAAM;AAAA,IACT,UAAU,sBAAiC,qBAAK,cAAc;AAAA,MAC5D,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,MACX;AAAA,MACA,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sBAAsB,WAAW,8BAA8B;AAC5E,IAAO,gCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport DropdownMenu from '../../dropdown-menu';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbarDropdownMenu(props, ref) {\n  const accessibleToolbarState = useContext(ToolbarContext);\n  if (!accessibleToolbarState) {\n    return /*#__PURE__*/_jsx(DropdownMenu, {\n      ...props\n    });\n  }\n\n  // ToolbarItem will pass all props to the render prop child, which will pass\n  // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu\n  // has the same API as DropdownMenu.\n  return /*#__PURE__*/_jsx(ToolbarItem, {\n    ref: ref,\n    ...props.toggleProps,\n    children: toolbarItemProps => /*#__PURE__*/_jsx(DropdownMenu, {\n      ...props,\n      popoverProps: {\n        ...props.popoverProps\n      },\n      toggleProps: toolbarItemProps\n    })\n  });\n}\nexport const ToolbarDropdownMenu = forwardRef(UnforwardedToolbarDropdownMenu);\nToolbarDropdownMenu.displayName = 'ToolbarDropdownMenu';\nexport default ToolbarDropdownMenu;"],
+  "mappings": ";AAGA,SAAS,YAAY,kBAAkB;AASvC,OAAO,iBAAiB;AACxB,OAAO,oBAAoB;AAC3B,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,SAAS,+BAA+B,OAAO,KAAK;AAClD,QAAM,yBAAyB,WAAW,cAAc;AACxD,MAAI,CAAC,wBAAwB;AAC3B,WAAoB,qBAAK,cAAc;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AAKA,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA,GAAG,MAAM;AAAA,IACT,UAAU,sBAAiC,qBAAK,cAAc;AAAA,MAC5D,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,MACX;AAAA,MACA,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sBAAsB,WAAW,8BAA8B;AAC5E,oBAAoB,cAAc;AAClC,IAAO,gCAAQ;",
   "names": []
 }

package/build-module/toolbar/toolbar-item/index.mjs

@@ -43,6 +43,7 @@ function UnforwardedToolbarItem({
   });
 }
 var ToolbarItem2 = forwardRef(UnforwardedToolbarItem);
+ToolbarItem2.displayName = "ToolbarItem";
 var toolbar_item_default = ToolbarItem2;
 export {
   ToolbarItem2 as ToolbarItem,

package/build-module/toolbar/toolbar-item/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toolbar/toolbar-item/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbarItem({\n  children,\n  as: Component,\n  ...props\n}, ref) {\n  const accessibleToolbarStore = useContext(ToolbarContext);\n  const isRenderProp = typeof children === 'function';\n  if (!isRenderProp && !Component) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' + 'See https://developer.wordpress.org/block-editor/components/toolbar-item/') : void 0;\n    return null;\n  }\n  const allProps = {\n    ...props,\n    ref,\n    'data-toolbar-item': true\n  };\n  if (!accessibleToolbarStore) {\n    if (Component) {\n      return /*#__PURE__*/_jsx(Component, {\n        ...allProps,\n        children: children\n      });\n    }\n    if (!isRenderProp) {\n      return null;\n    }\n    return children(allProps);\n  }\n  const render = isRenderProp ? children : Component && /*#__PURE__*/_jsx(Component, {\n    children: children\n  });\n  return /*#__PURE__*/_jsx(Ariakit.ToolbarItem, {\n    accessibleWhenDisabled: true,\n    ...allProps,\n    store: accessibleToolbarStore,\n    render: render\n  });\n}\nexport const ToolbarItem = forwardRef(UnforwardedToolbarItem);\nexport default ToolbarItem;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAIzB,SAAS,YAAY,kBAAkB;AACvC,OAAO,aAAa;AAKpB,OAAO,oBAAoB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GAAG,KAAK;AACN,QAAM,yBAAyB,WAAW,cAAc;AACxD,QAAM,eAAe,OAAO,aAAa;AACzC,MAAI,CAAC,gBAAgB,CAAC,WAAW;AAC/B,eAAW,iBAAiB,OAAO,QAAQ,+MAAoN,IAAI;AACnQ,WAAO;AAAA,EACT;AACA,QAAM,WAAW;AAAA,IACf,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB;AAAA,EACvB;AACA,MAAI,CAAC,wBAAwB;AAC3B,QAAI,WAAW;AACb,aAAoB,qBAAK,WAAW;AAAA,QAClC,GAAG;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AACA,QAAI,CAAC,cAAc;AACjB,aAAO;AAAA,IACT;AACA,WAAO,SAAS,QAAQ;AAAA,EAC1B;AACA,QAAM,SAAS,eAAe,WAAW,aAA0B,qBAAK,WAAW;AAAA,IACjF;AAAA,EACF,CAAC;AACD,SAAoB,qBAAa,qBAAa;AAAA,IAC5C,wBAAwB;AAAA,IACxB,GAAG;AAAA,IACH,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAMA,eAAc,WAAW,sBAAsB;AAC5D,IAAO,uBAAQA;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToolbarItem({\n  children,\n  as: Component,\n  ...props\n}, ref) {\n  const accessibleToolbarStore = useContext(ToolbarContext);\n  const isRenderProp = typeof children === 'function';\n  if (!isRenderProp && !Component) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' + 'See https://developer.wordpress.org/block-editor/components/toolbar-item/') : void 0;\n    return null;\n  }\n  const allProps = {\n    ...props,\n    ref,\n    'data-toolbar-item': true\n  };\n  if (!accessibleToolbarStore) {\n    if (Component) {\n      return /*#__PURE__*/_jsx(Component, {\n        ...allProps,\n        children: children\n      });\n    }\n    if (!isRenderProp) {\n      return null;\n    }\n    return children(allProps);\n  }\n  const render = isRenderProp ? children : Component && /*#__PURE__*/_jsx(Component, {\n    children: children\n  });\n  return /*#__PURE__*/_jsx(Ariakit.ToolbarItem, {\n    accessibleWhenDisabled: true,\n    ...allProps,\n    store: accessibleToolbarStore,\n    render: render\n  });\n}\nexport const ToolbarItem = forwardRef(UnforwardedToolbarItem);\nToolbarItem.displayName = 'ToolbarItem';\nexport default ToolbarItem;"],
+  "mappings": ";AAGA,YAAY,aAAa;AAIzB,SAAS,YAAY,kBAAkB;AACvC,OAAO,aAAa;AAKpB,OAAO,oBAAoB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GAAG,KAAK;AACN,QAAM,yBAAyB,WAAW,cAAc;AACxD,QAAM,eAAe,OAAO,aAAa;AACzC,MAAI,CAAC,gBAAgB,CAAC,WAAW;AAC/B,eAAW,iBAAiB,OAAO,QAAQ,+MAAoN,IAAI;AACnQ,WAAO;AAAA,EACT;AACA,QAAM,WAAW;AAAA,IACf,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB;AAAA,EACvB;AACA,MAAI,CAAC,wBAAwB;AAC3B,QAAI,WAAW;AACb,aAAoB,qBAAK,WAAW;AAAA,QAClC,GAAG;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AACA,QAAI,CAAC,cAAc;AACjB,aAAO;AAAA,IACT;AACA,WAAO,SAAS,QAAQ;AAAA,EAC1B;AACA,QAAM,SAAS,eAAe,WAAW,aAA0B,qBAAK,WAAW;AAAA,IACjF;AAAA,EACF,CAAC;AACD,SAAoB,qBAAa,qBAAa;AAAA,IAC5C,wBAAwB;AAAA,IACxB,GAAG;AAAA,IACH,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAMA,eAAc,WAAW,sBAAsB;AAC5DA,aAAY,cAAc;AAC1B,IAAO,uBAAQA;",
   "names": ["ToolbarItem"]
 }

package/build-module/tooltip/index.mjs

@@ -89,6 +89,7 @@ function UnforwardedTooltip(props, ref) {
   });
 }
 var Tooltip2 = forwardRef(UnforwardedTooltip);
+Tooltip2.displayName = "Tooltip";
 var tooltip_default = Tooltip2;
 export {
   TOOLTIP_DELAY,