@wordpress/global-styles-ui 1.1.0

package/build/typography-elements.js

@@ -0,0 +1,117 @@
+"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 typography_elements_exports = {};
+__export(typography_elements_exports, {
+  default: () => typography_elements_default
+});
+module.exports = __toCommonJS(typography_elements_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_navigation_button = require("./navigation-button");
+var import_subtitle = require("./subtitle");
+var import_hooks = require("./hooks");
+function ElementItem({ parentMenu, element, label }) {
+  const prefix = element === "text" || !element ? "" : `elements.${element}.`;
+  const extraStyles = element === "link" ? {
+    textDecoration: "underline"
+  } : {};
+  const [fontFamily] = (0, import_hooks.useStyle)(
+    prefix + "typography.fontFamily"
+  );
+  const [fontStyle] = (0, import_hooks.useStyle)(prefix + "typography.fontStyle");
+  const [fontWeight] = (0, import_hooks.useStyle)(
+    prefix + "typography.fontWeight"
+  );
+  const [backgroundColor] = (0, import_hooks.useStyle)(
+    prefix + "color.background"
+  );
+  const [fallbackBackgroundColor] = (0, import_hooks.useStyle)("color.background");
+  const [gradientValue] = (0, import_hooks.useStyle)(prefix + "color.gradient");
+  const [color] = (0, import_hooks.useStyle)(prefix + "color.text");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { path: parentMenu + "/typography/" + element, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.FlexItem,
+      {
+        className: "global-styles-ui-screen-typography__indicator",
+        "aria-hidden": "true",
+        style: {
+          fontFamily: fontFamily ?? "serif",
+          background: gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
+          color,
+          fontStyle,
+          fontWeight,
+          ...extraStyles
+        },
+        children: (0, import_i18n.__)("Aa")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: label })
+  ] }) });
+}
+function TypographyElements() {
+  const parentMenu = "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: (0, import_i18n.__)("Elements") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ElementItem,
+        {
+          parentMenu,
+          element: "text",
+          label: (0, import_i18n.__)("Text")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ElementItem,
+        {
+          parentMenu,
+          element: "link",
+          label: (0, import_i18n.__)("Links")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ElementItem,
+        {
+          parentMenu,
+          element: "heading",
+          label: (0, import_i18n.__)("Headings")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ElementItem,
+        {
+          parentMenu,
+          element: "caption",
+          label: (0, import_i18n.__)("Captions")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ElementItem,
+        {
+          parentMenu,
+          element: "button",
+          label: (0, import_i18n.__)("Buttons")
+        }
+      )
+    ] })
+  ] });
+}
+var typography_elements_default = TypographyElements;
+//# sourceMappingURL=typography-elements.js.map

