@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.0

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","clsx","warning","forwardRef","useLayoutEffect","useState","useMergeRefs","useTabsContext","StyledTabList","useTrackElementOffsetRect","useTrackOverflow","useAnimatedOffsetRect","jsx","_jsx","DEFAULT_SCROLL_MARGIN","useScrollRectIntoView","parent","rect","margin","scrollLeft","parentScroll","parentWidth","getBoundingClientRect","width","left","childLeft","childWidth","parentRightEdge","childRightEdge","rightOverflow","leftOverflow","TabList","children","otherProps","ref","_useTabsContext","store","selectedId","useStoreState","activeId","selectOnMove","items","setParent","refs","selectedItem","item","renderedItems","selectedItemIndex","indexOf","selectedRect","element","overflow","first","at","last","prefix","dataAttribute","transitionEndFilter","event","pseudoElement","roundRect","onBlur","setActiveId","globalThis","SCRIPT_DEBUG","render","props","_props$tabIndex","tabIndex","className"],"sources":["@wordpress/components/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 */\nimport type { TabListProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ElementOffsetRect } from '../utils/element-rect';\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';\n\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(\n\tparent: HTMLElement | undefined,\n\trect: ElementOffsetRect,\n\t{ margin = DEFAULT_SCROLL_MARGIN } = {}\n) {\n\tuseLayoutEffect( () => {\n\t\tif ( ! parent || ! rect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollLeft: parentScroll } = parent;\n\t\tconst parentWidth = parent.getBoundingClientRect().width;\n\t\tconst { left: childLeft, width: childWidth } = rect;\n\n\t\tconst parentRightEdge = parentScroll + parentWidth;\n\t\tconst childRightEdge = childLeft + childWidth;\n\t\tconst rightOverflow = childRightEdge + margin - parentRightEdge;\n\t\tconst leftOverflow = parentScroll - ( childLeft - margin );\n\t\tif ( leftOverflow > 0 ) {\n\t\t\tparent.scrollLeft = parentScroll - leftOverflow;\n\t\t} else if ( rightOverflow > 0 ) {\n\t\t\tparent.scrollLeft = parentScroll + rightOverflow;\n\t\t}\n\t}, [ margin, parent, rect ] );\n}\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst { store } = useTabsContext() ?? {};\n\n\tconst selectedId = Ariakit.useStoreState( store, 'selectedId' );\n\tconst activeId = Ariakit.useStoreState( store, 'activeId' );\n\tconst selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );\n\tconst items = Ariakit.useStoreState( store, 'items' );\n\tconst [ parent, setParent ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ ref, setParent ] );\n\n\tconst selectedItem = store?.item( selectedId );\n\tconst renderedItems = Ariakit.useStoreState( store, 'renderedItems' );\n\n\tconst selectedItemIndex =\n\t\trenderedItems && selectedItem\n\t\t\t? renderedItems.indexOf( selectedItem )\n\t\t\t: -1;\n\t// Use selectedItemIndex as a dependency to force recalculation when the\n\t// selected item index changes (elements are swapped / added / removed).\n\tconst selectedRect = useTrackElementOffsetRect( selectedItem?.element, [\n\t\tselectedItemIndex,\n\t] );\n\n\t// Track overflow to show scroll hints.\n\tconst overflow = useTrackOverflow( parent, {\n\t\tfirst: items?.at( 0 )?.element,\n\t\tlast: items?.at( -1 )?.element,\n\t} );\n\n\t// Size, position, and animate the indicator.\n\tuseAnimatedOffsetRect( parent, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t\troundRect: true,\n\t} );\n\n\t// Make sure selected tab is scrolled into view.\n\tuseScrollRectIntoView( parent, selectedRect );\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\tstore?.setActiveId( selectedId );\n\t\t}\n\t};\n\n\tif ( ! store ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledTabList\n\t\t\tref={ refs }\n\t\t\tstore={ store }\n\t\t\trender={ ( props ) => (\n\t\t\t\t<div\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t// Fallback to -1 to prevent browsers from making the tablist\n\t\t\t\t\t// tabbable when it is a scrolling container.\n\t\t\t\t\ttabIndex={ props.tabIndex ?? -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tonBlur={ onBlur }\n\t\t\tdata-select-on-move={ selectOnMove ? 'true' : 'false' }\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ clsx(\n\t\t\t\toverflow.first && 'is-overflowing-first',\n\t\t\t\toverflow.last && 'is-overflowing-last',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabList>\n\t);\n} );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","clsx","warning","forwardRef","useLayoutEffect","useState","useMergeRefs","useTabsContext","StyledTabList","useTrackElementOffsetRect","useTrackOverflow","useAnimatedOffsetRect","jsx","_jsx","DEFAULT_SCROLL_MARGIN","useScrollRectIntoView","parent","rect","margin","scrollLeft","parentScroll","parentWidth","getBoundingClientRect","width","left","childLeft","childWidth","parentRightEdge","childRightEdge","rightOverflow","leftOverflow","scroll","TabList","children","otherProps","ref","_useTabsContext","store","selectedId","useStoreState","activeId","selectOnMove","items","setParent","refs","selectedItem","item","renderedItems","selectedItemIndex","indexOf","selectedRect","element","overflow","first","at","last","prefix","dataAttribute","transitionEndFilter","event","pseudoElement","roundRect","onBlur","setActiveId","globalThis","SCRIPT_DEBUG","render","props","_props$tabIndex","tabIndex","className"],"sources":["@wordpress/components/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 */\nimport type { TabListProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ElementOffsetRect } from '../utils/element-rect';\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';\n\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(\n\tparent: HTMLElement | undefined,\n\trect: ElementOffsetRect,\n\t{ margin = DEFAULT_SCROLL_MARGIN } = {}\n) {\n\tuseLayoutEffect( () => {\n\t\tif ( ! parent || ! rect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollLeft: parentScroll } = parent;\n\t\tconst parentWidth = parent.getBoundingClientRect().width;\n\t\tconst { left: childLeft, width: childWidth } = rect;\n\n\t\tconst parentRightEdge = parentScroll + parentWidth;\n\t\tconst childRightEdge = childLeft + childWidth;\n\t\tconst rightOverflow = childRightEdge + margin - parentRightEdge;\n\t\tconst leftOverflow = parentScroll - ( childLeft - margin );\n\n\t\tlet scrollLeft = null;\n\t\tif ( leftOverflow > 0 ) {\n\t\t\tscrollLeft = parentScroll - leftOverflow;\n\t\t} else if ( rightOverflow > 0 ) {\n\t\t\tscrollLeft = parentScroll + rightOverflow;\n\t\t}\n\n\t\tif ( scrollLeft !== null ) {\n\t\t\t/**\n\t\t\t * The optional chaining is used here to avoid unit test failures.\n\t\t\t * It can be removed when JSDOM supports `Element` scroll methods.\n\t\t\t * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096\n\t\t\t */\n\t\t\tparent.scroll?.( { left: scrollLeft } );\n\t\t}\n\t}, [ margin, parent, rect ] );\n}\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst { store } = useTabsContext() ?? {};\n\n\tconst selectedId = Ariakit.useStoreState( store, 'selectedId' );\n\tconst activeId = Ariakit.useStoreState( store, 'activeId' );\n\tconst selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );\n\tconst items = Ariakit.useStoreState( store, 'items' );\n\tconst [ parent, setParent ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ ref, setParent ] );\n\n\tconst selectedItem = store?.item( selectedId );\n\tconst renderedItems = Ariakit.useStoreState( store, 'renderedItems' );\n\n\tconst selectedItemIndex =\n\t\trenderedItems && selectedItem\n\t\t\t? renderedItems.indexOf( selectedItem )\n\t\t\t: -1;\n\t// Use selectedItemIndex as a dependency to force recalculation when the\n\t// selected item index changes (elements are swapped / added / removed).\n\tconst selectedRect = useTrackElementOffsetRect( selectedItem?.element, [\n\t\tselectedItemIndex,\n\t] );\n\n\t// Track overflow to show scroll hints.\n\tconst overflow = useTrackOverflow( parent, {\n\t\tfirst: items?.at( 0 )?.element,\n\t\tlast: items?.at( -1 )?.element,\n\t} );\n\n\t// Size, position, and animate the indicator.\n\tuseAnimatedOffsetRect( parent, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t\troundRect: true,\n\t} );\n\n\t// Make sure selected tab is scrolled into view.\n\tuseScrollRectIntoView( parent, selectedRect );\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\tstore?.setActiveId( selectedId );\n\t\t}\n\t};\n\n\tif ( ! store ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledTabList\n\t\t\tref={ refs }\n\t\t\tstore={ store }\n\t\t\trender={ ( props ) => (\n\t\t\t\t<div\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t// Fallback to -1 to prevent browsers from making the tablist\n\t\t\t\t\t// tabbable when it is a scrolling container.\n\t\t\t\t\ttabIndex={ props.tabIndex ?? -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tonBlur={ onBlur }\n\t\t\tdata-select-on-move={ selectOnMove ? 'true' : 'false' }\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ clsx(\n\t\t\t\toverflow.first && 'is-overflowing-first',\n\t\t\t\toverflow.last && 'is-overflowing-last',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabList>\n\t);\n} );\n"],"mappings":"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","ignoreList":[]}

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

