@wordpress/edit-site 6.31.1-next.f56bd8138.0 → 6.32.1-next.47f435fc9.0

package/build/components/global-styles/font-sizes/font-size.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_blockEditor","require","_i18n","_components","_icons","_element","_lockUnlock","_header","_interopRequireDefault","_fontSizePreview","_confirmDeleteFontSizeDialog","_renameFontSizeDialog","_sizeControl","_jsxRuntime","Menu","unlock","componentsPrivateApis","useGlobalSetting","blockEditorPrivateApis","FontSize","_fontSizes$origin","isDeleteConfirmOpen","setIsDeleteConfirmOpen","useState","isRenameDialogOpen","setIsRenameDialogOpen","params","origin","slug","goBack","useNavigator","fontSizes","setFontSizes","globalFluid","sizes","fontSize","find","size","useEffect","isFluid","fluid","undefined","isCustomFluid","handleNameChange","value","updateFontSize","handleFontSizeChange","handleFluidChange","handleCustomFluidValues","min","max","handleMinChange","handleMaxChange","key","newFontSizes","map","handleRemoveFontSize","filter","toggleDeleteConfirm","toggleRenameDialog","jsxs","Fragment","children","jsx","default","isOpen","toggleOpen","handleRename","__experimentalVStack","spacing","__experimentalHStack","justify","align","title","name","description","sprintf","__","FlexItem","__experimentalSpacer","marginTop","marginBottom","paddingX","TriggerButton","render","Button","icon","moreVertical","label","Popover","Item","onClick","ItemLabel","__experimentalView","paddingBottom","onChange","disabled","ToggleControl","help","checked","__nextHasNoMarginBottom","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-sizes/font-size.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalSpacer as Spacer,\n\tuseNavigator,\n\t__experimentalView as View,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tFlexItem,\n\tToggleControl,\n} from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ScreenHeader from '../header';\nimport FontSizePreview from './font-size-preview';\nimport ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';\nimport RenameFontSizeDialog from './rename-font-size-dialog';\nimport SizeControl from '../size-control';\n\nconst { Menu } = unlock( componentsPrivateApis );\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nfunction FontSize() {\n\tconst [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );\n\tconst [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );\n\n\tconst {\n\t\tparams: { origin, slug },\n\t\tgoBack,\n\t} = useNavigator();\n\n\tconst [ fontSizes, setFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes'\n\t);\n\n\tconst [ globalFluid ] = useGlobalSetting( 'typography.fluid' );\n\n\t// Get the font sizes from the origin, default to empty array.\n\tconst sizes = fontSizes[ origin ] ?? [];\n\n\t// Get the font size by slug.\n\tconst fontSize = sizes.find( ( size ) => size.slug === slug );\n\n\t// Navigate to the font sizes list if the font size is not available.\n\tuseEffect( () => {\n\t\tif ( !! slug && ! fontSize ) {\n\t\t\tgoBack();\n\t\t}\n\t}, [ slug, fontSize, goBack ] );\n\n\tif ( ! origin || ! slug || ! fontSize ) {\n\t\treturn null;\n\t}\n\n\t// Whether the font size is fluid. If not defined, use the global fluid value of the theme.\n\tconst isFluid =\n\t\tfontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;\n\n\t// Whether custom fluid values are used.\n\tconst isCustomFluid = typeof fontSize?.fluid === 'object';\n\n\tconst handleNameChange = ( value ) => {\n\t\tupdateFontSize( 'name', value );\n\t};\n\n\tconst handleFontSizeChange = ( value ) => {\n\t\tupdateFontSize( 'size', value );\n\t};\n\n\tconst handleFluidChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', value );\n\t};\n\n\tconst handleCustomFluidValues = ( value ) => {\n\t\tif ( value ) {\n\t\t\t// If custom values are used, init the values with the current ones.\n\t\t\tupdateFontSize( 'fluid', {\n\t\t\t\tmin: fontSize.size,\n\t\t\t\tmax: fontSize.size,\n\t\t\t} );\n\t\t} else {\n\t\t\t// If custom fluid values are disabled, set fluid to true.\n\t\t\tupdateFontSize( 'fluid', true );\n\t\t}\n\t};\n\n\tconst handleMinChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', { ...fontSize.fluid, min: value } );\n\t};\n\n\tconst handleMaxChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', { ...fontSize.fluid, max: value } );\n\t};\n\n\tconst updateFontSize = ( key, value ) => {\n\t\tconst newFontSizes = sizes.map( ( size ) => {\n\t\t\tif ( size.slug === slug ) {\n\t\t\t\treturn { ...size, [ key ]: value }; // Create a new object with updated key\n\t\t\t}\n\t\t\treturn size;\n\t\t} );\n\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst handleRemoveFontSize = () => {\n\t\tconst newFontSizes = sizes.filter( ( size ) => size.slug !== slug );\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst toggleDeleteConfirm = () => {\n\t\tsetIsDeleteConfirmOpen( ! isDeleteConfirmOpen );\n\t};\n\n\tconst toggleRenameDialog = () => {\n\t\tsetIsRenameDialogOpen( ! isRenameDialogOpen );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ConfirmDeleteFontSizeDialog\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\tisOpen={ isDeleteConfirmOpen }\n\t\t\t\ttoggleOpen={ toggleDeleteConfirm }\n\t\t\t\thandleRemoveFontSize={ handleRemoveFontSize }\n\t\t\t/>\n\n\t\t\t{ isRenameDialogOpen && (\n\t\t\t\t<RenameFontSizeDialog\n\t\t\t\t\tfontSize={ fontSize }\n\t\t\t\t\ttoggleOpen={ toggleRenameDialog }\n\t\t\t\t\thandleRename={ handleNameChange }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<HStack justify=\"space-between\" align=\"flex-start\">\n\t\t\t\t\t<ScreenHeader\n\t\t\t\t\t\ttitle={ fontSize.name }\n\t\t\t\t\t\tdescription={ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: font size preset name. */\n\t\t\t\t\t\t\t__( 'Manage the font size %s.' ),\n\t\t\t\t\t\t\tfontSize.name\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ origin === 'custom' && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\t\tmarginTop={ 3 }\n\t\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Font size options'\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/>\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\t<Menu.Popover>\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\t\tonClick={ toggleRenameDialog }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Rename' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\t\tonClick={ toggleDeleteConfirm }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t\t\t</Menu>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\n\t\t\t\t<View>\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\tpaddingBottom={ 6 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<FontSizePreview fontSize={ fontSize } />\n\t\t\t\t\t\t\t</FlexItem>\n\n\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\t\t\t\t\tvalue={ ! isCustomFluid ? fontSize.size : '' }\n\t\t\t\t\t\t\t\tonChange={ handleFontSizeChange }\n\t\t\t\t\t\t\t\tdisabled={ isCustomFluid }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Fluid typography' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Scale the font size dynamically to fit the screen or viewport.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={ isFluid }\n\t\t\t\t\t\t\t\tonChange={ handleFluidChange }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{ isFluid && (\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom fluid values' ) }\n\t\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t\t'Set custom min and max values for the fluid font size.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ isCustomFluid }\n\t\t\t\t\t\t\t\t\tonChange={ handleCustomFluidValues }\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t{ isCustomFluid && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Minimum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ fontSize.fluid?.min }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMinChange }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Maximum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ fontSize.fluid?.max }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMaxChange }\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</VStack>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</View>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default FontSize;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../../src/components/global-styles/font-sizes/font-size.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalSpacer as Spacer,\n\tuseNavigator,\n\t__experimentalView as View,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tFlexItem,\n\tToggleControl,\n} from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ScreenHeader from '../header';\nimport FontSizePreview from './font-size-preview';\nimport ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';\nimport RenameFontSizeDialog from './rename-font-size-dialog';\nimport SizeControl from '../size-control';\n\nconst { Menu } = unlock( componentsPrivateApis );\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nfunction FontSize() {\n\tconst [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );\n\tconst [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );\n\n\tconst {\n\t\tparams: { origin, slug },\n\t\tgoBack,\n\t} = useNavigator();\n\n\tconst [ fontSizes, setFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes'\n\t);\n\n\tconst [ globalFluid ] = useGlobalSetting( 'typography.fluid' );\n\n\t// Get the font sizes from the origin, default to empty array.\n\tconst sizes = fontSizes[ origin ] ?? [];\n\n\t// Get the font size by slug.\n\tconst fontSize = sizes.find( ( size ) => size.slug === slug );\n\n\t// Navigate to the font sizes list if the font size is not available.\n\tuseEffect( () => {\n\t\tif ( !! slug && ! fontSize ) {\n\t\t\tgoBack();\n\t\t}\n\t}, [ slug, fontSize, goBack ] );\n\n\tif ( ! origin || ! slug || ! fontSize ) {\n\t\treturn null;\n\t}\n\n\t// Whether the font size is fluid. If not defined, use the global fluid value of the theme.\n\tconst isFluid =\n\t\tfontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;\n\n\t// Whether custom fluid values are used.\n\tconst isCustomFluid = typeof fontSize?.fluid === 'object';\n\n\tconst handleNameChange = ( value ) => {\n\t\tupdateFontSize( 'name', value );\n\t};\n\n\tconst handleFontSizeChange = ( value ) => {\n\t\tupdateFontSize( 'size', value );\n\t};\n\n\tconst handleFluidChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', value );\n\t};\n\n\tconst handleCustomFluidValues = ( value ) => {\n\t\tif ( value ) {\n\t\t\t// If custom values are used, init the values with the current ones.\n\t\t\tupdateFontSize( 'fluid', {\n\t\t\t\tmin: fontSize.size,\n\t\t\t\tmax: fontSize.size,\n\t\t\t} );\n\t\t} else {\n\t\t\t// If custom fluid values are disabled, set fluid to true.\n\t\t\tupdateFontSize( 'fluid', true );\n\t\t}\n\t};\n\n\tconst handleMinChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', { ...fontSize.fluid, min: value } );\n\t};\n\n\tconst handleMaxChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', { ...fontSize.fluid, max: value } );\n\t};\n\n\tconst updateFontSize = ( key, value ) => {\n\t\tconst newFontSizes = sizes.map( ( size ) => {\n\t\t\tif ( size.slug === slug ) {\n\t\t\t\treturn { ...size, [ key ]: value }; // Create a new object with updated key\n\t\t\t}\n\t\t\treturn size;\n\t\t} );\n\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst handleRemoveFontSize = () => {\n\t\tconst newFontSizes = sizes.filter( ( size ) => size.slug !== slug );\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst toggleDeleteConfirm = () => {\n\t\tsetIsDeleteConfirmOpen( ! isDeleteConfirmOpen );\n\t};\n\n\tconst toggleRenameDialog = () => {\n\t\tsetIsRenameDialogOpen( ! isRenameDialogOpen );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ConfirmDeleteFontSizeDialog\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\tisOpen={ isDeleteConfirmOpen }\n\t\t\t\ttoggleOpen={ toggleDeleteConfirm }\n\t\t\t\thandleRemoveFontSize={ handleRemoveFontSize }\n\t\t\t/>\n\n\t\t\t{ isRenameDialogOpen && (\n\t\t\t\t<RenameFontSizeDialog\n\t\t\t\t\tfontSize={ fontSize }\n\t\t\t\t\ttoggleOpen={ toggleRenameDialog }\n\t\t\t\t\thandleRename={ handleNameChange }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<HStack justify=\"space-between\" align=\"flex-start\">\n\t\t\t\t\t<ScreenHeader\n\t\t\t\t\t\ttitle={ fontSize.name }\n\t\t\t\t\t\tdescription={ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: font size preset name. */\n\t\t\t\t\t\t\t__( 'Manage the font size %s.' ),\n\t\t\t\t\t\t\tfontSize.name\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ origin === 'custom' && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\t\tmarginTop={ 3 }\n\t\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Font size options'\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/>\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\t<Menu.Popover>\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\t\tonClick={ toggleRenameDialog }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Rename' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\t\tonClick={ toggleDeleteConfirm }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t\t\t</Menu>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\n\t\t\t\t<View>\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\tpaddingBottom={ 6 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<FontSizePreview fontSize={ fontSize } />\n\t\t\t\t\t\t\t</FlexItem>\n\n\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\t\t\t\t\tvalue={ ! isCustomFluid ? fontSize.size : '' }\n\t\t\t\t\t\t\t\tonChange={ handleFontSizeChange }\n\t\t\t\t\t\t\t\tdisabled={ isCustomFluid }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Fluid typography' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Scale the font size dynamically to fit the screen or viewport.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={ isFluid }\n\t\t\t\t\t\t\t\tonChange={ handleFluidChange }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{ isFluid && (\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom fluid values' ) }\n\t\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t\t'Set custom min and max values for the fluid font size.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ isCustomFluid }\n\t\t\t\t\t\t\t\t\tonChange={ handleCustomFluidValues }\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t{ isCustomFluid && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Minimum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ fontSize.fluid?.min }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMinChange }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Maximum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ fontSize.fluid?.max }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMaxChange }\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</VStack>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</View>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default FontSize;\n"],
+  "mappings": "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",
+  "names": ["componentsPrivateApis", "blockEditorPrivateApis", "ConfirmDeleteFontSizeDialog", "RenameFontSizeDialog", "VStack", "HStack", "ScreenHeader", "Spacer", "View", "FontSizePreview", "SizeControl"]
+}

