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

package/build/tab-panel/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// Separate the actual tab name from the instance ID. This is\n// necessary because Ariakit internally uses the element ID when\n// a new tab is selected, but our implementation looks specifically\n// for the tab name to be passed to the `onSelect` callback.\nconst extractTabName = id => {\n  if (typeof id === 'undefined' || id === null) {\n    return;\n  }\n  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];\n};\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = ({\n  className,\n  children,\n  tabs,\n  selectOnMove = true,\n  initialTabName,\n  orientation = 'horizontal',\n  activeClass = 'is-active',\n  onSelect\n}, ref) => {\n  const instanceId = useInstanceId(TabPanel, 'tab-panel');\n  const prependInstanceId = useCallback(tabName => {\n    if (typeof tabName === 'undefined') {\n      return;\n    }\n    return `${instanceId}-${tabName}`;\n  }, [instanceId]);\n  const tabStore = Ariakit.useTabStore({\n    setSelectedId: newTabValue => {\n      if (typeof newTabValue === 'undefined' || newTabValue === null) {\n        return;\n      }\n      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);\n      if (newTab?.disabled || newTab === selectedTab) {\n        return;\n      }\n      const simplifiedTabName = extractTabName(newTabValue);\n      if (typeof simplifiedTabName === 'undefined') {\n        return;\n      }\n      onSelect?.(simplifiedTabName);\n    },\n    orientation,\n    selectOnMove,\n    defaultSelectedId: prependInstanceId(initialTabName),\n    rtl: isRTL()\n  });\n  const selectedTabName = extractTabName(Ariakit.useStoreState(tabStore, 'selectedId'));\n  const setTabStoreSelectedId = useCallback(tabName => {\n    tabStore.setState('selectedId', prependInstanceId(tabName));\n  }, [prependInstanceId, tabStore]);\n  const selectedTab = tabs.find(({\n    name\n  }) => name === selectedTabName);\n  const previousSelectedTabName = usePrevious(selectedTabName);\n\n  // Ensure `onSelect` is called when the initial tab is selected.\n  useEffect(() => {\n    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {\n      onSelect?.(selectedTabName);\n    }\n  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);\n\n  // Handle selecting the initial tab.\n  useLayoutEffect(() => {\n    // If there's a selected tab, don't override it.\n    if (selectedTab) {\n      return;\n    }\n    const initialTab = tabs.find(tab => tab.name === initialTabName);\n    // Wait for the denoted initial tab to be declared before making a\n    // selection. This ensures that if a tab is declared lazily it can\n    // still receive initial selection.\n    if (initialTabName && !initialTab) {\n      return;\n    }\n    if (initialTab && !initialTab.disabled) {\n      // Select the initial tab if it's not disabled.\n      setTabStoreSelectedId(initialTab.name);\n    } else {\n      // Fallback to the first enabled tab when the initial tab is\n      // disabled or it can't be found.\n      const firstEnabledTab = tabs.find(tab => !tab.disabled);\n      if (firstEnabledTab) {\n        setTabStoreSelectedId(firstEnabledTab.name);\n      }\n    }\n  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);\n\n  // Handle the currently selected tab becoming disabled.\n  useEffect(() => {\n    // This effect only runs when the selected tab is defined and becomes disabled.\n    if (!selectedTab?.disabled) {\n      return;\n    }\n    const firstEnabledTab = tabs.find(tab => !tab.disabled);\n    // If the currently selected tab becomes disabled, select the first enabled tab.\n    // (if there is one).\n    if (firstEnabledTab) {\n      setTabStoreSelectedId(firstEnabledTab.name);\n    }\n  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(Ariakit.TabList, {\n      store: tabStore,\n      className: \"components-tab-panel__tabs\",\n      children: tabs.map(tab => {\n        return /*#__PURE__*/_jsx(Ariakit.Tab, {\n          id: prependInstanceId(tab.name),\n          className: clsx('components-tab-panel__tabs-item', tab.className, {\n            [activeClass]: tab.name === selectedTabName\n          }),\n          disabled: tab.disabled,\n          \"aria-controls\": `${prependInstanceId(tab.name)}-view`,\n          render: /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            icon: tab.icon,\n            label: tab.icon && tab.title,\n            showTooltip: !!tab.icon\n          }),\n          children: !tab.icon && tab.title\n        }, tab.name);\n      })\n    }), selectedTab && /*#__PURE__*/_jsx(Ariakit.TabPanel, {\n      id: `${prependInstanceId(selectedTab.name)}-view`,\n      store: tabStore,\n      tabId: prependInstanceId(selectedTab.name),\n      className: \"components-tab-panel__tab-content\",\n      children: children(selectedTab)\n    })]\n  });\n};\nexport const TabPanel = forwardRef(UnforwardedTabPanel);\nexport default TabPanel;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// Separate the actual tab name from the instance ID. This is\n// necessary because Ariakit internally uses the element ID when\n// a new tab is selected, but our implementation looks specifically\n// for the tab name to be passed to the `onSelect` callback.\nconst extractTabName = id => {\n  if (typeof id === 'undefined' || id === null) {\n    return;\n  }\n  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];\n};\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = ({\n  className,\n  children,\n  tabs,\n  selectOnMove = true,\n  initialTabName,\n  orientation = 'horizontal',\n  activeClass = 'is-active',\n  onSelect\n}, ref) => {\n  const instanceId = useInstanceId(TabPanel, 'tab-panel');\n  const prependInstanceId = useCallback(tabName => {\n    if (typeof tabName === 'undefined') {\n      return;\n    }\n    return `${instanceId}-${tabName}`;\n  }, [instanceId]);\n  const tabStore = Ariakit.useTabStore({\n    setSelectedId: newTabValue => {\n      if (typeof newTabValue === 'undefined' || newTabValue === null) {\n        return;\n      }\n      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);\n      if (newTab?.disabled || newTab === selectedTab) {\n        return;\n      }\n      const simplifiedTabName = extractTabName(newTabValue);\n      if (typeof simplifiedTabName === 'undefined') {\n        return;\n      }\n      onSelect?.(simplifiedTabName);\n    },\n    orientation,\n    selectOnMove,\n    defaultSelectedId: prependInstanceId(initialTabName),\n    rtl: isRTL()\n  });\n  const selectedTabName = extractTabName(Ariakit.useStoreState(tabStore, 'selectedId'));\n  const setTabStoreSelectedId = useCallback(tabName => {\n    tabStore.setState('selectedId', prependInstanceId(tabName));\n  }, [prependInstanceId, tabStore]);\n  const selectedTab = tabs.find(({\n    name\n  }) => name === selectedTabName);\n  const previousSelectedTabName = usePrevious(selectedTabName);\n\n  // Ensure `onSelect` is called when the initial tab is selected.\n  useEffect(() => {\n    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {\n      onSelect?.(selectedTabName);\n    }\n  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);\n\n  // Handle selecting the initial tab.\n  useLayoutEffect(() => {\n    // If there's a selected tab, don't override it.\n    if (selectedTab) {\n      return;\n    }\n    const initialTab = tabs.find(tab => tab.name === initialTabName);\n    // Wait for the denoted initial tab to be declared before making a\n    // selection. This ensures that if a tab is declared lazily it can\n    // still receive initial selection.\n    if (initialTabName && !initialTab) {\n      return;\n    }\n    if (initialTab && !initialTab.disabled) {\n      // Select the initial tab if it's not disabled.\n      setTabStoreSelectedId(initialTab.name);\n    } else {\n      // Fallback to the first enabled tab when the initial tab is\n      // disabled or it can't be found.\n      const firstEnabledTab = tabs.find(tab => !tab.disabled);\n      if (firstEnabledTab) {\n        setTabStoreSelectedId(firstEnabledTab.name);\n      }\n    }\n  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);\n\n  // Handle the currently selected tab becoming disabled.\n  useEffect(() => {\n    // This effect only runs when the selected tab is defined and becomes disabled.\n    if (!selectedTab?.disabled) {\n      return;\n    }\n    const firstEnabledTab = tabs.find(tab => !tab.disabled);\n    // If the currently selected tab becomes disabled, select the first enabled tab.\n    // (if there is one).\n    if (firstEnabledTab) {\n      setTabStoreSelectedId(firstEnabledTab.name);\n    }\n  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(Ariakit.TabList, {\n      store: tabStore,\n      className: \"components-tab-panel__tabs\",\n      children: tabs.map(tab => {\n        return /*#__PURE__*/_jsx(Ariakit.Tab, {\n          id: prependInstanceId(tab.name),\n          className: clsx('components-tab-panel__tabs-item', tab.className, {\n            [activeClass]: tab.name === selectedTabName\n          }),\n          disabled: tab.disabled,\n          \"aria-controls\": `${prependInstanceId(tab.name)}-view`,\n          render: /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            icon: tab.icon,\n            label: tab.icon && tab.title,\n            showTooltip: !!tab.icon\n          }),\n          children: !tab.icon && tab.title\n        }, tab.name);\n      })\n    }), selectedTab && /*#__PURE__*/_jsx(Ariakit.TabPanel, {\n      id: `${prependInstanceId(selectedTab.name)}-view`,\n      store: tabStore,\n      tabId: prependInstanceId(selectedTab.name),\n      className: \"components-tab-panel__tab-content\",\n      children: children(selectedTab)\n    })]\n  });\n};\nexport const TabPanel = forwardRef(UnforwardedTabPanel);\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;"],
+  "mappings": "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",
   "names": ["TabPanel", "_jsxs", "_jsx", "clsx", "Button"]
 }