@@ -14,6 +14,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedTextControl(props, ref) {
   const {
@@ -31,6 +32,11 @@ function UnforwardedTextControl(props, ref) {
   } = props;
   const id = useInstanceId(TextControl, 'inspector-text-control', idProp);
   const onChangeValue = event => onChange(event.target.value);
+  maybeWarnDeprecated36pxSize({
+    componentName: 'TextControl',
+    size: undefined,
+    __next40pxDefaultSize
+  });
   return /*#__PURE__*/_jsx(BaseControl, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     __associatedWPComponentName: "TextControl",
@@ -67,6 +73,7 @@ function UnforwardedTextControl(props, ref) {
  *   return (
  *     <TextControl
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       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","__associatedWPComponentName","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\t__associatedWPComponentName=\"TextControl\"\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;IACnDgB,2BAA2B,EAAC,aAAa;IACzCd,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAS,QAAA,eAEvBrB,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,GAAGY,SAAW;MACxDnB,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":[]}
+{"version":3,"names":["clsx","useInstanceId","forwardRef","BaseControl","maybeWarnDeprecated36pxSize","jsx","_jsx","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","TextControl","onChangeValue","event","target","componentName","size","undefined","__associatedWPComponentName","children"],"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';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\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\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'TextControl',\n\t\tsize: undefined,\n\t\t__next40pxDefaultSize,\n\t} );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"TextControl\"\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 *       __next40pxDefaultSize\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;AAGzC,SAASC,2BAA2B,QAAQ,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5E,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,GAAGf,aAAa,CAAEqB,WAAW,EAAE,wBAAwB,EAAEL,MAAO,CAAC;EACzE,MAAMM,aAAa,GAAKC,KAAsC,IAC7DL,QAAQ,CAAEK,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/BV,2BAA2B,CAAE;IAC5BsB,aAAa,EAAE,aAAa;IAC5BC,IAAI,EAAEC,SAAS;IACfjB;EACD,CAAE,CAAC;EAEH,oBACCL,IAAA,CAACH,WAAW;IACXO,uBAAuB,EAAGA,uBAAyB;IACnDmB,2BAA2B,EAAC,aAAa;IACzCjB,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAY,QAAA,eAEvBxB,IAAA;MACCY,SAAS,EAAGlB,IAAI,CAAE,gCAAgC,EAAE;QACnD,2BAA2B,EAAEW;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,GAAGY,SAAW;MACxDnB,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;AACA,OAAO,MAAMC,WAAW,GAAGpB,UAAU,CAAEK,sBAAuB,CAAC;AAE/D,eAAee,WAAW","ignoreList":[]}

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

@@ -21,11 +21,13 @@ import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
 import { useMergeRefs } from '@wordpress/compose';
 import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
     __nextHasNoMarginBottom = false,
     __next40pxDefaultSize = false,
+    __shouldNotWarnDeprecated36pxSize,
     className,
     isAdaptiveWidth = false,
     isBlock = false,
@@ -43,7 +45,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
   const [selectedElement, setSelectedElement] = useState();
   const [controlElement, setControlElement] = useState();
   const refs = useMergeRefs([setControlElement, forwardedRef]);
-  const selectedRect = useTrackElementOffsetRect(value ? selectedElement : undefined);
+  const selectedRect = useTrackElementOffsetRect(value || value === 0 ? selectedElement : undefined);
   useAnimatedOffsetRect(controlElement, selectedRect, {
     prefix: 'selected',
     dataAttribute: 'indicator-animated',
@@ -57,6 +59,12 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     size: normalizedSize
   }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
   const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
+  maybeWarnDeprecated36pxSize({
+    componentName: 'ToggleGroupControl',
+    size,
+    __next40pxDefaultSize,
+    __shouldNotWarnDeprecated36pxSize
+  });
   return /*#__PURE__*/_jsxs(BaseControl, {
     help: help,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
@@ -106,6 +114,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
  *       value="vertical"
  *       isBlock
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useState","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","useTrackElementOffsetRect","useMergeRefs","useAnimatedOffsetRect","jsx","_jsx","jsxs","_jsxs","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","normalizedSize","selectedElement","setSelectedElement","controlElement","setControlElement","refs","selectedRect","undefined","prefix","dataAttribute","transitionEndFilter","event","pseudoElement","roundRect","cx","classes","toggleGroupControl","block","MainControl","__associatedWPComponentName","VisualLabel","ref","ToggleGroupControl"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } 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';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\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 normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst [ selectedElement, setSelectedElement ] = useState< HTMLElement >();\n\tconst [ controlElement, setControlElement ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ setControlElement, forwardedRef ] );\n\tconst selectedRect = useTrackElementOffsetRect(\n\t\tvalue ? selectedElement : undefined\n\t);\n\tuseAnimatedOffsetRect( controlElement, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t\troundRect: true,\n\t} );\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\t__associatedWPComponentName=\"ToggleGroupControl\"\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\tsetSelectedElement={ setSelectedElement }\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={ refs }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t{ children }\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":[]}
+{"version":3,"names":["useMemo","useState","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","useTrackElementOffsetRect","useMergeRefs","useAnimatedOffsetRect","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","__shouldNotWarnDeprecated36pxSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","normalizedSize","selectedElement","setSelectedElement","controlElement","setControlElement","refs","selectedRect","undefined","prefix","dataAttribute","transitionEndFilter","event","pseudoElement","roundRect","cx","classes","toggleGroupControl","block","MainControl","componentName","__associatedWPComponentName","VisualLabel","ref","ToggleGroupControl"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } 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';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\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\t__shouldNotWarnDeprecated36pxSize,\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 normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst [ selectedElement, setSelectedElement ] = useState< HTMLElement >();\n\tconst [ controlElement, setControlElement ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ setControlElement, forwardedRef ] );\n\tconst selectedRect = useTrackElementOffsetRect(\n\t\tvalue || value === 0 ? selectedElement : undefined\n\t);\n\tuseAnimatedOffsetRect( controlElement, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t\troundRect: true,\n\t} );\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\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'ToggleGroupControl',\n\t\tsize,\n\t\t__next40pxDefaultSize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t} );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"ToggleGroupControl\"\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\tsetSelectedElement={ setSelectedElement }\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={ refs }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t{ children }\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 *       __next40pxDefaultSize\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

@@ -44,6 +44,7 @@ function UnforwardedToggleGroupControlOption(props, ref) {
  *       value="vertical"
  *       isBlock
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />

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\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":[]}
+{"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 *       __next40pxDefaultSize\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;AACA,OAAO,MAAMI,wBAAwB,GAAGX,UAAU,CACjDI,mCACD,CAAC;AAED,eAAeO,wBAAwB","ignoreList":[]}

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

@@ -46,7 +46,7 @@ function UnforwardedToggleGroupControlOptionIcon(props, ref) {
  *
  * function Example() {
  *  return (
- *    <ToggleGroupControl __nextHasNoMarginBottom>
+ *    <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
  *      <ToggleGroupControlOptionIcon
  *        value="uppercase"
  *        label="Uppercase"

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","Icon","jsx","_jsx","UnforwardedToggleGroupControlOptionIcon","props","ref","icon","label","restProps","isIcon","showTooltip","children","ToggleGroupControlOptionIcon"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/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 { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\n\nfunction UnforwardedToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { icon, label, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\tisIcon\n\t\t\taria-label={ label }\n\t\t\tshowTooltip\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\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 __nextHasNoMarginBottom>\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(\n\tUnforwardedToggleGroupControlOptionIcon\n);\n\nexport default ToggleGroupControlOptionIcon;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAClF,OAAOC,IAAI,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9B,SAASC,uCAAuCA,CAC/CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC3C,oBACCF,IAAA,CAACH,4BAA4B;IAAA,GACvBS,SAAS;IACdC,MAAM;IACN,cAAaF,KAAO;IACpBG,WAAW;IACXL,GAAG,EAAGA,GAAK;IAAAM,QAAA,eAEXT,IAAA,CAACF,IAAI;MAACM,IAAI,EAAGA;IAAM,CAAE;EAAC,CACO,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;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,4BAA4B,GAAGd,UAAU,CACrDK,uCACD,CAAC;AAED,eAAeS,4BAA4B","ignoreList":[]}
+{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","Icon","jsx","_jsx","UnforwardedToggleGroupControlOptionIcon","props","ref","icon","label","restProps","isIcon","showTooltip","children","ToggleGroupControlOptionIcon"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/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 { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\n\nfunction UnforwardedToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { icon, label, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\tisIcon\n\t\t\taria-label={ label }\n\t\t\tshowTooltip\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\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 __nextHasNoMarginBottom __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(\n\tUnforwardedToggleGroupControlOptionIcon\n);\n\nexport default ToggleGroupControlOptionIcon;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAClF,OAAOC,IAAI,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9B,SAASC,uCAAuCA,CAC/CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC3C,oBACCF,IAAA,CAACH,4BAA4B;IAAA,GACvBS,SAAS;IACdC,MAAM;IACN,cAAaF,KAAO;IACpBG,WAAW;IACXL,GAAG,EAAGA,GAAK;IAAAM,QAAA,eAEXT,IAAA,CAACF,IAAI;MAACM,IAAI,EAAGA;IAAM,CAAE;EAAC,CACO,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;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,4BAA4B,GAAGd,UAAU,CACrDK,uCACD,CAAC;AAED,eAAeS,4BAA4B","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/**\n\t * Style the option as an icon option.\n\t *\n\t * @default false\n\t */\n\tisIcon?: boolean;\n\tvalue: string | number;\n\t/**\n\t * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/**\n\t * Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t */\n\ticon: JSX.Element;\n\t/**\n\t * The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t */\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' | 'showTooltip'\n> & {\n\t/**\n\t * Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t */\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/**\n\t * React children\n\t */\n\tchildren: TooltipProps[ 'children' ];\n\t/**\n\t * Label for the Tooltip component.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether to wrap the control option in a Tooltip component.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Determines if segments should be rendered with equal widths.\n\t *\n\t * @default false\n\t */\n\tisAdaptiveWidth?: boolean;\n\t/**\n\t * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Whether an option can be deselected by clicking it again.\n\t *\n\t * @default false\n\t */\n\tisDeselectable?: boolean;\n\t/**\n\t * Callback when a segment is selected.\n\t */\n\tonChange?: ( value: string | number | undefined ) => void;\n\t/**\n\t * The selected value.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The size variant of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type ToggleGroupControlContextProps = {\n\tactiveItemIsNotFirstItem?: () => boolean;\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string | number | undefined ) => void;\n\tsetSelectedElement: ( element: HTMLElement | undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n> &\n\tPick< ToggleGroupControlContextProps, 'setSelectedElement' >;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/**\n\t * Style the option as an icon option.\n\t *\n\t * @default false\n\t */\n\tisIcon?: boolean;\n\tvalue: string | number;\n\t/**\n\t * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/**\n\t * Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t */\n\ticon: JSX.Element;\n\t/**\n\t * The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t */\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' | 'showTooltip'\n> & {\n\t/**\n\t * Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t */\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/**\n\t * React children\n\t */\n\tchildren: TooltipProps[ 'children' ];\n\t/**\n\t * Label for the Tooltip component.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether to wrap the control option in a Tooltip component.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Determines if segments should be rendered with equal widths.\n\t *\n\t * @default false\n\t */\n\tisAdaptiveWidth?: boolean;\n\t/**\n\t * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Whether an option can be deselected by clicking it again.\n\t *\n\t * @default false\n\t */\n\tisDeselectable?: boolean;\n\t/**\n\t * Callback when a segment is selected.\n\t */\n\tonChange?: ( value: string | number | undefined ) => void;\n\t/**\n\t * The selected value.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The size variant of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Do not throw a warning for the deprecated 36px default size.\n\t * For internal components of other components that already throw the warning.\n\t *\n\t * @ignore\n\t */\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n};\n\nexport type ToggleGroupControlContextProps = {\n\tactiveItemIsNotFirstItem?: () => boolean;\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string | number | undefined ) => void;\n\tsetSelectedElement: ( element: HTMLElement | undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n> &\n\tPick< ToggleGroupControlContextProps, 'setSelectedElement' >;\n"],"mappings":"","ignoreList":[]}

package/build-module/utils/deprecated-36px-size.js

@@ -5,9 +5,10 @@ import deprecated from '@wordpress/deprecated';
 export function maybeWarnDeprecated36pxSize({
   componentName,
   __next40pxDefaultSize,
-  size
+  size,
+  __shouldNotWarnDeprecated36pxSize
 }) {
-  if (__next40pxDefaultSize || size !== 'default') {
+  if (__shouldNotWarnDeprecated36pxSize || __next40pxDefaultSize || size !== undefined && size !== 'default') {
     return;
   }
   deprecated(`36px default size for wp.components.${componentName}`, {

package/build-module/utils/deprecated-36px-size.js.map

@@ -1 +1 @@
-{"version":3,"names":["deprecated","maybeWarnDeprecated36pxSize","componentName","__next40pxDefaultSize","size","since","version","hint"],"sources":["@wordpress/components/src/utils/deprecated-36px-size.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function maybeWarnDeprecated36pxSize( {\n\tcomponentName,\n\t__next40pxDefaultSize,\n\tsize,\n}: {\n\tcomponentName: string;\n\t__next40pxDefaultSize: boolean | undefined;\n\tsize: string;\n} ) {\n\tif ( __next40pxDefaultSize || size !== 'default' ) {\n\t\treturn;\n\t}\n\n\tdeprecated( `36px default size for wp.components.${ componentName }`, {\n\t\tsince: '6.8',\n\t\tversion: '7.1',\n\t\thint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,SAASC,2BAA2BA,CAAE;EAC5CC,aAAa;EACbC,qBAAqB;EACrBC;AAKD,CAAC,EAAG;EACH,IAAKD,qBAAqB,IAAIC,IAAI,KAAK,SAAS,EAAG;IAClD;EACD;EAEAJ,UAAU,CAAE,uCAAwCE,aAAa,EAAG,EAAE;IACrEG,KAAK,EAAE,KAAK;IACZC,OAAO,EAAE,KAAK;IACdC,IAAI,EAAE;EACP,CAAE,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["deprecated","maybeWarnDeprecated36pxSize","componentName","__next40pxDefaultSize","size","__shouldNotWarnDeprecated36pxSize","undefined","since","version","hint"],"sources":["@wordpress/components/src/utils/deprecated-36px-size.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function maybeWarnDeprecated36pxSize( {\n\tcomponentName,\n\t__next40pxDefaultSize,\n\tsize,\n\t__shouldNotWarnDeprecated36pxSize,\n}: {\n\tcomponentName: string;\n\t__next40pxDefaultSize: boolean | undefined;\n\tsize: string | undefined;\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n} ) {\n\tif (\n\t\t__shouldNotWarnDeprecated36pxSize ||\n\t\t__next40pxDefaultSize ||\n\t\t( size !== undefined && size !== 'default' )\n\t) {\n\t\treturn;\n\t}\n\n\tdeprecated( `36px default size for wp.components.${ componentName }`, {\n\t\tsince: '6.8',\n\t\tversion: '7.1',\n\t\thint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,SAASC,2BAA2BA,CAAE;EAC5CC,aAAa;EACbC,qBAAqB;EACrBC,IAAI;EACJC;AAMD,CAAC,EAAG;EACH,IACCA,iCAAiC,IACjCF,qBAAqB,IACnBC,IAAI,KAAKE,SAAS,IAAIF,IAAI,KAAK,SAAW,EAC3C;IACD;EACD;EAEAJ,UAAU,CAAE,uCAAwCE,aAAa,EAAG,EAAE;IACrEK,KAAK,EAAE,KAAK;IACZC,OAAO,EAAE,KAAK;IACdC,IAAI,EAAE;EACP,CAAE,CAAC;AACJ","ignoreList":[]}

package/build-style/style-rtl.css

@@ -928,13 +928,6 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 2px solid transparent;
 }
 
-.components-combobox-control__reset.components-button {
-  display: flex;
-  height: 16px;
-  min-width: 16px;
-  padding: 0;
-}
-
 .components-color-palette__custom-color-wrapper {
   position: relative;
   z-index: 0;
@@ -1520,6 +1513,8 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
+}
+.components-form-token-field__token.is-borderless:not(.is-disabled) .components-form-token-field__token-text {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
@@ -1528,7 +1523,6 @@ body.is-dragging-components-draggable {
   position: absolute;
   top: 1px;
   left: 0;
-  padding: 0;
 }
 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
   color: #4ab866;
@@ -1540,14 +1534,10 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
   color: #1e1e1e;
 }
-.components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
-  cursor: default;
-}
 
 .components-form-token-field__token-text,
 .components-form-token-field__remove-token.components-button {
   display: inline-block;
-  line-height: 24px;
   height: auto;
   background: #ddd;
   min-width: unset;
@@ -1566,20 +1556,19 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token-text {
   border-radius: 0 1px 1px 0;
   padding: 0 8px 0 0;
+  line-height: 24px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .components-form-token-field__remove-token.components-button {
-  cursor: pointer;
   border-radius: 1px 0 0 1px;
-  padding: 0 2px;
   color: #1e1e1e;
   line-height: 10px;
   overflow: initial;
 }
-.components-form-token-field__remove-token.components-button:hover {
+.components-form-token-field__remove-token.components-button:hover:not(:disabled) {
   color: #1e1e1e;
 }
 
@@ -1651,25 +1640,25 @@ body.is-dragging-components-draggable {
 .components-guide .components-modal__header .components-button:hover svg {
   fill: #fff;
 }
-.components-guide__container {
+.components-guide .components-guide__container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin-top: -60px;
   min-height: 100%;
 }
-.components-guide__page {
+.components-guide .components-guide__page {
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
 }
 @media (min-width: 600px) {
-  .components-guide__page {
+  .components-guide .components-guide__page {
     min-height: 300px;
   }
 }
-.components-guide__footer {
+.components-guide .components-guide__footer {
   align-content: center;
   display: flex;
   height: 36px;
@@ -1679,21 +1668,19 @@ body.is-dragging-components-draggable {
   position: relative;
   width: 100%;
 }
-.components-guide__page-control {
+.components-guide .components-guide__page-control {
   margin: 0;
   text-align: center;
 }
-.components-guide__page-control li {
+.components-guide .components-guide__page-control li {
   display: inline-block;
   margin: 0;
 }
-.components-guide__page-control .components-button {
-  height: 30px;
-  min-width: 20px;
+.components-guide .components-guide__page-control .components-button {
   margin: -6px 0;
   color: #e0e0e0;
 }
-.components-guide__page-control li[aria-current=step] .components-button {
+.components-guide .components-guide__page-control li[aria-current=step] .components-button {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
@@ -3052,23 +3039,15 @@ body.lockscroll {
 .components-snackbar__action.components-button {
   margin-right: 32px;
   color: #fff;
-  height: auto;
   flex-shrink: 0;
-  line-height: 1.4;
-  padding: 0;
 }
-.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) {
-  text-decoration: underline;
-  background-color: transparent;
-}
-.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus {
-  color: #fff;
+.components-snackbar__action.components-button:focus {
   box-shadow: none;
   outline: 1px dotted #fff;
 }
-.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
+.components-snackbar__action.components-button:hover {
   text-decoration: none;
-  color: #fff;
+  color: currentColor;
 }
 
 .components-snackbar__content {

package/build-style/style.css

@@ -928,13 +928,6 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 2px solid transparent;
 }
 
-.components-combobox-control__reset.components-button {
-  display: flex;
-  height: 16px;
-  min-width: 16px;
-  padding: 0;
-}
-
 .components-color-palette__custom-color-wrapper {
   position: relative;
   z-index: 0;
@@ -1525,6 +1518,8 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
+}
+.components-form-token-field__token.is-borderless:not(.is-disabled) .components-form-token-field__token-text {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
@@ -1533,7 +1528,6 @@ body.is-dragging-components-draggable {
   position: absolute;
   top: 1px;
   right: 0;
-  padding: 0;
 }
 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
   color: #4ab866;
@@ -1545,14 +1539,10 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
   color: #1e1e1e;
 }
-.components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
-  cursor: default;
-}
 
 .components-form-token-field__token-text,
 .components-form-token-field__remove-token.components-button {
   display: inline-block;
-  line-height: 24px;
   height: auto;
   background: #ddd;
   min-width: unset;
@@ -1571,20 +1561,19 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token-text {
   border-radius: 1px 0 0 1px;
   padding: 0 0 0 8px;
+  line-height: 24px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .components-form-token-field__remove-token.components-button {
-  cursor: pointer;
   border-radius: 0 1px 1px 0;
-  padding: 0 2px;
   color: #1e1e1e;
   line-height: 10px;
   overflow: initial;
 }
-.components-form-token-field__remove-token.components-button:hover {
+.components-form-token-field__remove-token.components-button:hover:not(:disabled) {
   color: #1e1e1e;
 }
 
@@ -1656,25 +1645,25 @@ body.is-dragging-components-draggable {
 .components-guide .components-modal__header .components-button:hover svg {
   fill: #fff;
 }
-.components-guide__container {
+.components-guide .components-guide__container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin-top: -60px;
   min-height: 100%;
 }
-.components-guide__page {
+.components-guide .components-guide__page {
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
 }
 @media (min-width: 600px) {
-  .components-guide__page {
+  .components-guide .components-guide__page {
     min-height: 300px;
   }
 }
-.components-guide__footer {
+.components-guide .components-guide__footer {
   align-content: center;
   display: flex;
   height: 36px;
@@ -1684,21 +1673,19 @@ body.is-dragging-components-draggable {
   position: relative;
   width: 100%;
 }
-.components-guide__page-control {
+.components-guide .components-guide__page-control {
   margin: 0;
   text-align: center;
 }
-.components-guide__page-control li {
+.components-guide .components-guide__page-control li {
   display: inline-block;
   margin: 0;
 }
-.components-guide__page-control .components-button {
-  height: 30px;
-  min-width: 20px;
+.components-guide .components-guide__page-control .components-button {
   margin: -6px 0;
   color: #e0e0e0;
 }
-.components-guide__page-control li[aria-current=step] .components-button {
+.components-guide .components-guide__page-control li[aria-current=step] .components-button {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
@@ -3064,23 +3051,15 @@ body.lockscroll {
 .components-snackbar__action.components-button {
   margin-left: 32px;
   color: #fff;
-  height: auto;
   flex-shrink: 0;
-  line-height: 1.4;
-  padding: 0;
 }
-.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) {
-  text-decoration: underline;
-  background-color: transparent;
-}
-.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus {
-  color: #fff;
+.components-snackbar__action.components-button:focus {
   box-shadow: none;
   outline: 1px dotted #fff;
 }
-.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
+.components-snackbar__action.components-button:hover {
   text-decoration: none;
-  color: #fff;
+  color: currentColor;
 }
 
 .components-snackbar__content {

package/build-types/autocomplete/autocompleter-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAqD9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAe1D,oBAAoB,wCAsHvB"}
+{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAsD9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAe1D,oBAAoB,wCAsHvB"}

package/build-types/base-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/base-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,WAAoC,MAAM,IAAI,CAAC;AAGtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAgBnC,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,WAAW,CACd,CAAC;AAMpC,eAAO,MAAM,YAAY;;EAAqC,CAAC;AAM/D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAE,OAAO,WAAW,CAWxD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/base-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,WAAoC,MAAM,IAAI,CAAC;AAGtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAiBnC,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,WAAW,CACd,CAAC;AAMpC,eAAO,MAAM,YAAY;;EAAqC,CAAC;AAM/D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAE,OAAO,WAAW,CAWxD,CAAC"}

package/build-types/border-box-control/border-box-control/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AA4HpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;8CAG5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AA6HpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;8CAG5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAmHA,QAAA,MAAM,sCAAsC;;;;;;;;6CAG3C,CAAC;AACF,eAAe,sCAAsC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAoHA,QAAA,MAAM,sCAAsC;;;;;;;;6CAG3C,CAAC;AACF,eAAe,sCAAsC,CAAC"}