@wordpress/global-styles-ui 1.11.0 → 1.12.0

package/build-module/font-library/google-fonts-confirm-dialog.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-library/google-fonts-confirm-dialog.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = (): void => {\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,OAClB;AAcH,SACC,KADD;AAZJ,SAAS,2BAA2B;AACnC,QAAM,gBAAgB,MAAY;AACjC,WAAO,aAAa;AAAA,MACnB;AAAA,MACA;AAAA,IACD;AACA,WAAO,cAAe,IAAI,MAAO,SAAU,CAAE;AAAA,EAC9C;AAEA,SACC,oBAAC,SAAI,WAAU,sCACd,8BAAC,QACA,+BAAC,YACA;AAAA,wBAAC,WAAQ,OAAQ,GACd,aAAI,yBAA0B,GACjC;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,oBAAC,QAAK,IAAG,KACN;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,oBAAC,QAAK,IAAG,KACN;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,SAAQ;AAAA,QACR,SAAU;AAAA,QAER,aAAI,8BAA+B;AAAA;AAAA,IACtC;AAAA,KACD,GACD,GACD;AAEF;AAEA,IAAO,sCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\n\t__experimentalText as WCText,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = (): void => {\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<WCText as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</WCText>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<WCText as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</WCText>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,OAClB;AAcH,SACC,KADD;AAZJ,SAAS,2BAA2B;AACnC,QAAM,gBAAgB,MAAY;AACjC,WAAO,aAAa;AAAA,MACnB;AAAA,MACA;AAAA,IACD;AACA,WAAO,cAAe,IAAI,MAAO,SAAU,CAAE;AAAA,EAC9C;AAEA,SACC,oBAAC,SAAI,WAAU,sCACd,8BAAC,QACA,+BAAC,YACA;AAAA,wBAAC,WAAQ,OAAQ,GACd,aAAI,yBAA0B,GACjC;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,oBAAC,UAAO,IAAG,KACR;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,oBAAC,UAAO,IAAG,KACR;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,SAAQ;AAAA,QACR,SAAU;AAAA,QAER,aAAI,8BAA+B;AAAA;AAAA,IACtC;AAAA,KACD,GACD,GACD;AAEF;AAEA,IAAO,sCAAQ;",
   "names": []
 }

package/build-module/font-library/installed-fonts.mjs

@@ -7,7 +7,7 @@ import {
   Navigator,
   useNavigator,
   __experimentalSpacer as Spacer,
-  __experimentalText as Text,
+  __experimentalText as WCText,
   __experimentalVStack as VStack,
   Flex,
   Notice,
@@ -179,7 +179,7 @@ function InstalledFonts() {
                   children: notice.message
                 }
               ),
-              !hasFonts && /* @__PURE__ */ jsx(Text, { as: "p", children: __("No fonts installed.") }),
+              !hasFonts && /* @__PURE__ */ jsx(WCText, { as: "p", children: __("No fonts installed.") }),
               baseThemeFonts.length > 0 && /* @__PURE__ */ jsxs(VStack, { children: [
                 /* @__PURE__ */ jsx("h2", {
                   className: "font-library__fonts-title",
@@ -305,7 +305,7 @@ function InstalledFonts() {
                 /* @__PURE__ */ jsx(Spacer, { margin: 1 })
               ] }),
               /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
-              /* @__PURE__ */ jsx(Text, { children: __(
+              /* @__PURE__ */ jsx(WCText, { children: __(
                 "Choose font variants. Keep in mind that too many variants could make your site slower."
               ) }),
               /* @__PURE__ */ jsx(Spacer, { margin: 4 }),

package/build-module/font-library/installed-fonts.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-library/installed-fonts.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\tNavigator,\n\tuseNavigator,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tNotice,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { useEntityRecord, store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport { __, _x, sprintf, isRTL } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport type {\n\tFontFamilyPreset,\n\tGlobalStylesConfig,\n} from '@wordpress/global-styles-engine';\nimport type { FontFamily } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport {\n\tsetUIValuesNeeded,\n\tloadFontFaceInBrowser,\n\tunloadFontFaceInBrowser,\n\tgetDisplaySrcFromFontFace,\n} from './utils';\nimport { useSetting } from '../hooks';\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\thandleSetLibraryFontSelected,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tisInstalling,\n\t\tsaveFontFamilies,\n\t\tgetFontFacesActivated,\n\t} = useContext( FontLibraryContext );\n\n\tconst [ fontFamilies, setFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies' );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] =\n\t\tuseState< boolean >( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ baseFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies', undefined, 'base' );\n\tconst globalStylesId = useSelect( ( select ) => {\n\t\tconst { __experimentalGetCurrentGlobalStylesId } = select( coreStore );\n\t\treturn __experimentalGetCurrentGlobalStylesId();\n\t}, [] );\n\tconst globalStyles = useEntityRecord< GlobalStylesConfig >(\n\t\t'root',\n\t\t'globalStyles',\n\t\tglobalStylesId\n\t);\n\tconst fontFamiliesHasChanges =\n\t\t!! globalStyles?.edits?.settings?.typography?.fontFamilies;\n\n\tconst themeFonts = fontFamilies?.theme\n\t\t? fontFamilies.theme\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\tconst themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );\n\tconst baseThemeFonts = baseFontFamilies?.theme\n\t\t? themeFonts.concat(\n\t\t\t\tbaseFontFamilies.theme\n\t\t\t\t\t.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )\n\t\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t  )\n\t\t: [];\n\n\tconst customFontFamilyId =\n\t\tlibraryFontSelected?.source === 'custom' && libraryFontSelected?.id;\n\n\tconst canUserDelete = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser } = select( coreStore );\n\t\t\treturn (\n\t\t\t\tcustomFontFamilyId &&\n\t\t\t\tcanUser( 'delete', {\n\t\t\t\t\tkind: 'postType',\n\t\t\t\t\tname: 'wp_font_family',\n\t\t\t\t\tid: customFontFamilyId,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ customFontFamilyId ]\n\t);\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected &&\n\t\tlibraryFontSelected?.source !== 'theme' &&\n\t\tcanUserDelete;\n\n\tconst handleUninstallClick = () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleUpdate = async () => {\n\t\tsetNotice( null );\n\t\ttry {\n\t\t\tawait saveFontFamilies( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family updated successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: sprintf(\n\t\t\t\t\t/* translators: %s: error message */\n\t\t\t\t\t__( 'There was an error updating the font family. %s' ),\n\t\t\t\t\t( error as Error ).message\n\t\t\t\t),\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst getFontFacesToDisplay = ( font: FontFamily ) => {\n\t\tif ( ! font ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! font.fontFace || ! font.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( font.fontFace );\n\t};\n\n\tconst getFontCardVariantsText = ( font: FontFamily ) => {\n\t\tconst variantsInstalled =\n\t\t\tfont?.fontFace && ( font?.fontFace?.length ?? 0 ) > 0\n\t\t\t\t? font.fontFace.length\n\t\t\t\t: 1;\n\t\tconst variantsActive = getFontFacesActivated(\n\t\t\tfont.slug,\n\t\t\tfont.source\n\t\t).length;\n\t\treturn sprintf(\n\t\t\t/* translators: 1: Active font variants, 2: Total font variants. */\n\t\t\t__( '%1$d/%2$d variants active' ),\n\t\t\tvariantsActive,\n\t\t\tvariantsInstalled\n\t\t);\n\t};\n\n\tuseEffect( () => {\n\t\thandleSetLibraryFontSelected( libraryFontSelected );\n\t}, [] );\n\n\t// Get activated fonts count.\n\tconst activeFontsCount = libraryFontSelected\n\t\t? getFontFacesActivated(\n\t\t\t\tlibraryFontSelected.slug,\n\t\t\t\tlibraryFontSelected.source\n\t\t  ).length\n\t\t: 0;\n\n\tconst selectedFontsCount =\n\t\tlibraryFontSelected?.fontFace?.length ??\n\t\t( libraryFontSelected?.fontFamily ? 1 : 0 );\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tactiveFontsCount > 0 && activeFontsCount !== selectedFontsCount;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked = activeFontsCount === selectedFontsCount;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tif ( ! libraryFontSelected || ! libraryFontSelected?.source ) {\n\t\t\treturn;\n\t\t}\n\t\tconst initialFonts =\n\t\t\tfontFamilies?.[ libraryFontSelected.source ]?.filter(\n\t\t\t\t( f ) => f.slug !== libraryFontSelected.slug\n\t\t\t) ?? [];\n\t\tconst newFonts = isSelectAllChecked\n\t\t\t? initialFonts\n\t\t\t: [ ...initialFonts, libraryFontSelected ];\n\n\t\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\t[ libraryFontSelected.source ]: newFonts,\n\t\t} );\n\n\t\tif ( libraryFontSelected.fontFace ) {\n\t\t\tlibraryFontSelected.fontFace.forEach( ( face ) => {\n\t\t\t\tif ( isSelectAllChecked ) {\n\t\t\t\t\tunloadFontFaceInBrowser( face, 'all' );\n\t\t\t\t} else {\n\t\t\t\t\tconst displaySrc = getDisplaySrcFromFontFace(\n\t\t\t\t\t\tface?.src ?? ''\n\t\t\t\t\t);\n\t\t\t\t\tif ( displaySrc ) {\n\t\t\t\t\t\tloadFontFaceInBrowser( face, displaySrc, 'all' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isResolvingLibrary && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ ! isResolvingLibrary && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath={\n\t\t\t\t\t\t\tlibraryFontSelected ? '/fontFamily' : '/'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<VStack spacing=\"8\">\n\t\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! hasFonts && (\n\t\t\t\t\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t\t\t\t\t{ __( 'No fonts installed.' ) }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts provided by the theme. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Theme', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\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\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts installed by the user. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Custom', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\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\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t{ libraryFontSelected && (\n\t\t\t\t\t\t\t\t<ConfirmDeleteDialog\n\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetIsOpen={ setIsConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetNotice={ setNotice }\n\t\t\t\t\t\t\t\t\tuninstallFontFamily={ uninstallFontFamily }\n\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected={\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected\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\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected &&\n\t\t\t\t\t\t\t\t\t\tgetFontFacesToDisplay(\n\t\t\t\t\t\t\t\t\t\t\tlibraryFontSelected\n\t\t\t\t\t\t\t\t\t\t).map( ( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\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</li>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t<HStack justify=\"flex-end\" className=\"font-library__footer\">\n\t\t\t\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ handleUpdate }\n\t\t\t\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisOpen,\n\tsetIsOpen,\n\tsetNotice,\n\tuninstallFontFamily,\n\thandleSetLibraryFontSelected,\n}: {\n\tfont: FontFamily;\n\tisOpen: boolean;\n\tsetIsOpen: ( isOpen: boolean ) => void;\n\tsetNotice: (\n\t\tnotice: {\n\t\t\ttype: 'success' | 'error' | 'info';\n\t\t\tmessage: string;\n\t\t} | null\n\t) => void;\n\tuninstallFontFamily: (\n\t\tfontFamily: FontFamily\n\t) => Promise< { deleted: boolean } >;\n\thandleSetLibraryFontSelected: ( font?: FontFamily ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\t\tsetIsOpen( false );\n\t\ttry {\n\t\t\tawait uninstallFontFamily( font );\n\t\t\tnavigator.goBack();\n\t\t\thandleSetLibraryFontSelected( undefined );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family.' ) +\n\t\t\t\t\t( error as Error ).message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsOpen( false );\n\t};\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\tonCancel={ handleCancelUninstall }\n\t\t\tonConfirm={ handleConfirmUninstall }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t{ font &&\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: Name of the font. */\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Are you sure you want to delete \"%s\" font and all its variants and assets?'\n\t\t\t\t\t),\n\t\t\t\t\tfont.name\n\t\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default InstalledFonts;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\tNavigator,\n\tuseNavigator,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as WCText,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tNotice,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { useEntityRecord, store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport { __, _x, sprintf, isRTL } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport type {\n\tFontFamilyPreset,\n\tGlobalStylesConfig,\n} from '@wordpress/global-styles-engine';\nimport type { FontFamily } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport {\n\tsetUIValuesNeeded,\n\tloadFontFaceInBrowser,\n\tunloadFontFaceInBrowser,\n\tgetDisplaySrcFromFontFace,\n} from './utils';\nimport { useSetting } from '../hooks';\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\thandleSetLibraryFontSelected,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tisInstalling,\n\t\tsaveFontFamilies,\n\t\tgetFontFacesActivated,\n\t} = useContext( FontLibraryContext );\n\n\tconst [ fontFamilies, setFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies' );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] =\n\t\tuseState< boolean >( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ baseFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies', undefined, 'base' );\n\tconst globalStylesId = useSelect( ( select ) => {\n\t\tconst { __experimentalGetCurrentGlobalStylesId } = select( coreStore );\n\t\treturn __experimentalGetCurrentGlobalStylesId();\n\t}, [] );\n\tconst globalStyles = useEntityRecord< GlobalStylesConfig >(\n\t\t'root',\n\t\t'globalStyles',\n\t\tglobalStylesId\n\t);\n\tconst fontFamiliesHasChanges =\n\t\t!! globalStyles?.edits?.settings?.typography?.fontFamilies;\n\n\tconst themeFonts = fontFamilies?.theme\n\t\t? fontFamilies.theme\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\tconst themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );\n\tconst baseThemeFonts = baseFontFamilies?.theme\n\t\t? themeFonts.concat(\n\t\t\t\tbaseFontFamilies.theme\n\t\t\t\t\t.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )\n\t\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t  )\n\t\t: [];\n\n\tconst customFontFamilyId =\n\t\tlibraryFontSelected?.source === 'custom' && libraryFontSelected?.id;\n\n\tconst canUserDelete = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser } = select( coreStore );\n\t\t\treturn (\n\t\t\t\tcustomFontFamilyId &&\n\t\t\t\tcanUser( 'delete', {\n\t\t\t\t\tkind: 'postType',\n\t\t\t\t\tname: 'wp_font_family',\n\t\t\t\t\tid: customFontFamilyId,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ customFontFamilyId ]\n\t);\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected &&\n\t\tlibraryFontSelected?.source !== 'theme' &&\n\t\tcanUserDelete;\n\n\tconst handleUninstallClick = () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleUpdate = async () => {\n\t\tsetNotice( null );\n\t\ttry {\n\t\t\tawait saveFontFamilies( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family updated successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: sprintf(\n\t\t\t\t\t/* translators: %s: error message */\n\t\t\t\t\t__( 'There was an error updating the font family. %s' ),\n\t\t\t\t\t( error as Error ).message\n\t\t\t\t),\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst getFontFacesToDisplay = ( font: FontFamily ) => {\n\t\tif ( ! font ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! font.fontFace || ! font.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( font.fontFace );\n\t};\n\n\tconst getFontCardVariantsText = ( font: FontFamily ) => {\n\t\tconst variantsInstalled =\n\t\t\tfont?.fontFace && ( font?.fontFace?.length ?? 0 ) > 0\n\t\t\t\t? font.fontFace.length\n\t\t\t\t: 1;\n\t\tconst variantsActive = getFontFacesActivated(\n\t\t\tfont.slug,\n\t\t\tfont.source\n\t\t).length;\n\t\treturn sprintf(\n\t\t\t/* translators: 1: Active font variants, 2: Total font variants. */\n\t\t\t__( '%1$d/%2$d variants active' ),\n\t\t\tvariantsActive,\n\t\t\tvariantsInstalled\n\t\t);\n\t};\n\n\tuseEffect( () => {\n\t\thandleSetLibraryFontSelected( libraryFontSelected );\n\t}, [] );\n\n\t// Get activated fonts count.\n\tconst activeFontsCount = libraryFontSelected\n\t\t? getFontFacesActivated(\n\t\t\t\tlibraryFontSelected.slug,\n\t\t\t\tlibraryFontSelected.source\n\t\t  ).length\n\t\t: 0;\n\n\tconst selectedFontsCount =\n\t\tlibraryFontSelected?.fontFace?.length ??\n\t\t( libraryFontSelected?.fontFamily ? 1 : 0 );\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tactiveFontsCount > 0 && activeFontsCount !== selectedFontsCount;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked = activeFontsCount === selectedFontsCount;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tif ( ! libraryFontSelected || ! libraryFontSelected?.source ) {\n\t\t\treturn;\n\t\t}\n\t\tconst initialFonts =\n\t\t\tfontFamilies?.[ libraryFontSelected.source ]?.filter(\n\t\t\t\t( f ) => f.slug !== libraryFontSelected.slug\n\t\t\t) ?? [];\n\t\tconst newFonts = isSelectAllChecked\n\t\t\t? initialFonts\n\t\t\t: [ ...initialFonts, libraryFontSelected ];\n\n\t\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\t[ libraryFontSelected.source ]: newFonts,\n\t\t} );\n\n\t\tif ( libraryFontSelected.fontFace ) {\n\t\t\tlibraryFontSelected.fontFace.forEach( ( face ) => {\n\t\t\t\tif ( isSelectAllChecked ) {\n\t\t\t\t\tunloadFontFaceInBrowser( face, 'all' );\n\t\t\t\t} else {\n\t\t\t\t\tconst displaySrc = getDisplaySrcFromFontFace(\n\t\t\t\t\t\tface?.src ?? ''\n\t\t\t\t\t);\n\t\t\t\t\tif ( displaySrc ) {\n\t\t\t\t\t\tloadFontFaceInBrowser( face, displaySrc, 'all' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isResolvingLibrary && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isResolvingLibrary && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath={\n\t\t\t\t\t\t\tlibraryFontSelected ? '/fontFamily' : '/'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<VStack spacing=\"8\">\n\t\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! hasFonts && (\n\t\t\t\t\t\t\t\t\t<WCText as=\"p\">\n\t\t\t\t\t\t\t\t\t\t{ __( 'No fonts installed.' ) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts provided by the theme. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Theme', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\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\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts installed by the user. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Custom', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\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\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t{ libraryFontSelected && (\n\t\t\t\t\t\t\t\t<ConfirmDeleteDialog\n\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetIsOpen={ setIsConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetNotice={ setNotice }\n\t\t\t\t\t\t\t\t\tuninstallFontFamily={ uninstallFontFamily }\n\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected={\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected\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\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected &&\n\t\t\t\t\t\t\t\t\t\tgetFontFacesToDisplay(\n\t\t\t\t\t\t\t\t\t\t\tlibraryFontSelected\n\t\t\t\t\t\t\t\t\t\t).map( ( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\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</li>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t<HStack justify=\"flex-end\" className=\"font-library__footer\">\n\t\t\t\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ handleUpdate }\n\t\t\t\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisOpen,\n\tsetIsOpen,\n\tsetNotice,\n\tuninstallFontFamily,\n\thandleSetLibraryFontSelected,\n}: {\n\tfont: FontFamily;\n\tisOpen: boolean;\n\tsetIsOpen: ( isOpen: boolean ) => void;\n\tsetNotice: (\n\t\tnotice: {\n\t\t\ttype: 'success' | 'error' | 'info';\n\t\t\tmessage: string;\n\t\t} | null\n\t) => void;\n\tuninstallFontFamily: (\n\t\tfontFamily: FontFamily\n\t) => Promise< { deleted: boolean } >;\n\thandleSetLibraryFontSelected: ( font?: FontFamily ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\t\tsetIsOpen( false );\n\t\ttry {\n\t\t\tawait uninstallFontFamily( font );\n\t\t\tnavigator.goBack();\n\t\t\thandleSetLibraryFontSelected( undefined );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family.' ) +\n\t\t\t\t\t( error as Error ).message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsOpen( false );\n\t};\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\tonCancel={ handleCancelUninstall }\n\t\t\tonConfirm={ handleConfirmUninstall }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t{ font &&\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: Name of the font. */\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Are you sure you want to delete \"%s\" font and all its variants and assets?'\n\t\t\t\t\t),\n\t\t\t\t\tfont.name\n\t\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default InstalledFonts;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/font-library/upload-fonts.mjs

@@ -1,7 +1,7 @@
 // packages/global-styles-ui/src/font-library/upload-fonts.tsx
 import { __ } from "@wordpress/i18n";
 import {
-  __experimentalText as Text,
+  __experimentalText as WCText,
   __experimentalVStack as VStack,
   Button,
   DropZone,
@@ -173,7 +173,7 @@ function UploadFonts() {
           )
         }
       ),
-      /* @__PURE__ */ jsx(Text, { className: "font-library__upload-area__text", children: __(
+      /* @__PURE__ */ jsx(WCText, { className: "font-library__upload-area__text", children: __(
         "Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2."
       ) })
     ] })

package/build-module/font-library/upload-fonts.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-library/upload-fonts.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tButton,\n\tDropZone,\n\tNotice,\n\tFormFileUpload,\n\tFlexItem,\n\tProgressBar,\n} from '@wordpress/components';\nimport { useContext, useState } from '@wordpress/element';\nimport type { FontFace } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from './lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\n\nfunction UploadFonts() {\n\tconst { installFonts } = useContext( FontLibraryContext );\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error';\n\t\tmessage: string;\n\t\terrors?: string[];\n\t} | null >( null );\n\n\tconst handleDropZone = ( files: File[] ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = async ( files: FileList | File[] | null ) => {\n\t\tif ( ! files ) {\n\t\t\treturn;\n\t\t}\n\t\tsetNotice( null );\n\t\tsetIsUploading( true );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tlet hasInvalidFiles = false;\n\n\t\t// Use map to create a promise for each file check, then filter with Promise.all.\n\t\tconst checkFilesPromises = selectedFiles.map( async ( file ) => {\n\t\t\tconst isFont = await isFontFile( file );\n\t\t\tif ( ! isFont ) {\n\t\t\t\thasInvalidFiles = true;\n\t\t\t\treturn null; // Return null for invalid files.\n\t\t\t}\n\t\t\t// Check for duplicates\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn null; // Return null for duplicates.\n\t\t\t}\n\t\t\t// Check if the file extension is allowed.\n\t\t\tconst fileExtension = (\n\t\t\t\t( ( file.name ?? '' ).split( '.' ) ?? [] ).pop() ?? ''\n\t\t\t).toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn file; // Return the file if it passes all checks.\n\t\t\t}\n\t\t\treturn null; // Return null for disallowed file extensions.\n\t\t} );\n\n\t\t// Filter out the nulls after all promises have resolved.\n\t\tconst allowedFiles: File[] = (\n\t\t\tawait Promise.all( checkFilesPromises )\n\t\t).filter( ( file ) => null !== file );\n\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t} else {\n\t\t\tconst message = hasInvalidFiles\n\t\t\t\t? __( 'Sorry, you are not allowed to upload this file type.' )\n\t\t\t\t: __( 'No fonts found to install.' );\n\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage,\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files: File[] ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile: File ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\thandleInstall( fontFacesLoaded );\n\t};\n\n\t/**\n\t * Checks if a file is a valid Font file.\n\t *\n\t * @param {File} file The file to be checked.\n\t * @return {boolean} Whether the file is a valid font file.\n\t */\n\tasync function isFontFile( file: File ) {\n\t\tconst font = new Font( 'Uploaded Font' );\n\t\ttry {\n\t\t\tconst buffer = await readFileAsArrayBuffer( file );\n\t\t\tawait font.fromDataBuffer( buffer, 'font' );\n\t\t\treturn true;\n\t\t} catch {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file: File ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile: File ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj: Font & {\n\t\t\tonload?: ( val: { detail: { font: any } } ) => void;\n\t\t} = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent: { detail: { font: any } } = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag }: { tag: string } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces: FontFace[] ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\n\t\ttry {\n\t\t\tawait installFonts( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tconst typedError = error as Error & {\n\t\t\t\tinstallationErrors?: string[];\n\t\t\t};\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: typedError.message,\n\t\t\t\terrors: typedError?.installationErrors,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library__local-fonts\" justify=\"start\">\n\t\t\t\t{ notice && (\n\t\t\t\t\t<Notice\n\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t__unstableHTML\n\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t{ notice.errors && (\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{ notice.errors.map( ( error, index ) => (\n\t\t\t\t\t\t\t\t\t<li key={ index }>{ error }</li>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Notice>\n\t\t\t\t) }\n\t\t\t\t{ isUploading && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<div className=\"font-library__upload-area\">\n\t\t\t\t\t\t\t<ProgressBar />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isUploading && (\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tclassName=\"font-library__upload-area\"\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Upload font' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Text className=\"font-library__upload-area__text\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default UploadFonts;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalText as WCText,\n\t__experimentalVStack as VStack,\n\tButton,\n\tDropZone,\n\tNotice,\n\tFormFileUpload,\n\tFlexItem,\n\tProgressBar,\n} from '@wordpress/components';\nimport { useContext, useState } from '@wordpress/element';\nimport type { FontFace } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from './lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\n\nfunction UploadFonts() {\n\tconst { installFonts } = useContext( FontLibraryContext );\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error';\n\t\tmessage: string;\n\t\terrors?: string[];\n\t} | null >( null );\n\n\tconst handleDropZone = ( files: File[] ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = async ( files: FileList | File[] | null ) => {\n\t\tif ( ! files ) {\n\t\t\treturn;\n\t\t}\n\t\tsetNotice( null );\n\t\tsetIsUploading( true );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tlet hasInvalidFiles = false;\n\n\t\t// Use map to create a promise for each file check, then filter with Promise.all.\n\t\tconst checkFilesPromises = selectedFiles.map( async ( file ) => {\n\t\t\tconst isFont = await isFontFile( file );\n\t\t\tif ( ! isFont ) {\n\t\t\t\thasInvalidFiles = true;\n\t\t\t\treturn null; // Return null for invalid files.\n\t\t\t}\n\t\t\t// Check for duplicates\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn null; // Return null for duplicates.\n\t\t\t}\n\t\t\t// Check if the file extension is allowed.\n\t\t\tconst fileExtension = (\n\t\t\t\t( ( file.name ?? '' ).split( '.' ) ?? [] ).pop() ?? ''\n\t\t\t).toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn file; // Return the file if it passes all checks.\n\t\t\t}\n\t\t\treturn null; // Return null for disallowed file extensions.\n\t\t} );\n\n\t\t// Filter out the nulls after all promises have resolved.\n\t\tconst allowedFiles: File[] = (\n\t\t\tawait Promise.all( checkFilesPromises )\n\t\t).filter( ( file ) => null !== file );\n\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t} else {\n\t\t\tconst message = hasInvalidFiles\n\t\t\t\t? __( 'Sorry, you are not allowed to upload this file type.' )\n\t\t\t\t: __( 'No fonts found to install.' );\n\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage,\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files: File[] ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile: File ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\thandleInstall( fontFacesLoaded );\n\t};\n\n\t/**\n\t * Checks if a file is a valid Font file.\n\t *\n\t * @param {File} file The file to be checked.\n\t * @return {boolean} Whether the file is a valid font file.\n\t */\n\tasync function isFontFile( file: File ) {\n\t\tconst font = new Font( 'Uploaded Font' );\n\t\ttry {\n\t\t\tconst buffer = await readFileAsArrayBuffer( file );\n\t\t\tawait font.fromDataBuffer( buffer, 'font' );\n\t\t\treturn true;\n\t\t} catch {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file: File ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile: File ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj: Font & {\n\t\t\tonload?: ( val: { detail: { font: any } } ) => void;\n\t\t} = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent: { detail: { font: any } } = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag }: { tag: string } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces: FontFace[] ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\n\t\ttry {\n\t\t\tawait installFonts( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tconst typedError = error as Error & {\n\t\t\t\tinstallationErrors?: string[];\n\t\t\t};\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: typedError.message,\n\t\t\t\terrors: typedError?.installationErrors,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library__local-fonts\" justify=\"start\">\n\t\t\t\t{ notice && (\n\t\t\t\t\t<Notice\n\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t__unstableHTML\n\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t{ notice.errors && (\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{ notice.errors.map( ( error, index ) => (\n\t\t\t\t\t\t\t\t\t<li key={ index }>{ error }</li>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Notice>\n\t\t\t\t) }\n\t\t\t\t{ isUploading && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<div className=\"font-library__upload-area\">\n\t\t\t\t\t\t\t<ProgressBar />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isUploading && (\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tclassName=\"font-library__upload-area\"\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Upload font' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<WCText className=\"font-library__upload-area__text\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'\n\t\t\t\t\t) }\n\t\t\t\t</WCText>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default UploadFonts;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/pagination/index.mjs

@@ -2,7 +2,7 @@
 import clsx from "clsx";
 import {
   __experimentalHStack as HStack,
-  __experimentalText as Text,
+  __experimentalText as WCText,
   Button
 } from "@wordpress/components";
 import { __, _x, _n, sprintf, isRTL } from "@wordpress/i18n";
@@ -29,7 +29,7 @@ function Pagination({
       className: clsx("global-styles-ui-pagination", className),
       children: [
         /* @__PURE__ */ jsx(
-          Text,
+          WCText,
           {
             variant: "muted",
             className: "global-styles-ui-pagination__total",
@@ -66,7 +66,7 @@ function Pagination({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Text, { variant: "muted", children: sprintf(
+        /* @__PURE__ */ jsx(WCText, { variant: "muted", children: sprintf(
           // translators: 1: Current page number. 2: Total number of pages.
           _x("%1$d of %2$d", "paging"),
           currentPage,

package/build-module/pagination/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/pagination/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';\n\ninterface PaginationProps {\n\tcurrentPage: number;\n\tnumPages: number;\n\tchangePage: ( page: number ) => void;\n\ttotalItems: number;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary';\n\tlabel?: string;\n}\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n\tclassName,\n\tdisabled = false,\n\tbuttonVariant = 'tertiary',\n\tlabel = __( 'Pagination' ),\n}: PaginationProps ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tas=\"nav\"\n\t\t\taria-label={ label }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName={ clsx( 'global-styles-ui-pagination', className ) }\n\t\t>\n\t\t\t<Text\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tclassName=\"global-styles-ui-pagination__total\"\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %d: Total number of patterns.\n\t\t\t\t\t_n( '%d item', '%d items', totalItems ),\n\t\t\t\t\ttotalItems\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: Current page number. 2: Total number of pages.\n\t\t\t\t\t_x( '%1$d of %2$d', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,IAAI,IAAI,IAAI,SAAS,aAAa;AAC3C,SAAS,UAAU,aAAa,cAAc,YAAY;AAgCvD,cAUA,YAVA;AAnBY,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,QAAQ,GAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAY,KAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,cAED,GAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,CAAE;AAAA,cAC9B,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,YAAa;AAAA,cACzB,MAAO,MAAM,IAAI,OAAO;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,eAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,oBAAC,QAAK,SAAQ,SACX;AAAA;AAAA,UAED,GAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,cAAc;AAAA,cAC/B,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,QAAS;AAAA,cACrC,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as WCText,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';\n\ninterface PaginationProps {\n\tcurrentPage: number;\n\tnumPages: number;\n\tchangePage: ( page: number ) => void;\n\ttotalItems: number;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary';\n\tlabel?: string;\n}\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n\tclassName,\n\tdisabled = false,\n\tbuttonVariant = 'tertiary',\n\tlabel = __( 'Pagination' ),\n}: PaginationProps ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tas=\"nav\"\n\t\t\taria-label={ label }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName={ clsx( 'global-styles-ui-pagination', className ) }\n\t\t>\n\t\t\t<WCText\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tclassName=\"global-styles-ui-pagination__total\"\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %d: Total number of patterns.\n\t\t\t\t\t_n( '%d item', '%d items', totalItems ),\n\t\t\t\t\ttotalItems\n\t\t\t\t) }\n\t\t\t</WCText>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<WCText variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: Current page number. 2: Total number of pages.\n\t\t\t\t\t_x( '%1$d of %2$d', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</WCText>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,IAAI,IAAI,IAAI,SAAS,aAAa;AAC3C,SAAS,UAAU,aAAa,cAAc,YAAY;AAgCvD,cAUA,YAVA;AAnBY,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,QAAQ,GAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAY,KAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,cAED,GAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,CAAE;AAAA,cAC9B,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,YAAa;AAAA,cACzB,MAAO,MAAM,IAAI,OAAO;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,eAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,oBAAC,UAAO,SAAQ,SACb;AAAA;AAAA,UAED,GAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,cAAc;AAAA,cAC/B,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,QAAS;AAAA,cACrC,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/palette.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/palette.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t// TODO: Replace this ZStack with ad hoc CSS.\n\t// eslint-disable-next-line @wordpress/use-recommended-components\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS: Color[] = [];\n\ninterface PaletteProps {\n\tname?: string;\n}\n\nfunction Palette( { name }: PaletteProps ) {\n\tconst [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst safeCustomColors = customColors || EMPTY_COLORS;\n\tconst safeThemeColors = themeColors || EMPTY_COLORS;\n\tconst safeDefaultColors = defaultColors || EMPTY_COLORS;\n\tconst safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...safeCustomColors,\n\t\t\t...safeThemeColors,\n\t\t\t...( safeDefaultColors && safeDefaultPaletteEnabled\n\t\t\t\t? safeDefaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[\n\t\t\tsafeCustomColors,\n\t\t\tsafeThemeColors,\n\t\t\tsafeDefaultColors,\n\t\t\tsafeDefaultPaletteEnabled,\n\t\t]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length > 0 ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\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</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t{ __( 'Edit palette' ) }\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\t\t\t\t\t) }\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 Palette;\n"],
-  "mappings": ";AAGA;AAAA,EACC,2BAA2B;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,EAGxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,MAAM,aAAa,oBAAoB;AAChD,SAAS,eAAe;AAMxB,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,OAAO,2BAA2B;AAClC,SAAS,kBAAkB;AA4CxB,SAKI,UALJ,KAKI,YALJ;AA1CH,IAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,IAAI,WAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,IAAI,WAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,IAAI,WAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,SAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAK,qBAAqB,4BACvB,oBACA;AAAA,IACJ;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,OAClB,oBACA,aAAa,mBAAoB,IAAK,IAAI;AAE7C,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,SAAU,GAAG;AAAA,IACzC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAChC,8BAAC,0BAAuB,MAAO,YAC9B,+BAAC,UAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,iCACC;AAAA,4BAAC,UAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC;AAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,oBAAC,YAAS,SAAO,MACd,aAAI,cAAe,GACtB;AAAA,SACD,IAEA,oBAAC,YAAW,aAAI,YAAa,GAAG;AAAA,MAEjC,oBAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS: Color[] = [];\n\ninterface PaletteProps {\n\tname?: string;\n}\n\nfunction Palette( { name }: PaletteProps ) {\n\tconst [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst safeCustomColors = customColors || EMPTY_COLORS;\n\tconst safeThemeColors = themeColors || EMPTY_COLORS;\n\tconst safeDefaultColors = defaultColors || EMPTY_COLORS;\n\tconst safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...safeCustomColors,\n\t\t\t...safeThemeColors,\n\t\t\t...( safeDefaultColors && safeDefaultPaletteEnabled\n\t\t\t\t? safeDefaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[\n\t\t\tsafeCustomColors,\n\t\t\tsafeThemeColors,\n\t\t\tsafeDefaultColors,\n\t\t\tsafeDefaultPaletteEnabled,\n\t\t]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length > 0 ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\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</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t{ __( 'Edit palette' ) }\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\t\t\t\t\t) }\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 Palette;\n"],
+  "mappings": ";AAGA;AAAA,EACC,2BAA2B;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,MAAM,aAAa,oBAAoB;AAChD,SAAS,eAAe;AAMxB,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,OAAO,2BAA2B;AAClC,SAAS,kBAAkB;AA4CxB,SAKI,UALJ,KAKI,YALJ;AA1CH,IAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,IAAI,WAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,IAAI,WAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,IAAI,WAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,SAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAK,qBAAqB,4BACvB,oBACA;AAAA,IACJ;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,OAClB,oBACA,aAAa,mBAAoB,IAAK,IAAI;AAE7C,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,SAAU,GAAG;AAAA,IACzC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAChC,8BAAC,0BAAuB,MAAO,YAC9B,+BAAC,UAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,iCACC;AAAA,4BAAC,UAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC;AAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,oBAAC,YAAS,SAAO,MACd,aAAI,cAAe,GACtB;AAAA,SACD,IAEA,oBAAC,YAAW,aAAI,YAAa,GAAG;AAAA,MAEjC,oBAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/preview-wrapper.mjs

@@ -1,4 +1,5 @@
 // packages/global-styles-ui/src/preview-wrapper.tsx
+import clsx from "clsx";
 import { __unstableMotion as motion } from "@wordpress/components";
 import {
   useThrottle,
@@ -53,7 +54,9 @@ function PreviewWrapper({
     isReady && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "global-styles-ui-preview__wrapper",
+        className: clsx("global-styles-ui-preview__wrapper", {
+          "is-hoverable": withHoverView
+        }),
         style: {
           height: normalizedHeight * ratio
         },
@@ -66,8 +69,7 @@ function PreviewWrapper({
             style: {
               height: normalizedHeight * ratio,
               width: "100%",
-              background: gradientValue ?? backgroundColor,
-              cursor: withHoverView ? "pointer" : void 0
+              background: gradientValue ?? backgroundColor
             },
             initial: "start",
             animate: (isHovered || isFocused) && !disableMotion && label ? "hover" : "start",

package/build-module/preview-wrapper.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/preview-wrapper.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container  at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"global-styles-ui-preview__wrapper\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
-  "mappings": ";AAGA,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,gBAAgB;AAgFvB,mBACC,KADD;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,gBAAiB;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAA+B;AAErE,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,cAC7B,QAAQ,gBAAgB,YAAY;AAAA,YACrC;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container  at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'global-styles-ui-preview__wrapper', {\n\t\t\t\t\t\t'is-hoverable': withHoverView,\n\t\t\t\t\t} ) }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,gBAAgB;AAgFvB,mBACC,KADD;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,gBAAiB;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAA+B;AAErE,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM,qCAAqC;AAAA,UACtD,gBAAgB;AAAA,QACjB,CAAE;AAAA,QACF,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,YAC9B;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
   "names": []
 }

package/build-module/screen-background.mjs

@@ -1,7 +1,7 @@
 // packages/global-styles-ui/src/screen-background.tsx
 import { __ } from "@wordpress/i18n";
 import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import { __experimentalText as Text } from "@wordpress/components";
+import { __experimentalText as WCText } from "@wordpress/components";
 import BackgroundPanel from "./background-panel.mjs";
 import { ScreenHeader } from "./screen-header.mjs";
 import { useSetting } from "./hooks.mjs";
@@ -16,7 +16,7 @@ function ScreenBackground() {
       ScreenHeader,
       {
         title: __("Background"),
-        description: /* @__PURE__ */ jsx(Text, { children: __("Set styles for the site's background.") })
+        description: /* @__PURE__ */ jsx(WCText, { children: __("Set styles for the site's background.") })
       }
     ),
     hasBackgroundPanel && /* @__PURE__ */ jsx(BackgroundPanel, {})

package/build-module/screen-background.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-background.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as Text } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</Text>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,YAAY;AAK3C,OAAO,qBAAqB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAQrB,mBAIG,KAJH;AANF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,QACE,aAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as WCText } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<WCText>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</WCText>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,cAAc;AAK7C,OAAO,qBAAqB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAQrB,mBAIG,KAJH;AANF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,UACE,aAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
   "names": []
 }

package/build-module/screen-block-list.mjs

@@ -5,7 +5,7 @@ import {
   FlexItem,
   SearchControl,
   __experimentalHStack as HStack,
-  __experimentalText as Text
+  __experimentalText as WCText
 } from "@wordpress/components";
 import { useSelect } from "@wordpress/data";
 import {
@@ -105,7 +105,7 @@ function BlockList({ filterValue }) {
       ref: blockTypesListRef,
       className: "global-styles-ui-block-types-item-list",
       role: "list",
-      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ jsx(Text, { align: "center", as: "p", children: __("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ jsx(
+      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ jsx(WCText, { align: "center", as: "p", children: __("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ jsx(
         BlockMenuItem,
         {
           block

package/build-module/screen-block-list.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-block-list.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t  );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<Text align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</Text>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as WCText,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t  );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<WCText align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</WCText>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/screen-header.mjs

@@ -5,7 +5,7 @@ import {
   __experimentalSpacer as Spacer,
   __experimentalHeading as Heading,
   __experimentalView as View,
-  __experimentalText as Text,
+  __experimentalText as WCText,
   Navigator
 } from "@wordpress/components";
 import { isRTL, __ } from "@wordpress/i18n";
@@ -60,7 +60,7 @@ function ScreenHeader({
         }
       ) })
     ] }),
-    description && /* @__PURE__ */ jsx(Text, { className: "global-styles-ui-header__description", children: description })
+    description && /* @__PURE__ */ jsx(WCText, { className: "global-styles-ui-header__description", children: description })
   ] }) }) }) });
 }
 export {

package/build-module/screen-header.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalText as Text,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { StateDefinition } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { StateControl } = unlock( blockEditorPrivateApis );\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n\tstates?: StateDefinition[];\n\tselectedState?: string;\n\tonChangeState?: ( value: string ) => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n\tstates,\n\tselectedState = 'default',\n\tonChangeState,\n}: ScreenHeaderProps ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\tstates={ states }\n\t\t\t\t\t\t\t\t\t\tvalue={ selectedState }\n\t\t\t\t\t\t\t\t\t\tonChange={ onChangeState }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t<Text className=\"global-styles-ui-header__description\">\n\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,eAAe,8BAA8B;AAMtD,SAAS,cAAc;AA2BhB,cAOC,YAPD;AAzBP,IAAM,EAAE,aAAa,IAAI,OAAQ,sBAAuB;AAWjD,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAAuB;AACtB,SACC,oBAAC,UAAO,SAAU,GACjB,8BAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA,yBAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAQ;AAAA,UACR,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,OAAQ;AAAA,gBACR,MAAO;AAAA,gBAEL;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,QAAK,WAAU,wCACb,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalText as WCText,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { StateDefinition } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { StateControl } = unlock( blockEditorPrivateApis );\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n\tstates?: StateDefinition[];\n\tselectedState?: string;\n\tonChangeState?: ( value: string ) => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n\tstates,\n\tselectedState = 'default',\n\tonChangeState,\n}: ScreenHeaderProps ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\tstates={ states }\n\t\t\t\t\t\t\t\t\t\tvalue={ selectedState }\n\t\t\t\t\t\t\t\t\t\tonChange={ onChangeState }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t<WCText className=\"global-styles-ui-header__description\">\n\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,eAAe,8BAA8B;AAMtD,SAAS,cAAc;AA2BhB,cAOC,YAPD;AAzBP,IAAM,EAAE,aAAa,IAAI,OAAQ,sBAAuB;AAWjD,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAAuB;AACtB,SACC,oBAAC,UAAO,SAAU,GACjB,8BAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA,yBAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAQ;AAAA,UACR,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,OAAQ;AAAA,gBACR,MAAO;AAAA,gBAEL;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,UAAO,WAAU,wCACf,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
   "names": []
 }