@wordpress/global-styles-ui 1.1.0

package/build/context.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var context_exports = {};
+__export(context_exports, {
+  GlobalStylesContext: () => GlobalStylesContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_element = require("@wordpress/element");
+const GlobalStylesContext = (0, import_element.createContext)({
+  user: { styles: {}, settings: {} },
+  base: { styles: {}, settings: {} },
+  merged: { styles: {}, settings: {} },
+  onChange: () => {
+  },
+  fontLibraryEnabled: false
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesContext
+});
+//# sourceMappingURL=context.js.map

package/build/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/context.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\nexport interface GlobalStylesContextType {\n\tuser: GlobalStylesConfig;\n\tbase: GlobalStylesConfig;\n\tmerged: GlobalStylesConfig;\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\tfontLibraryEnabled?: boolean;\n}\n\nexport const GlobalStylesContext = createContext< GlobalStylesContextType >( {\n\tuser: { styles: {}, settings: {} },\n\tbase: { styles: {}, settings: {} },\n\tmerged: { styles: {}, settings: {} },\n\tonChange: () => {},\n\tfontLibraryEnabled: false,\n} );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAWvB,MAAM,0BAAsB,8BAA0C;AAAA,EAC5E,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EACjC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EACjC,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EACnC,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,oBAAoB;AACrB,CAAE;",
+  "names": []
+}

package/build/dimensions-panel.js

@@ -0,0 +1,89 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dimensions_panel_exports = {};
+__export(dimensions_panel_exports, {
+  default: () => DimensionsPanel
+});
+module.exports = __toCommonJS(dimensions_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const DEFAULT_CONTROLS = {
+  contentSize: true,
+  wideSize: true,
+  padding: true,
+  margin: true,
+  blockGap: true,
+  minHeight: true,
+  childLayout: false
+};
+function DimensionsPanel() {
+  const [style] = (0, import_hooks.useStyle)("", void 0, "user", false);
+  const [inheritedStyle, setStyle] = (0, import_hooks.useStyle)(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  const [userSettings] = (0, import_hooks.useSetting)("", void 0, "user");
+  const [rawSettings, setSettings] = (0, import_hooks.useSetting)("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  const inheritedStyleWithLayout = (0, import_element.useMemo)(() => {
+    return {
+      ...inheritedStyle,
+      layout: settings.layout
+    };
+  }, [inheritedStyle, settings.layout]);
+  const styleWithLayout = (0, import_element.useMemo)(() => {
+    return {
+      ...style,
+      layout: userSettings.layout
+    };
+  }, [style, userSettings.layout]);
+  const onChange = (newStyle) => {
+    const updatedStyle = { ...newStyle };
+    delete updatedStyle.layout;
+    setStyle(updatedStyle);
+    if (newStyle.layout !== userSettings.layout) {
+      const updatedSettings = {
+        ...userSettings,
+        layout: newStyle.layout
+      };
+      if (updatedSettings.layout?.definitions) {
+        delete updatedSettings.layout.definitions;
+      }
+      setSettings(updatedSettings);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StylesDimensionsPanel,
+    {
+      inheritedValue: inheritedStyleWithLayout,
+      value: styleWithLayout,
+      onChange,
+      settings,
+      includeLayoutControls: true,
+      defaultControls: DEFAULT_CONTROLS
+    }
+  );
+}
+//# sourceMappingURL=dimensions-panel.js.map

package/build/dimensions-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/dimensions-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', undefined, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\n\tconst onChange = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tconst updatedSettings = {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t};\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2EE;AAvEF,0BAAsD;AACtD,qBAAwB;AAKxB,mBAAqC;AACrC,yBAAuB;AAEvB,MAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,QAC1E,2BAAQ,oBAAAA,WAAuB;AAEhC,MAAM,mBAAmB;AAAA,EACxB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AACd;AAEe,SAAR,kBAAmC;AACzC,QAAM,CAAE,KAAM,QAAI,uBAAU,IAAI,QAAW,QAAQ,KAAM;AACzD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,YAAa,QAAI,yBAAY,IAAI,QAAW,MAAO;AAC3D,QAAM,CAAE,aAAa,WAAY,QAAI,yBAAY,EAAG;AACpD,QAAM,WAAW,2BAA4B,WAAY;AAIzD,QAAM,+BAA2B,wBAAS,MAAM;AAC/C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,SAAS;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,gBAAgB,SAAS,MAAO,CAAE;AAEvC,QAAM,sBAAkB,wBAAS,MAAM;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,aAAa;AAAA,IACtB;AAAA,EACD,GAAG,CAAE,OAAO,aAAa,MAAO,CAAE;AAElC,QAAM,WAAW,CAAE,aAAmB;AACrC,UAAM,eAAe,EAAE,GAAG,SAAS;AACnC,WAAO,aAAa;AACpB,aAAU,YAAa;AAEvB,QAAK,SAAS,WAAW,aAAa,QAAS;AAC9C,YAAM,kBAAkB;AAAA,QACvB,GAAG;AAAA,QACH,QAAQ,SAAS;AAAA,MAClB;AAGA,UAAK,gBAAgB,QAAQ,aAAc;AAC1C,eAAO,gBAAgB,OAAO;AAAA,MAC/B;AAEA,kBAAa,eAAgB;AAAA,IAC9B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,uBAAqB;AAAA,MACrB,iBAAkB;AAAA;AAAA,EACnB;AAEF;",
+  "names": ["blockEditorPrivateApis"]
+}

package/build/font-families.js

@@ -0,0 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_families_exports = {};
+__export(font_families_exports, {
+  default: () => FontFamilies
+});
+module.exports = __toCommonJS(font_families_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_icons = require("@wordpress/icons");
+var import_element = require("@wordpress/element");
+var import_subtitle = require("./subtitle");
+var import_hooks = require("./hooks");
+var import_context = __toESM(require("./font-library-modal/context"));
+var import_font_library_modal = __toESM(require("./font-library-modal"));
+var import_font_family_item = __toESM(require("./font-family-item"));
+var import_utils = require("./font-library-modal/utils");
+function mapFontsWithSource(fonts, source) {
+  return fonts ? fonts.map((f) => (0, import_utils.setUIValuesNeeded)(f, { source })) : [];
+}
+function FontFamiliesInner() {
+  const { baseCustomFonts, modalTabOpen, setModalTabOpen } = (0, import_element.useContext)(import_context.FontLibraryContext);
+  const [fontFamilies] = (0, import_hooks.useSetting)("typography.fontFamilies");
+  const [baseFontFamilies] = (0, import_hooks.useSetting)(
+    "typography.fontFamilies",
+    void 0,
+    "base"
+  );
+  const themeFonts = mapFontsWithSource(fontFamilies?.theme, "theme");
+  const customFonts = mapFontsWithSource(fontFamilies?.custom, "custom");
+  const activeFonts = [...themeFonts, ...customFonts].sort(
+    (a, b) => a.name.localeCompare(b.name)
+  );
+  const hasFonts = 0 < activeFonts.length;
+  const hasInstalledFonts = hasFonts || baseFontFamilies?.theme?.length > 0 || (baseCustomFonts?.length ?? 0) > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !!modalTabOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_font_library_modal.default,
+      {
+        onRequestClose: () => setModalTabOpen?.(""),
+        defaultTabId: modalTabOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: (0, import_i18n.__)("Fonts") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            onClick: () => setModalTabOpen?.("installed-fonts"),
+            label: (0, import_i18n.__)("Manage fonts"),
+            icon: import_icons.settings,
+            size: "small"
+          }
+        )
+      ] }),
+      activeFonts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { size: "large", isBordered: true, isSeparated: true, children: activeFonts.map((font) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_font_family_item.default,
+        {
+          font
+        },
+        font.slug
+      )) }) }),
+      !hasFonts && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", children: hasInstalledFonts ? (0, import_i18n.__)("No fonts activated.") : (0, import_i18n.__)("No fonts installed.") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "global-styles-ui-font-families__manage-fonts",
+            variant: "secondary",
+            __next40pxDefaultSize: true,
+            onClick: () => {
+              setModalTabOpen?.(
+                hasInstalledFonts ? "installed-fonts" : "upload-fonts"
+              );
+            },
+            children: hasInstalledFonts ? (0, import_i18n.__)("Manage fonts") : (0, import_i18n.__)("Add fonts")
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function FontFamilies({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontFamiliesInner, { ...props }) });
+}
+//# sourceMappingURL=font-families.js.map