package/build/tabs/tab.cjs

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

package/build/tabs/tab.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAA2B;AAM3B,qBAAoB;AACpB,qBAA+B;AAC/B,oBAAmG;AACnG,mBAA6B;AAC7B,yBAA2C;AACpC,IAAM,UAAM,2BAAW,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,sBAAkB,+BAAe,OAAO,QAAQ,oBAAoB,SAAS,kBAAkB,CAAC;AACrG,MAAI,CAAC,OAAO;AACV,eAAW,iBAAiB,WAAO,eAAAC,SAAQ,mDAAmD,IAAI;AAClG,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,GAAG,UAAU,IAAI,KAAK;AAC7C,SAAoB,uCAAAC,MAAM,cAAAC,KAAW;AAAA,IACnC;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAc,uCAAAC,KAAK,cAAAC,aAAmB;AAAA,MAC9C;AAAA,IACF,CAAC,GAAgB,uCAAAD,KAAK,cAAAE,YAAkB;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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAA2B;AAM3B,qBAAoB;AACpB,qBAA+B;AAC/B,oBAAmG;AACnG,mBAA6B;AAC7B,yBAA2C;AACpC,IAAM,UAAM,2BAAW,SAASA,KAAI;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,+BAAe,KAAK,CAAC;AACzB,MAAI,CAAC,OAAO;AACV,eAAW,iBAAiB,WAAO,eAAAC,SAAQ,mDAAmD,IAAI;AAClG,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,GAAG,UAAU,IAAI,KAAK;AAC7C,SAAoB,uCAAAC,MAAM,cAAAC,KAAW;AAAA,IACnC;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAc,uCAAAC,KAAK,cAAAC,aAAmB;AAAA,MAC9C;AAAA,IACF,CAAC,GAAgB,uCAAAD,KAAK,cAAAE,YAAkB;AAAA,MACtC,MAAM;AAAA,IACR,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
   "names": ["Tab", "warning", "_jsxs", "StyledTab", "_jsx", "StyledTabChildren", "StyledTabChevron"]
 }

