@wordpress/components 25.2.0 → 25.3.0

package/build-module/confirm-dialog/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["__","useCallback","useEffect","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","wrapper","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["__","useCallback","useEffect","useRef","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","wrapper","cancelButtonRef","confirmButtonRef","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}

package/build-module/font-size-picker/index.js

@@ -15,12 +15,13 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 
+import { Button } from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { getCommonSizeUnit } from './utils';
-import { Container, Header, HeaderHint, HeaderLabel, HeaderToggle, Controls, ResetButton } from './styles';
+import { Container, Header, HeaderHint, HeaderLabel, HeaderToggle, Controls } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
@@ -179,14 +180,14 @@ const UnforwardedFontSizePicker = (props, ref) => {
     min: 0,
     max: isValueUnitRelative ? 10 : 100,
     step: isValueUnitRelative ? 0.1 : 1
-  }))), withReset && createElement(FlexItem, null, createElement(ResetButton, {
+  }))), withReset && createElement(FlexItem, null, createElement(Button, {
     disabled: value === undefined,
     onClick: () => {
       onChange?.(undefined);
     },
-    isSmall: true,
     variant: "secondary",
-    size: size
+    __next40pxDefaultSize: true,
+    size: size !== '__unstable-large' ? 'small' : 'default'
   }, __('Reset'))))));
 };
 

package/build-module/font-size-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["deprecated","__","settings","useState","useMemo","forwardRef","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Controls","ResetButton","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","newValue","undefined","Number","parseInt","FontSizePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["deprecated","__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Controls","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","newValue","undefined","Number","parseInt","FontSizePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n\tControls,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize !== '__unstable-large'\n\t\t\t\t\t\t\t\t\t\t\t? 'small'\n\t\t\t\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}

package/build-module/font-size-picker/styles.js