package/build/font-families.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/font-families.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalText as Text,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n} from '@wordpress/components';\nimport { settings } from '@wordpress/icons';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { useSetting } from './hooks';\nimport FontLibraryProvider, {\n\tFontLibraryContext,\n} from './font-library-modal/context';\nimport FontLibraryModal from './font-library-modal';\nimport FontFamilyItem from './font-family-item';\nimport { setUIValuesNeeded } from './font-library-modal/utils';\n\n/**\n * Maps the fonts with the source, if available.\n *\n * @param {Array}  fonts  The fonts to map.\n * @param {string} source The source of the fonts.\n * @return {Array} The mapped fonts.\n */\nfunction mapFontsWithSource( fonts: any[], source: string ) {\n\treturn fonts\n\t\t? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )\n\t\t: [];\n}\n\nfunction FontFamiliesInner() {\n\tconst { baseCustomFonts, modalTabOpen, setModalTabOpen } =\n\t\tuseContext( FontLibraryContext );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies' );\n\tconst [ baseFontFamilies ] = useSetting(\n\t\t'typography.fontFamilies',\n\t\tundefined,\n\t\t'base'\n\t);\n\tconst themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );\n\tconst customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );\n\tconst activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>\n\t\ta.name.localeCompare( b.name )\n\t);\n\tconst hasFonts = 0 < activeFonts.length;\n\tconst hasInstalledFonts =\n\t\thasFonts ||\n\t\tbaseFontFamilies?.theme?.length > 0 ||\n\t\t( baseCustomFonts?.length ?? 0 ) > 0;\n\n\treturn (\n\t\t<>\n\t\t\t{ !! modalTabOpen && (\n\t\t\t\t<FontLibraryModal\n\t\t\t\t\tonRequestClose={ () => setModalTabOpen?.( '' ) }\n\t\t\t\t\tdefaultTabId={ modalTabOpen }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () => setModalTabOpen?.( 'installed-fonts' ) }\n\t\t\t\t\t\tlabel={ __( 'Manage fonts' ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ activeFonts.length > 0 && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ItemGroup size=\"large\" isBordered isSeparated>\n\t\t\t\t\t\t\t{ activeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<FontFamilyItem\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ ! hasFonts && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t\t{ hasInstalledFonts\n\t\t\t\t\t\t\t\t? __( 'No fonts activated.' )\n\t\t\t\t\t\t\t\t: __( 'No fonts installed.' ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"global-styles-ui-font-families__manage-fonts\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetModalTabOpen?.(\n\t\t\t\t\t\t\t\t\thasInstalledFonts\n\t\t\t\t\t\t\t\t\t\t? 'installed-fonts'\n\t\t\t\t\t\t\t\t\t\t: 'upload-fonts'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ hasInstalledFonts\n\t\t\t\t\t\t\t\t? __( 'Manage fonts' )\n\t\t\t\t\t\t\t\t: __( 'Add fonts' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default function FontFamilies( { ...props } ) {\n\treturn (\n\t\t<FontLibraryProvider>\n\t\t\t<FontFamiliesInner { ...props } />\n\t\t</FontLibraryProvider>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DI;AA3DJ,kBAAmB;AACnB,wBAMO;AACP,mBAAyB;AACzB,qBAA2B;AAK3B,sBAAyB;AACzB,mBAA2B;AAC3B,qBAEO;AACP,gCAA6B;AAC7B,8BAA2B;AAC3B,mBAAkC;AASlC,SAAS,mBAAoB,OAAc,QAAiB;AAC3D,SAAO,QACJ,MAAM,IAAK,CAAE,UAAO,gCAAmB,GAAG,EAAE,OAAO,CAAE,CAAE,IACvD,CAAC;AACL;AAEA,SAAS,oBAAoB;AAC5B,QAAM,EAAE,iBAAiB,cAAc,gBAAgB,QACtD,2BAAY,iCAAmB;AAChC,QAAM,CAAE,YAAa,QAAI,yBAAY,yBAA0B;AAC/D,QAAM,CAAE,gBAAiB,QAAI;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,aAAa,mBAAoB,cAAc,OAAO,OAAQ;AACpE,QAAM,cAAc,mBAAoB,cAAc,QAAQ,QAAS;AACvE,QAAM,cAAc,CAAE,GAAG,YAAY,GAAG,WAAY,EAAE;AAAA,IAAM,CAAE,GAAG,MAChE,EAAE,KAAK,cAAe,EAAE,IAAK;AAAA,EAC9B;AACA,QAAM,WAAW,IAAI,YAAY;AACjC,QAAM,oBACL,YACA,kBAAkB,OAAO,SAAS,MAChC,iBAAiB,UAAU,KAAM;AAEpC,SACC,4EACG;AAAA,KAAC,CAAE,gBACJ;AAAA,MAAC,0BAAAA;AAAA,MAAA;AAAA,QACA,gBAAiB,MAAM,kBAAmB,EAAG;AAAA,QAC7C,cAAe;AAAA;AAAA,IAChB;AAAA,IAGD,6CAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA,mDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBACf;AAAA,oDAAC,4BAAS,OAAQ,GAAM,8BAAI,OAAQ,GAAG;AAAA,QACvC;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,MAAM,kBAAmB,iBAAkB;AAAA,YACrD,WAAQ,gBAAI,cAAe;AAAA,YAC3B,MAAO;AAAA,YACP,MAAK;AAAA;AAAA,QACN;AAAA,SACD;AAAA,MACE,YAAY,SAAS,KACtB,2EACC,sDAAC,kBAAAC,yBAAA,EAAU,MAAK,SAAQ,YAAU,MAAC,aAAW,MAC3C,sBAAY,IAAK,CAAE,SACpB;AAAA,QAAC,wBAAAC;AAAA,QAAA;AAAA,UAEA;AAAA;AAAA,QADM,KAAK;AAAA,MAEZ,CACC,GACH,GACD;AAAA,MAEC,CAAE,YACH,4EACC;AAAA,oDAAC,kBAAAC,oBAAA,EAAK,IAAG,KACN,kCACC,gBAAI,qBAAsB,QAC1B,gBAAI,qBAAsB,GAC9B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,uBAAqB;AAAA,YACrB,SAAU,MAAM;AACf;AAAA,gBACC,oBACG,oBACA;AAAA,cACJ;AAAA,YACD;AAAA,YAEE,kCACC,gBAAI,cAAe,QACnB,gBAAI,WAAY;AAAA;AAAA,QACpB;AAAA,SACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEe,SAAR,aAA+B,EAAE,GAAG,MAAM,GAAI;AACpD,SACC,4CAAC,eAAAC,SAAA,EACA,sDAAC,qBAAoB,GAAG,OAAQ,GACjC;AAEF;",
+  "names": ["FontLibraryModal", "VStack", "HStack", "ItemGroup", "FontFamilyItem", "Text", "FontLibraryProvider"]
+}