package/build/tabs/tablist.cjs

@@ -81,10 +81,9 @@ var TabList = (0, import_element.forwardRef)(function TabList2({
   children,
   ...otherProps
 }, ref) {
-  var _useTabsContext;
   const {
     store
-  } = (_useTabsContext = (0, import_context.useTabsContext)()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+  } = (0, import_context.useTabsContext)() ?? {};
   const selectedId = Ariakit.useStoreState(store, "selectedId");
   const activeId = Ariakit.useStoreState(store, "activeId");
   const selectOnMove = Ariakit.useStoreState(store, "selectOnMove");
@@ -121,15 +120,12 @@ var TabList = (0, import_element.forwardRef)(function TabList2({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabList, {
     ref: refs,
     store,
-    render: (props) => {
-      var _props$tabIndex;
-      return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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/tabs/tablist.cjs.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", "warning", "_jsx", "clsx"]
 }

package/build/text-control/index.cjs

@@ -83,6 +83,7 @@ function UnforwardedTextControl(props, ref) {
   });
 }
 var TextControl = (0, import_element.forwardRef)(UnforwardedTextControl);
+TextControl.displayName = "TextControl";
 var text_control_default = TextControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/text-control/index.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,kCAA4C;AAC5C,yBAA4B;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,SAAK,8BAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,SAAS;AAAA,MACnC,eAAW,YAAAE,SAAK,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,kBAAc,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,kCAA4C;AAC5C,yBAA4B;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,SAAK,8BAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,SAAS;AAAA,MACnC,eAAW,YAAAE,SAAK,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,kBAAc,2BAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
   "names": ["_jsx", "BaseControl", "clsx"]
 }

package/build/text-highlight/index.cjs

@@ -43,6 +43,7 @@ var TextHighlight = (props) => {
     mark: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mark", {})
   });
 };
+TextHighlight.displayName = "TextHighlight";
 var text_highlight_default = TextHighlight;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/text-highlight/index.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyC;AAKzC,qBAA6B;AAC7B,yBAAmD;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,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,QAAI,6BAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,aAAO,yCAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,uCAAAD,KAAK,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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyC;AAKzC,qBAA6B;AAC7B,yBAAmD;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,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,QAAI,6BAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,aAAO,yCAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,uCAAAD,KAAK,QAAQ,CAAC,CAAC;AAAA,EACpC,CAAC;AACH;AACA,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": ["_jsx", "_Fragment"]
 }

