@wordpress/global-styles-ui 1.1.0

package/build-module/font-sizes/confirm-reset-font-sizes-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-sizes/confirm-reset-font-sizes-dialog.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\ninterface ConfirmResetFontSizesDialogProps {\n\ttext: string;\n\tconfirmButtonText: string;\n\tisOpen: boolean;\n\ttoggleOpen: () => void;\n\tonConfirm: () => void;\n}\n\nfunction ConfirmResetFontSizesDialog( {\n\ttext,\n\tconfirmButtonText,\n\tisOpen,\n\ttoggleOpen,\n\tonConfirm,\n}: ConfirmResetFontSizesDialogProps ) {\n\tconst handleConfirm = async () => {\n\t\ttoggleOpen();\n\t\tonConfirm();\n\t};\n\n\tconst handleCancel = () => {\n\t\ttoggleOpen();\n\t};\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ confirmButtonText }\n\t\t\tonCancel={ handleCancel }\n\t\t\tonConfirm={ handleConfirm }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t{ text }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default ConfirmResetFontSizesDialog;\n"],
+  "mappings": "AA+BE;AA5BF,SAAS,+BAA+B,qBAAqB;AAC7D,SAAS,UAAU;AAUnB,SAAS,4BAA6B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsC;AACrC,QAAM,gBAAgB,YAAY;AACjC,eAAW;AACX,cAAU;AAAA,EACX;AAEA,QAAM,eAAe,MAAM;AAC1B,eAAW;AAAA,EACZ;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,kBAAmB,GAAI,QAAS;AAAA,MAChC;AAAA,MACA,UAAW;AAAA,MACX,WAAY;AAAA,MACZ,MAAK;AAAA,MAEH;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,0CAAQ;",
+  "names": []
+}

package/build-module/font-sizes/font-size-preview.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { getComputedFluidTypographyValue } from "@wordpress/block-editor";
+import { __ } from "@wordpress/i18n";
+import { useStyle } from "../hooks";
+function FontSizePreview({ fontSize }) {
+  const [font] = useStyle("typography");
+  const input = typeof fontSize?.fluid === "object" && fontSize?.fluid?.min && fontSize?.fluid?.max ? {
+    minimumFontSize: fontSize.fluid.min,
+    maximumFontSize: fontSize.fluid.max
+  } : {
+    fontSize: fontSize.size
+  };
+  const computedFontSize = getComputedFluidTypographyValue(input);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "global-styles-ui-typography-preview",
+      style: {
+        fontSize: computedFontSize,
+        fontFamily: font?.fontFamily ?? "serif"
+      },
+      children: __("Aa")
+    }
+  );
+}
+var font_size_preview_default = FontSizePreview;
+export {
+  font_size_preview_default as default
+};
+//# sourceMappingURL=font-size-preview.js.map

package/build-module/font-sizes/font-size-preview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-sizes/font-size-preview.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { getComputedFluidTypographyValue } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport type { FontSize } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from '../hooks';\n\ninterface FontSizePreviewProps {\n\tfontSize: FontSize;\n}\n\nfunction FontSizePreview( { fontSize }: FontSizePreviewProps ) {\n\tconst [ font ] = useStyle< { fontFamily?: string } >( 'typography' );\n\n\tconst input =\n\t\ttypeof fontSize?.fluid === 'object' &&\n\t\tfontSize?.fluid?.min &&\n\t\tfontSize?.fluid?.max\n\t\t\t? {\n\t\t\t\t\tminimumFontSize: fontSize.fluid.min,\n\t\t\t\t\tmaximumFontSize: fontSize.fluid.max,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tfontSize: fontSize.size,\n\t\t\t  };\n\n\tconst computedFontSize = getComputedFluidTypographyValue( input );\n\treturn (\n\t\t<div\n\t\t\tclassName=\"global-styles-ui-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontSize: computedFontSize,\n\t\t\t\tfontFamily: font?.fontFamily ?? 'serif',\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Aa' ) }\n\t\t</div>\n\t);\n}\n\nexport default FontSizePreview;\n"],
+  "mappings": "AAkCE;AA9BF,SAAS,uCAAuC;AAChD,SAAS,UAAU;AAMnB,SAAS,gBAAgB;AAMzB,SAAS,gBAAiB,EAAE,SAAS,GAA0B;AAC9D,QAAM,CAAE,IAAK,IAAI,SAAqC,YAAa;AAEnE,QAAM,QACL,OAAO,UAAU,UAAU,YAC3B,UAAU,OAAO,OACjB,UAAU,OAAO,MACd;AAAA,IACA,iBAAiB,SAAS,MAAM;AAAA,IAChC,iBAAiB,SAAS,MAAM;AAAA,EAChC,IACA;AAAA,IACA,UAAU,SAAS;AAAA,EACnB;AAEJ,QAAM,mBAAmB,gCAAiC,KAAM;AAChE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,UAAU;AAAA,QACV,YAAY,MAAM,cAAc;AAAA,MACjC;AAAA,MAEE,aAAI,IAAK;AAAA;AAAA,EACZ;AAEF;AAEA,IAAO,4BAAQ;",
+  "names": []
+}