package/build/font-family-item.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_family_item_exports = {};
+__export(font_family_item_exports, {
+  default: () => font_family_item_default
+});
+module.exports = __toCommonJS(font_family_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_context = require("./font-library-modal/context");
+var import_preview_styles = require("./font-library-modal/utils/preview-styles");
+function FontFamilyItem({ font }) {
+  const { handleSetLibraryFontSelected, setModalTabOpen } = (0, import_element.useContext)(import_context.FontLibraryContext);
+  const variantsCount = font?.fontFace?.length || 1;
+  const handleClick = () => {
+    handleSetLibraryFontSelected?.(font);
+    setModalTabOpen?.("installed-fonts");
+  };
+  const previewStyle = (0, import_preview_styles.getFamilyPreviewStyle)(font);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItem, { onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: previewStyle, children: font.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { className: "global-styles-ui-screen-typography__font-variants-count", children: (0, import_i18n.sprintf)(
+      /* translators: %d: Number of font variants. */
+      (0, import_i18n._n)("%d variant", "%d variants", variantsCount),
+      variantsCount
+    ) })
+  ] }) });
+}
+var font_family_item_default = FontFamilyItem;
+//# sourceMappingURL=font-family-item.js.map

package/build/font-family-item.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/font-family-item.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _n, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalItem as Item,\n\tFlexItem,\n} from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './font-library-modal/context';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport type { FontFamily } from './font-library-modal/types';\n\ninterface FontFamilyItemProps {\n\tfont: FontFamily;\n}\n\nfunction FontFamilyItem( { font }: FontFamilyItemProps ) {\n\tconst { handleSetLibraryFontSelected, setModalTabOpen } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst variantsCount = font?.fontFace?.length || 1;\n\n\tconst handleClick = () => {\n\t\thandleSetLibraryFontSelected?.( font );\n\t\tsetModalTabOpen?.( 'installed-fonts' );\n\t};\n\n\tconst previewStyle = getFamilyPreviewStyle( font );\n\n\treturn (\n\t\t<Item onClick={ handleClick }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<FlexItem style={ previewStyle }>{ font.name }</FlexItem>\n\t\t\t\t<FlexItem className=\"global-styles-ui-screen-typography__font-variants-count\">\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %d: Number of font variants. */\n\t\t\t\t\t\t_n( '%d variant', '%d variants', variantsCount ),\n\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n\nexport default FontFamilyItem;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCG;AAlCH,kBAA4B;AAC5B,wBAIO;AACP,qBAA2B;AAK3B,qBAAmC;AACnC,4BAAsC;AAOtC,SAAS,eAAgB,EAAE,KAAK,GAAyB;AACxD,QAAM,EAAE,8BAA8B,gBAAgB,QACrD,2BAAY,iCAAmB;AAEhC,QAAM,gBAAgB,MAAM,UAAU,UAAU;AAEhD,QAAM,cAAc,MAAM;AACzB,mCAAgC,IAAK;AACrC,sBAAmB,iBAAkB;AAAA,EACtC;AAEA,QAAM,mBAAe,6CAAuB,IAAK;AAEjD,SACC,4CAAC,kBAAAA,oBAAA,EAAK,SAAU,aACf,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBACf;AAAA,gDAAC,8BAAS,OAAQ,cAAiB,eAAK,MAAM;AAAA,IAC9C,4CAAC,8BAAS,WAAU,2DACjB;AAAA;AAAA,UAED,gBAAI,cAAc,eAAe,aAAc;AAAA,MAC/C;AAAA,IACD,GACD;AAAA,KACD,GACD;AAEF;AAEA,IAAO,2BAAQ;",
+  "names": ["Item", "HStack"]
+}

package/build/font-library-modal/collection-font-variant.js

@@ -0,0 +1,75 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var collection_font_variant_exports = {};
+__export(collection_font_variant_exports, {
+  default: () => collection_font_variant_default
+});
+module.exports = __toCommonJS(collection_font_variant_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_utils = require("./utils");
+var import_font_demo = __toESM(require("./font-demo"));
+function CollectionFontVariant({
+  face,
+  font,
+  handleToggleVariant,
+  selected
+}) {
+  const handleToggleActivation = () => {
+    if (font?.fontFace) {
+      handleToggleVariant(font, face);
+      return;
+    }
+    handleToggleVariant(font);
+  };
+  const displayName = font.name + " " + (0, import_utils.getFontFaceVariantName)(face);
+  const checkboxId = (0, import_element.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-library-modal__font-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { justify: "flex-start", align: "center", gap: "1rem", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.CheckboxControl,
+      {
+        checked: selected,
+        onChange: handleToggleActivation,
+        __nextHasNoMarginBottom: true,
+        id: checkboxId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: checkboxId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_font_demo.default,
+      {
+        font: face,
+        text: displayName,
+        onClick: handleToggleActivation
+      }
+    ) })
+  ] }) });
+}
+var collection_font_variant_default = CollectionFontVariant;
+//# sourceMappingURL=collection-font-variant.js.map