package/build/textarea-control/index.cjs

@@ -76,6 +76,7 @@ function UnforwardedTextareaControl(props, ref) {
   });
 }
 var TextareaControl = (0, import_element.forwardRef)(UnforwardedTextareaControl);
+TextareaControl.displayName = "TextareaControl";
 var textarea_control_default = TextareaControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/textarea-control/index.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,qCAA+B;AAC/B,yBAA4B;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,iBAAa,8BAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,cAAU,YAAAA,SAAK,+BAA+B,SAAS;AAC7D,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,uCAAAD,KAAK,+CAAgB;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,sBAAkB,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,qCAA+B;AAC/B,yBAA4B;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,iBAAa,8BAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,cAAU,YAAAA,SAAK,+BAA+B,SAAS;AAC7D,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,uCAAAD,KAAK,+CAAgB;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,sBAAkB,2BAAW,0BAA0B;AACpE,gBAAgB,cAAc;AAC9B,IAAO,2BAAQ;",
   "names": ["clsx", "_jsx", "BaseControl"]
 }

package/build/toggle-control/index.cjs

@@ -97,6 +97,7 @@ function UnforwardedToggleControl({
   });
 }
 var ToggleControl = (0, import_element.forwardRef)(UnforwardedToggleControl);
+ToggleControl.displayName = "ToggleControl";
 var toggle_control_default = ToggleControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toggle-control/index.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA2B;AAC3B,qBAA8B;AAK9B,kBAA0B;AAC1B,yBAAuB;AACvB,0BAAwB;AACxB,qBAAuB;AACvB,yBAA2C;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,iBAAa,8BAAc,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,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,uCAAAD,KAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,eAAW,YAAAE,SAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,uCAAAH,KAAK,mBAAAI,SAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,uCAAAJ,KAAK,uBAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,eAAW,YAAAE,SAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,oBAAgB,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA2B;AAC3B,qBAA8B;AAK9B,kBAA0B;AAC1B,yBAAuB;AACvB,0BAAwB;AACxB,qBAAuB;AACvB,yBAA2C;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,iBAAa,8BAAc,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,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,uCAAAD,KAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,eAAW,YAAAE,SAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,uCAAAH,KAAK,mBAAAI,SAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,uCAAAJ,KAAK,uBAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,eAAW,YAAAE,SAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,oBAAgB,2BAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": ["_jsx", "BaseControl", "clsx", "_jsxs", "FormToggle"]
 }