package/build-module/font-sizes/font-size.js

@@ -0,0 +1,241 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __, sprintf } from "@wordpress/i18n";
+import {
+  __experimentalSpacer as Spacer,
+  useNavigator,
+  __experimentalView as View,
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  privateApis as componentsPrivateApis,
+  Button,
+  FlexItem,
+  ToggleControl
+} from "@wordpress/components";
+import { moreVertical } from "@wordpress/icons";
+import { useState, useEffect } from "@wordpress/element";
+import { ScreenHeader } from "../screen-header";
+import FontSizePreview from "./font-size-preview";
+import ConfirmDeleteFontSizeDialog from "./confirm-delete-font-size-dialog";
+import RenameFontSizeDialog from "./rename-font-size-dialog";
+import { SizeControl } from "../size-control";
+import { useSetting } from "../hooks";
+import { unlock } from "../lock-unlock";
+const { Menu } = unlock(componentsPrivateApis);
+function FontSize() {
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const {
+    params: { origin, slug },
+    goBack
+  } = useNavigator();
+  const [fontSizes, setFontSizes] = useSetting("typography.fontSizes");
+  const [globalFluid] = useSetting("typography.fluid");
+  const sizes = fontSizes?.[origin] ?? [];
+  const fontSize = sizes.find(
+    (size) => size.slug === slug
+  );
+  useEffect(() => {
+    if (!!slug && !fontSize) {
+      goBack();
+    }
+  }, [slug, fontSize, goBack]);
+  if (!origin || !slug || !fontSize) {
+    return null;
+  }
+  const isFluid = fontSize?.fluid !== void 0 ? !!fontSize.fluid : !!globalFluid;
+  const isCustomFluid = typeof fontSize?.fluid === "object";
+  const handleNameChange = (value) => {
+    updateFontSize("name", value);
+  };
+  const handleFontSizeChange = (value) => {
+    updateFontSize("size", value);
+  };
+  const handleFluidChange = (value) => {
+    updateFontSize("fluid", value);
+  };
+  const handleCustomFluidValues = (value) => {
+    if (value) {
+      updateFontSize("fluid", {
+        min: fontSize.size,
+        max: fontSize.size
+      });
+    } else {
+      updateFontSize("fluid", true);
+    }
+  };
+  const handleMinChange = (value) => {
+    const fluid = typeof fontSize.fluid === "object" ? fontSize.fluid : {};
+    updateFontSize("fluid", { ...fluid, min: value });
+  };
+  const handleMaxChange = (value) => {
+    const fluid = typeof fontSize.fluid === "object" ? fontSize.fluid : {};
+    updateFontSize("fluid", { ...fluid, max: value });
+  };
+  const updateFontSize = (key, value) => {
+    const newFontSizes = sizes.map((size) => {
+      if (size.slug === slug) {
+        return { ...size, [key]: value };
+      }
+      return size;
+    });
+    setFontSizes({
+      ...fontSizes,
+      [origin]: newFontSizes
+    });
+  };
+  const handleRemoveFontSize = () => {
+    const newFontSizes = sizes.filter((size) => size.slug !== slug);
+    setFontSizes({
+      ...fontSizes,
+      [origin]: newFontSizes
+    });
+  };
+  const toggleDeleteConfirm = () => {
+    setIsDeleteConfirmOpen(!isDeleteConfirmOpen);
+  };
+  const toggleRenameDialog = () => {
+    setIsRenameDialogOpen(!isRenameDialogOpen);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ConfirmDeleteFontSizeDialog,
+      {
+        fontSize,
+        isOpen: isDeleteConfirmOpen,
+        toggleOpen: toggleDeleteConfirm,
+        handleRemoveFontSize
+      }
+    ),
+    isRenameDialogOpen && /* @__PURE__ */ jsx(
+      RenameFontSizeDialog,
+      {
+        fontSize,
+        toggleOpen: toggleRenameDialog,
+        handleRename: handleNameChange
+      }
+    ),
+    /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+      /* @__PURE__ */ jsxs(HStack, { justify: "space-between", alignment: "flex-start", children: [
+        /* @__PURE__ */ jsx(
+          ScreenHeader,
+          {
+            title: fontSize.name,
+            description: sprintf(
+              /* translators: %s: font size preset name. */
+              __("Manage the font size %s."),
+              fontSize.name
+            )
+          }
+        ),
+        origin === "custom" && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+          Spacer,
+          {
+            marginTop: 3,
+            marginBottom: 0,
+            paddingX: 4,
+            children: /* @__PURE__ */ jsxs(Menu, { children: [
+              /* @__PURE__ */ jsx(
+                Menu.TriggerButton,
+                {
+                  render: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      icon: moreVertical,
+                      label: __(
+                        "Font size options"
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(Menu.Popover, { children: [
+                /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    onClick: toggleRenameDialog,
+                    children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: __("Rename") })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    onClick: toggleDeleteConfirm,
+                    children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: __("Delete") })
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(
+        Spacer,
+        {
+          paddingX: 4,
+          marginBottom: 0,
+          paddingBottom: 6,
+          children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+            /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(FontSizePreview, { fontSize }) }),
+            /* @__PURE__ */ jsx(
+              SizeControl,
+              {
+                label: __("Size"),
+                value: !isCustomFluid && fontSize.size ? String(fontSize.size) : "",
+                onChange: handleFontSizeChange,
+                disabled: isCustomFluid
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToggleControl,
+              {
+                label: __("Fluid typography"),
+                help: __(
+                  "Scale the font size dynamically to fit the screen or viewport."
+                ),
+                checked: isFluid,
+                onChange: handleFluidChange,
+                __nextHasNoMarginBottom: true
+              }
+            ),
+            isFluid && /* @__PURE__ */ jsx(
+              ToggleControl,
+              {
+                label: __("Custom fluid values"),
+                help: __(
+                  "Set custom min and max values for the fluid font size."
+                ),
+                checked: isCustomFluid,
+                onChange: handleCustomFluidValues,
+                __nextHasNoMarginBottom: true
+              }
+            ),
+            isCustomFluid && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                SizeControl,
+                {
+                  label: __("Minimum"),
+                  value: typeof fontSize?.fluid === "object" ? fontSize.fluid?.min : void 0,
+                  onChange: handleMinChange
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SizeControl,
+                {
+                  label: __("Maximum"),
+                  value: typeof fontSize?.fluid === "object" ? fontSize.fluid?.max : void 0,
+                  onChange: handleMaxChange
+                }
+              )
+            ] })
+          ] })
+        }
+      ) })
+    ] })
+  ] });
+}
+var font_size_default = FontSize;
+export {
+  font_size_default as default
+};
+//# sourceMappingURL=font-size.js.map