package/build/components/global-styles/font-sizes/font-sizes-count.js

@@ -1,49 +1,50 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_sizes_count_exports = {};
+__export(font_sizes_count_exports, {
+  default: () => font_sizes_count_default
 });
-exports.default = void 0;
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _icons = require("@wordpress/icons");
-var _subtitle = _interopRequireDefault(require("../subtitle"));
-var _navigationButton = require("../navigation-button");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(font_sizes_count_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_icons = require("@wordpress/icons");
+var import_subtitle = __toESM(require("../subtitle"));
+var import_navigation_button = require("../navigation-button");
 function FontSizes() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-    spacing: 2,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
-      justify: "space-between",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
-        level: 3,
-        children: (0, _i18n.__)('Font Sizes')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
-      isBordered: true,
-      isSeparated: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
-        path: "/typography/font-sizes",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-          direction: "row",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-            children: (0, _i18n.__)('Font size presets')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-          })]
-        })
-      })
-    })]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.default, { level: 3, children: (0, import_i18n.__)("Font Sizes") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { path: "/typography/font-sizes", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { direction: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Font size presets") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight })
+    ] }) }) })
+  ] });
 }
-var _default = exports.default = FontSizes;
-//# sourceMappingURL=font-sizes-count.js.map
+var font_sizes_count_default = FontSizes;
+//# sourceMappingURL=font-sizes-count.js.map