@@ -15,9 +15,9 @@ import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
 export const Container = _styled("fieldset", process.env.NODE_ENV === "production" ? {
-  target: "e8tqeku6"
+  target: "e8tqeku5"
 } : {
-  target: "e8tqeku6",
+  target: "e8tqeku5",
   label: "Container"
 })(process.env.NODE_ENV === "production" ? {
   name: "1t1ytme",
@@ -25,43 +25,37 @@ export const Container = _styled("fieldset", process.env.NODE_ENV === "productio
 } : {
   name: "1t1ytme",
   styles: "border:0;margin:0;padding:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRm9udFNpemVQaWNrZXJQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRoZWlnaHQ6ICR7IHNwYWNlKCA0ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJUb2dnbGUgPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggLTEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY3dDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIaW50ID0gc3R5bGVkLnNwYW5gXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250cm9scyA9IHN0eWxlZC5kaXY8IHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b206IGJvb2xlYW47XG59ID5gXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdCEgcHJvcHMuX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgYG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCA2ICkgfTtgIH1cbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const Header = /*#__PURE__*/_styled(HStack, process.env.NODE_ENV === "production" ? {
-  target: "e8tqeku5"
-} : {
-  target: "e8tqeku5",
-  label: "Header"
-})("height:", space(4), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJzQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIaW50ID0gc3R5bGVkLnNwYW5gXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250cm9scyA9IHN0eWxlZC5kaXY8IHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b206IGJvb2xlYW47XG59ID5gXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdCEgcHJvcHMuX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgYG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCA2ICkgfTtgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBSZXNldEJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uICk8IHtcblx0c2l6ZTogRm9udFNpemVQaWNrZXJQcm9wc1sgJ3NpemUnIF07XG59ID5gXG5cdCYmJiB7XG5cdFx0aGVpZ2h0OiAkeyAoIHByb3BzICkgPT5cblx0XHRcdHByb3BzLnNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICc0MHB4JyA6ICczMHB4JyB9O1xuXHR9XG5gO1xuIl19 */"));
-export const HeaderToggle = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
   target: "e8tqeku4"
 } : {
   target: "e8tqeku4",
-  label: "HeaderToggle"
-})("margin-top:", space(-1), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUI0QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIaW50ID0gc3R5bGVkLnNwYW5gXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250cm9scyA9IHN0eWxlZC5kaXY8IHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b206IGJvb2xlYW47XG59ID5gXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdCEgcHJvcHMuX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgYG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCA2ICkgfTtgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBSZXNldEJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uICk8IHtcblx0c2l6ZTogRm9udFNpemVQaWNrZXJQcm9wc1sgJ3NpemUnIF07XG59ID5gXG5cdCYmJiB7XG5cdFx0aGVpZ2h0OiAkeyAoIHByb3BzICkgPT5cblx0XHRcdHByb3BzLnNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICc0MHB4JyA6ICczMHB4JyB9O1xuXHR9XG5gO1xuIl19 */"));
-export const HeaderLabel = /*#__PURE__*/_styled(BaseControl.VisualLabel, process.env.NODE_ENV === "production" ? {
+  label: "Header"
+})("height:", space(4), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JzQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuIl19 */"));
+export const HeaderToggle = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
   target: "e8tqeku3"
 } : {
   target: "e8tqeku3",
-  label: "HeaderLabel"
-})("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkI0RCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIaW50ID0gc3R5bGVkLnNwYW5gXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250cm9scyA9IHN0eWxlZC5kaXY8IHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b206IGJvb2xlYW47XG59ID5gXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdCEgcHJvcHMuX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgYG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCA2ICkgfTtgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBSZXNldEJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uICk8IHtcblx0c2l6ZTogRm9udFNpemVQaWNrZXJQcm9wc1sgJ3NpemUnIF07XG59ID5gXG5cdCYmJiB7XG5cdFx0aGVpZ2h0OiAkeyAoIHByb3BzICkgPT5cblx0XHRcdHByb3BzLnNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICc0MHB4JyA6ICczMHB4JyB9O1xuXHR9XG5gO1xuIl19 */"));
-export const HeaderHint = _styled("span", process.env.NODE_ENV === "production" ? {
+  label: "HeaderToggle"
+})("margin-top:", space(-1), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0I0QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuIl19 */"));
+export const HeaderLabel = /*#__PURE__*/_styled(BaseControl.VisualLabel, process.env.NODE_ENV === "production" ? {
   target: "e8tqeku2"
 } : {
   target: "e8tqeku2",
-  label: "HeaderHint"
-})("color:", COLORS.gray[700], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0NxQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIaW50ID0gc3R5bGVkLnNwYW5gXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250cm9scyA9IHN0eWxlZC5kaXY8IHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b206IGJvb2xlYW47XG59ID5gXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdCEgcHJvcHMuX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgYG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCA2ICkgfTtgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBSZXNldEJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uICk8IHtcblx0c2l6ZTogRm9udFNpemVQaWNrZXJQcm9wc1sgJ3NpemUnIF07XG59ID5gXG5cdCYmJiB7XG5cdFx0aGVpZ2h0OiAkeyAoIHByb3BzICkgPT5cblx0XHRcdHByb3BzLnNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICc0MHB4JyA6ICczMHB4JyB9O1xuXHR9XG5gO1xuIl19 */"));
-export const Controls = _styled("div", process.env.NODE_ENV === "production" ? {
+  label: "HeaderLabel"
+})("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEI0RCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuIl19 */"));
+export const HeaderHint = _styled("span", process.env.NODE_ENV === "production" ? {
   target: "e8tqeku1"
 } : {
   target: "e8tqeku1",
-  label: "Controls"
-})(props => !props.__nextHasNoMarginBottom && `margin-bottom: ${space(6)};`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMENHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRm9udFNpemVQaWNrZXJQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRoZWlnaHQ6ICR7IHNwYWNlKCA0ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJUb2dnbGUgPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggLTEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */"));
-export const ResetButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
+  label: "HeaderHint"
+})("color:", COLORS.gray[700], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUNxQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuIl19 */"));
+export const Controls = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e8tqeku0"
 } : {
   target: "e8tqeku0",
-  label: "ResetButton"
-})("&&&{height:", props => props.size === '__unstable-large' ? '40px' : '30px', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaURHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRm9udFNpemVQaWNrZXJQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRoZWlnaHQ6ICR7IHNwYWNlKCA0ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJUb2dnbGUgPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggLTEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */"));
+  label: "Controls"
+})(props => !props.__nextHasNoMarginBottom && `margin-bottom: ${space(6)};`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIaW50ID0gc3R5bGVkLnNwYW5gXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250cm9scyA9IHN0eWxlZC5kaXY8IHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b206IGJvb2xlYW47XG59ID5gXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdCEgcHJvcHMuX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgYG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCA2ICkgfTtgIH1cbmA7XG4iXX0= */"));
 //# sourceMappingURL=styles.js.map

package/build-module/font-size-picker/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/styles.ts"],"names":["BaseControl","Button","HStack","space","COLORS","Container","Header","HeaderToggle","HeaderLabel","VisualLabel","HeaderHint","gray","Controls","props","__nextHasNoMarginBottom","ResetButton","size"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,WAAP,MAAwB,iBAAxB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AAGA,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAMP,OAAO,MAAMC,MAAM,GAAG,qBAAQJ,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,YACPC,KAAK,CAAE,CAAF,CADE,igEAAZ;AAIP,OAAO,MAAMI,YAAY,GAAG,qBAAQN,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,gBACTE,KAAK,CAAE,CAAC,CAAH,CADI,igEAAlB;AAIP,OAAO,MAAMK,WAAW,GAAG,qBAAQR,WAAW,CAACS,WAApB;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,sBAEfN,KAAK,CAAE,CAAF,CAFU,4iEAAjB;AAOP,OAAO,MAAMO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aACZN,MAAM,CAACO,IAAP,CAAa,GAAb,CADY,igEAAhB;AAIP,OAAO,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAGfC,KAAF,IACF,CAAEA,KAAK,CAACC,uBAAR,IAAoC,kBAAkBX,KAAK,CAAE,CAAF,CAAO,GAJ/C,igEAAd;AAOP,OAAO,MAAMY,WAAW,GAAG,qBAAQd,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,gBAITY,KAAF,IACVA,KAAK,CAACG,IAAN,KAAe,kBAAf,GAAoC,MAApC,GAA6C,MALxB,kgEAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { HStack } from '../h-stack';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils';\nimport type { FontSizePickerProps } from './types';\n\nexport const Container = styled.fieldset`\n\tborder: 0;\n\tmargin: 0;\n\tpadding: 0;\n`;\n\nexport const Header = styled( HStack )`\n\theight: ${ space( 4 ) };\n`;\n\nexport const HeaderToggle = styled( Button )`\n\tmargin-top: ${ space( -1 ) };\n`;\n\nexport const HeaderLabel = styled( BaseControl.VisualLabel )`\n\tdisplay: flex;\n\tgap: ${ space( 1 ) };\n\tjustify-content: flex-start;\n\tmargin-bottom: 0;\n`;\n\nexport const HeaderHint = styled.span`\n\tcolor: ${ COLORS.gray[ 700 ] };\n`;\n\nexport const Controls = styled.div< {\n\t__nextHasNoMarginBottom: boolean;\n} >`\n\t${ ( props ) =>\n\t\t! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }\n`;\n\nexport const ResetButton = styled( Button )< {\n\tsize: FontSizePickerProps[ 'size' ];\n} >`\n\t&&& {\n\t\theight: ${ ( props ) =>\n\t\t\tprops.size === '__unstable-large' ? '40px' : '30px' };\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/styles.ts"],"names":["BaseControl","Button","HStack","space","COLORS","Container","Header","HeaderToggle","HeaderLabel","VisualLabel","HeaderHint","gray","Controls","props","__nextHasNoMarginBottom"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,WAAP,MAAwB,iBAAxB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAMP,OAAO,MAAMC,MAAM,GAAG,qBAAQJ,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,YACPC,KAAK,CAAE,CAAF,CADE,yqDAAZ;AAIP,OAAO,MAAMI,YAAY,GAAG,qBAAQN,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,gBACTE,KAAK,CAAE,CAAC,CAAH,CADI,yqDAAlB;AAIP,OAAO,MAAMK,WAAW,GAAG,qBAAQR,WAAW,CAACS,WAApB;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,sBAEfN,KAAK,CAAE,CAAF,CAFU,otDAAjB;AAOP,OAAO,MAAMO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aACZN,MAAM,CAACO,IAAP,CAAa,GAAb,CADY,yqDAAhB;AAIP,OAAO,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAGfC,KAAF,IACF,CAAEA,KAAK,CAACC,uBAAR,IAAoC,kBAAkBX,KAAK,CAAE,CAAF,CAAO,GAJ/C,yqDAAd","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { HStack } from '../h-stack';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils';\n\nexport const Container = styled.fieldset`\n\tborder: 0;\n\tmargin: 0;\n\tpadding: 0;\n`;\n\nexport const Header = styled( HStack )`\n\theight: ${ space( 4 ) };\n`;\n\nexport const HeaderToggle = styled( Button )`\n\tmargin-top: ${ space( -1 ) };\n`;\n\nexport const HeaderLabel = styled( BaseControl.VisualLabel )`\n\tdisplay: flex;\n\tgap: ${ space( 1 ) };\n\tjustify-content: flex-start;\n\tmargin-bottom: 0;\n`;\n\nexport const HeaderHint = styled.span`\n\tcolor: ${ COLORS.gray[ 700 ] };\n`;\n\nexport const Controls = styled.div< {\n\t__nextHasNoMarginBottom: boolean;\n} >`\n\t${ ( props ) =>\n\t\t! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }\n`;\n"]}

package/build-module/guide/icons.js

@@ -4,9 +4,7 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { SVG, Circle } from '@wordpress/primitives';
-export const PageControlIcon = ({
-  isSelected
-}) => createElement(SVG, {
+export const PageControlIcon = () => createElement(SVG, {
   width: "8",
   height: "8",
   fill: "none",
@@ -14,7 +12,6 @@ export const PageControlIcon = ({
 }, createElement(Circle, {
   cx: "4",
   cy: "4",
-  r: "4",
-  fill: isSelected ? '#419ECD' : '#E1E3E6'
+  r: "4"
 }));
 //# sourceMappingURL=icons.js.map

package/build-module/guide/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["SVG","Circle","PageControlIcon","isSelected"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,EAAcC,MAAd,QAA4B,uBAA5B;AAEA,OAAO,MAAMC,eAAe,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAC9B,cAAC,GAAD;AAAK,EAAA,KAAK,EAAC,GAAX;AAAe,EAAA,MAAM,EAAC,GAAtB;AAA0B,EAAA,IAAI,EAAC,MAA/B;AAAsC,EAAA,KAAK,EAAC;AAA5C,GACC,cAAC,MAAD;AACC,EAAA,EAAE,EAAC,GADJ;AAEC,EAAA,EAAE,EAAC,GAFJ;AAGC,EAAA,CAAC,EAAC,GAHH;AAIC,EAAA,IAAI,EAAGA,UAAU,GAAG,SAAH,GAAe;AAJjC,EADD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle\n\t\t\tcx=\"4\"\n\t\t\tcy=\"4\"\n\t\t\tr=\"4\"\n\t\t\tfill={ isSelected ? '#419ECD' : '#E1E3E6' }\n\t\t/>\n\t</SVG>\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["SVG","Circle","PageControlIcon"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,EAAcC,MAAd,QAA4B,uBAA5B;AAEA,OAAO,MAAMC,eAAe,GAAG,MAC9B,cAAC,GAAD;AAAK,EAAA,KAAK,EAAC,GAAX;AAAe,EAAA,MAAM,EAAC,GAAtB;AAA0B,EAAA,IAAI,EAAC,MAA/B;AAAsC,EAAA,KAAK,EAAC;AAA5C,GACC,cAAC,MAAD;AAAQ,EAAA,EAAE,EAAC,GAAX;AAAe,EAAA,EAAE,EAAC,GAAlB;AAAsB,EAAA,CAAC,EAAC;AAAxB,EADD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = () => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx=\"4\" cy=\"4\" r=\"4\" />\n\t</SVG>\n);\n"]}

package/build-module/guide/index.js

@@ -11,7 +11,6 @@ import classnames from 'classnames';
 import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
@@ -60,8 +59,16 @@ function Guide({
   onFinish,
   pages = []
 }) {
-  const guideContainer = useRef(null);
+  const ref = useRef(null);
   const [currentPage, setCurrentPage] = useState(0);
+  useEffect(() => {
+    // Place focus at the top of the guide on mount and when the page changes.
+    const frame = ref.current?.querySelector('.components-guide');
+
+    if (frame instanceof HTMLElement) {
+      frame.focus();
+    }
+  }, [currentPage]);
   useEffect(() => {
     if (Children.count(children)) {
       deprecated('Passing children to <Guide>', {
@@ -70,13 +77,6 @@ function Guide({
       });
     }
   }, [children]);
-  useEffect(() => {
-    // Each time we change the current page, start from the first element of the page.
-    // This also solves any focus loss that can happen.
-    if (guideContainer.current) {
-      focus.tabbable.find(guideContainer.current)[0]?.focus();
-    }
-  }, [currentPage]);
 
   if (Children.count(children)) {
     var _Children$map;
@@ -108,6 +108,7 @@ function Guide({
   return createElement(Modal, {
     className: classnames('components-guide', className),
     contentLabel: contentLabel,
+    isDismissible: pages.length > 1,
     onRequestClose: onFinish,
     onKeyDown: event => {
       if (event.code === 'ArrowLeft') {
@@ -120,7 +121,7 @@ function Guide({
         event.preventDefault();
       }
     },
-    ref: guideContainer
+    ref: ref
   }, createElement("div", {
     className: "components-guide__container"
   }, createElement("div", {
@@ -133,12 +134,15 @@ function Guide({
     className: "components-guide__footer"
   }, canGoBack && createElement(Button, {
     className: "components-guide__back-button",
+    variant: "tertiary",
     onClick: goBack
   }, __('Previous')), canGoForward && createElement(Button, {
     className: "components-guide__forward-button",
+    variant: "primary",
     onClick: goForward
   }, __('Next')), !canGoForward && createElement(Button, {
     className: "components-guide__finish-button",
+    variant: "primary",
     onClick: onFinish
   }, finishButtonText))));
 }

package/build-module/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","focus","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","count","since","alternative","current","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,QAA9B,EAAwCC,MAAxC,QAAsD,oBAAtD;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;;AAGA;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;AACA;AACA,SAASC,KAAT,CAAgB;AACfC,EAAAA,QADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,YAHe;AAIfC,EAAAA,gBAAgB,GAAGT,EAAE,CAAE,QAAF,CAJN;AAKfU,EAAAA,QALe;AAMfC,EAAAA,KAAK,GAAG;AANO,CAAhB,EAOgB;AACf,QAAMC,cAAc,GAAGd,MAAM,CAAoB,IAApB,CAA7B;AACA,QAAM,CAAEe,WAAF,EAAeC,cAAf,IAAkCnB,QAAQ,CAAE,CAAF,CAAhD;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKC,QAAQ,CAACkB,KAAT,CAAgBT,QAAhB,CAAL,EAAkC;AACjCP,MAAAA,UAAU,CAAE,6BAAF,EAAiC;AAC1CiB,QAAAA,KAAK,EAAE,KADmC;AAE1CC,QAAAA,WAAW,EAAE;AAF6B,OAAjC,CAAV;AAIA;AACD,GAPQ,EAON,CAAEX,QAAF,CAPM,CAAT;AASAV,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA,QAAKgB,cAAc,CAACM,OAApB,EAA8B;AAE5BjB,MAAAA,KAAK,CAACkB,QAAN,CAAeC,IAAf,CAAqBR,cAAc,CAACM,OAApC,CADD,CAEI,CAFJ,GAESjB,KAFT;AAGA;AACD,GARQ,EAQN,CAAEY,WAAF,CARM,CAAT;;AAUA,MAAKhB,QAAQ,CAACkB,KAAT,CAAgBT,QAAhB,CAAL,EAAkC;AAAA;;AACjCK,IAAAA,KAAK,oBACJd,QAAQ,CAACwB,GAAT,CAAcf,QAAd,EAA0BgB,KAAF,KAAe;AACtCC,MAAAA,OAAO,EAAED;AAD6B,KAAf,CAAxB,CADI,yDAGK,EAHV;AAIA;;AAED,QAAME,SAAS,GAAGX,WAAW,GAAG,CAAhC;AACA,QAAMY,YAAY,GAAGZ,WAAW,GAAGF,KAAK,CAACe,MAAN,GAAe,CAAlD;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpB,QAAKH,SAAL,EAAiB;AAChBV,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,QAAMe,SAAS,GAAG,MAAM;AACvB,QAAKH,YAAL,EAAoB;AACnBX,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,MAAKF,KAAK,CAACe,MAAN,KAAiB,CAAtB,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,KAAD;AACC,IAAA,SAAS,EAAGhC,UAAU,CAAE,kBAAF,EAAsBa,SAAtB,CADvB;AAEC,IAAA,YAAY,EAAGC,YAFhB;AAGC,IAAA,cAAc,EAAGE,QAHlB;AAIC,IAAA,SAAS,EAAKmB,KAAF,IAAa;AACxB,UAAKA,KAAK,CAACC,IAAN,KAAe,WAApB,EAAkC;AACjCH,QAAAA,MAAM,GAD2B,CAEjC;;AACAE,QAAAA,KAAK,CAACE,cAAN;AACA,OAJD,MAIO,IAAKF,KAAK,CAACC,IAAN,KAAe,YAApB,EAAmC;AACzCF,QAAAA,SAAS,GADgC,CAEzC;;AACAC,QAAAA,KAAK,CAACE,cAAN;AACA;AACD,KAdF;AAeC,IAAA,GAAG,EAAGnB;AAfP,KAiBC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,KAAK,CAAEE,WAAF,CAAL,CAAqBmB,KADxB,EAGGrB,KAAK,CAACe,MAAN,GAAe,CAAf,IACD,cAAC,WAAD;AACC,IAAA,WAAW,EAAGb,WADf;AAEC,IAAA,aAAa,EAAGF,KAAK,CAACe,MAFvB;AAGC,IAAA,cAAc,EAAGZ;AAHlB,IAJF,EAWGH,KAAK,CAAEE,WAAF,CAAL,CAAqBU,OAXxB,CADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGC,SAAS,IACV,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,IAAA,OAAO,EAAGG;AAFX,KAIG3B,EAAE,CAAE,UAAF,CAJL,CAFF,EASGyB,YAAY,IACb,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,kCADX;AAEC,IAAA,OAAO,EAAGG;AAFX,KAIG5B,EAAE,CAAE,MAAF,CAJL,CAVF,EAiBG,CAAEyB,YAAF,IACD,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,OAAO,EAAGf;AAFX,KAIGD,gBAJH,CAlBF,CAfD,CAjBD,CADD;AA8DA;;AAED,eAAeJ,KAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst guideContainer = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tif ( guideContainer.current ) {\n\t\t\t(\n\t\t\t\tfocus.tabbable.find( guideContainer.current ) as HTMLElement[]\n\t\t\t )[ 0 ]?.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","ref","currentPage","setCurrentPage","frame","current","querySelector","HTMLElement","focus","count","since","alternative","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"]}

package/build-module/guide/page-control.js

@@ -26,9 +26,7 @@ export default function PageControl({
     "aria-current": page === currentPage ? 'step' : undefined
   }, createElement(Button, {
     key: page,
-    icon: createElement(PageControlIcon, {
-      isSelected: page === currentPage
-    }),
+    icon: createElement(PageControlIcon, null),
     "aria-label": sprintf(
     /* translators: 1: current page number 2: total number of pages */
     __('Page %1$d of %2$d'), page + 1, numberOfPages),

package/build-module/guide/page-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["__","sprintf","Button","PageControlIcon","PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,eAAT,QAAgC,SAAhC;AAGA,eAAe,SAASC,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAaP,EAAE,CAAE,gBAAF;AAFhB,KAIGQ,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,cAAC,MAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EACH,cAAC,eAAD;AACC,MAAA,UAAU,EAAGA,IAAI,KAAKR;AADvB,MAHF;AAOC,kBAAaJ,OAAO;AACnB;AACAD,IAAAA,EAAE,CAAE,mBAAF,CAFiB,EAGnBa,IAAI,GAAG,CAHY,EAInBP,aAJmB,CAPrB;AAaC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAb/B,IALD,CADC,CAJH,CADD;AA8BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<PageControlIcon\n\t\t\t\t\t\t\t\tisSelected={ page === currentPage }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["__","sprintf","Button","PageControlIcon","PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,eAAT,QAAgC,SAAhC;AAGA,eAAe,SAASC,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAaP,EAAE,CAAE,gBAAF;AAFhB,KAIGQ,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,cAAC,MAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EAAG,cAAC,eAAD,OAFR;AAGC,kBAAaZ,OAAO;AACnB;AACAD,IAAAA,EAAE,CAAE,mBAAF,CAFiB,EAGnBa,IAAI,GAAG,CAHY,EAInBP,aAJmB,CAHrB;AASC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAT/B,IALD,CADC,CAJH,CADD;AA0BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}