package/build-module/font-sizes/font-size.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-sizes/font-size.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalSpacer as Spacer,\n\tuseNavigator,\n\t__experimentalView as View,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tFlexItem,\n\tToggleControl,\n} from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\nimport { useState, useEffect } from '@wordpress/element';\nimport type {\n\tTypographyPreset,\n\tFluidTypographySettings,\n\tFontSize,\n\tFluidTypographyConfig,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from '../screen-header';\nimport FontSizePreview from './font-size-preview';\nimport ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';\nimport RenameFontSizeDialog from './rename-font-size-dialog';\nimport { SizeControl } from '../size-control';\nimport { useSetting } from '../hooks';\nimport { unlock } from '../lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nfunction FontSize() {\n\tconst [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );\n\tconst [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );\n\n\tconst {\n\t\tparams: { origin, slug },\n\t\tgoBack,\n\t} = useNavigator();\n\n\tconst [ fontSizes, setFontSizes ] = useSetting<\n\t\tRecord< string, TypographyPreset[] > | undefined\n\t>( 'typography.fontSizes' );\n\tconst [ globalFluid ] = useSetting<\n\t\tboolean | FluidTypographySettings | undefined\n\t>( 'typography.fluid' );\n\n\t// Get the font sizes from the origin, default to empty array.\n\tconst sizes = fontSizes?.[ origin as string ] ?? [];\n\n\t// Get the font size by slug.\n\tconst fontSize: FontSize | undefined = sizes.find(\n\t\t( size ) => size.slug === slug\n\t);\n\n\t// Navigate to the font sizes list if the font size is not available.\n\tuseEffect( () => {\n\t\tif ( !! slug && ! fontSize ) {\n\t\t\tgoBack();\n\t\t}\n\t}, [ slug, fontSize, goBack ] );\n\n\tif ( ! origin || ! slug || ! fontSize ) {\n\t\treturn null;\n\t}\n\n\t// Whether the font size is fluid. If not defined, use the global fluid value of the theme.\n\tconst isFluid =\n\t\tfontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;\n\n\t// Whether custom fluid values are used.\n\tconst isCustomFluid = typeof fontSize?.fluid === 'object';\n\n\tconst handleNameChange = ( value: string ) => {\n\t\tupdateFontSize( 'name', value );\n\t};\n\n\tconst handleFontSizeChange = ( value: string | undefined ) => {\n\t\tupdateFontSize( 'size', value );\n\t};\n\n\tconst handleFluidChange = ( value: boolean ) => {\n\t\tupdateFontSize( 'fluid', value );\n\t};\n\n\tconst handleCustomFluidValues = ( value: boolean ) => {\n\t\tif ( value ) {\n\t\t\t// If custom values are used, init the values with the current ones.\n\t\t\tupdateFontSize( 'fluid', {\n\t\t\t\tmin: fontSize.size,\n\t\t\t\tmax: fontSize.size,\n\t\t\t} );\n\t\t} else {\n\t\t\t// If custom fluid values are disabled, set fluid to true.\n\t\t\tupdateFontSize( 'fluid', true );\n\t\t}\n\t};\n\n\tconst handleMinChange = ( value: string | undefined ) => {\n\t\tconst fluid: FluidTypographyConfig =\n\t\t\ttypeof fontSize.fluid === 'object' ? fontSize.fluid : {};\n\t\tupdateFontSize( 'fluid', { ...fluid, min: value } );\n\t};\n\n\tconst handleMaxChange = ( value: string | undefined ) => {\n\t\tconst fluid: FluidTypographyConfig =\n\t\t\ttypeof fontSize.fluid === 'object' ? fontSize.fluid : {};\n\t\tupdateFontSize( 'fluid', { ...fluid, max: value } );\n\t};\n\n\tconst updateFontSize = ( key: string, value: any ) => {\n\t\tconst newFontSizes = sizes.map( ( size ) => {\n\t\t\tif ( size.slug === slug ) {\n\t\t\t\treturn { ...size, [ key ]: value }; // Create a new object with updated key\n\t\t\t}\n\t\t\treturn size;\n\t\t} );\n\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin as string ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst handleRemoveFontSize = () => {\n\t\tconst newFontSizes = sizes.filter( ( size ) => size.slug !== slug );\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin as string ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst toggleDeleteConfirm = () => {\n\t\tsetIsDeleteConfirmOpen( ! isDeleteConfirmOpen );\n\t};\n\n\tconst toggleRenameDialog = () => {\n\t\tsetIsRenameDialogOpen( ! isRenameDialogOpen );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ConfirmDeleteFontSizeDialog\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\tisOpen={ isDeleteConfirmOpen }\n\t\t\t\ttoggleOpen={ toggleDeleteConfirm }\n\t\t\t\thandleRemoveFontSize={ handleRemoveFontSize }\n\t\t\t/>\n\n\t\t\t{ isRenameDialogOpen && (\n\t\t\t\t<RenameFontSizeDialog\n\t\t\t\t\tfontSize={ fontSize }\n\t\t\t\t\ttoggleOpen={ toggleRenameDialog }\n\t\t\t\t\thandleRename={ handleNameChange }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<HStack justify=\"space-between\" alignment=\"flex-start\">\n\t\t\t\t\t<ScreenHeader\n\t\t\t\t\t\ttitle={ fontSize.name }\n\t\t\t\t\t\tdescription={ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: font size preset name. */\n\t\t\t\t\t\t\t__( 'Manage the font size %s.' ),\n\t\t\t\t\t\t\tfontSize.name\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ origin === 'custom' && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\t\tmarginTop={ 3 }\n\t\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Font size options'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\t\tonClick={ toggleRenameDialog }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Rename' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\t\tonClick={ toggleDeleteConfirm }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t\t\t</Menu>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\n\t\t\t\t<View>\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\tpaddingBottom={ 6 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<FontSizePreview fontSize={ fontSize } />\n\t\t\t\t\t\t\t</FlexItem>\n\n\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t! isCustomFluid && fontSize.size\n\t\t\t\t\t\t\t\t\t\t? String( fontSize.size )\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonChange={ handleFontSizeChange }\n\t\t\t\t\t\t\t\tdisabled={ isCustomFluid }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Fluid typography' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Scale the font size dynamically to fit the screen or viewport.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={ isFluid }\n\t\t\t\t\t\t\t\tonChange={ handleFluidChange }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{ isFluid && (\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom fluid values' ) }\n\t\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t\t'Set custom min and max values for the fluid font size.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ isCustomFluid }\n\t\t\t\t\t\t\t\t\tonChange={ handleCustomFluidValues }\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t{ isCustomFluid && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Minimum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t\t\ttypeof fontSize?.fluid === 'object'\n\t\t\t\t\t\t\t\t\t\t\t\t? fontSize.fluid?.min\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMinChange }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Maximum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t\t\ttypeof fontSize?.fluid === 'object'\n\t\t\t\t\t\t\t\t\t\t\t\t? fontSize.fluid?.max\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMaxChange }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</View>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default FontSize;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/font-sizes/font-sizes-count.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __, isRTL } from "@wordpress/i18n";
+import {
+  __experimentalItemGroup as ItemGroup,
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  FlexItem
+} from "@wordpress/components";
+import { Icon, chevronLeft, chevronRight } from "@wordpress/icons";
+import { Subtitle } from "../subtitle";
+import { NavigationButtonAsItem } from "../navigation-button";
+function FontSizes() {
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(HStack, { justify: "space-between", children: /* @__PURE__ */ jsx(Subtitle, { level: 3, children: __("Font Sizes") }) }),
+    /* @__PURE__ */ jsx(ItemGroup, { isBordered: true, isSeparated: true, children: /* @__PURE__ */ jsx(NavigationButtonAsItem, { path: "/typography/font-sizes", children: /* @__PURE__ */ jsxs(HStack, { direction: "row", children: [
+      /* @__PURE__ */ jsx(FlexItem, { children: __("Font size presets") }),
+      /* @__PURE__ */ jsx(Icon, { icon: isRTL() ? chevronLeft : chevronRight })
+    ] }) }) })
+  ] });
+}
+var font_sizes_count_default = FontSizes;
+export {
+  font_sizes_count_default as default
+};
+//# sourceMappingURL=font-sizes-count.js.map