package/build/toggle-group-control/toggle-group-control/as-button-group.cjs

@@ -83,6 +83,7 @@ function UnforwardedToggleGroupControlAsButtonGroup({
   });
 }
 var ToggleGroupControlAsButtonGroup = (0, import_element.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
+ToggleGroupControlAsButtonGroup.displayName = "ToggleGroupControlAsButtonGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ToggleGroupControlAsButtonGroup

package/build/toggle-group-control/toggle-group-control/as-button-group.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAoC;AAKpC,kBAAqB;AACrB,mBAAmC;AACnC,qBAAsC;AACtC,IAAAA,gBAAwD;AACxD,yBAA4B;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,kBAAc,8BAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,uDAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,QAAI,iCAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,wBAAQ,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,uCAAAC,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAoC;AAKpC,kBAAqB;AACrB,mBAAmC;AACnC,qBAAsC;AACtC,IAAAA,gBAAwD;AACxD,yBAA4B;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,kBAAc,8BAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,uDAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,QAAI,iCAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,wBAAQ,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,uCAAAC,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": ["import_utils", "_jsx", "ToggleGroupControlContext"]
 }

package/build/toggle-group-control/toggle-group-control/as-radio-group.cjs

@@ -59,7 +59,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
     defaultValue
   } = (0, import_utils.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,
@@ -99,6 +99,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   });
 }
 var ToggleGroupControlAsRadioGroup = (0, import_element.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
+ToggleGroupControlAsRadioGroup.displayName = "ToggleGroupControlAsRadioGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ToggleGroupControlAsRadioGroup

package/build/toggle-group-control/toggle-group-control/as-radio-group.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,cAAyB;AAKzB,qBAA8B;AAC9B,qBAA+C;AAC/C,kBAAsB;AAKtB,kBAAqB;AACrB,qBAAsC;AACtC,mBAAwD;AACxD,yBAA4B;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,kBAAc,8BAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,sDAAwC,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,SAAK,mBAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,gCAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,wBAAoB,wBAAQ,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,uCAAAA,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,uCAAAA,KAAK,kBAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,qCAAiC,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,cAAyB;AAKzB,qBAA8B;AAC9B,qBAA+C;AAC/C,kBAAsB;AAKtB,kBAAqB;AACrB,qBAAsC;AACtC,mBAAwD;AACxD,yBAA4B;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,kBAAc,8BAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,sDAAwC,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,SAAK,mBAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,gCAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,wBAAoB,wBAAQ,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,uCAAAA,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,uCAAAA,KAAK,kBAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,qCAAiC,2BAAW,yCAAyC;AAClG,+BAA+B,cAAc;",
   "names": ["_jsx", "ToggleGroupControlContext"]
 }

package/build/toggle-group-control/toggle-group-control/utils.cjs

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

package/build/toggle-group-control/toggle-group-control/utils.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA4B;AAC5B,qBAAkC;AAa3B,SAAS,wCAAwC,WAAW;AACjE,QAAM,yBAAqB,uBAAO,IAAI;AACtC,QAAM,oBAAgB,4BAAY,SAAS;AAC3C,QAAM,0BAAsB,uBAAO,KAAK;AACxC,gCAAU,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,gCAAU,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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA4B;AAC5B,qBAAkC;AAa3B,SAAS,wCAAwC,WAAW;AACjE,QAAM,yBAAqB,uBAAO,IAAI;AACtC,QAAM,oBAAgB,4BAAY,SAAS;AAC3C,QAAM,0BAAsB,uBAAO,KAAK;AACxC,gCAAU,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,gCAAU,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/toggle-group-control/toggle-group-control-option/component.cjs

@@ -41,6 +41,7 @@ function UnforwardedToggleGroupControlOption(props, ref) {
   });
 }
 var ToggleGroupControlOption = (0, import_element.forwardRef)(UnforwardedToggleGroupControlOption);