package/build/font-library-modal/collection-font-variant.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/collection-font-variant.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useId } from '@wordpress/element';\nimport { CheckboxControl, Flex } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport FontDemo from './font-demo';\nimport type { CollectionFontVariantProps } from './types';\n\nfunction CollectionFontVariant( {\n\tface,\n\tfont,\n\thandleToggleVariant,\n\tselected,\n}: CollectionFontVariantProps ) {\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\thandleToggleVariant( font, face );\n\t\t\treturn;\n\t\t}\n\t\thandleToggleVariant( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst checkboxId = useId();\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-card\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ selected }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontDemo\n\t\t\t\t\t\tfont={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default CollectionFontVariant;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCG;AA7BH,qBAAsB;AACtB,wBAAsC;AAKtC,mBAAuC;AACvC,uBAAqB;AAGrB,SAAS,sBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,yBAAyB,MAAM;AACpC,QAAK,MAAM,UAAW;AACrB,0BAAqB,MAAM,IAAK;AAChC;AAAA,IACD;AACA,wBAAqB,IAAK;AAAA,EAC3B;AAEA,QAAM,cAAc,KAAK,OAAO,UAAM,qCAAwB,IAAK;AACnE,QAAM,iBAAa,sBAAM;AAEzB,SACC,4CAAC,SAAI,WAAU,iCACd,uDAAC,0BAAK,SAAQ,cAAa,OAAM,UAAS,KAAI,QAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,UAAW;AAAA,QACX,yBAAuB;AAAA,QACvB,IAAK;AAAA;AAAA,IACN;AAAA,IACA,4CAAC,WAAM,SAAU,YAChB;AAAA,MAAC,iBAAAA;AAAA,MAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAO;AAAA,QACP,SAAU;AAAA;AAAA,IACX,GACD;AAAA,KACD,GACD;AAEF;AAEA,IAAO,kCAAQ;",
+  "names": ["FontDemo"]
+}