package/build/components/global-styles/font-sizes/font-sizes-count.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_i18n","require","_components","_icons","_subtitle","_interopRequireDefault","_navigationButton","_jsxRuntime","FontSizes","jsxs","__experimentalVStack","spacing","children","jsx","__experimentalHStack","justify","default","level","__","__experimentalItemGroup","isBordered","isSeparated","NavigationButtonAsItem","path","direction","FlexItem","Icon","icon","isRTL","chevronLeft","chevronRight","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from '../subtitle';\nimport { NavigationButtonAsItem } from '../navigation-button';\n\nfunction FontSizes() {\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>\n\t\t\t</HStack>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path=\"/typography/font-sizes\">\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t<FlexItem>{ __( 'Font size presets' ) }</FlexItem>\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default FontSizes;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,SAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAA8D,IAAAM,WAAA,GAAAN,OAAA;AAhB9D;AACA;AACA;;AAUA;AACA;AACA;;AAIA,SAASO,SAASA,CAAA,EAAG;EACpB,oBACC,IAAAD,WAAA,CAAAE,IAAA,EAACP,WAAA,CAAAQ,oBAAM;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpB,IAAAL,WAAA,CAAAM,GAAA,EAACX,WAAA,CAAAY,oBAAM;MAACC,OAAO,EAAC,eAAe;MAAAH,QAAA,eAC9B,IAAAL,WAAA,CAAAM,GAAA,EAACT,SAAA,CAAAY,OAAQ;QAACC,KAAK,EAAG,CAAG;QAAAL,QAAA,EAAG,IAAAM,QAAE,EAAE,YAAa;MAAC,CAAY;IAAC,CAChD,CAAC,eACT,IAAAX,WAAA,CAAAM,GAAA,EAACX,WAAA,CAAAiB,uBAAS;MAACC,UAAU;MAACC,WAAW;MAAAT,QAAA,eAChC,IAAAL,WAAA,CAAAM,GAAA,EAACP,iBAAA,CAAAgB,sBAAsB;QAACC,IAAI,EAAC,wBAAwB;QAAAX,QAAA,eACpD,IAAAL,WAAA,CAAAE,IAAA,EAACP,WAAA,CAAAY,oBAAM;UAACU,SAAS,EAAC,KAAK;UAAAZ,QAAA,gBACtB,IAAAL,WAAA,CAAAM,GAAA,EAACX,WAAA,CAAAuB,QAAQ;YAAAb,QAAA,EAAG,IAAAM,QAAE,EAAE,mBAAoB;UAAC,CAAY,CAAC,eAClD,IAAAX,WAAA,CAAAM,GAAA,EAACV,MAAA,CAAAuB,IAAI;YAACC,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,kBAAW,GAAGC;UAAc,CAAE,CAAC;QAAA,CAC/C;MAAC,CACc;IAAC,CACf,CAAC;EAAA,CACL,CAAC;AAEX;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEcR,SAAS","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../../src/components/global-styles/font-sizes/font-sizes-count.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from '../subtitle';\nimport { NavigationButtonAsItem } from '../navigation-button';\n\nfunction FontSizes() {\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>\n\t\t\t</HStack>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path=\"/typography/font-sizes\">\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t<FlexItem>{ __( 'Font size presets' ) }</FlexItem>\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default FontSizes;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBI;AAnBJ,kBAA0B;AAC1B,wBAKO;AACP,mBAAgD;AAKhD,sBAAqB;AACrB,+BAAuC;AAEvC,SAAS,YAAY;AACpB,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBACf,sDAAC,gBAAAC,SAAA,EAAS,OAAQ,GAAM,8BAAI,YAAa,GAAG,GAC7C;AAAA,IACA,4CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAChC,sDAAC,mDAAuB,MAAK,0BAC5B,uDAAC,kBAAAF,sBAAA,EAAO,WAAU,OACjB;AAAA,kDAAC,8BAAW,8BAAI,mBAAoB,GAAG;AAAA,MACvC,4CAAC,qBAAK,UAAO,mBAAM,IAAI,2BAAc,2BAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,2BAAQ;",
+  "names": ["VStack", "HStack", "Subtitle", "ItemGroup"]
+}