package/build/typography-elements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-elements.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { Subtitle } from './subtitle';\nimport { useStyle } from './hooks';\n\ninterface ElementItemProps {\n\tparentMenu: string;\n\telement: string;\n\tlabel: string;\n}\n\nfunction ElementItem( { parentMenu, element, label }: ElementItemProps ) {\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\n\tconst [ fontFamily ] = useStyle< string >(\n\t\tprefix + 'typography.fontFamily'\n\t);\n\tconst [ fontStyle ] = useStyle< string >( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useStyle< string >(\n\t\tprefix + 'typography.fontWeight'\n\t);\n\tconst [ backgroundColor ] = useStyle< string >(\n\t\tprefix + 'color.background'\n\t);\n\tconst [ fallbackBackgroundColor ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( prefix + 'color.gradient' );\n\tconst [ color ] = useStyle< string >( prefix + 'color.text' );\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"global-styles-ui-screen-typography__indicator\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\tbackgroundColor ??\n\t\t\t\t\t\t\tfallbackBackgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDG;AAhDH,kBAAmB;AACnB,wBAKO;AAKP,+BAAuC;AACvC,sBAAyB;AACzB,mBAAyB;AAQzB,SAAS,YAAa,EAAE,YAAY,SAAS,MAAM,GAAsB;AACxE,QAAM,SACL,YAAY,UAAU,CAAE,UAAU,KAAK,YAAa,OAAQ;AAC7D,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,QAAM,CAAE,UAAW,QAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,SAAU,QAAI,uBAAoB,SAAS,sBAAuB;AAC1E,QAAM,CAAE,UAAW,QAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,eAAgB,QAAI;AAAA,IAC3B,SAAS;AAAA,EACV;AACA,QAAM,CAAE,uBAAwB,QAC/B,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,QAAI,uBAAoB,SAAS,gBAAiB;AACxE,QAAM,CAAE,KAAM,QAAI,uBAAoB,SAAS,YAAa;AAE5D,SACC,4CAAC,mDAAuB,MAAO,aAAa,iBAAiB,SAC5D,uDAAC,kBAAAA,sBAAA,EAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAQ;AAAA,UACP,YAAY,cAAc;AAAA,UAC1B,YACC,iBACA,mBACA;AAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ;AAAA,QAEE,8BAAI,IAAK;AAAA;AAAA,IACZ;AAAA,IACA,4CAAC,8BAAW,iBAAO;AAAA,KACpB,GACD;AAEF;AAEA,SAAS,qBAAqB;AAC7B,QAAM,aAAa;AAEnB,SACC,6CAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,4BAAS,OAAQ,GAAM,8BAAI,UAAW,GAAG;AAAA,IAC1C,6CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAChC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,MAAO;AAAA;AAAA,MACpB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,OAAQ;AAAA;AAAA,MACrB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,SAAU;AAAA;AAAA,MACvB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "names": ["HStack", "VStack", "ItemGroup"]
+}

package/build/typography-example.js

@@ -0,0 +1,79 @@
+"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 typography_example_exports = {};
+__export(typography_example_exports, {
+  default: () => PreviewTypography
+});
+module.exports = __toCommonJS(typography_example_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_context = require("./context");
+var import_preview_styles = require("./font-library-modal/utils/preview-styles");
+var import_utils = require("./utils");
+var import_hooks = require("./hooks");
+function PreviewTypography({
+  fontSize,
+  variation
+}) {
+  const { base } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  let config = base;
+  if (variation) {
+    config = { ...base, ...variation };
+  }
+  const [textColor] = (0, import_hooks.useStyle)("color.text");
+  const [bodyFontFamilies, headingFontFamilies] = (0, import_utils.getFontFamilies)(config);
+  const bodyPreviewStyle = bodyFontFamilies ? (0, import_preview_styles.getFamilyPreviewStyle)(bodyFontFamilies) : {};
+  const headingPreviewStyle = headingFontFamilies ? (0, import_preview_styles.getFamilyPreviewStyle)(headingFontFamilies) : {};
+  if (textColor) {
+    bodyPreviewStyle.color = textColor;
+    headingPreviewStyle.color = textColor;
+  }
+  if (fontSize) {
+    bodyPreviewStyle.fontSize = fontSize;
+    headingPreviewStyle.fontSize = fontSize;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__unstableMotion.div,
+    {
+      animate: {
+        scale: 1,
+        opacity: 1
+      },
+      initial: {
+        scale: 0.1,
+        opacity: 0
+      },
+      transition: {
+        delay: 0.3,
+        type: "tween"
+      },
+      style: {
+        textAlign: "center",
+        lineHeight: 1
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: headingPreviewStyle, children: (0, import_i18n._x)("A", "Uppercase letter A") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: bodyPreviewStyle, children: (0, import_i18n._x)("a", "Lowercase letter A") })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=typography-example.js.map

package/build/typography-example.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-example.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport { getFontFamilies } from './utils';\nimport { useStyle } from './hooks';\n\ninterface TypographyExampleProps {\n\tfontSize?: number;\n\tvariation?: any;\n}\n\nexport default function PreviewTypography( {\n\tfontSize,\n\tvariation,\n}: TypographyExampleProps ) {\n\tconst { base } = useContext( GlobalStylesContext );\n\tlet config = base;\n\tif ( variation ) {\n\t\tconfig = { ...base, ...variation };\n\t}\n\n\tconst [ textColor ] = useStyle( 'color.text' );\n\n\tconst [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );\n\tconst bodyPreviewStyle: React.CSSProperties = bodyFontFamilies\n\t\t? getFamilyPreviewStyle( bodyFontFamilies )\n\t\t: {};\n\tconst headingPreviewStyle: React.CSSProperties = headingFontFamilies\n\t\t? getFamilyPreviewStyle( headingFontFamilies )\n\t\t: {};\n\n\tif ( textColor ) {\n\t\tbodyPreviewStyle.color = textColor;\n\t\theadingPreviewStyle.color = textColor;\n\t}\n\n\tif ( fontSize ) {\n\t\tbodyPreviewStyle.fontSize = fontSize;\n\t\theadingPreviewStyle.fontSize = fontSize;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: 0.3,\n\t\t\t\ttype: 'tween',\n\t\t\t} }\n\t\t\tstyle={ {\n\t\t\t\ttextAlign: 'center',\n\t\t\t\tlineHeight: 1,\n\t\t\t} }\n\t\t>\n\t\t\t<span style={ headingPreviewStyle }>\n\t\t\t\t{ _x( 'A', 'Uppercase letter A' ) }\n\t\t\t</span>\n\t\t\t<span style={ bodyPreviewStyle }>\n\t\t\t\t{ _x( 'a', 'Lowercase letter A' ) }\n\t\t\t</span>\n\t\t</motion.div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDE;AAhDF,qBAA2B;AAC3B,wBAA2C;AAC3C,kBAAmB;AAKnB,qBAAoC;AACpC,4BAAsC;AACtC,mBAAgC;AAChC,mBAAyB;AAOV,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,KAAK,QAAI,2BAAY,kCAAoB;AACjD,MAAI,SAAS;AACb,MAAK,WAAY;AAChB,aAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AAAA,EAClC;AAEA,QAAM,CAAE,SAAU,QAAI,uBAAU,YAAa;AAE7C,QAAM,CAAE,kBAAkB,mBAAoB,QAAI,8BAAiB,MAAO;AAC1E,QAAM,mBAAwC,uBAC3C,6CAAuB,gBAAiB,IACxC,CAAC;AACJ,QAAM,sBAA2C,0BAC9C,6CAAuB,mBAAoB,IAC3C,CAAC;AAEJ,MAAK,WAAY;AAChB,qBAAiB,QAAQ;AACzB,wBAAoB,QAAQ;AAAA,EAC7B;AAEA,MAAK,UAAW;AACf,qBAAiB,WAAW;AAC5B,wBAAoB,WAAW;AAAA,EAChC;AAEA,SACC;AAAA,IAAC,kBAAAA,iBAAO;AAAA,IAAP;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,YAAa;AAAA,QACZ,OAAO;AAAA,QACP,MAAM;AAAA,MACP;AAAA,MACA,OAAQ;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,MACb;AAAA,MAEA;AAAA,oDAAC,UAAK,OAAQ,qBACX,8BAAI,KAAK,oBAAqB,GACjC;AAAA,QACA,4CAAC,UAAK,OAAQ,kBACX,8BAAI,KAAK,oBAAqB,GACjC;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["motion"]
+}

package/build/typography-panel.js

@@ -0,0 +1,64 @@
+"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 typography_panel_exports = {};
+__export(typography_panel_exports, {
+  default: () => TypographyPanel
+});
+module.exports = __toCommonJS(typography_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_block_editor = require("@wordpress/block-editor");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function TypographyPanel({
+  element,
+  headingLevel
+}) {
+  let prefixParts = [];
+  if (element === "heading") {
+    prefixParts = prefixParts.concat(["elements", headingLevel]);
+  } else if (element && element !== "text") {
+    prefixParts = prefixParts.concat(["elements", element]);
+  }
+  const prefix = prefixParts.join(".");
+  const [style] = (0, import_hooks.useStyle)(prefix, "", "user", false);
+  const [inheritedStyle, setStyle] = (0, import_hooks.useStyle)(
+    prefix,
+    "",
+    "merged",
+    false
+  );
+  const [rawSettings] = (0, import_hooks.useSetting)("");
+  const usedElement = element === "heading" ? headingLevel : element;
+  const settings = useSettingsForBlockElement(
+    rawSettings,
+    void 0,
+    usedElement
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StylesTypographyPanel,
+    {
+      inheritedValue: inheritedStyle,
+      value: style,
+      onChange: setStyle,
+      settings
+    }
+  );
+}
+//# sourceMappingURL=typography-panel.js.map

package/build/typography-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } =\n\tunlock( blockEditorPrivateApis );\n\ninterface TypographyPanelProps {\n\telement: string;\n\theadingLevel: string;\n}\n\nexport default function TypographyPanel( {\n\telement,\n\theadingLevel,\n}: TypographyPanelProps ) {\n\tlet prefixParts: string[] = [];\n\tif ( element === 'heading' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', headingLevel ] );\n\t} else if ( element && element !== 'text' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', element ] );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useStyle( prefix, '', 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\tprefix,\n\t\t'',\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ rawSettings ] = useSetting( '' );\n\tconst usedElement = element === 'heading' ? headingLevel : element;\n\tconst settings = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tundefined,\n\t\tusedElement\n\t);\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDE;AA5CF,0BAAsD;AAKtD,mBAAqC;AACrC,yBAAuB;AAEvB,MAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,QAC1E,2BAAQ,oBAAAA,WAAuB;AAOjB,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AACD,GAA0B;AACzB,MAAI,cAAwB,CAAC;AAC7B,MAAK,YAAY,WAAY;AAC5B,kBAAc,YAAY,OAAQ,CAAE,YAAY,YAAa,CAAE;AAAA,EAChE,WAAY,WAAW,YAAY,QAAS;AAC3C,kBAAc,YAAY,OAAQ,CAAE,YAAY,OAAQ,CAAE;AAAA,EAC3D;AACA,QAAM,SAAS,YAAY,KAAM,GAAI;AAErC,QAAM,CAAE,KAAM,QAAI,uBAAU,QAAQ,IAAI,QAAQ,KAAM;AACtD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,WAAY,QAAI,yBAAY,EAAG;AACvC,QAAM,cAAc,YAAY,YAAY,eAAe;AAC3D,QAAM,WAAW;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
+  "names": ["blockEditorPrivateApis"]
+}

package/build/typography-preview.js

@@ -0,0 +1,70 @@
+"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 typography_preview_exports = {};
+__export(typography_preview_exports, {
+  default: () => TypographyPreview
+});
+module.exports = __toCommonJS(typography_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_hooks = require("./hooks");
+function TypographyPreview({
+  name,
+  element,
+  headingLevel
+}) {
+  let prefix = "";
+  if (element === "heading") {
+    prefix = `elements.${headingLevel}.`;
+  } else if (element && element !== "text") {
+    prefix = `elements.${element}.`;
+  }
+  const [fontFamily] = (0, import_hooks.useStyle)(prefix + "typography.fontFamily", name);
+  const [gradientValue] = (0, import_hooks.useStyle)(prefix + "color.gradient", name);
+  const [backgroundColor] = (0, import_hooks.useStyle)(prefix + "color.background", name);
+  const [fallbackBackgroundColor] = (0, import_hooks.useStyle)("color.background");
+  const [color] = (0, import_hooks.useStyle)(prefix + "color.text", name);
+  const [fontSize] = (0, import_hooks.useStyle)(prefix + "typography.fontSize", name);
+  const [fontStyle] = (0, import_hooks.useStyle)(prefix + "typography.fontStyle", name);
+  const [fontWeight] = (0, import_hooks.useStyle)(prefix + "typography.fontWeight", name);
+  const [letterSpacing] = (0, import_hooks.useStyle)(
+    prefix + "typography.letterSpacing",
+    name
+  );
+  const extraStyles = element === "link" ? {
+    textDecoration: "underline"
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "global-styles-ui-typography-preview",
+      style: {
+        fontFamily: fontFamily ?? "serif",
+        background: gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
+        color,
+        fontSize,
+        fontStyle,
+        fontWeight,
+        letterSpacing,
+        ...extraStyles
+      },
+      children: "Aa"
+    }
+  );
+}
+//# sourceMappingURL=typography-preview.js.map

package/build/typography-preview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-preview.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\ninterface TypographyPreviewProps {\n\tname?: string;\n\telement: string;\n\theadingLevel: string;\n}\n\nexport default function TypographyPreview( {\n\tname,\n\telement,\n\theadingLevel,\n}: TypographyPreviewProps ) {\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ fallbackBackgroundColor ] = useStyle( 'color.background' );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"global-styles-ui-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\tbackground:\n\t\t\t\t\tgradientValue ?? backgroundColor ?? fallbackBackgroundColor,\n\t\t\t\tcolor,\n\t\t\t\tfontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tletterSpacing,\n\t\t\t\t...extraStyles,\n\t\t\t} }\n\t\t>\n\t\t\tAa\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CE;AAxCF,mBAAyB;AAQV,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,MAAI,SAAS;AACb,MAAK,YAAY,WAAY;AAC5B,aAAS,YAAa,YAAa;AAAA,EACpC,WAAY,WAAW,YAAY,QAAS;AAC3C,aAAS,YAAa,OAAQ;AAAA,EAC/B;AAEA,QAAM,CAAE,UAAW,QAAI,uBAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,QAAI,uBAAU,SAAS,kBAAkB,IAAK;AACpE,QAAM,CAAE,eAAgB,QAAI,uBAAU,SAAS,oBAAoB,IAAK;AACxE,QAAM,CAAE,uBAAwB,QAAI,uBAAU,kBAAmB;AACjE,QAAM,CAAE,KAAM,QAAI,uBAAU,SAAS,cAAc,IAAK;AACxD,QAAM,CAAE,QAAS,QAAI,uBAAU,SAAS,uBAAuB,IAAK;AACpE,QAAM,CAAE,SAAU,QAAI,uBAAU,SAAS,wBAAwB,IAAK;AACtE,QAAM,CAAE,UAAW,QAAI,uBAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,QAAI;AAAA,IACzB,SAAS;AAAA,IACT;AAAA,EACD;AACA,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,YAAY,cAAc;AAAA,QAC1B,YACC,iBAAiB,mBAAmB;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MACA;AAAA;AAAA,EAED;AAEF;",
+  "names": []
+}

package/build/typography-variations.js

@@ -0,0 +1,41 @@
+"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 typography_variations_exports = {};
+__export(typography_variations_exports, {
+  TypographyVariations: () => TypographyVariations
+});
+module.exports = __toCommonJS(typography_variations_exports);
+var import_variations_typography = __toESM(require("./variations/variations-typography"));
+var import_with_global_styles_provider = require("./with-global-styles-provider");
+const TypographyVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_variations_typography.default);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TypographyVariations
+});
+//# sourceMappingURL=typography-variations.js.map