+ToggleGroupControlOption.displayName = "ToggleGroupControlOption";
 var component_default = ToggleGroupControlOption;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toggle-group-control/toggle-group-control-option/component.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAM3B,8CAA6C;AAC7C,yBAA4B;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,uCAAAA,KAAK,sEAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA2BO,IAAM,+BAA2B,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAM3B,8CAA6C;AAC7C,yBAA4B;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,uCAAAA,KAAK,sEAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA2BO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
   "names": ["_jsx"]
 }

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

@@ -56,6 +56,7 @@ function UnforwardedToggleGroupControlOptionIcon(props, ref) {
   });
 }
 var ToggleGroupControlOptionIcon = (0, import_element.forwardRef)(UnforwardedToggleGroupControlOptionIcon);
+ToggleGroupControlOptionIcon.displayName = "ToggleGroupControlOptionIcon";
 var component_default = ToggleGroupControlOptionIcon;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toggle-group-control/toggle-group-control-option-icon/component.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAM3B,8CAA6C;AAC7C,kBAAiB;AACjB,yBAA4B;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,uCAAAA,KAAK,sEAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,mCAA+B,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAM3B,8CAA6C;AAC7C,kBAAiB;AACjB,yBAA4B;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,uCAAAA,KAAK,sEAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,mCAA+B,2BAAW,uCAAuC;AAC9F,6BAA6B,cAAc;AAC3C,IAAO,oBAAQ;",
   "names": ["_jsx", "Icon"]
 }

package/build/toolbar/toolbar/index.cjs

@@ -92,6 +92,7 @@ function UnforwardedToolbar({
   });
 }
 var Toolbar = (0, import_element.forwardRef)(UnforwardedToolbar);
+Toolbar.displayName = "Toolbar";
 var toolbar_default = Toolbar;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toolbar/toolbar/index.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAoC;AACpC,wBAAuB;AAKvB,2BAAyB;AACzB,+BAA6B;AAC7B,qBAAsC;AACtC,yBAA4B;AAC5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,mBAAmB,YAAY;AACrC,QAAM,yBAAqB,wBAAQ,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,0BAAAA,SAAW,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,uCAAAC,KAAK,qBAAAC,SAAc;AAAA,MACrC,aAAa;AAAA,MACb,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,qBAAiB,YAAAC,SAAK,iCAAiC,WAAW,WAAW,MAAM,OAAO,EAAE;AAClG,SAAoB,uCAAAF,KAAK,sCAAuB;AAAA,IAC9C,OAAO;AAAA,IACP,UAAuB,uCAAAA,KAAK,yBAAAG,SAAkB;AAAA,MAC5C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,cAAU,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAoC;AACpC,wBAAuB;AAKvB,2BAAyB;AACzB,+BAA6B;AAC7B,qBAAsC;AACtC,yBAA4B;AAC5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,mBAAmB,YAAY;AACrC,QAAM,yBAAqB,wBAAQ,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,0BAAAA,SAAW,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,uCAAAC,KAAK,qBAAAC,SAAc;AAAA,MACrC,aAAa;AAAA,MACb,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,qBAAiB,YAAAC,SAAK,iCAAiC,WAAW,WAAW,MAAM,OAAO,EAAE;AAClG,SAAoB,uCAAAF,KAAK,sCAAuB;AAAA,IAC9C,OAAO;AAAA,IACP,UAAuB,uCAAAA,KAAK,yBAAAG,SAAkB;AAAA,MAC5C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,cAAU,2BAAW,kBAAkB;AACpD,QAAQ,cAAc;AACtB,IAAO,kBAAQ;",
   "names": ["deprecated", "_jsx", "ToolbarGroup", "clsx", "ToolbarContainer"]
 }

package/build/toolbar/toolbar/toolbar-container.cjs

@@ -61,6 +61,7 @@ function UnforwardedToolbarContainer({
   );
 }
 var ToolbarContainer = (0, import_element.forwardRef)(UnforwardedToolbarContainer);
