@wordpress/components 28.3.0 → 28.5.0

package/build-module/tabs/tablist.js

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef, useCallback, useEffect, useInsertionEffect, useRef, useState } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,194 +16,9 @@ import { forwardRef, useCallback, useEffect, useInsertionEffect, useRef, useStat
 import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
 import clsx from 'clsx';
-
-// TODO: move these into a separate utility file, for use in other components
-// such as ToggleGroupControl.
-
-/**
- * Any function.
- */
+import { useTrackElementOffsetRect } from '../utils/element-rect';
+import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Creates a stable callback function that has access to the latest state and
- * can be used within event handlers and effect callbacks. Throws when used in
- * the render phase.
- *
- * @example
- *
- * ```tsx
- * function Component(props) {
- *   const onClick = useEvent(props.onClick);
- *   React.useEffect(() => {}, [onClick]);
- * }
- * ```
- */
-function useEvent(callback) {
-  const ref = useRef(() => {
-    throw new Error('Cannot call an event handler while rendering.');
-  });
-  useInsertionEffect(() => {
-    ref.current = callback;
-  });
-  return useCallback((...args) => ref.current?.(...args), []);
-}
-
-/**
- * `useResizeObserver` options.
- */
-
-/**
- * Fires `onResize` when the target element is resized.
- *
- * **The element must not be stored in a ref**, else it won't be observed
- * or updated. Instead, it should be stored in a React state or equivalent.
- *
- * It sets up a `ResizeObserver` that tracks the element under the hood. The
- * target element can be changed dynamically, and the observer will be
- * updated accordingly.
- *
- * By default, `onResize` is called when the observer is set up, in addition
- * to when the element is resized. This behavior can be disabled with the
- * `fireOnObserve` option.
- *
- * @example
- *
- * ```tsx
- * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
- *
- * useResizeObserver( targetElement, ( element ) => {
- *   console.log( 'Element resized:', element );
- * } );
- *
- * <div ref={ setTargetElement } />;
- * ```
- */
-function useResizeObserver(
-/**
- * The target element to observe. It can be changed dynamically.
- */
-targetElement,
-/**
- * Callback to fire when the element is resized. It will also be
- * called when the observer is set up, unless `fireOnObserve` is
- * set to `false`.
- */
-onResize, {
-  fireOnObserve = true
-} = {}) {
-  const onResizeEvent = useEvent(onResize);
-  const observedElementRef = useRef();
-  const resizeObserverRef = useRef();
-  useEffect(() => {
-    if (targetElement === observedElementRef.current) {
-      return;
-    }
-    observedElementRef.current = targetElement;
-
-    // Set up a ResizeObserver.
-    if (!resizeObserverRef.current) {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        if (observedElementRef.current) {
-          onResizeEvent(observedElementRef.current);
-        }
-      });
-    }
-    const {
-      current: resizeObserver
-    } = resizeObserverRef;
-
-    // Observe new element.
-    if (targetElement) {
-      if (fireOnObserve) {
-        onResizeEvent(targetElement);
-      }
-      resizeObserver.observe(targetElement);
-    }
-    return () => {
-      // Unobserve previous element.
-      if (observedElementRef.current) {
-        resizeObserver.unobserve(observedElementRef.current);
-      }
-    };
-  }, [fireOnObserve, onResizeEvent, targetElement]);
-}
-
-/**
- * The position and dimensions of an element, relative to its offset parent.
- */
-
-/**
- * An `ElementOffsetRect` object with all values set to zero.
- */
-const NULL_ELEMENT_OFFSET_RECT = {
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0
-};
-
-/**
- * Returns the position and dimensions of an element, relative to its offset
- * parent. This is useful in contexts where `getBoundingClientRect` is not
- * suitable, such as when the element is transformed.
- *
- * **Note:** the `left` and `right` values are adjusted due to a limitation
- * in the way the browser calculates the offset position of the element,
- * which can cause unwanted scrollbars to appear. This adjustment makes the
- * values potentially inaccurate within a range of 1 pixel.
- */
-function getElementOffsetRect(element) {
-  return {
-    // The adjustments mentioned in the documentation above are necessary
-    // because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,
-    // which can result in a position mismatch that causes unwanted overflow.
-    // For context, see: https://github.com/WordPress/gutenberg/pull/61979
-    left: Math.max(element.offsetLeft - 1, 0),
-    top: Math.max(element.offsetTop - 1, 0),
-    // This is a workaround to obtain these values with a sub-pixel precision,
-    // since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.
-    width: parseFloat(getComputedStyle(element).width),
-    height: parseFloat(getComputedStyle(element).height)
-  };
-}
-
-/**
- * Tracks the position and dimensions of an element, relative to its offset
- * parent. The element can be changed dynamically.
- */
-function useTrackElementOffsetRect(targetElement) {
-  const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
-  useResizeObserver(targetElement, element => setIndicatorPosition(getElementOffsetRect(element)));
-  return indicatorPosition;
-}
-
-/**
- * Context object for the `onUpdate` callback of `useOnValueUpdate`.
- */
-
-/**
- * Calls the `onUpdate` callback when the `value` changes.
- */
-function useOnValueUpdate(
-/**
- * The value to watch for changes.
- */
-value,
-/**
- * Callback to fire when the value changes.
- */
-onUpdate) {
-  const previousValueRef = useRef(value);
-  const updateCallbackEvent = useEvent(onUpdate);
-  useEffect(() => {
-    if (previousValueRef.current !== value) {
-      updateCallbackEvent({
-        previousValue: previousValueRef.current
-      });
-      previousValueRef.current = value;
-    }
-  }, [updateCallbackEvent, value]);
-}
 export const TabList = forwardRef(function TabList({
   children,
   ...otherProps

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","warning","forwardRef","useCallback","useEffect","useInsertionEffect","useRef","useState","useTabsContext","TabListWrapper","clsx","jsx","_jsx","useEvent","callback","ref","Error","current","args","useResizeObserver","targetElement","onResize","fireOnObserve","onResizeEvent","observedElementRef","resizeObserverRef","ResizeObserver","resizeObserver","observe","unobserve","NULL_ELEMENT_OFFSET_RECT","left","top","width","height","getElementOffsetRect","element","Math","max","offsetLeft","offsetTop","parseFloat","getComputedStyle","useTrackElementOffsetRect","indicatorPosition","setIndicatorPosition","useOnValueUpdate","value","onUpdate","previousValueRef","updateCallbackEvent","previousValue","TabList","children","otherProps","context","selectedId","store","item","animationEnabled","setAnimationEnabled","globalThis","SCRIPT_DEBUG","activeId","selectOnMove","setActiveId","onBlur","render","onTransitionEnd","event","pseudoElement","style","className"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseInsertionEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport { useTabsContext } from './context';\nimport { TabListWrapper } from './styles';\nimport type { WordPressComponentProps } from '../context';\nimport clsx from 'clsx';\n\n// TODO: move these into a separate utility file, for use in other components\n// such as ToggleGroupControl.\n\n/**\n * Any function.\n */\ntype AnyFunction = ( ...args: any ) => any;\n\n/**\n * Creates a stable callback function that has access to the latest state and\n * can be used within event handlers and effect callbacks. Throws when used in\n * the render phase.\n *\n * @example\n *\n * ```tsx\n * function Component(props) {\n *   const onClick = useEvent(props.onClick);\n *   React.useEffect(() => {}, [onClick]);\n * }\n * ```\n */\nfunction useEvent< T extends AnyFunction >( callback?: T ) {\n\tconst ref = useRef< AnyFunction | undefined >( () => {\n\t\tthrow new Error( 'Cannot call an event handler while rendering.' );\n\t} );\n\tuseInsertionEffect( () => {\n\t\tref.current = callback;\n\t} );\n\treturn useCallback< AnyFunction >(\n\t\t( ...args ) => ref.current?.( ...args ),\n\t\t[]\n\t) as T;\n}\n\n/**\n * `useResizeObserver` options.\n */\ntype UseResizeObserverOptions = {\n\t/**\n\t * Whether to trigger the callback when an element's ResizeObserver is\n\t * first set up.\n\t *\n\t * @default true\n\t */\n\tfireOnObserve?: boolean;\n};\n\n/**\n * Fires `onResize` when the target element is resized.\n *\n * **The element must not be stored in a ref**, else it won't be observed\n * or updated. Instead, it should be stored in a React state or equivalent.\n *\n * It sets up a `ResizeObserver` that tracks the element under the hood. The\n * target element can be changed dynamically, and the observer will be\n * updated accordingly.\n *\n * By default, `onResize` is called when the observer is set up, in addition\n * to when the element is resized. This behavior can be disabled with the\n * `fireOnObserve` option.\n *\n * @example\n *\n * ```tsx\n * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();\n *\n * useResizeObserver( targetElement, ( element ) => {\n *   console.log( 'Element resized:', element );\n * } );\n *\n * <div ref={ setTargetElement } />;\n * ```\n */\nfunction useResizeObserver(\n\t/**\n\t * The target element to observe. It can be changed dynamically.\n\t */\n\ttargetElement: HTMLElement | undefined | null,\n\n\t/**\n\t * Callback to fire when the element is resized. It will also be\n\t * called when the observer is set up, unless `fireOnObserve` is\n\t * set to `false`.\n\t */\n\tonResize: ( element: HTMLElement ) => void,\n\t{ fireOnObserve = true }: UseResizeObserverOptions = {}\n) {\n\tconst onResizeEvent = useEvent( onResize );\n\n\tconst observedElementRef = useRef< HTMLElement | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\n\tuseEffect( () => {\n\t\tif ( targetElement === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tobservedElementRef.current = targetElement;\n\n\t\t// Set up a ResizeObserver.\n\t\tif ( ! resizeObserverRef.current ) {\n\t\t\tresizeObserverRef.current = new ResizeObserver( () => {\n\t\t\t\tif ( observedElementRef.current ) {\n\t\t\t\t\tonResizeEvent( observedElementRef.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Observe new element.\n\t\tif ( targetElement ) {\n\t\t\tif ( fireOnObserve ) {\n\t\t\t\tonResizeEvent( targetElement );\n\t\t\t}\n\t\t\tresizeObserver.observe( targetElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Unobserve previous element.\n\t\t\tif ( observedElementRef.current ) {\n\t\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t\t}\n\t\t};\n\t}, [ fireOnObserve, onResizeEvent, targetElement ] );\n}\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\ntype ElementOffsetRect = {\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nconst NULL_ELEMENT_OFFSET_RECT = {\n\tleft: 0,\n\ttop: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent. This is useful in contexts where `getBoundingClientRect` is not\n * suitable, such as when the element is transformed.\n *\n * **Note:** the `left` and `right` values are adjusted due to a limitation\n * in the way the browser calculates the offset position of the element,\n * which can cause unwanted scrollbars to appear. This adjustment makes the\n * values potentially inaccurate within a range of 1 pixel.\n */\nfunction getElementOffsetRect( element: HTMLElement ): ElementOffsetRect {\n\treturn {\n\t\t// The adjustments mentioned in the documentation above are necessary\n\t\t// because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,\n\t\t// which can result in a position mismatch that causes unwanted overflow.\n\t\t// For context, see: https://github.com/WordPress/gutenberg/pull/61979\n\t\tleft: Math.max( element.offsetLeft - 1, 0 ),\n\t\ttop: Math.max( element.offsetTop - 1, 0 ),\n\t\t// This is a workaround to obtain these values with a sub-pixel precision,\n\t\t// since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.\n\t\twidth: parseFloat( getComputedStyle( element ).width ),\n\t\theight: parseFloat( getComputedStyle( element ).height ),\n\t};\n}\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n */\nfunction useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\n\tuseResizeObserver( targetElement, ( element ) =>\n\t\tsetIndicatorPosition( getElementOffsetRect( element ) )\n\t);\n\n\treturn indicatorPosition;\n}\n\n/**\n * Context object for the `onUpdate` callback of `useOnValueUpdate`.\n */\ntype ValueUpdateContext< T > = {\n\tpreviousValue: T;\n};\n\n/**\n * Calls the `onUpdate` callback when the `value` changes.\n */\nfunction useOnValueUpdate< T >(\n\t/**\n\t * The value to watch for changes.\n\t */\n\tvalue: T,\n\t/**\n\t * Callback to fire when the value changes.\n\t */\n\tonUpdate: ( context: ValueUpdateContext< T > ) => void\n) {\n\tconst previousValueRef = useRef( value );\n\tconst updateCallbackEvent = useEvent( onUpdate );\n\tuseEffect( () => {\n\t\tif ( previousValueRef.current !== value ) {\n\t\t\tupdateCallbackEvent( {\n\t\t\t\tpreviousValue: previousValueRef.current,\n\t\t\t} );\n\t\t\tpreviousValueRef.current = value;\n\t\t}\n\t}, [ updateCallbackEvent, value ] );\n}\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\n\tconst selectedId = context?.store.useState( 'selectedId' );\n\tconst indicatorPosition = useTrackElementOffsetRect(\n\t\tcontext?.store.item( selectedId )?.element\n\t);\n\n\tconst [ animationEnabled, setAnimationEnabled ] = useState( false );\n\tuseOnValueUpdate(\n\t\tselectedId,\n\t\t( { previousValue } ) => previousValue && setAnimationEnabled( true )\n\t);\n\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store } = context;\n\n\tconst { activeId, selectOnMove } = store.useState();\n\tconst { setActiveId } = store;\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tsetActiveId( selectedId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Ariakit.TabList\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\trender={\n\t\t\t\t<TabListWrapper\n\t\t\t\t\tonTransitionEnd={ ( event ) => {\n\t\t\t\t\t\tif ( event.pseudoElement === '::after' ) {\n\t\t\t\t\t\t\tsetAnimationEnabled( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonBlur={ onBlur }\n\t\t\t{ ...otherProps }\n\t\t\tstyle={ {\n\t\t\t\t'--indicator-left': `${ indicatorPosition.left }px`,\n\t\t\t\t'--indicator-top': `${ indicatorPosition.top }px`,\n\t\t\t\t'--indicator-width': `${ indicatorPosition.width }px`,\n\t\t\t\t'--indicator-height': `${ indicatorPosition.height }px`,\n\t\t\t\t...otherProps.style,\n\t\t\t} }\n\t\t\tclassName={ clsx(\n\t\t\t\tanimationEnabled ? 'is-animation-enabled' : '',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Ariakit.TabList>\n\t);\n} );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","warning","forwardRef","useState","useTabsContext","TabListWrapper","clsx","useTrackElementOffsetRect","useOnValueUpdate","jsx","_jsx","TabList","children","otherProps","ref","context","selectedId","store","indicatorPosition","item","element","animationEnabled","setAnimationEnabled","previousValue","globalThis","SCRIPT_DEBUG","activeId","selectOnMove","setActiveId","onBlur","render","onTransitionEnd","event","pseudoElement","style","left","top","width","height","className"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport { useTabsContext } from './context';\nimport { TabListWrapper } from './styles';\nimport type { WordPressComponentProps } from '../context';\nimport clsx from 'clsx';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useOnValueUpdate } from '../utils/hooks/use-on-value-update';\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\n\tconst selectedId = context?.store.useState( 'selectedId' );\n\tconst indicatorPosition = useTrackElementOffsetRect(\n\t\tcontext?.store.item( selectedId )?.element\n\t);\n\n\tconst [ animationEnabled, setAnimationEnabled ] = useState( false );\n\tuseOnValueUpdate(\n\t\tselectedId,\n\t\t( { previousValue } ) => previousValue && setAnimationEnabled( true )\n\t);\n\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store } = context;\n\n\tconst { activeId, selectOnMove } = store.useState();\n\tconst { setActiveId } = store;\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tsetActiveId( selectedId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Ariakit.TabList\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\trender={\n\t\t\t\t<TabListWrapper\n\t\t\t\t\tonTransitionEnd={ ( event ) => {\n\t\t\t\t\t\tif ( event.pseudoElement === '::after' ) {\n\t\t\t\t\t\t\tsetAnimationEnabled( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonBlur={ onBlur }\n\t\t\t{ ...otherProps }\n\t\t\tstyle={ {\n\t\t\t\t'--indicator-left': `${ indicatorPosition.left }px`,\n\t\t\t\t'--indicator-top': `${ indicatorPosition.top }px`,\n\t\t\t\t'--indicator-width': `${ indicatorPosition.width }px`,\n\t\t\t\t'--indicator-height': `${ indicatorPosition.height }px`,\n\t\t\t\t...otherProps.style,\n\t\t\t} }\n\t\t\tclassName={ clsx(\n\t\t\t\tanimationEnabled ? 'is-animation-enabled' : '',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Ariakit.TabList>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAEA,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,cAAc,QAAQ,UAAU;AAEzC,OAAOC,IAAI,MAAM,MAAM;AACvB,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,gBAAgB,QAAQ,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtE,OAAO,MAAMC,OAAO,GAAGT,UAAU,CAG9B,SAASS,OAAOA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACvD,MAAMC,OAAO,GAAGX,cAAc,CAAC,CAAC;EAEhC,MAAMY,UAAU,GAAGD,OAAO,EAAEE,KAAK,CAACd,QAAQ,CAAE,YAAa,CAAC;EAC1D,MAAMe,iBAAiB,GAAGX,yBAAyB,CAClDQ,OAAO,EAAEE,KAAK,CAACE,IAAI,CAAEH,UAAW,CAAC,EAAEI,OACpC,CAAC;EAED,MAAM,CAAEC,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGnB,QAAQ,CAAE,KAAM,CAAC;EACnEK,gBAAgB,CACfQ,UAAU,EACV,CAAE;IAAEO;EAAc,CAAC,KAAMA,aAAa,IAAID,mBAAmB,CAAE,IAAK,CACrE,CAAC;EAED,IAAK,CAAEP,OAAO,EAAG;IAChBS,UAAA,CAAAC,YAAA,YAAAxB,OAAO,CAAE,uDAAwD,CAAC;IAClE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEgB;EAAM,CAAC,GAAGF,OAAO;EAEzB,MAAM;IAAEW,QAAQ;IAAEC;EAAa,CAAC,GAAGV,KAAK,CAACd,QAAQ,CAAC,CAAC;EACnD,MAAM;IAAEyB;EAAY,CAAC,GAAGX,KAAK;EAE7B,MAAMY,MAAM,GAAGA,CAAA,KAAM;IACpB,IAAK,CAAEF,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKX,UAAU,KAAKU,QAAQ,EAAG;MAC9BE,WAAW,CAAEZ,UAAW,CAAC;IAC1B;EACD,CAAC;EAED,oBACCN,IAAA,CAACV,OAAO,CAACW,OAAO;IACfG,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfa,MAAM,eACLpB,IAAA,CAACL,cAAc;MACd0B,eAAe,EAAKC,KAAK,IAAM;QAC9B,IAAKA,KAAK,CAACC,aAAa,KAAK,SAAS,EAAG;UACxCX,mBAAmB,CAAE,KAAM,CAAC;QAC7B;MACD;IAAG,CACH,CACD;IACDO,MAAM,EAAGA,MAAQ;IAAA,GACZhB,UAAU;IACfqB,KAAK,EAAG;MACP,kBAAkB,EAAG,GAAGhB,iBAAiB,CAACiB,IAAM,IAAG;MACnD,iBAAiB,EAAG,GAAGjB,iBAAiB,CAACkB,GAAK,IAAG;MACjD,mBAAmB,EAAG,GAAGlB,iBAAiB,CAACmB,KAAO,IAAG;MACrD,oBAAoB,EAAG,GAAGnB,iBAAiB,CAACoB,MAAQ,IAAG;MACvD,GAAGzB,UAAU,CAACqB;IACf,CAAG;IACHK,SAAS,EAAGjC,IAAI,CACfe,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,EAC9CR,UAAU,CAAC0B,SACZ,CAAG;IAAA3B,QAAA,EAEDA;EAAQ,CACM,CAAC;AAEpB,CAAE,CAAC","ignoreList":[]}

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

@@ -65,6 +65,7 @@ function UnforwardedTextControl(props, ref) {
  *
  *   return (
  *     <TextControl
+ *       __nextHasNoMarginBottom
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useInstanceId","forwardRef","BaseControl","jsx","_jsx","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","TextControl","onChangeValue","event","target","children","undefined"],"sources":["@wordpress/components/src/text-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\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 type { WordPressComponentProps } from '../context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName={ clsx( 'components-text-control__input', {\n\t\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t} ) }\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\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 *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI1C,SAASC,sBAAsBA,CAC9BC,KAAkE,EAClEC,GAAqC,EACpC;EACD,MAAM;IACLC,uBAAuB;IACvBC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,QAAQ;IACRC,IAAI,GAAG,MAAM;IACb,GAAGC;EACJ,CAAC,GAAGb,KAAK;EACT,MAAMQ,EAAE,GAAGd,aAAa,CAAEoB,WAAW,EAAE,wBAAwB,EAAEL,MAAO,CAAC;EACzE,MAAMM,aAAa,GAAKC,KAAsC,IAC7DL,QAAQ,CAAEK,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/B,oBACCR,IAAA,CAACF,WAAW;IACXM,uBAAuB,EAAGA,uBAAyB;IACnDE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAQ,QAAA,eAEvBpB,IAAA;MACCY,SAAS,EAAGjB,IAAI,CAAE,gCAAgC,EAAE;QACnD,2BAA2B,EAAEU;MAC9B,CAAE,CAAG;MACLS,IAAI,EAAGA,IAAM;MACbJ,EAAE,EAAGA,EAAI;MACTF,KAAK,EAAGA,KAAO;MACfK,QAAQ,EAAGI,aAAe;MAC1B,oBAAmB,CAAC,CAAER,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGW,SAAW;MACxDlB,GAAG,EAAGA,GAAK;MAAA,GACNY;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGnB,UAAU,CAAEI,sBAAuB,CAAC;AAE/D,eAAee,WAAW","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","forwardRef","BaseControl","jsx","_jsx","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","TextControl","onChangeValue","event","target","children","undefined"],"sources":["@wordpress/components/src/text-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\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 type { WordPressComponentProps } from '../context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName={ clsx( 'components-text-control__input', {\n\t\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t} ) }\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\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 *       __nextHasNoMarginBottom\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI1C,SAASC,sBAAsBA,CAC9BC,KAAkE,EAClEC,GAAqC,EACpC;EACD,MAAM;IACLC,uBAAuB;IACvBC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,QAAQ;IACRC,IAAI,GAAG,MAAM;IACb,GAAGC;EACJ,CAAC,GAAGb,KAAK;EACT,MAAMQ,EAAE,GAAGd,aAAa,CAAEoB,WAAW,EAAE,wBAAwB,EAAEL,MAAO,CAAC;EACzE,MAAMM,aAAa,GAAKC,KAAsC,IAC7DL,QAAQ,CAAEK,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/B,oBACCR,IAAA,CAACF,WAAW;IACXM,uBAAuB,EAAGA,uBAAyB;IACnDE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAQ,QAAA,eAEvBpB,IAAA;MACCY,SAAS,EAAGjB,IAAI,CAAE,gCAAgC,EAAE;QACnD,2BAA2B,EAAEU;MAC9B,CAAE,CAAG;MACLS,IAAI,EAAGA,IAAM;MACbJ,EAAE,EAAGA,EAAI;MACTF,KAAK,EAAGA,KAAO;MACfK,QAAQ,EAAGI,aAAe;MAC1B,oBAAmB,CAAC,CAAER,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGW,SAAW;MACxDlB,GAAG,EAAGA,GAAK;MAAA,GACNY;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGnB,UAAU,CAAEI,sBAAuB,CAAC;AAE/D,eAAee,WAAW","ignoreList":[]}

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

@@ -59,6 +59,7 @@ function UnforwardedTextareaControl(props, ref) {
  *
  *   return (
  *     <TextareaControl
+ *       __nextHasNoMarginBottom
  *       label="Text"
  *       help="Enter some text"
  *       value={ text }

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

@@ -1 +1 @@
-{"version":3,"names":["useInstanceId","forwardRef","BaseControl","StyledTextarea","jsx","_jsx","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","TextareaControl","id","onChangeValue","event","target","children","undefined"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/**\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 type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\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 );\n\nexport default TextareaControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAASC,cAAc,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIlE,SAASC,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAGlB,aAAa,CAAEmB,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAI,8BAA8BF,UAAY,EAAC;EACvD,MAAMG,aAAa,GAAKC,KAA+C,IACtER,QAAQ,CAAEQ,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/B,oBACCP,IAAA,CAACH,WAAW;IACXO,uBAAuB,EAAGA,uBAAyB;IACnDC,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CS,EAAE,EAAGA,EAAI;IACTP,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAQ,QAAA,eAEvBnB,IAAA,CAACF,cAAc;MACda,SAAS,EAAC,oCAAoC;MAC9CI,EAAE,EAAGA,EAAI;MACTL,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGO,aAAe;MAC1B,oBAAmB,CAAC,CAAER,IAAI,GAAGO,EAAE,GAAG,QAAQ,GAAGK,SAAW;MACxDb,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,eAAe,GAAGlB,UAAU,CAAEK,0BAA2B,CAAC;AAEvE,eAAea,eAAe","ignoreList":[]}
+{"version":3,"names":["useInstanceId","forwardRef","BaseControl","StyledTextarea","jsx","_jsx","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","TextareaControl","id","onChangeValue","event","target","children","undefined"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/**\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 type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\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 *       __nextHasNoMarginBottom\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 );\n\nexport default TextareaControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAASC,cAAc,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIlE,SAASC,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAGlB,aAAa,CAAEmB,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAI,8BAA8BF,UAAY,EAAC;EACvD,MAAMG,aAAa,GAAKC,KAA+C,IACtER,QAAQ,CAAEQ,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/B,oBACCP,IAAA,CAACH,WAAW;IACXO,uBAAuB,EAAGA,uBAAyB;IACnDC,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CS,EAAE,EAAGA,EAAI;IACTP,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAQ,QAAA,eAEvBnB,IAAA,CAACF,cAAc;MACda,SAAS,EAAC,oCAAoC;MAC9CI,EAAE,EAAGA,EAAI;MACTL,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGO,aAAe;MAC1B,oBAAmB,CAAC,CAAER,IAAI,GAAGO,EAAE,GAAG,QAAQ,GAAGK,SAAW;MACxDb,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,eAAe,GAAGlB,UAAU,CAAEK,0BAA2B,CAAC;AAEvE,eAAea,eAAe","ignoreList":[]}

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

@@ -3,6 +3,7 @@
  */
 
 import { css } from '@emotion/react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,30 +20,9 @@ import BaseControl from '../base-control';
 import { HStack } from '../h-stack';
 import { useCx } from '../utils';
 import { space } from '../utils/space';
-
-/**
- * ToggleControl is used to generate a toggle user interface.
- *
- * ```jsx
- * import { ToggleControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyToggleControl = () => {
- *   const [ value, setValue ] = useState( false );
- *
- *   return (
- *     <ToggleControl
- *       label="Fixed Background"
- *       checked={ value }
- *       onChange={ () => setValue( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export function ToggleControl({
+function UnforwardedToggleControl({
   __nextHasNoMarginBottom,
   label,
   checked,
@@ -59,7 +39,7 @@ export function ToggleControl({
   const cx = useCx();
   const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/css({
     marginBottom: space(3)
-  }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtFK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50LCBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCB7IHVzZUluc3RhbmNlSWQgfSBmcm9tICdAd29yZHByZXNzL2NvbXBvc2UnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4QmxvY2sgfSBmcm9tICcuLi9mbGV4JztcbmltcG9ydCBGb3JtVG9nZ2xlIGZyb20gJy4uL2Zvcm0tdG9nZ2xlJztcbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL2NvbnRleHQvd29yZHByZXNzLWNvbXBvbmVudCc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUNvbnRyb2xQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG4vKipcbiAqIFRvZ2dsZUNvbnRyb2wgaXMgdXNlZCB0byBnZW5lcmF0ZSBhIHRvZ2dsZSB1c2VyIGludGVyZmFjZS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFRvZ2dsZUNvbnRyb2wgfSBmcm9tICdAd29yZHByZXNzL2NvbXBvbmVudHMnO1xuICogaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuICpcbiAqIGNvbnN0IE15VG9nZ2xlQ29udHJvbCA9ICgpID0+IHtcbiAqICAgY29uc3QgWyB2YWx1ZSwgc2V0VmFsdWUgXSA9IHVzZVN0YXRlKCBmYWxzZSApO1xuICpcbiAqICAgcmV0dXJuIChcbiAqICAgICA8VG9nZ2xlQ29udHJvbFxuICogICAgICAgbGFiZWw9XCJGaXhlZCBCYWNrZ3JvdW5kXCJcbiAqICAgICAgIGNoZWNrZWQ9eyB2YWx1ZSB9XG4gKiAgICAgICBvbkNoYW5nZT17ICgpID0+IHNldFZhbHVlKCAoIHN0YXRlICkgPT4gISBzdGF0ZSApIH1cbiAqICAgICAvPlxuICogICApO1xuICogfTtcbiAqIGBgYFxuICovXG5leHBvcnQgZnVuY3Rpb24gVG9nZ2xlQ29udHJvbChcblx0e1xuXHRcdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRcdGxhYmVsLFxuXHRcdGNoZWNrZWQsXG5cdFx0aGVscCxcblx0XHRjbGFzc05hbWUsXG5cdFx0b25DaGFuZ2UsXG5cdFx0ZGlzYWJsZWQsXG5cdH06IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBUb2dnbGVDb250cm9sUHJvcHMsICdpbnB1dCcsIGZhbHNlID4sXG5cdHJlZjogRm9yd2FyZGVkUmVmPCBIVE1MSW5wdXRFbGVtZW50ID5cbikge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXsgaGVscExhYmVsIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDMgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0XHRyZWY9eyByZWYgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RmxleEJsb2NrXG5cdFx0XHRcdFx0YXM9XCJsYWJlbFwiXG5cdFx0XHRcdFx0aHRtbEZvcj17IGlkIH1cblx0XHRcdFx0XHRjbGFzc05hbWU9XCJjb21wb25lbnRzLXRvZ2dsZS1jb250cm9sX19sYWJlbFwiXG5cdFx0XHRcdD5cblx0XHRcdFx0XHR7IGxhYmVsIH1cblx0XHRcdFx0PC9GbGV4QmxvY2s+XG5cdFx0XHQ8L0hTdGFjaz5cblx0XHQ8L0Jhc2VDb250cm9sPlxuXHQpO1xufVxuXG5leHBvcnQgZGVmYXVsdCBmb3J3YXJkUmVmKCBUb2dnbGVDb250cm9sICk7XG4iXX0= */"));
+  }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50LCBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY2xzeCBmcm9tICdjbHN4JztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbmZ1bmN0aW9uIFVuZm9yd2FyZGVkVG9nZ2xlQ29udHJvbChcblx0e1xuXHRcdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRcdGxhYmVsLFxuXHRcdGNoZWNrZWQsXG5cdFx0aGVscCxcblx0XHRjbGFzc05hbWUsXG5cdFx0b25DaGFuZ2UsXG5cdFx0ZGlzYWJsZWQsXG5cdH06IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBUb2dnbGVDb250cm9sUHJvcHMsICdpbnB1dCcsIGZhbHNlID4sXG5cdHJlZjogRm9yd2FyZGVkUmVmPCBIVE1MSW5wdXRFbGVtZW50ID5cbikge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXtcblx0XHRcdFx0aGVscExhYmVsICYmIChcblx0XHRcdFx0XHQ8c3BhbiBjbGFzc05hbWU9XCJjb21wb25lbnRzLXRvZ2dsZS1jb250cm9sX19oZWxwXCI+XG5cdFx0XHRcdFx0XHR7IGhlbHBMYWJlbCB9XG5cdFx0XHRcdFx0PC9zcGFuPlxuXHRcdFx0XHQpXG5cdFx0XHR9XG5cdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PlxuXHRcdFx0PEhTdGFjayBqdXN0aWZ5PVwiZmxleC1zdGFydFwiIHNwYWNpbmc9eyAyIH0+XG5cdFx0XHRcdDxGb3JtVG9nZ2xlXG5cdFx0XHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRcdFx0Y2hlY2tlZD17IGNoZWNrZWQgfVxuXHRcdFx0XHRcdG9uQ2hhbmdlPXsgb25DaGFuZ2VUb2dnbGUgfVxuXHRcdFx0XHRcdGFyaWEtZGVzY3JpYmVkYnk9eyBkZXNjcmliZWRCeSB9XG5cdFx0XHRcdFx0ZGlzYWJsZWQ9eyBkaXNhYmxlZCB9XG5cdFx0XHRcdFx0cmVmPXsgcmVmIH1cblx0XHRcdFx0Lz5cblx0XHRcdFx0PEZsZXhCbG9ja1xuXHRcdFx0XHRcdGFzPVwibGFiZWxcIlxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgY2xzeCggJ2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2xfX2xhYmVsJywge1xuXHRcdFx0XHRcdFx0J2lzLWRpc2FibGVkJzogZGlzYWJsZWQsXG5cdFx0XHRcdFx0fSApIH1cblx0XHRcdFx0PlxuXHRcdFx0XHRcdHsgbGFiZWwgfVxuXHRcdFx0XHQ8L0ZsZXhCbG9jaz5cblx0XHRcdDwvSFN0YWNrPlxuXHRcdDwvQmFzZUNvbnRyb2w+XG5cdCk7XG59XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuICogICAgICAgbGFiZWw9XCJGaXhlZCBCYWNrZ3JvdW5kXCJcbiAqICAgICAgIGNoZWNrZWQ9eyB2YWx1ZSB9XG4gKiAgICAgICBvbkNoYW5nZT17ICgpID0+IHNldFZhbHVlKCAoIHN0YXRlICkgPT4gISBzdGF0ZSApIH1cbiAqICAgICAvPlxuICogICApO1xuICogfTtcbiAqIGBgYFxuICovXG5leHBvcnQgY29uc3QgVG9nZ2xlQ29udHJvbCA9IGZvcndhcmRSZWYoIFVuZm9yd2FyZGVkVG9nZ2xlQ29udHJvbCApO1xuXG5leHBvcnQgZGVmYXVsdCBUb2dnbGVDb250cm9sO1xuIl19 */"));
   let describedBy, helpLabel;
   if (help) {
     if (typeof help === 'function') {
@@ -78,12 +58,15 @@ export function ToggleControl({
   }
   return /*#__PURE__*/_jsx(BaseControl, {
     id: id,
-    help: helpLabel,
+    help: helpLabel && /*#__PURE__*/_jsx("span", {
+      className: "components-toggle-control__help",
+      children: helpLabel
+    }),
     className: classes,
     __nextHasNoMarginBottom: true,
     children: /*#__PURE__*/_jsxs(HStack, {
       justify: "flex-start",
-      spacing: 3,
+      spacing: 2,
       children: [/*#__PURE__*/_jsx(FormToggle, {
         id: id,
         checked: checked,
@@ -94,11 +77,36 @@ export function ToggleControl({
       }), /*#__PURE__*/_jsx(FlexBlock, {
         as: "label",
         htmlFor: id,
-        className: "components-toggle-control__label",
+        className: clsx('components-toggle-control__label', {
+          'is-disabled': disabled
+        }),
         children: label
       })]
     })
   });
 }
-export default forwardRef(ToggleControl);
+
+/**
+ * ToggleControl is used to generate a toggle user interface.
+ *
+ * ```jsx
+ * import { ToggleControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyToggleControl = () => {
+ *   const [ value, setValue ] = useState( false );
+ *
+ *   return (
+ *     <ToggleControl
+ *       __nextHasNoMarginBottom
+ *       label="Fixed Background"
+ *       checked={ value }
+ *       onChange={ () => setValue( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const ToggleControl = forwardRef(UnforwardedToggleControl);
+export default ToggleControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["css","forwardRef","useInstanceId","FlexBlock","FormToggle","BaseControl","HStack","useCx","space","jsx","_jsx","jsxs","_jsxs","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","process","env","NODE_ENV","describedBy","helpLabel","undefined","children","justify","spacing","as","htmlFor"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\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 type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\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 function ToggleControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tref={ ref }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default forwardRef( ToggleControl );\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,SAAS,QAAQ,SAAS;AACnC,OAAOC,UAAU,MAAM,gBAAgB;AACvC,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAnBA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAoBA,OAAO,SAASC,aAAaA,CAC5B;EACCC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAChEC,GAAqC,EACpC;EACD,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEJ,QAAQ,CAAEI,KAAK,CAACC,MAAM,CAACR,OAAQ,CAAC;EACjC;EACA,MAAMS,UAAU,GAAGvB,aAAa,CAAEW,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BD,UAAY,EAAC;EAErD,MAAME,EAAE,GAAGpB,KAAK,CAAC,CAAC;EAClB,MAAMqB,OAAO,GAAGD,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAId,GAAG,CAAE;IAAE6B,YAAY,EAAErB,KAAK,CAAE,CAAE;EAAE,CAAC,EAAAsB,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0yIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKjB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKmB,SAAS,EAAG;QAC5BD,SAAS,GAAGjB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNkB,SAAS,GAAGjB,IAAI;IACjB;IACA,IAAKiB,SAAS,EAAG;MAChBD,WAAW,GAAGP,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,oBACChB,IAAA,CAACL,WAAW;IACXqB,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGiB,SAAW;IAClBhB,SAAS,EAAGU,OAAS;IACrBd,uBAAuB;IAAAsB,QAAA,eAEvBxB,KAAA,CAACN,MAAM;MAAC+B,OAAO,EAAC,YAAY;MAACC,OAAO,EAAG,CAAG;MAAAF,QAAA,gBACzC1B,IAAA,CAACN,UAAU;QACVsB,EAAE,EAAGA,EAAI;QACTV,OAAO,EAAGA,OAAS;QACnBG,QAAQ,EAAGG,cAAgB;QAC3B,oBAAmBW,WAAa;QAChCb,QAAQ,EAAGA,QAAU;QACrBC,GAAG,EAAGA;MAAK,CACX,CAAC,eACFX,IAAA,CAACP,SAAS;QACToC,EAAE,EAAC,OAAO;QACVC,OAAO,EAAGd,EAAI;QACdR,SAAS,EAAC,kCAAkC;QAAAkB,QAAA,EAE1CrB;MAAK,CACG,CAAC;IAAA,CACL;EAAC,CACG,CAAC;AAEhB;AAEA,eAAed,UAAU,CAAEY,aAAc,CAAC","ignoreList":[]}
+{"version":3,"names":["css","clsx","forwardRef","useInstanceId","FlexBlock","FormToggle","BaseControl","HStack","useCx","space","jsx","_jsx","jsxs","_jsxs","UnforwardedToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","ToggleControl","id","cx","classes","marginBottom","process","env","NODE_ENV","describedBy","helpLabel","undefined","children","justify","spacing","as","htmlFor"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\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 type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\n\nfunction UnforwardedToggleControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelpLabel && (\n\t\t\t\t\t<span className=\"components-toggle-control__help\">\n\t\t\t\t\t\t{ helpLabel }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tref={ ref }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName={ clsx( 'components-toggle-control__label', {\n\t\t\t\t\t\t'is-disabled': disabled,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\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 *       __nextHasNoMarginBottom\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef( UnforwardedToggleControl );\n\nexport default ToggleControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/toggle-group-control/toggle-group-control/component.js

@@ -94,7 +94,12 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

package/build-module/toggle-group-control/toggle-group-control/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["LayoutGroup","useInstanceId","useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","jsx","_jsx","jsxs","_jsxs","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","baseId","ToggleGroupControl","normalizedSize","cx","classes","toggleGroupControl","block","MainControl","VisualLabel","ref","id"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["LayoutGroup","useInstanceId","useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","jsx","_jsx","jsxs","_jsxs","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","baseId","ToggleGroupControl","normalizedSize","cx","classes","toggleGroupControl","block","MainControl","VisualLabel","ref","id"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __nextHasNoMarginBottom\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -39,7 +39,12 @@ function UnforwardedToggleGroupControlOption(props, ref) {
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","jsx","_jsx","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","children","ToggleGroupControlOption"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\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 label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnF,SAASC,mCAAmCA,CAC3CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACrC,MAAMI,WAAW,GAAGD,SAAS,CAAE,YAAY,CAAE,IAAID,KAAK;EACtD,oBACCJ,IAAA,CAACF,4BAA4B;IAAA,GACvBO,SAAS;IACd,cAAaC,WAAa;IAC1BH,GAAG,EAAGA,GAAK;IAAAI,QAAA,EAETH;EAAK,CACsB,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,wBAAwB,GAAGX,UAAU,CACjDI,mCACD,CAAC;AAED,eAAeO,wBAAwB","ignoreList":[]}
+{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","jsx","_jsx","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","children","ToggleGroupControlOption"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\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 *       __nextHasNoMarginBottom\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnF,SAASC,mCAAmCA,CAC3CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACrC,MAAMI,WAAW,GAAGD,SAAS,CAAE,YAAY,CAAE,IAAID,KAAK;EACtD,oBACCJ,IAAA,CAACF,4BAA4B;IAAA,GACvBO,SAAS;IACd,cAAaC,WAAa;IAC1BH,GAAG,EAAGA,GAAK;IAAAI,QAAA,EAETH;EAAK,CACsB,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,wBAAwB,GAAGX,UAAU,CACjDI,mCACD,CAAC;AAED,eAAeO,wBAAwB","ignoreList":[]}

package/build-module/toggle-group-control/toggle-group-control-option-base/component.js

@@ -67,6 +67,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     children,
     showTooltip = false,
     onFocus: onFocusProp,
+    disabled,
     ...otherButtonProps
   } = buttonProps;
   const isPressed = toggleGroupControlContext.value === value;
@@ -99,6 +100,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       text: otherButtonProps['aria-label'],
       children: isDeselectable ? /*#__PURE__*/_jsx("button", {
         ...commonProps,
+        disabled: disabled,
         onFocus: onFocusProp,
         "aria-pressed": isPressed,
         type: "button",
@@ -107,6 +109,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
           children: children
         })
       }) : /*#__PURE__*/_jsx(Ariakit.Radio, {
+        disabled: disabled,
         render: /*#__PURE__*/_jsx("button", {
           type: "button",
           ...commonProps,