package/build/typography-variations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-variations.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport TypographyVariationsInternal from './variations/variations-typography';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface TypographyVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\ttitle?: string;\n\tgap?: number;\n}\n\n/**\n * Render Typography Variations.\n *\n * @example\n * ```tsx\n * <TypographyVariations\n *   value={userConfig}\n *   baseValue={baseConfig}\n *   onChange={setUserConfig}\n *   title=\"Typography\"\n *   gap={3}\n * />\n * ```\n */\nexport const TypographyVariations: React.ComponentType< TypographyVariationsProps > =\n\twithGlobalStylesProvider( TypographyVariationsInternal );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,mCAAyC;AACzC,yCAAyC;AAwBlC,MAAM,2BACZ,6DAA0B,6BAAAA,OAA6B;",
+  "names": ["TypographyVariationsInternal"]
+}

package/build/utils.js

@@ -0,0 +1,210 @@
+"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 utils_exports = {};
+__export(utils_exports, {
+  filterObjectByProperties: () => filterObjectByProperties,
+  formatFontFamily: () => formatFontFamily,
+  getFamilyPreviewStyle: () => getFamilyPreviewStyle,
+  getFontFamilies: () => getFontFamilies,
+  getNewIndexFromPresets: () => getNewIndexFromPresets,
+  getVariationClassName: () => getVariationClassName,
+  isVariationWithProperties: () => isVariationWithProperties,
+  removePropertiesFromObject: () => removePropertiesFromObject
+});
+module.exports = __toCommonJS(utils_exports);
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+function removePropertiesFromObject(object, properties) {
+  if (!properties?.length) {
+    return object;
+  }
+  if (typeof object !== "object" || !object || !Object.keys(object).length) {
+    return object;
+  }
+  for (const key in object) {
+    if (properties.includes(key)) {
+      delete object[key];
+    } else if (typeof object[key] === "object") {
+      removePropertiesFromObject(object[key], properties);
+    }
+  }
+  return object;
+}
+const filterObjectByProperties = (object, properties) => {
+  if (!object || !properties?.length) {
+    return {};
+  }
+  const newObject = {};
+  Object.keys(object).forEach((key) => {
+    if (properties.includes(key)) {
+      newObject[key] = object[key];
+    } else if (typeof object[key] === "object") {
+      const newFilter = filterObjectByProperties(
+        object[key],
+        properties
+      );
+      if (Object.keys(newFilter).length) {
+        newObject[key] = newFilter;
+      }
+    }
+  });
+  return newObject;
+};
+function isVariationWithProperties(variation, properties) {
+  const variationWithProperties = filterObjectByProperties(
+    structuredClone(variation),
+    properties
+  );
+  return (0, import_global_styles_engine.areGlobalStylesEqual)(variationWithProperties, variation);
+}
+function getFontFamilyFromSetting(fontFamilies, setting) {
+  if (!Array.isArray(fontFamilies) || !setting) {
+    return null;
+  }
+  const fontFamilyVariable = setting.replace("var(", "").replace(")", "");
+  const fontFamilySlug = fontFamilyVariable?.split("--").slice(-1)[0];
+  return fontFamilies.find(
+    (fontFamily) => fontFamily.slug === fontFamilySlug
+  );
+}
+function getFontFamilies(themeJson) {
+  const themeFontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme;
+  const customFontFamilies = themeJson?.settings?.typography?.fontFamilies?.custom;
+  let fontFamilies = [];
+  if (themeFontFamilies && customFontFamilies) {
+    fontFamilies = [...themeFontFamilies, ...customFontFamilies];
+  } else if (themeFontFamilies) {
+    fontFamilies = themeFontFamilies;
+  } else if (customFontFamilies) {
+    fontFamilies = customFontFamilies;
+  }
+  const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
+  const bodyFontFamily = getFontFamilyFromSetting(
+    fontFamilies,
+    bodyFontFamilySetting
+  );
+  const headingFontFamilySetting = themeJson?.styles?.elements?.heading?.typography?.fontFamily;
+  let headingFontFamily;
+  if (!headingFontFamilySetting) {
+    headingFontFamily = bodyFontFamily;
+  } else {
+    headingFontFamily = getFontFamilyFromSetting(
+      fontFamilies,
+      themeJson?.styles?.elements?.heading?.typography?.fontFamily
+    );
+  }
+  return [bodyFontFamily, headingFontFamily];
+}
+function findNearest(input, numbers) {
+  if (numbers.length === 0) {
+    return null;
+  }
+  numbers.sort((a, b) => Math.abs(input - a) - Math.abs(input - b));
+  return numbers[0];
+}
+function extractFontWeights(fontFaces) {
+  const result = [];
+  fontFaces.forEach((face) => {
+    const weights = String(face.fontWeight).split(" ");
+    if (weights.length === 2) {
+      const start = parseInt(weights[0]);
+      const end = parseInt(weights[1]);
+      for (let i = start; i <= end; i += 100) {
+        result.push(i);
+      }
+    } else if (weights.length === 1) {
+      result.push(parseInt(weights[0]));
+    }
+  });
+  return result;
+}
+function formatFontFamily(input) {
+  const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+  const output = input.trim();
+  const formatItem = (item) => {
+    item = item.trim();
+    if (item.match(regex)) {
+      item = item.replace(/^["']|["']$/g, "");
+      return `"${item}"`;
+    }
+    return item;
+  };
+  if (output.includes(",")) {
+    return output.split(",").map(formatItem).filter((item) => item !== "").join(", ");
+  }
+  return formatItem(output);
+}
+function getFamilyPreviewStyle(family) {
+  const style = {
+    fontFamily: formatFontFamily(family.fontFamily)
+  };
+  if (!Array.isArray(family.fontFace)) {
+    style.fontWeight = "400";
+    style.fontStyle = "normal";
+    return style;
+  }
+  if (family.fontFace) {
+    const normalFaces = family.fontFace.filter(
+      (face) => face?.fontStyle && face.fontStyle.toLowerCase() === "normal"
+    );
+    if (normalFaces.length > 0) {
+      style.fontStyle = "normal";
+      const normalWeights = extractFontWeights(normalFaces);
+      const nearestWeight = findNearest(400, normalWeights);
+      style.fontWeight = String(nearestWeight) || "400";
+    } else {
+      style.fontStyle = family.fontFace.length && family.fontFace[0].fontStyle || "normal";
+      style.fontWeight = family.fontFace.length && String(family.fontFace[0].fontWeight) || "400";
+    }
+  }
+  return style;
+}
+function getVariationClassName(variation) {
+  if (!variation) {
+    return "";
+  }
+  return `is-style-${variation}`;
+}
+function getNewIndexFromPresets(presets, slugPrefix) {
+  const nameRegex = new RegExp(`^${slugPrefix}([\\d]+)$`);
+  const highestPresetValue = presets.reduce((currentHighest, preset) => {
+    if (typeof preset?.slug === "string") {
+      const matches = preset?.slug.match(nameRegex);
+      if (matches) {
+        const id = parseInt(matches[1], 10);
+        if (id > currentHighest) {
+          return id;
+        }
+      }
+    }
+    return currentHighest;
+  }, 0);
+  return highestPresetValue + 1;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  filterObjectByProperties,
+  formatFontFamily,
+  getFamilyPreviewStyle,
+  getFontFamilies,
+  getNewIndexFromPresets,
+  getVariationClassName,
+  isVariationWithProperties,
+  removePropertiesFromObject
+});
+//# sourceMappingURL=utils.js.map