@wordpress/edit-site 5.19.2 → 5.20.0

package/build/components/global-styles/font-library-modal/font-collection.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
@@ -19,6 +20,7 @@ var _collectionFontDetails = _interopRequireDefault(require("./collection-font-d
 var _toggleFont = require("./utils/toggleFont");
 var _fontsOutline = require("./utils/fonts-outline");
 var _googleFontsConfirmDialog = _interopRequireDefault(require("./google-fonts-confirm-dialog"));
+var _getNoticeFromResponse = require("./utils/get-notice-from-response");
 /**
  * WordPress dependencies
  */
@@ -39,13 +41,15 @@ function FontCollection({
   const getGoogleFontsPermissionFromStorage = () => {
     return window.localStorage.getItem('wp-font-library-default-font-collection-permission') === 'true';
   };
+  const [notice, setNotice] = (0, _element.useState)(null);
   const [selectedFont, setSelectedFont] = (0, _element.useState)(null);
   const [fontsToInstall, setFontsToInstall] = (0, _element.useState)([]);
   const [filters, setFilters] = (0, _element.useState)({});
   const [renderConfirmDialog, setRenderConfirmDialog] = (0, _element.useState)(requiresPermission && !getGoogleFontsPermissionFromStorage());
   const {
     collections,
-    getFontCollection
+    getFontCollection,
+    installFonts
   } = (0, _element.useContext)(_context.FontLibraryContext);
   const selectedCollection = collections.find(collection => collection.id === id);
   (0, _element.useEffect)(() => {
@@ -63,6 +67,16 @@ function FontCollection({
   (0, _element.useEffect)(() => {
     setSelectedFont(null);
   }, [id]);
+
+  // Reset notice after 5 seconds
+  (0, _element.useEffect)(() => {
+    if (notice) {
+      const timeout = setTimeout(() => {
+        setNotice(null);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [notice]);
   const collectionFonts = (0, _element.useMemo)(() => {
     var _selectedCollection$d;
     return (_selectedCollection$d = selectedCollection?.data?.fontFamilies) !== null && _selectedCollection$d !== void 0 ? _selectedCollection$d : [];
@@ -103,42 +117,55 @@ function FontCollection({
   const resetFontsToInstall = () => {
     setFontsToInstall([]);
   };
-  return (0, _element.createElement)(_tabLayout.default, {
+  const handleInstall = async () => {
+    const response = await installFonts(fontsToInstall);
+    const installNotice = (0, _getNoticeFromResponse.getNoticeFromInstallResponse)(response);
+    setNotice(installNotice);
+    resetFontsToInstall();
+  };
+  return (0, _react.createElement)(_tabLayout.default, {
     title: !selectedFont ? selectedCollection.name : selectedFont.name,
     description: !selectedFont ? selectedCollection.description : (0, _i18n.__)('Select font variants to install.'),
     handleBack: !!selectedFont && handleUnselectFont,
-    footer: fontsToInstall.length > 0 && (0, _element.createElement)(Footer, {
-      fontsToInstall: fontsToInstall,
-      resetFontsToInstall: resetFontsToInstall
+    footer: fontsToInstall.length > 0 && (0, _react.createElement)(Footer, {
+      handleInstall: handleInstall
     })
-  }, renderConfirmDialog && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+  }, renderConfirmDialog && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 8
-  }), (0, _element.createElement)(_googleFontsConfirmDialog.default, null)), !renderConfirmDialog && !selectedCollection.data && (0, _element.createElement)(_components.Spinner, null), !renderConfirmDialog && !selectedFont && (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.__experimentalInputControl, {
+  }), (0, _react.createElement)(_googleFontsConfirmDialog.default, null)), !renderConfirmDialog && !selectedCollection.data && (0, _react.createElement)(_components.Spinner, null), notice && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 2
+  }), (0, _react.createElement)(_components.Notice, {
+    isDismissible: false,
+    status: notice.type,
+    className: "font-library-modal__font-collection__notice"
+  }, notice.message)), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 2
+  })), !renderConfirmDialog && !selectedFont && (0, _react.createElement)(_components.Flex, null, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalInputControl, {
     value: filters.search,
     placeholder: (0, _i18n.__)('Font name…'),
     label: (0, _i18n.__)('Search'),
     onChange: debouncedUpdateSearchInput,
-    prefix: (0, _element.createElement)(_components.Icon, {
+    prefix: (0, _react.createElement)(_components.Icon, {
       icon: _icons.search
     }),
-    suffix: filters?.search ? (0, _element.createElement)(_components.Icon, {
+    suffix: filters?.search ? (0, _react.createElement)(_components.Icon, {
       icon: _icons.closeSmall,
       onClick: resetSearch
     }) : null
-  })), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.SelectControl, {
+  })), (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.SelectControl, {
     label: (0, _i18n.__)('Category'),
     value: filters.category,
     onChange: handleCategoryFilter
-  }, categories && categories.map(category => (0, _element.createElement)("option", {
+  }, categories && categories.map(category => (0, _react.createElement)("option", {
     value: category.id,
     key: category.id
-  }, category.name))))), (0, _element.createElement)(_components.__experimentalSpacer, {
+  }, category.name))))), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 4
-  }), !renderConfirmDialog && !selectedCollection?.data?.fontFamilies && (0, _element.createElement)(_components.Spinner, null), !renderConfirmDialog && !!selectedCollection?.data?.fontFamilies?.length && !fonts.length && (0, _element.createElement)(_components.__experimentalText, null, (0, _i18n.__)('No fonts found. Try with a different seach term')), !renderConfirmDialog && selectedFont && (0, _element.createElement)(_collectionFontDetails.default, {
+  }), !renderConfirmDialog && !selectedCollection?.data?.fontFamilies && (0, _react.createElement)(_components.Spinner, null), !renderConfirmDialog && !!selectedCollection?.data?.fontFamilies?.length && !fonts.length && (0, _react.createElement)(_components.__experimentalText, null, (0, _i18n.__)('No fonts found. Try with a different seach term')), !renderConfirmDialog && selectedFont && (0, _react.createElement)(_collectionFontDetails.default, {
     font: selectedFont,
     handleToggleVariant: handleToggleVariant,
     fontToInstallOutline: fontToInstallOutline
-  }), !renderConfirmDialog && !selectedFont && (0, _element.createElement)(_fontsGrid.default, null, fonts.map(font => (0, _element.createElement)(_fontCard.default, {
+  }), !renderConfirmDialog && !selectedFont && (0, _react.createElement)(_fontsGrid.default, null, fonts.map(font => (0, _react.createElement)(_fontCard.default, {
     key: font.slug,
     font: font,
     onClick: () => {
@@ -147,20 +174,14 @@ function FontCollection({
   }))));
 }
 function Footer({
-  fontsToInstall,
-  resetFontsToInstall
+  handleInstall
 }) {
   const {
-    installFonts,
     isInstalling
   } = (0, _element.useContext)(_context.FontLibraryContext);
-  const handleInstall = async () => {
-    await installFonts(fontsToInstall);
-    resetFontsToInstall();
-  };
-  return (0, _element.createElement)(_components.Flex, {
+  return (0, _react.createElement)(_components.Flex, {
     justify: "flex-end"
-  }, (0, _element.createElement)(_components.Button, {
+  }, (0, _react.createElement)(_components.Button, {
     variant: "primary",
     onClick: handleInstall,
     isBusy: isInstalling,

package/build/components/global-styles/font-library-modal/font-collection.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_compose","_i18n","_icons","_tabLayout","_interopRequireDefault","_context","_fontsGrid","_fontCard","_filterFonts","_collectionFontDetails","_toggleFont","_fontsOutline","_googleFontsConfirmDialog","DEFAULT_CATEGORY","id","name","__","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","useState","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","useContext","FontLibraryContext","selectedCollection","find","collection","useEffect","handleStorage","addEventListener","removeEventListener","resetFilters","collectionFonts","useMemo","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","filterFonts","handleCategoryFilter","category","handleUpdateSearchInput","value","search","debouncedUpdateSearchInput","debounce","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","toggleFont","fontToInstallOutline","getFontsOutline","resetFontsToInstall","createElement","default","title","description","handleBack","footer","length","Footer","Fragment","__experimentalSpacer","margin","Spinner","Flex","FlexItem","__experimentalInputControl","placeholder","label","onChange","prefix","Icon","icon","suffix","closeSmall","onClick","SelectControl","map","key","__experimentalText","slug","installFonts","isInstalling","handleInstall","justify","Button","variant","isBusy","disabled","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\n\nconst DEFAULT_CATEGORY = {\n\tid: 'all',\n\tname: __( 'All' ),\n};\nfunction FontCollection( { id } ) {\n\tconst requiresPermission = id === 'default-font-collection';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-default-font-collection-permission'\n\t\t\t) === 'true'\n\t\t);\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection } = useContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.id === id\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ id, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tgetFontCollection( id );\n\t\tresetFilters();\n\t}, [ id, getFontCollection ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ id ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.data?.fontFamilies ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.data?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={\n\t\t\t\t! selectedFont ? selectedCollection.name : selectedFont.name\n\t\t\t}\n\t\t\tdescription={\n\t\t\t\t! selectedFont\n\t\t\t\t\t? selectedCollection.description\n\t\t\t\t\t: __( 'Select font variants to install.' )\n\t\t\t}\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\tfontsToInstall.length > 0 && (\n\t\t\t\t\t<Footer\n\t\t\t\t\t\tfontsToInstall={ fontsToInstall }\n\t\t\t\t\t\tresetFontsToInstall={ resetFontsToInstall }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedCollection.data && (\n\t\t\t\t<Spinner />\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tvalue={ category.id }\n\t\t\t\t\t\t\t\t\t\tkey={ category.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.data?.fontFamilies && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.data?.fontFamilies?.length &&\n\t\t\t\t! fonts.length && (\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'No fonts found. Try with a different seach term'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && selectedFont && (\n\t\t\t\t<CollectionFontDetails\n\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\tfontToInstallOutline={ fontToInstallOutline }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</FontsGrid>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { fontsToInstall, resetFontsToInstall } ) {\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\n\tconst handleInstall = async () => {\n\t\tawait installFonts( fontsToInstall );\n\t\tresetFontsToInstall();\n\t};\n\n\treturn (\n\t\t<Flex justify=\"flex-end\">\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ handleInstall }\n\t\t\t\tisBusy={ isInstalling }\n\t\t\t\tdisabled={ isInstalling }\n\t\t\t>\n\t\t\t\t{ __( 'Install' ) }\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}
+{"version":3,"names":["_element","require","_components","_compose","_i18n","_icons","_tabLayout","_interopRequireDefault","_context","_fontsGrid","_fontCard","_filterFonts","_collectionFontDetails","_toggleFont","_fontsOutline","_googleFontsConfirmDialog","_getNoticeFromResponse","DEFAULT_CATEGORY","id","name","__","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","notice","setNotice","useState","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","installFonts","useContext","FontLibraryContext","selectedCollection","find","collection","useEffect","handleStorage","addEventListener","removeEventListener","resetFilters","timeout","setTimeout","clearTimeout","collectionFonts","useMemo","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","filterFonts","handleCategoryFilter","category","handleUpdateSearchInput","value","search","debouncedUpdateSearchInput","debounce","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","toggleFont","fontToInstallOutline","getFontsOutline","resetFontsToInstall","handleInstall","response","installNotice","getNoticeFromInstallResponse","_react","createElement","default","title","description","handleBack","footer","length","Footer","Fragment","__experimentalSpacer","margin","Spinner","FlexItem","Notice","isDismissible","status","type","className","message","Flex","__experimentalInputControl","placeholder","label","onChange","prefix","Icon","icon","suffix","closeSmall","onClick","SelectControl","map","key","__experimentalText","slug","isInstalling","justify","Button","variant","isBusy","disabled","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n\tNotice,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { getNoticeFromInstallResponse } from './utils/get-notice-from-response';\n\nconst DEFAULT_CATEGORY = {\n\tid: 'all',\n\tname: __( 'All' ),\n};\nfunction FontCollection( { id } ) {\n\tconst requiresPermission = id === 'default-font-collection';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-default-font-collection-permission'\n\t\t\t) === 'true'\n\t\t);\n\t};\n\n\tconst [ notice, setNotice ] = useState( null );\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection, installFonts } =\n\t\tuseContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.id === id\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ id, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tgetFontCollection( id );\n\t\tresetFilters();\n\t}, [ id, getFontCollection ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ id ] );\n\n\t// Reset notice after 5 seconds\n\tuseEffect( () => {\n\t\tif ( notice ) {\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetNotice( null );\n\t\t\t}, 5000 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t}\n\t}, [ notice ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.data?.fontFamilies ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.data?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tconst response = await installFonts( fontsToInstall );\n\t\tconst installNotice = getNoticeFromInstallResponse( response );\n\t\tsetNotice( installNotice );\n\t\tresetFontsToInstall();\n\t};\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={\n\t\t\t\t! selectedFont ? selectedCollection.name : selectedFont.name\n\t\t\t}\n\t\t\tdescription={\n\t\t\t\t! selectedFont\n\t\t\t\t\t? selectedCollection.description\n\t\t\t\t\t: __( 'Select font variants to install.' )\n\t\t\t}\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\tfontsToInstall.length > 0 && (\n\t\t\t\t\t<Footer handleInstall={ handleInstall } />\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedCollection.data && (\n\t\t\t\t<Spinner />\n\t\t\t) }\n\n\t\t\t{ notice && (\n\t\t\t\t<>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__font-collection__notice\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tvalue={ category.id }\n\t\t\t\t\t\t\t\t\t\tkey={ category.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.data?.fontFamilies && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.data?.fontFamilies?.length &&\n\t\t\t\t! fonts.length && (\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'No fonts found. Try with a different seach term'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && selectedFont && (\n\t\t\t\t<CollectionFontDetails\n\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\tfontToInstallOutline={ fontToInstallOutline }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</FontsGrid>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { handleInstall } ) {\n\tconst { isInstalling } = useContext( FontLibraryContext );\n\n\treturn (\n\t\t<Flex justify=\"flex-end\">\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ handleInstall }\n\t\t\t\tisBusy={ isInstalling }\n\t\t\t\tdisabled={ isInstalling }\n\t\t\t>\n\t\t\t\t{ __( 'Install' ) }\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}

package/build/components/global-styles/font-library-modal/font-demo.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
 var _context = require("./context");
 var _previewStyles = require("./utils/preview-styles");
 /**
@@ -70,14 +71,14 @@ function FontFaceDemo({
     };
     loadAsset();
   }, [fontFace, isIntersecting, loadFontFaceAsset]);
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     ref: ref
-  }, isPreviewImage ? (0, _element.createElement)("img", {
+  }, isPreviewImage ? (0, _react.createElement)("img", {
     src: previewUrl,
     loading: "lazy",
     alt: text,
     style: imageDemoStyle
-  }) : (0, _element.createElement)(_components.__experimentalText, {
+  }) : (0, _react.createElement)(_components.__experimentalText, {
     style: textDemoStyle
   }, text));
 }

package/build/components/global-styles/font-library-modal/font-demo.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","useRef","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt","__experimentalText","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport { getFacePreviewStyle } from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {\n\tconst ref = useRef( null );\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\twhiteSpace: 'nowrap',\n\t\tflexShrink: 0,\n\t\tfontSize: '18px',\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\ttransition: 'opacity 0.3s ease-in-out',\n\t\t...faceStyles,\n\t\t...style,\n\t};\n\tconst imageDemoStyle = {\n\t\theight: '23px',\n\t\twidth: 'auto',\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tstyle={ imageDemoStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text style={ textDemoStyle }>{ text }</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_element","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","useRef","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","_react","createElement","loading","alt","__experimentalText","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport { getFacePreviewStyle } from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {\n\tconst ref = useRef( null );\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\twhiteSpace: 'nowrap',\n\t\tflexShrink: 0,\n\t\tfontSize: '18px',\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\ttransition: 'opacity 0.3s ease-in-out',\n\t\t...faceStyles,\n\t\t...style,\n\t};\n\tconst imageDemoStyle = {\n\t\theight: '23px',\n\t\twidth: 'auto',\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tstyle={ imageDemoStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text style={ textDemoStyle }>{ text }</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASI,aAAaA,CAAEC,QAAQ,EAAG;EAClC,IAAKA,QAAQ,CAACC,OAAO,EAAG;IACvB,OAAOD,QAAQ,CAACC,OAAO;EACxB;EACA,IAAKD,QAAQ,CAACE,GAAG,EAAG;IACnB,OAAOC,KAAK,CAACC,OAAO,CAAEJ,QAAQ,CAACE,GAAI,CAAC,GAAGF,QAAQ,CAACE,GAAG,CAAE,CAAC,CAAE,GAAGF,QAAQ,CAACE,GAAG;EACxE;AACD;AAEA,SAASG,YAAYA,CAAE;EAAEC,gBAAgB;EAAEN,QAAQ;EAAEO,IAAI;EAAEC,KAAK,GAAG,CAAC;AAAE,CAAC,EAAG;EACzE,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EAC1B,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC/D,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAF,iBAAQ,EAAE,KAAM,CAAC;EAC7D,MAAM;IAAEG;EAAkB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAE9D,MAAMC,UAAU,GAAGb,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIP,aAAa,CAAEC,QAAS,CAAC;EAChE,MAAMoB,cAAc,GACnBD,UAAU,IAAIA,UAAU,CAACE,KAAK,CAAE,4BAA6B,CAAC;EAE/D,MAAMC,UAAU,GAAG,IAAAC,kCAAmB,EAAEvB,QAAS,CAAC;EAClD,MAAMwB,aAAa,GAAG;IACrBC,UAAU,EAAE,QAAQ;IACpBC,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,MAAM;IAChBC,OAAO,EAAEd,aAAa,GAAG,GAAG,GAAG,GAAG;IAClCe,UAAU,EAAE,0BAA0B;IACtC,GAAGP,UAAU;IACb,GAAGd;EACJ,CAAC;EACD,MAAMsB,cAAc,GAAG;IACtBC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACR,CAAC;EAED,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;MAClEzB,iBAAiB,CAAEyB,KAAK,CAAC1B,cAAe,CAAC;IAC1C,CAAC,EAAE,CAAC,CAAE,CAAC;IACPuB,QAAQ,CAACI,OAAO,CAAE7B,GAAG,CAAC8B,OAAQ,CAAC;IAC/B,OAAO,MAAML,QAAQ,CAACM,UAAU,CAAC,CAAC;EACnC,CAAC,EAAE,CAAE/B,GAAG,CAAG,CAAC;EAEZ,IAAAwB,kBAAS,EAAE,MAAM;IAChB,MAAMQ,SAAS,GAAG,MAAAA,CAAA,KAAY;MAC7B,IAAK9B,cAAc,EAAG;QACrB,IAAK,CAAES,cAAc,IAAIpB,QAAQ,CAACE,GAAG,EAAG;UACvC,MAAMc,iBAAiB,CAAEhB,QAAS,CAAC;QACpC;QACAe,gBAAgB,CAAE,IAAK,CAAC;MACzB;IACD,CAAC;IACD0B,SAAS,CAAC,CAAC;EACZ,CAAC,EAAE,CAAEzC,QAAQ,EAAEW,cAAc,EAAEK,iBAAiB,CAAG,CAAC;EAEpD,OACC,IAAA0B,MAAA,CAAAC,aAAA;IAAKlC,GAAG,EAAGA;EAAK,GACbW,cAAc,GACf,IAAAsB,MAAA,CAAAC,aAAA;IACCzC,GAAG,EAAGiB,UAAY;IAClByB,OAAO,EAAC,MAAM;IACdC,GAAG,EAAGtC,IAAM;IACZC,KAAK,EAAGsB;EAAgB,CACxB,CAAC,GAEF,IAAAY,MAAA,CAAAC,aAAA,EAACjD,WAAA,CAAAoD,kBAAI;IAACtC,KAAK,EAAGgB;EAAe,GAAGjB,IAAY,CAEzC,CAAC;AAER;AAAC,IAAAwC,QAAA,GAEc1C,YAAY;AAAA2C,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/components/global-styles/font-library-modal/font-variant.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _components = require("@wordpress/components");
 var _fontDemo = _interopRequireDefault(require("./font-demo"));
 /**
@@ -29,19 +29,19 @@ function FontVariant({
     fontWeight
   } = fontFace;
   const displayVariantName = variantName || `${fontWeight} ${fontStyle}`;
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "font-library-modal__font-variant"
-  }, (0, _element.createElement)(_components.__experimentalVStack, {
+  }, (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 1
-  }, (0, _element.createElement)(_components.__experimentalHStack, {
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
     justify: "flex-start",
     alignment: "top"
-  }, !!actionHandler ? actionHandler : (0, _element.createElement)(_components.CheckboxControl, {
+  }, !!actionHandler ? actionHandler : (0, _react.createElement)(_components.CheckboxControl, {
     checked: checked,
     onChange: onClick
-  }), typeof displayVariantName === 'string' ? (0, _element.createElement)(_components.__experimentalText, null, displayVariantName) : displayVariantName), (0, _element.createElement)("div", {
+  }), typeof displayVariantName === 'string' ? (0, _react.createElement)(_components.__experimentalText, null, displayVariantName) : displayVariantName), (0, _react.createElement)("div", {
     className: "font-library-modal__font-variant_demo-wrapper"
-  }, (0, _element.createElement)(_fontDemo.default, {
+  }, (0, _react.createElement)(_fontDemo.default, {
     fontFace: fontFace,
     text: text
   }))));

package/build/components/global-styles/font-library-modal/font-variant.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_fontDemo","_interopRequireDefault","FontVariant","fontFace","variantName","checked","onClick","text","actionHandler","fontStyle","fontWeight","displayVariantName","_element","createElement","className","__experimentalVStack","spacing","__experimentalHStack","justify","alignment","CheckboxControl","onChange","__experimentalText","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tCheckboxControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontFaceDemo from './font-demo';\n\nfunction FontVariant( {\n\tfontFace,\n\tvariantName,\n\tchecked,\n\tonClick,\n\ttext,\n\tactionHandler,\n} ) {\n\tconst { fontStyle, fontWeight } = fontFace;\n\tconst displayVariantName = variantName || `${ fontWeight } ${ fontStyle }`;\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-variant\">\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t<HStack justify=\"flex-start\" alignment=\"top\">\n\t\t\t\t\t{ !! actionHandler ? (\n\t\t\t\t\t\tactionHandler\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\t\tonChange={ onClick }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ typeof displayVariantName === 'string' ? (\n\t\t\t\t\t\t<Text>{ displayVariantName }</Text>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tdisplayVariantName\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t<div className=\"font-library-modal__font-variant_demo-wrapper\">\n\t\t\t\t\t<FontFaceDemo fontFace={ fontFace } text={ text } />\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAUA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,SAASG,WAAWA,CAAE;EACrBC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGP,QAAQ;EAC1C,MAAMQ,kBAAkB,GAAGP,WAAW,IAAK,GAAGM,UAAY,IAAID,SAAW,EAAC;EAE1E,OACC,IAAAG,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAChD,IAAAF,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAJ,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAC,YAAY;IAACC,SAAS,EAAC;EAAK,GACzC,CAAC,CAAEX,aAAa,GACjBA,aAAa,GAEb,IAAAI,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,eAAe;IACff,OAAO,EAAGA,OAAS;IACnBgB,QAAQ,EAAGf;EAAS,CACpB,CACD,EACC,OAAOK,kBAAkB,KAAK,QAAQ,GACvC,IAAAC,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAwB,kBAAI,QAAGX,kBAA0B,CAAC,GAEnCA,kBAEM,CAAC,EACT,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA+C,GAC7D,IAAAF,QAAA,CAAAC,aAAA,EAACb,SAAA,CAAAuB,OAAY;IAACpB,QAAQ,EAAGA,QAAU;IAACI,IAAI,EAAGA;EAAM,CAAE,CAC/C,CACE,CACJ,CAAC;AAER;AAAC,IAAAiB,QAAA,GAEctB,WAAW;AAAAuB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_components","require","_fontDemo","_interopRequireDefault","FontVariant","fontFace","variantName","checked","onClick","text","actionHandler","fontStyle","fontWeight","displayVariantName","_react","createElement","className","__experimentalVStack","spacing","__experimentalHStack","justify","alignment","CheckboxControl","onChange","__experimentalText","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tCheckboxControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontFaceDemo from './font-demo';\n\nfunction FontVariant( {\n\tfontFace,\n\tvariantName,\n\tchecked,\n\tonClick,\n\ttext,\n\tactionHandler,\n} ) {\n\tconst { fontStyle, fontWeight } = fontFace;\n\tconst displayVariantName = variantName || `${ fontWeight } ${ fontStyle }`;\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-variant\">\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t<HStack justify=\"flex-start\" alignment=\"top\">\n\t\t\t\t\t{ !! actionHandler ? (\n\t\t\t\t\t\tactionHandler\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\t\tonChange={ onClick }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ typeof displayVariantName === 'string' ? (\n\t\t\t\t\t\t<Text>{ displayVariantName }</Text>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tdisplayVariantName\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t<div className=\"font-library-modal__font-variant_demo-wrapper\">\n\t\t\t\t\t<FontFaceDemo fontFace={ fontFace } text={ text } />\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAUA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,SAASG,WAAWA,CAAE;EACrBC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGP,QAAQ;EAC1C,MAAMQ,kBAAkB,GAAGP,WAAW,IAAK,GAAGM,UAAY,IAAID,SAAW,EAAC;EAE1E,OACC,IAAAG,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAChD,IAAAF,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAJ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAC,YAAY;IAACC,SAAS,EAAC;EAAK,GACzC,CAAC,CAAEX,aAAa,GACjBA,aAAa,GAEb,IAAAI,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,eAAe;IACff,OAAO,EAAGA,OAAS;IACnBgB,QAAQ,EAAGf;EAAS,CACpB,CACD,EACC,OAAOK,kBAAkB,KAAK,QAAQ,GACvC,IAAAC,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAwB,kBAAI,QAAGX,kBAA0B,CAAC,GAEnCA,kBAEM,CAAC,EACT,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA+C,GAC7D,IAAAF,MAAA,CAAAC,aAAA,EAACb,SAAA,CAAAuB,OAAY;IAACpB,QAAQ,EAAGA,QAAU;IAACI,IAAI,EAAGA;EAAM,CAAE,CAC/C,CACE,CACJ,CAAC;AAER;AAAC,IAAAiB,QAAA,GAEctB,WAAW;AAAAuB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

package/build/components/global-styles/font-library-modal/fonts-grid.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
 /**
  * WordPress dependencies
  */
@@ -30,19 +31,19 @@ function FontsGrid({
       return () => observer.disconnect();
     }
   }, [lastItem]);
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "font-library-modal__fonts-grid"
-  }, (0, _element.createElement)(_components.__experimentalVStack, {
+  }, (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 0
-  }, title && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalText, {
+  }, title && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalText, {
     className: "font-library-modal__subtitle"
-  }, title), (0, _element.createElement)(_components.__experimentalSpacer, {
+  }, title), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 2
-  })), (0, _element.createElement)("div", {
+  })), (0, _react.createElement)("div", {
     className: "font-library-modal__fonts-grid__main"
   }, items.map((child, i) => {
     if (i === itemsLimit - 1) {
-      return (0, _element.createElement)("div", {
+      return (0, _react.createElement)("div", {
         ref: setLastItem
       }, child);
     }

package/build/components/global-styles/font-library-modal/fonts-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","ref","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn <div ref={ setLastItem }>{ child }</div>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAD,OAAA;AAHA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAP,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAzB,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAAwB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBvB,KAAK,IACN,IAAAJ,QAAA,CAAAwB,aAAA,EAAAxB,QAAA,CAAA4B,QAAA,QACC,IAAA5B,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA2B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CrB,KACG,CAAC,EACP,IAAAJ,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA4B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAA/B,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDZ,KAAK,CAACmB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKtB,UAAU,GAAG,CAAC,EAAG;MAC3B,OAAO,IAAAZ,QAAA,CAAAwB,aAAA;QAAKW,GAAG,EAAG3B;MAAa,GAAGyB,KAAY,CAAC;IAChD;IACA,OAAOA,KAAK;EACb,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAG,QAAA,GAEcjC,SAAS;AAAAkC,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_components","require","_element","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","_react","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","ref","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn <div ref={ setLastItem }>{ child }</div>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAiB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAF,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA2B,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBxB,KAAK,IACN,IAAAoB,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA8B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CtB,KACG,CAAC,EACP,IAAAoB,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA+B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAAR,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDb,KAAK,CAACoB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKvB,UAAU,GAAG,CAAC,EAAG;MAC3B,OAAO,IAAAY,MAAA,CAAAC,aAAA;QAAKW,GAAG,EAAG5B;MAAa,GAAG0B,KAAY,CAAC;IAChD;IACA,OAAOA,KAAK;EACb,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAG,QAAA,GAEclC,SAAS;AAAAmC,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 /**
@@ -17,21 +17,21 @@ function GoogleFontsConfirmDialog() {
     window.localStorage.setItem('wp-font-library-default-font-collection-permission', 'true');
     window.dispatchEvent(new Event('storage'));
   };
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "font-library__google-fonts-confirm"
-  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalText, {
+  }, (0, _react.createElement)(_components.Card, null, (0, _react.createElement)(_components.CardBody, null, (0, _react.createElement)(_components.__experimentalText, {
     as: "h3"
-  }, "Connect to Google Fonts"), (0, _element.createElement)(_components.__experimentalSpacer, {
+  }, "Connect to Google Fonts"), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 6
-  }), (0, _element.createElement)(_components.__experimentalText, {
+  }), (0, _react.createElement)(_components.__experimentalText, {
     as: "p"
-  }, (0, _i18n.__)('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.')), (0, _element.createElement)(_components.__experimentalSpacer, {
+  }, (0, _i18n.__)('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.')), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 3
-  }), (0, _element.createElement)(_components.__experimentalText, {
+  }), (0, _react.createElement)(_components.__experimentalText, {
     as: "p"
-  }, (0, _i18n.__)('You can alternatively upload files directly on the Library tab.')), (0, _element.createElement)(_components.__experimentalSpacer, {
+  }, (0, _i18n.__)('You can alternatively upload files directly on the Library tab.')), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 6
-  }), (0, _element.createElement)(_components.Button, {
+  }), (0, _react.createElement)(_components.Button, {
     variant: "primary",
     onClick: handleConfirm
   }, (0, _i18n.__)('Allow access to Google Fonts')))));

package/build/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_element","createElement","className","Card","CardBody","__experimentalText","as","__experimentalSpacer","margin","__","Button","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-default-font-collection-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<Text as=\"h3\">Connect to Google Fonts</Text>\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 Library 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 variant=\"primary\" onClick={ handleConfirm }>\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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAUA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,oDAAoD,EACpD,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACC,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,iEACD,CACK,CAAC,EACP,IAAAT,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcpB,wBAAwB;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_react","createElement","className","Card","CardBody","__experimentalText","as","__experimentalSpacer","margin","__","Button","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-default-font-collection-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<Text as=\"h3\">Connect to Google Fonts</Text>\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 Library 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 variant=\"primary\" onClick={ handleConfirm }>\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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAUA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,oDAAoD,EACpD,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,iEACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcpB,wBAAwB;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/components/global-styles/font-library-modal/index.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
 var _installedFonts = _interopRequireDefault(require("./installed-fonts"));
 var _fontCollection = _interopRequireDefault(require("./font-collection"));
+var _uploadFonts = _interopRequireDefault(require("./upload-fonts"));
 var _context = require("./context");
 /**
  * WordPress dependencies
@@ -19,11 +21,15 @@ var _context = require("./context");
  * Internal dependencies
  */
 
-const INSTALLED_FONTS_TAB = {
+const DEFAULT_TABS = [{
   name: 'installed-fonts',
   title: (0, _i18n.__)('Library'),
   className: 'installed-fonts'
-};
+}, {
+  name: 'upload-fonts',
+  title: (0, _i18n.__)('Upload'),
+  className: 'upload-fonts'
+}];
 const tabsFromCollections = collections => collections.map(({
   id,
   name
@@ -39,22 +45,24 @@ function FontLibraryModal({
   const {
     collections
   } = (0, _element.useContext)(_context.FontLibraryContext);
-  const tabs = [INSTALLED_FONTS_TAB, ...tabsFromCollections(collections || [])];
-  return (0, _element.createElement)(_components.Modal, {
+  const tabs = [...DEFAULT_TABS, ...tabsFromCollections(collections || [])];
+  return (0, _react.createElement)(_components.Modal, {
     title: (0, _i18n.__)('Fonts'),
     onRequestClose: onRequestClose,
     isFullScreen: true,
     className: "font-library-modal"
-  }, (0, _element.createElement)(_components.TabPanel, {
+  }, (0, _react.createElement)(_components.TabPanel, {
     className: "font-library-modal__tab-panel",
     initialTabName: initialTabName,
     tabs: tabs
   }, tab => {
     switch (tab.name) {
+      case 'upload-fonts':
+        return (0, _react.createElement)(_uploadFonts.default, null);
       case 'installed-fonts':
-        return (0, _element.createElement)(_installedFonts.default, null);
+        return (0, _react.createElement)(_installedFonts.default, null);
       default:
-        return (0, _element.createElement)(_fontCollection.default, {
+        return (0, _react.createElement)(_fontCollection.default, {
           id: tab.name
         });
     }

package/build/components/global-styles/font-library-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_components","_installedFonts","_interopRequireDefault","_fontCollection","_context","INSTALLED_FONTS_TAB","name","title","__","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","useContext","FontLibraryContext","tabs","createElement","Modal","isFullScreen","TabPanel","tab","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TabPanel } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport { FontLibraryContext } from './context';\n\nconst INSTALLED_FONTS_TAB = {\n\tname: 'installed-fonts',\n\ttitle: __( 'Library' ),\n\tclassName: 'installed-fonts',\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { id, name } ) => ( {\n\t\tname: id,\n\t\ttitle:\n\t\t\tcollections.length === 1 && id === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t\tclassName: 'collection',\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\tINSTALLED_FONTS_TAB,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"font-library-modal__tab-panel\"\n\t\t\t\tinitialTabName={ initialTabName }\n\t\t\t\ttabs={ tabs }\n\t\t\t>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tswitch ( tab.name ) {\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\treturn <InstalledFonts />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <FontCollection id={ tab.name } />;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";;;;;;;AAKA,IAAAA,QAAA,GAAAC,OAAA;AAFA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAMA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAZA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMO,mBAAmB,GAAG;EAC3BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACtBC,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEP;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEO,EAAE;EACRN,KAAK,EACJI,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzD,IAAAL,QAAE,EAAE,eAAgB,CAAC,GACrBF,IAAI;EACRG,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAG,IAAAO,mBAAU,EAAEC,2BAAmB,CAAC;EAExD,MAAMC,IAAI,GAAG,CACZf,mBAAmB,EACnB,GAAGK,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACC,IAAAd,QAAA,CAAAwB,aAAA,EAACrB,WAAA,CAAAsB,KAAK;IACLf,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACvBQ,cAAc,EAAGA,cAAgB;IACjCO,YAAY;IACZd,SAAS,EAAC;EAAoB,GAE9B,IAAAZ,QAAA,CAAAwB,aAAA,EAACrB,WAAA,CAAAwB,QAAQ;IACRf,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCG,IAAI,EAAGA;EAAM,GAETK,GAAG,IAAM;IACZ,QAASA,GAAG,CAACnB,IAAI;MAChB,KAAK,iBAAiB;QACrB,OAAO,IAAAT,QAAA,CAAAwB,aAAA,EAACpB,eAAA,CAAAyB,OAAc,MAAE,CAAC;MAC1B;QACC,OAAO,IAAA7B,QAAA,CAAAwB,aAAA,EAAClB,eAAA,CAAAuB,OAAc;UAACb,EAAE,EAAGY,GAAG,CAACnB;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAAC,IAAAqB,QAAA,GAEcZ,gBAAgB;AAAAa,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_i18n","require","_components","_element","_installedFonts","_interopRequireDefault","_fontCollection","_uploadFonts","_context","DEFAULT_TABS","name","title","__","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","useContext","FontLibraryContext","tabs","_react","createElement","Modal","isFullScreen","TabPanel","tab","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TabPanel } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\n\nconst DEFAULT_TABS = [\n\t{\n\t\tname: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t\tclassName: 'installed-fonts',\n\t},\n\t{\n\t\tname: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t\tclassName: 'upload-fonts',\n\t},\n];\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { id, name } ) => ( {\n\t\tname: id,\n\t\ttitle:\n\t\t\tcollections.length === 1 && id === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t\tclassName: 'collection',\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\t...DEFAULT_TABS,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"font-library-modal__tab-panel\"\n\t\t\t\tinitialTabName={ initialTabName }\n\t\t\t\ttabs={ tabs }\n\t\t\t>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tswitch ( tab.name ) {\n\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\treturn <UploadFonts />;\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\treturn <InstalledFonts />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <FontCollection id={ tab.name } />;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,YAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AAbA;AACA;AACA;;AAKA;AACA;AACA;;AAMA,MAAMQ,YAAY,GAAG,CACpB;EACCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACtBC,SAAS,EAAE;AACZ,CAAC,EACD;EACCH,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EACrBC,SAAS,EAAE;AACZ,CAAC,CACD;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEP;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEO,EAAE;EACRN,KAAK,EACJI,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzD,IAAAL,QAAE,EAAE,eAAgB,CAAC,GACrBF,IAAI;EACRG,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAG,IAAAO,mBAAU,EAAEC,2BAAmB,CAAC;EAExD,MAAMC,IAAI,GAAG,CACZ,GAAGf,YAAY,EACf,GAAGK,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACC,IAAAU,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAAyB,KAAK;IACLhB,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACvBQ,cAAc,EAAGA,cAAgB;IACjCQ,YAAY;IACZf,SAAS,EAAC;EAAoB,GAE9B,IAAAY,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA2B,QAAQ;IACRhB,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCG,IAAI,EAAGA;EAAM,GAETM,GAAG,IAAM;IACZ,QAASA,GAAG,CAACpB,IAAI;MAChB,KAAK,cAAc;QAClB,OAAO,IAAAe,MAAA,CAAAC,aAAA,EAACnB,YAAA,CAAAwB,OAAW,MAAE,CAAC;MACvB,KAAK,iBAAiB;QACrB,OAAO,IAAAN,MAAA,CAAAC,aAAA,EAACtB,eAAA,CAAA2B,OAAc,MAAE,CAAC;MAC1B;QACC,OAAO,IAAAN,MAAA,CAAAC,aAAA,EAACpB,eAAA,CAAAyB,OAAc;UAACd,EAAE,EAAGa,GAAG,CAACpB;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAAC,IAAAsB,QAAA,GAEcb,gBAAgB;AAAAc,OAAA,CAAAF,OAAA,GAAAC,QAAA"}