package/build-module/font-sizes/font-sizes-count.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-sizes/font-sizes-count.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from '../subtitle';\nimport { NavigationButtonAsItem } from '../navigation-button';\n\nfunction FontSizes() {\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>\n\t\t\t</HStack>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path=\"/typography/font-sizes\">\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t<FlexItem>{ __( 'Font size presets' ) }</FlexItem>\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default FontSizes;\n"],
+  "mappings": "AAsBI,cAIC,YAJD;AAnBJ,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC,2BAA2B;AAAA,EAC3B,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,MAAM,aAAa,oBAAoB;AAKhD,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AAEvC,SAAS,YAAY;AACpB,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,UAAO,SAAQ,iBACf,8BAAC,YAAS,OAAQ,GAAM,aAAI,YAAa,GAAG,GAC7C;AAAA,IACA,oBAAC,aAAU,YAAU,MAAC,aAAW,MAChC,8BAAC,0BAAuB,MAAK,0BAC5B,+BAAC,UAAO,WAAU,OACjB;AAAA,0BAAC,YAAW,aAAI,mBAAoB,GAAG;AAAA,MACvC,oBAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,2BAAQ;",
+  "names": []
+}

package/build-module/font-sizes/font-sizes.js

@@ -0,0 +1,200 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __, sprintf, isRTL } from "@wordpress/i18n";
+import {
+  privateApis as componentsPrivateApis,
+  __experimentalSpacer as Spacer,
+  __experimentalView as View,
+  __experimentalItemGroup as ItemGroup,
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  FlexItem,
+  Button
+} from "@wordpress/components";
+import {
+  Icon,
+  plus,
+  moreVertical,
+  chevronLeft,
+  chevronRight
+} from "@wordpress/icons";
+import { useState } from "@wordpress/element";
+import { Subtitle } from "../subtitle";
+import { NavigationButtonAsItem } from "../navigation-button";
+import { getNewIndexFromPresets } from "../utils";
+import { ScreenHeader } from "../screen-header";
+import ConfirmResetFontSizesDialog from "./confirm-reset-font-sizes-dialog";
+import { useSetting } from "../hooks";
+import { unlock } from "../lock-unlock";
+const { Menu } = unlock(componentsPrivateApis);
+function FontSizeGroup({
+  label,
+  origin,
+  sizes,
+  handleAddFontSize,
+  handleResetFontSizes
+}) {
+  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
+  const toggleResetDialog = () => setIsResetDialogOpen(!isResetDialogOpen);
+  const resetDialogText = origin === "custom" ? __(
+    "Are you sure you want to remove all custom font size presets?"
+  ) : __(
+    "Are you sure you want to reset all font size presets to their default values?"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    handleResetFontSizes && isResetDialogOpen && /* @__PURE__ */ jsx(
+      ConfirmResetFontSizesDialog,
+      {
+        text: resetDialogText,
+        confirmButtonText: origin === "custom" ? __("Remove") : __("Reset"),
+        isOpen: isResetDialogOpen,
+        toggleOpen: toggleResetDialog,
+        onConfirm: handleResetFontSizes
+      }
+    ),
+    /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+      /* @__PURE__ */ jsxs(HStack, { children: [
+        /* @__PURE__ */ jsx(Subtitle, { level: 3, children: label }),
+        /* @__PURE__ */ jsxs(FlexItem, { className: "global-styles-ui__typography-panel__options-container", children: [
+          origin === "custom" && /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: __("Add font size"),
+              icon: plus,
+              size: "small",
+              onClick: handleAddFontSize
+            }
+          ),
+          !!handleResetFontSizes && /* @__PURE__ */ jsxs(Menu, { children: [
+            /* @__PURE__ */ jsx(
+              Menu.TriggerButton,
+              {
+                render: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    icon: moreVertical,
+                    label: __(
+                      "Font size presets options"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Menu.Popover, { children: /* @__PURE__ */ jsx(Menu.Item, { onClick: toggleResetDialog, children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: origin === "custom" ? __(
+              "Remove font size presets"
+            ) : __(
+              "Reset font size presets"
+            ) }) }) })
+          ] })
+        ] })
+      ] }),
+      !!sizes.length && /* @__PURE__ */ jsx(ItemGroup, { isBordered: true, isSeparated: true, children: sizes.map((size) => /* @__PURE__ */ jsx(
+        NavigationButtonAsItem,
+        {
+          path: `/typography/font-sizes/${origin}/${size.slug}`,
+          children: /* @__PURE__ */ jsxs(HStack, { children: [
+            /* @__PURE__ */ jsx(FlexItem, { className: "global-styles-ui-font-size__item", children: size.name }),
+            /* @__PURE__ */ jsx(FlexItem, { display: "flex", children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: isRTL() ? chevronLeft : chevronRight
+              }
+            ) })
+          ] })
+        },
+        size.slug
+      )) })
+    ] })
+  ] });
+}
+function FontSizes() {
+  const [themeFontSizes, setThemeFontSizes] = useSetting(
+    "typography.fontSizes.theme"
+  );
+  const [baseThemeFontSizes] = useSetting(
+    "typography.fontSizes.theme",
+    "base"
+  );
+  const [defaultFontSizes, setDefaultFontSizes] = useSetting(
+    "typography.fontSizes.default"
+  );
+  const [baseDefaultFontSizes] = useSetting(
+    "typography.fontSizes.default",
+    "base"
+  );
+  const [customFontSizes = [], setCustomFontSizes] = useSetting(
+    "typography.fontSizes.custom"
+  );
+  const [defaultFontSizesEnabled] = useSetting(
+    "typography.defaultFontSizes"
+  );
+  const handleAddFontSize = () => {
+    const index = getNewIndexFromPresets(customFontSizes, "custom-");
+    const newFontSize = {
+      /* translators: %d: font size index */
+      name: sprintf(__("New Font Size %d"), index),
+      size: "16px",
+      slug: `custom-${index}`
+    };
+    setCustomFontSizes([...customFontSizes, newFontSize]);
+  };
+  const hasSameSizeValues = (arr1, arr2) => arr1.map((item) => item.size).join("") === arr2.map((item) => item.size).join("");
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: __("Font size presets"),
+        description: __(
+          "Create and edit the presets used for font sizes across the site."
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(Spacer, { paddingX: 4, children: /* @__PURE__ */ jsxs(VStack, { spacing: 8, children: [
+      !!themeFontSizes?.length && /* @__PURE__ */ jsx(
+        FontSizeGroup,
+        {
+          label: __("Theme"),
+          origin: "theme",
+          sizes: themeFontSizes,
+          handleAddFontSize,
+          handleResetFontSizes: hasSameSizeValues(
+            themeFontSizes,
+            baseThemeFontSizes
+          ) ? void 0 : () => setThemeFontSizes(
+            baseThemeFontSizes
+          )
+        }
+      ),
+      defaultFontSizesEnabled && !!defaultFontSizes?.length && /* @__PURE__ */ jsx(
+        FontSizeGroup,
+        {
+          label: __("Default"),
+          origin: "default",
+          sizes: defaultFontSizes,
+          handleAddFontSize,
+          handleResetFontSizes: hasSameSizeValues(
+            defaultFontSizes,
+            baseDefaultFontSizes
+          ) ? void 0 : () => setDefaultFontSizes(
+            baseDefaultFontSizes
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FontSizeGroup,
+        {
+          label: __("Custom"),
+          origin: "custom",
+          sizes: customFontSizes,
+          handleAddFontSize,
+          handleResetFontSizes: customFontSizes.length > 0 ? () => setCustomFontSizes([]) : void 0
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var font_sizes_default = FontSizes;
+export {
+  font_sizes_default as default
+};
+//# sourceMappingURL=font-sizes.js.map

package/build-module/font-sizes/font-sizes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-sizes/font-sizes.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalSpacer as Spacer,\n\t__experimentalView as View,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n\tButton,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tplus,\n\tmoreVertical,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { useState } from '@wordpress/element';\nimport type { FontSize } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from '../subtitle';\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { getNewIndexFromPresets } from '../utils';\nimport { ScreenHeader } from '../screen-header';\nimport ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';\nimport { useSetting } from '../hooks';\nimport { unlock } from '../lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\ninterface FontSizeGroupProps {\n\tlabel: string;\n\torigin: string;\n\tsizes: FontSize[];\n\thandleAddFontSize: () => void;\n\thandleResetFontSizes?: () => void;\n}\n\nfunction FontSizeGroup( {\n\tlabel,\n\torigin,\n\tsizes,\n\thandleAddFontSize,\n\thandleResetFontSizes,\n}: FontSizeGroupProps ) {\n\tconst [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );\n\n\tconst toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );\n\n\tconst resetDialogText =\n\t\torigin === 'custom'\n\t\t\t? __(\n\t\t\t\t\t'Are you sure you want to remove all custom font size presets?'\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Are you sure you want to reset all font size presets to their default values?'\n\t\t\t  );\n\n\treturn (\n\t\t<>\n\t\t\t{ handleResetFontSizes && isResetDialogOpen && (\n\t\t\t\t<ConfirmResetFontSizesDialog\n\t\t\t\t\ttext={ resetDialogText }\n\t\t\t\t\tconfirmButtonText={\n\t\t\t\t\t\torigin === 'custom' ? __( 'Remove' ) : __( 'Reset' )\n\t\t\t\t\t}\n\t\t\t\t\tisOpen={ isResetDialogOpen }\n\t\t\t\t\ttoggleOpen={ toggleResetDialog }\n\t\t\t\t\tonConfirm={ handleResetFontSizes }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<HStack>\n\t\t\t\t\t<Subtitle level={ 3 }>{ label }</Subtitle>\n\t\t\t\t\t<FlexItem className=\"global-styles-ui__typography-panel__options-container\">\n\t\t\t\t\t\t{ origin === 'custom' && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tlabel={ __( 'Add font size' ) }\n\t\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tonClick={ handleAddFontSize }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ !! handleResetFontSizes && (\n\t\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Font size presets options'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t\t<Menu.Item onClick={ toggleResetDialog }>\n\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ origin === 'custom'\n\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove font size presets'\n\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Reset font size presets'\n\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t\t</Menu>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\n\t\t\t\t{ !! sizes.length && (\n\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t{ sizes.map( ( size ) => (\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tkey={ size.slug }\n\t\t\t\t\t\t\t\tpath={ `/typography/font-sizes/${ origin }/${ size.slug }` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t<FlexItem className=\"global-styles-ui-font-size__item\">\n\t\t\t\t\t\t\t\t\t\t{ size.name }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem display=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ItemGroup>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nfunction FontSizes() {\n\tconst [ themeFontSizes, setThemeFontSizes ] = useSetting(\n\t\t'typography.fontSizes.theme'\n\t);\n\n\tconst [ baseThemeFontSizes ] = useSetting(\n\t\t'typography.fontSizes.theme',\n\t\t'base'\n\t);\n\tconst [ defaultFontSizes, setDefaultFontSizes ] = useSetting(\n\t\t'typography.fontSizes.default'\n\t);\n\n\tconst [ baseDefaultFontSizes ] = useSetting(\n\t\t'typography.fontSizes.default',\n\t\t'base'\n\t);\n\n\tconst [ customFontSizes = [], setCustomFontSizes ] = useSetting(\n\t\t'typography.fontSizes.custom'\n\t);\n\n\tconst [ defaultFontSizesEnabled ] = useSetting(\n\t\t'typography.defaultFontSizes'\n\t);\n\n\tconst handleAddFontSize = () => {\n\t\tconst index = getNewIndexFromPresets( customFontSizes, 'custom-' );\n\t\tconst newFontSize = {\n\t\t\t/* translators: %d: font size index */\n\t\t\tname: sprintf( __( 'New Font Size %d' ), index ),\n\t\t\tsize: '16px',\n\t\t\tslug: `custom-${ index }`,\n\t\t};\n\n\t\tsetCustomFontSizes( [ ...customFontSizes, newFontSize ] );\n\t};\n\n\tconst hasSameSizeValues = ( arr1: FontSize[], arr2: FontSize[] ): boolean =>\n\t\tarr1.map( ( item ) => item.size ).join( '' ) ===\n\t\tarr2.map( ( item ) => item.size ).join( '' );\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Font size presets' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Create and edit the presets used for font sizes across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<View>\n\t\t\t\t<Spacer paddingX={ 4 }>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t{ !! themeFontSizes?.length && (\n\t\t\t\t\t\t\t<FontSizeGroup\n\t\t\t\t\t\t\t\tlabel={ __( 'Theme' ) }\n\t\t\t\t\t\t\t\torigin=\"theme\"\n\t\t\t\t\t\t\t\tsizes={ themeFontSizes }\n\t\t\t\t\t\t\t\thandleAddFontSize={ handleAddFontSize }\n\t\t\t\t\t\t\t\thandleResetFontSizes={\n\t\t\t\t\t\t\t\t\thasSameSizeValues(\n\t\t\t\t\t\t\t\t\t\tthemeFontSizes,\n\t\t\t\t\t\t\t\t\t\tbaseThemeFontSizes\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetThemeFontSizes(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbaseThemeFontSizes\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t{ defaultFontSizesEnabled &&\n\t\t\t\t\t\t\t!! defaultFontSizes?.length && (\n\t\t\t\t\t\t\t\t<FontSizeGroup\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\t\t\t\torigin=\"default\"\n\t\t\t\t\t\t\t\t\tsizes={ defaultFontSizes }\n\t\t\t\t\t\t\t\t\thandleAddFontSize={ handleAddFontSize }\n\t\t\t\t\t\t\t\t\thandleResetFontSizes={\n\t\t\t\t\t\t\t\t\t\thasSameSizeValues(\n\t\t\t\t\t\t\t\t\t\t\tdefaultFontSizes,\n\t\t\t\t\t\t\t\t\t\t\tbaseDefaultFontSizes\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDefaultFontSizes(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbaseDefaultFontSizes\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<FontSizeGroup\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\torigin=\"custom\"\n\t\t\t\t\t\t\tsizes={ customFontSizes }\n\t\t\t\t\t\t\thandleAddFontSize={ handleAddFontSize }\n\t\t\t\t\t\t\thandleResetFontSizes={\n\t\t\t\t\t\t\t\tcustomFontSizes.length > 0\n\t\t\t\t\t\t\t\t\t? () => setCustomFontSizes( [] )\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n\nexport default FontSizes;\n"],
+  "mappings": "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",
+  "names": []
+}