package/build/components/global-styles/font-sizes/font-sizes.js

@@ -1,36 +1,50 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_sizes_exports = {};
+__export(font_sizes_exports, {
+  default: () => font_sizes_default
 });
-exports.default = void 0;
-var _blockEditor = require("@wordpress/block-editor");
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _icons = require("@wordpress/icons");
-var _element = require("@wordpress/element");
-var _lockUnlock = require("../../../lock-unlock");
-var _subtitle = _interopRequireDefault(require("../subtitle"));
-var _navigationButton = require("../navigation-button");
-var _utils = require("../utils");
-var _header = _interopRequireDefault(require("../header"));
-var _confirmResetFontSizesDialog = _interopRequireDefault(require("./confirm-reset-font-sizes-dialog"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  Menu
-} = (0, _lockUnlock.unlock)(_components.privateApis);
-const {
-  useGlobalSetting
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+module.exports = __toCommonJS(font_sizes_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_block_editor = require("@wordpress/block-editor");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_icons = require("@wordpress/icons");
+var import_element = require("@wordpress/element");
+var import_lock_unlock = require("../../../lock-unlock");
+var import_subtitle = __toESM(require("../subtitle"));
+var import_navigation_button = require("../navigation-button");
+var import_utils = require("../utils");
+var import_header = __toESM(require("../header"));
+var import_confirm_reset_font_sizes_dialog = __toESM(require("./confirm-reset-font-sizes-dialog"));
+const { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+const { useGlobalSetting } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
 function FontSizeGroup({
   label,
   origin,
@@ -38,120 +52,169 @@ function FontSizeGroup({
   handleAddFontSize,
   handleResetFontSizes
 }) {
-  const [isResetDialogOpen, setIsResetDialogOpen] = (0, _element.useState)(false);
+  const [isResetDialogOpen, setIsResetDialogOpen] = (0, import_element.useState)(false);
   const toggleResetDialog = () => setIsResetDialogOpen(!isResetDialogOpen);
-  const resetDialogText = origin === 'custom' ? (0, _i18n.__)('Are you sure you want to remove all custom font size presets?') : (0, _i18n.__)('Are you sure you want to reset all font size presets to their default values?');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isResetDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmResetFontSizesDialog.default, {
-      text: resetDialogText,
-      confirmButtonText: origin === 'custom' ? (0, _i18n.__)('Remove') : (0, _i18n.__)('Reset'),
-      isOpen: isResetDialogOpen,
-      toggleOpen: toggleResetDialog,
-      onConfirm: handleResetFontSizes
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
-          level: 3,
-          children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FlexItem, {
-          className: "edit-site-global-styles__typography-panel__options-container",
-          children: [origin === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            label: (0, _i18n.__)('Add font size'),
-            icon: _icons.plus,
-            size: "small",
-            onClick: handleAddFontSize
-          }), !!handleResetFontSizes && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
-              render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-                size: "small",
-                icon: _icons.moreVertical,
-                label: (0, _i18n.__)('Font size presets options')
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Popover, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Item, {
-                onClick: toggleResetDialog,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
-                  children: origin === 'custom' ? (0, _i18n.__)('Remove font size presets') : (0, _i18n.__)('Reset font size presets')
-                })
-              })
-            })]
-          })]
-        })]
-      }), !!sizes.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
-        isBordered: true,
-        isSeparated: true,
-        children: sizes.map(size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
+  const resetDialogText = origin === "custom" ? (0, import_i18n.__)(
+    "Are you sure you want to remove all custom font size presets?"
+  ) : (0, import_i18n.__)(
+    "Are you sure you want to reset all font size presets to their default values?"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isResetDialogOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_confirm_reset_font_sizes_dialog.default,
+      {
+        text: resetDialogText,
+        confirmButtonText: origin === "custom" ? (0, import_i18n.__)("Remove") : (0, import_i18n.__)("Reset"),
+        isOpen: isResetDialogOpen,
+        toggleOpen: toggleResetDialog,
+        onConfirm: handleResetFontSizes
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.default, { level: 3, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.FlexItem, { className: "edit-site-global-styles__typography-panel__options-container", children: [
+          origin === "custom" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              label: (0, import_i18n.__)("Add font size"),
+              icon: import_icons.plus,
+              size: "small",
+              onClick: handleAddFontSize
+            }
+          ),
+          !!handleResetFontSizes && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Menu.TriggerButton,
+              {
+                render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    size: "small",
+                    icon: import_icons.moreVertical,
+                    label: (0, import_i18n.__)(
+                      "Font size presets options"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Item, { onClick: toggleResetDialog, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: origin === "custom" ? (0, import_i18n.__)(
+              "Remove font size presets"
+            ) : (0, import_i18n.__)(
+              "Reset font size presets"
+            ) }) }) })
+          ] })
+        ] })
+      ] }),
+      !!sizes.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_navigation_button.NavigationButtonAsItem,
+        {
           path: `/typography/font-sizes/${origin}/${size.slug}`,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-              className: "edit-site-font-size__item",
-              children: size.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-              display: "flex",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-              })
-            })]
-          })
-        }, size.slug))
-      })]
-    })]
-  });
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { className: "edit-site-font-size__item", children: size.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { display: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.Icon,
+              {
+                icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight
+              }
+            ) })
+          ] })
+        },
+        size.slug
+      )) })
+    ] })
+  ] });
 }
 function FontSizes() {
-  const [themeFontSizes, setThemeFontSizes] = useGlobalSetting('typography.fontSizes.theme');
-  const [baseThemeFontSizes] = useGlobalSetting('typography.fontSizes.theme', null, 'base');
-  const [defaultFontSizes, setDefaultFontSizes] = useGlobalSetting('typography.fontSizes.default');
-  const [baseDefaultFontSizes] = useGlobalSetting('typography.fontSizes.default', null, 'base');
-  const [customFontSizes = [], setCustomFontSizes] = useGlobalSetting('typography.fontSizes.custom');
-  const [defaultFontSizesEnabled] = useGlobalSetting('typography.defaultFontSizes');
+  const [themeFontSizes, setThemeFontSizes] = useGlobalSetting(
+    "typography.fontSizes.theme"
+  );
+  const [baseThemeFontSizes] = useGlobalSetting(
+    "typography.fontSizes.theme",
+    null,
+    "base"
+  );
+  const [defaultFontSizes, setDefaultFontSizes] = useGlobalSetting(
+    "typography.fontSizes.default"
+  );
+  const [baseDefaultFontSizes] = useGlobalSetting(
+    "typography.fontSizes.default",
+    null,
+    "base"
+  );
+  const [customFontSizes = [], setCustomFontSizes] = useGlobalSetting(
+    "typography.fontSizes.custom"
+  );
+  const [defaultFontSizesEnabled] = useGlobalSetting(
+    "typography.defaultFontSizes"
+  );
   const handleAddFontSize = () => {
-    const index = (0, _utils.getNewIndexFromPresets)(customFontSizes, 'custom-');
+    const index = (0, import_utils.getNewIndexFromPresets)(customFontSizes, "custom-");
     const newFontSize = {
       /* translators: %d: font size index */
-      name: (0, _i18n.sprintf)((0, _i18n.__)('New Font Size %d'), index),
-      size: '16px',
+      name: (0, import_i18n.sprintf)((0, import_i18n.__)("New Font Size %d"), index),
+      size: "16px",
       slug: `custom-${index}`
     };
     setCustomFontSizes([...customFontSizes, newFontSize]);
   };
-  const hasSameSizeValues = (arr1, arr2) => arr1.map(item => item.size).join('') === arr2.map(item => item.size).join('');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-    spacing: 2,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
-      title: (0, _i18n.__)('Font size presets'),
-      description: (0, _i18n.__)('Create and edit the presets used for font sizes across the site.')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
-        paddingX: 4,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-          spacing: 8,
-          children: [!!themeFontSizes?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(FontSizeGroup, {
-            label: (0, _i18n.__)('Theme'),
-            origin: "theme",
-            sizes: themeFontSizes,
-            baseSizes: baseThemeFontSizes,
-            handleAddFontSize: handleAddFontSize,
-            handleResetFontSizes: hasSameSizeValues(themeFontSizes, baseThemeFontSizes) ? null : () => setThemeFontSizes(baseThemeFontSizes)
-          }), defaultFontSizesEnabled && !!defaultFontSizes?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(FontSizeGroup, {
-            label: (0, _i18n.__)('Default'),
-            origin: "default",
-            sizes: defaultFontSizes,
-            baseSizes: baseDefaultFontSizes,
-            handleAddFontSize: handleAddFontSize,
-            handleResetFontSizes: hasSameSizeValues(defaultFontSizes, baseDefaultFontSizes) ? null : () => setDefaultFontSizes(baseDefaultFontSizes)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FontSizeGroup, {
-            label: (0, _i18n.__)('Custom'),
-            origin: "custom",
-            sizes: customFontSizes,
-            handleAddFontSize: handleAddFontSize,
-            handleResetFontSizes: customFontSizes.length > 0 ? () => setCustomFontSizes([]) : null
-          })]
-        })
-      })
-    })]
-  });
+  const hasSameSizeValues = (arr1, arr2) => arr1.map((item) => item.size).join("") === arr2.map((item) => item.size).join("");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_header.default,
+      {
+        title: (0, import_i18n.__)("Font size presets"),
+        description: (0, import_i18n.__)(
+          "Create and edit the presets used for font sizes across the site."
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { paddingX: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 8, children: [
+      !!themeFontSizes?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FontSizeGroup,
+        {
+          label: (0, import_i18n.__)("Theme"),
+          origin: "theme",
+          sizes: themeFontSizes,
+          baseSizes: baseThemeFontSizes,
+          handleAddFontSize,
+          handleResetFontSizes: hasSameSizeValues(
+            themeFontSizes,
+            baseThemeFontSizes
+          ) ? null : () => setThemeFontSizes(
+            baseThemeFontSizes
+          )
+        }
+      ),
+      defaultFontSizesEnabled && !!defaultFontSizes?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FontSizeGroup,
+        {
+          label: (0, import_i18n.__)("Default"),
+          origin: "default",
+          sizes: defaultFontSizes,
+          baseSizes: baseDefaultFontSizes,
+          handleAddFontSize,
+          handleResetFontSizes: hasSameSizeValues(
+            defaultFontSizes,
+            baseDefaultFontSizes
+          ) ? null : () => setDefaultFontSizes(
+            baseDefaultFontSizes
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FontSizeGroup,
+        {
+          label: (0, import_i18n.__)("Custom"),
+          origin: "custom",
+          sizes: customFontSizes,
+          handleAddFontSize,
+          handleResetFontSizes: customFontSizes.length > 0 ? () => setCustomFontSizes([]) : null
+        }
+      )
+    ] }) }) })
+  ] });
 }
-var _default = exports.default = FontSizes;
-//# sourceMappingURL=font-sizes.js.map
+var font_sizes_default = FontSizes;
+//# sourceMappingURL=font-sizes.js.map