+ToolbarContainer.displayName = "ToolbarContainer";
 var toolbar_container_default = ToolbarContainer;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toolbar/toolbar/toolbar-container.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAIzB,qBAA2B;AAC3B,kBAAsB;AAKtB,6BAA2B;AAC3B,yBAA4B;AAC5B,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,eAAuB,wBAAgB;AAAA,IAC3C,WAAW;AAAA,IACX,SAAK,mBAAM;AAAA,EACb,CAAC;AACD;AAAA;AAAA,IAGE,uCAAAA,KAAK,uBAAAC,QAAe,UAAU;AAAA,MAC5B,OAAO;AAAA,MACP,UAAuB,uCAAAD,KAAa,iBAAS;AAAA,QAC3C;AAAA,QACA,cAAc;AAAA,QACd,OAAO;AAAA,QACP,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,uBAAmB,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAIzB,qBAA2B;AAC3B,kBAAsB;AAKtB,6BAA2B;AAC3B,yBAA4B;AAC5B,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,eAAuB,wBAAgB;AAAA,IAC3C,WAAW;AAAA,IACX,SAAK,mBAAM;AAAA,EACb,CAAC;AACD;AAAA;AAAA,IAGE,uCAAAA,KAAK,uBAAAC,QAAe,UAAU;AAAA,MAC5B,OAAO;AAAA,MACP,UAAuB,uCAAAD,KAAa,iBAAS;AAAA,QAC3C;AAAA,QACA,cAAc;AAAA,QACd,OAAO;AAAA,QACP,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,uBAAmB,2BAAW,2BAA2B;AACtE,iBAAiB,cAAc;AAC/B,IAAO,4BAAQ;",
   "names": ["_jsx", "ToolbarContext"]
 }

package/build/toolbar/toolbar-button/index.cjs

@@ -102,6 +102,7 @@ function UnforwardedToolbarButton(props, ref) {
   });
 }
 var ToolbarButton = (0, import_element.forwardRef)(UnforwardedToolbarButton);
+ToolbarButton.displayName = "ToolbarButton";
 var toolbar_button_default = ToolbarButton;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toolbar/toolbar-button/index.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAuC;AAKvC,oBAAmB;AACnB,0BAAwB;AACxB,6BAA2B;AAC3B,sCAAmC;AACnC,yBAA4B;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,6BAAyB,2BAAW,uBAAAA,OAAc;AACxD,MAAI,CAAC,wBAAwB;AAC3B,WAAoB,uCAAAC,KAAK,gCAAAC,SAAwB;AAAA,MAC/C,WAAW;AAAA,MACX,UAAuB,uCAAAD,KAAK,cAAAE,SAAQ;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,eAAW,YAAAC,SAAK,+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,uCAAAH,KAAK,oBAAAI,SAAa;AAAA,IACpC,eAAW,YAAAD,SAAK,6BAA6B,SAAS;AAAA,IACtD,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,UAAU,sBAAiC,uCAAAH,KAAK,cAAAE,SAAQ;AAAA,MACtD,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,oBAAgB,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAuC;AAKvC,oBAAmB;AACnB,0BAAwB;AACxB,6BAA2B;AAC3B,sCAAmC;AACnC,yBAA4B;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,6BAAyB,2BAAW,uBAAAA,OAAc;AACxD,MAAI,CAAC,wBAAwB;AAC3B,WAAoB,uCAAAC,KAAK,gCAAAC,SAAwB;AAAA,MAC/C,WAAW;AAAA,MACX,UAAuB,uCAAAD,KAAK,cAAAE,SAAQ;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,eAAW,YAAAC,SAAK,+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,uCAAAH,KAAK,oBAAAI,SAAa;AAAA,IACpC,eAAW,YAAAD,SAAK,6BAA6B,SAAS;AAAA,IACtD,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,UAAU,sBAAiC,uCAAAH,KAAK,cAAAE,SAAQ;AAAA,MACtD,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,oBAAgB,2BAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": ["ToolbarContext", "_jsx", "ToolbarButtonContainer", "Button", "clsx", "ToolbarItem"]
 }

package/build/toolbar/toolbar-dropdown-menu/index.cjs

@@ -59,6 +59,7 @@ function UnforwardedToolbarDropdownMenu(props, ref) {
   });
 }
 var ToolbarDropdownMenu = (0, import_element.forwardRef)(UnforwardedToolbarDropdownMenu);
+ToolbarDropdownMenu.displayName = "ToolbarDropdownMenu";
 var toolbar_dropdown_menu_default = ToolbarDropdownMenu;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {