@wordpress/block-editor 15.10.0 → 15.10.1-next.06ee73755.0

package/build-module/components/duotone/utils.mjs

@@ -0,0 +1,59 @@
+// packages/block-editor/src/components/duotone/utils.js
+import { colord } from "colord";
+function getValuesFromColors(colors = []) {
+  const values = { r: [], g: [], b: [], a: [] };
+  colors.forEach((color) => {
+    const rgbColor = colord(color).toRgb();
+    values.r.push(rgbColor.r / 255);
+    values.g.push(rgbColor.g / 255);
+    values.b.push(rgbColor.b / 255);
+    values.a.push(rgbColor.a);
+  });
+  return values;
+}
+function getDuotoneUnsetStylesheet(selector) {
+  return `${selector}{filter:none}`;
+}
+function getDuotoneStylesheet(selector, id) {
+  return `${selector}{filter:url(#${id})}`;
+}
+function getDuotoneFilter(id, colors) {
+  const values = getValuesFromColors(colors);
+  return `
+<svg
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 0 0"
+	width="0"
+	height="0"
+	focusable="false"
+	role="none"
+	aria-hidden="true"
+	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+>
+	<defs>
+		<filter id="${id}">
+			<!--
+				Use sRGB instead of linearRGB so transparency looks correct.
+				Use perceptual brightness to convert to grayscale.
+			-->
+			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
+			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues="${values.r.join(" ")}"></feFuncR>
+				<feFuncG type="table" tableValues="${values.g.join(" ")}"></feFuncG>
+				<feFuncB type="table" tableValues="${values.b.join(" ")}"></feFuncB>
+				<feFuncA type="table" tableValues="${values.a.join(" ")}"></feFuncA>
+			</feComponentTransfer>
+			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
+			<feComposite in2="SourceGraphic" operator="in"></feComposite>
+		</filter>
+	</defs>
+</svg>`;
+}
+export {
+  getDuotoneFilter,
+  getDuotoneStylesheet,
+  getDuotoneUnsetStylesheet,
+  getValuesFromColors
+};
+//# sourceMappingURL=utils.mjs.map

package/build-module/components/duotone-control/index.mjs

@@ -0,0 +1,87 @@
+// packages/block-editor/src/components/duotone-control/index.js
+import {
+  ColorIndicator,
+  Dropdown,
+  DuotonePicker,
+  DuotoneSwatch,
+  MenuGroup,
+  ToolbarButton
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { DOWN } from "@wordpress/keycodes";
+import { Icon, filter } from "@wordpress/icons";
+import { useInstanceId } from "@wordpress/compose";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DuotoneControl({
+  id: idProp,
+  colorPalette,
+  duotonePalette,
+  disableCustomColors,
+  disableCustomDuotone,
+  value,
+  onChange
+}) {
+  let toolbarIcon;
+  if (value === "unset") {
+    toolbarIcon = /* @__PURE__ */ jsx(ColorIndicator, { className: "block-editor-duotone-control__unset-indicator" });
+  } else if (value) {
+    toolbarIcon = /* @__PURE__ */ jsx(DuotoneSwatch, { values: value });
+  } else {
+    toolbarIcon = /* @__PURE__ */ jsx(Icon, { icon: filter });
+  }
+  const actionLabel = __("Apply duotone filter");
+  const id = useInstanceId(DuotoneControl, "duotone-control", idProp);
+  const descriptionId = `${id}__description`;
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      popoverProps: {
+        className: "block-editor-duotone-control__popover",
+        headerTitle: __("Duotone")
+      },
+      renderToggle: ({ isOpen, onToggle }) => {
+        const openOnArrowDown = (event) => {
+          if (!isOpen && event.keyCode === DOWN) {
+            event.preventDefault();
+            onToggle();
+          }
+        };
+        return /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            showTooltip: true,
+            onClick: onToggle,
+            "aria-haspopup": "true",
+            "aria-expanded": isOpen,
+            onKeyDown: openOnArrowDown,
+            label: actionLabel,
+            icon: toolbarIcon
+          }
+        );
+      },
+      renderContent: () => /* @__PURE__ */ jsxs(MenuGroup, { label: __("Duotone"), children: [
+        /* @__PURE__ */ jsx("p", { children: __(
+          "Create a two-tone color effect without losing your original image."
+        ) }),
+        /* @__PURE__ */ jsx(
+          DuotonePicker,
+          {
+            "aria-label": actionLabel,
+            "aria-describedby": descriptionId,
+            colorPalette,
+            duotonePalette,
+            disableCustomColors,
+            disableCustomDuotone,
+            value,
+            onChange
+          }
+        )
+      ] })
+    }
+  );
+}
+var duotone_control_default = DuotoneControl;
+export {
+  duotone_control_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/editable-text/index.mjs

@@ -0,0 +1,15 @@
+// packages/block-editor/src/components/editable-text/index.js
+import { forwardRef } from "@wordpress/element";
+import RichText from "../rich-text/index.mjs";
+import { jsx } from "react/jsx-runtime";
+var EditableText = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(RichText, { ref, ...props, __unstableDisableFormats: true });
+});
+EditableText.Content = ({ value = "", tagName: Tag = "div", ...props }) => {
+  return /* @__PURE__ */ jsx(Tag, { ...props, children: value });
+};
+var editable_text_default = EditableText;
+export {
+  editable_text_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/editor-styles/index.mjs

@@ -0,0 +1,98 @@
+// packages/block-editor/src/components/editor-styles/index.js
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
+import a11yPlugin from "colord/plugins/a11y";
+import { SVG } from "@wordpress/components";
+import { useCallback, useMemo, memo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import transformStyles from "../../utils/transform-styles/index.mjs";
+import { store as blockEditorStore } from "../../store/index.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+extend([namesPlugin, a11yPlugin]);
+function useDarkThemeBodyClassName(styles, scope) {
+  return useCallback(
+    (node) => {
+      if (!node) {
+        return;
+      }
+      const { ownerDocument } = node;
+      const { defaultView, body } = ownerDocument;
+      const canvas = scope ? ownerDocument.querySelector(scope) : body;
+      let backgroundColor;
+      if (!canvas) {
+        const tempCanvas = ownerDocument.createElement("div");
+        tempCanvas.classList.add("editor-styles-wrapper");
+        body.appendChild(tempCanvas);
+        backgroundColor = defaultView?.getComputedStyle(tempCanvas, null).getPropertyValue("background-color");
+        body.removeChild(tempCanvas);
+      } else {
+        backgroundColor = defaultView?.getComputedStyle(canvas, null).getPropertyValue("background-color");
+      }
+      const colordBackgroundColor = colord(backgroundColor);
+      if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
+        body.classList.remove("is-dark-theme");
+      } else {
+        body.classList.add("is-dark-theme");
+      }
+    },
+    [styles, scope]
+  );
+}
+function EditorStyles({ styles, scope, transformOptions }) {
+  const overrides = useSelect(
+    (select) => unlock(select(blockEditorStore)).getStyleOverrides(),
+    []
+  );
+  const [transformedStyles, transformedSvgs] = useMemo(() => {
+    const _styles = Object.values(styles ?? []);
+    for (const [id, override] of overrides) {
+      const index = _styles.findIndex(({ id: _id }) => id === _id);
+      const overrideWithId = { ...override, id };
+      if (index === -1) {
+        _styles.push(overrideWithId);
+      } else {
+        _styles[index] = overrideWithId;
+      }
+    }
+    return [
+      transformStyles(
+        _styles.filter((style) => style?.css),
+        scope,
+        transformOptions
+      ),
+      _styles.filter((style) => style.__unstableType === "svgs").map((style) => style.assets).join("")
+    ];
+  }, [styles, overrides, scope, transformOptions]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        ref: useDarkThemeBodyClassName(transformedStyles, scope)
+      }
+    ),
+    transformedStyles.map((css, index) => /* @__PURE__ */ jsx("style", { children: css }, index)),
+    /* @__PURE__ */ jsx(
+      SVG,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 0 0",
+        width: "0",
+        height: "0",
+        role: "none",
+        style: {
+          visibility: "hidden",
+          position: "absolute",
+          left: "-9999px",
+          overflow: "hidden"
+        },
+        dangerouslySetInnerHTML: { __html: transformedSvgs }
+      }
+    )
+  ] });
+}
+var editor_styles_default = memo(EditorStyles);
+export {
+  editor_styles_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/fit-text-size-warning/index.mjs

@@ -0,0 +1,27 @@
+// packages/block-editor/src/components/fit-text-size-warning/index.js
+import { useEffect } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { Notice } from "@wordpress/components";
+import { speak } from "@wordpress/a11y";
+import { jsx } from "react/jsx-runtime";
+function FitTextSizeWarning() {
+  const message = __(
+    "The text may be too small to read. Consider using a larger container or less text."
+  );
+  useEffect(() => {
+    speak(message);
+  }, [message]);
+  return /* @__PURE__ */ jsx("div", { className: "block-editor-fit-text-size-warning", children: /* @__PURE__ */ jsx(
+    Notice,
+    {
+      spokenMessage: null,
+      status: "warning",
+      isDismissible: false,
+      children: message
+    }
+  ) });
+}
+export {
+  FitTextSizeWarning as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/fit-text-size-warning/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/fit-text-size-warning/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Component that checks if the fit text computed font size is below a minimum\n * threshold and displays a warning notice.\n *\n * @return {Element|null} Warning notice element or null.\n */\nexport default function FitTextSizeWarning() {\n\tconst message = __(\n\t\t'The text may be too small to read. Consider using a larger container or less text.'\n\t);\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but similar to the contrast checker, we use granular control over\n\t// when the announcements are made.\n\tuseEffect( () => {\n\t\tspeak( message );\n\t}, [ message ] );\n\n\treturn (\n\t\t<div className=\"block-editor-fit-text-size-warning\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ message }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AAsBnB;AAdY,SAAR,qBAAsC;AAC5C,QAAM,UAAU;AAAA,IACf;AAAA,EACD;AAKA,YAAW,MAAM;AAChB,UAAO,OAAQ;AAAA,EAChB,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC,oBAAC,SAAI,WAAU,sCACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAgB;AAAA,MAChB,QAAO;AAAA,MACP,eAAgB;AAAA,MAEd;AAAA;AAAA,EACH,GACD;AAEF;",
+  "names": []
+}

package/build-module/components/floating-toolbar/nav-up-icon.mjs

@@ -0,0 +1,31 @@
+// packages/block-editor/src/components/floating-toolbar/nav-up-icon.js
+import { SVG, Path } from "@wordpress/components";
+import { isRTL } from "@wordpress/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NavigateUp = () => /* @__PURE__ */ jsxs(
+  SVG,
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx(Path, { fill: "none", d: "M0 0h24v24H0V0z" }),
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          fill: "white",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M17,11  z L15.58,12.42 L12,8.83 L12,18 L22,18 L22,20 L10,20 L10,8.83 L6.42,12.42 L5,11 L11,5 L17,11",
+          transform: isRTL() ? "scale(-1,1) translate(-24,0)" : void 0
+        }
+      )
+    ]
+  }
+);
+var nav_up_icon_default = NavigateUp;
+export {
+  nav_up_icon_default as default
+};
+//# sourceMappingURL=nav-up-icon.mjs.map

package/build-module/components/font-appearance-control/index.mjs

@@ -0,0 +1,131 @@
+// packages/block-editor/src/components/font-appearance-control/index.js
+import { CustomSelectControl } from "@wordpress/components";
+import deprecated from "@wordpress/deprecated";
+import { useMemo } from "@wordpress/element";
+import { __, sprintf } from "@wordpress/i18n";
+import { getFontStylesAndWeights } from "../../utils/get-font-styles-and-weights.mjs";
+import { jsx } from "react/jsx-runtime";
+var getFontAppearanceLabel = (hasFontStyles, hasFontWeights) => {
+  if (!hasFontStyles) {
+    return __("Font weight");
+  }
+  if (!hasFontWeights) {
+    return __("Font style");
+  }
+  return __("Appearance");
+};
+function FontAppearanceControl(props) {
+  const {
+    /** Start opting into the larger default height that will become the default size in a future version. */
+    __next40pxDefaultSize = false,
+    onChange,
+    hasFontStyles = true,
+    hasFontWeights = true,
+    fontFamilyFaces,
+    value: { fontStyle, fontWeight },
+    ...otherProps
+  } = props;
+  const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+  const label = getFontAppearanceLabel(hasFontStyles, hasFontWeights);
+  const defaultOption = {
+    key: "default",
+    name: __("Default"),
+    style: { fontStyle: void 0, fontWeight: void 0 }
+  };
+  const { fontStyles, fontWeights, combinedStyleAndWeightOptions } = getFontStylesAndWeights(fontFamilyFaces);
+  const combineOptions = () => {
+    const combinedOptions = [defaultOption];
+    if (combinedStyleAndWeightOptions) {
+      combinedOptions.push(...combinedStyleAndWeightOptions);
+    }
+    return combinedOptions;
+  };
+  const styleOptions = () => {
+    const combinedOptions = [defaultOption];
+    fontStyles.forEach(({ name, value }) => {
+      combinedOptions.push({
+        key: value,
+        name,
+        style: { fontStyle: value, fontWeight: void 0 }
+      });
+    });
+    return combinedOptions;
+  };
+  const weightOptions = () => {
+    const combinedOptions = [defaultOption];
+    fontWeights.forEach(({ name, value }) => {
+      combinedOptions.push({
+        key: value,
+        name,
+        style: { fontStyle: void 0, fontWeight: value }
+      });
+    });
+    return combinedOptions;
+  };
+  const selectOptions = useMemo(() => {
+    if (hasFontStyles && hasFontWeights) {
+      return combineOptions();
+    }
+    return hasFontStyles ? styleOptions() : weightOptions();
+  }, [
+    props.options,
+    fontStyles,
+    fontWeights,
+    combinedStyleAndWeightOptions
+  ]);
+  const currentSelection = selectOptions.find(
+    (option) => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight
+  ) || selectOptions[0];
+  const getDescribedBy = () => {
+    if (!currentSelection) {
+      return __("No selected font appearance");
+    }
+    if (!hasFontStyles) {
+      return sprintf(
+        // translators: %s: Currently selected font weight.
+        __("Currently selected font weight: %s"),
+        currentSelection.name
+      );
+    }
+    if (!hasFontWeights) {
+      return sprintf(
+        // translators: %s: Currently selected font style.
+        __("Currently selected font style: %s"),
+        currentSelection.name
+      );
+    }
+    return sprintf(
+      // translators: %s: Currently selected font appearance.
+      __("Currently selected font appearance: %s"),
+      currentSelection.name
+    );
+  };
+  if (!__next40pxDefaultSize && (otherProps.size === void 0 || otherProps.size === "default")) {
+    deprecated(
+      `36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
+      {
+        since: "6.8",
+        version: "7.1",
+        hint: "Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version."
+      }
+    );
+  }
+  return hasStylesOrWeights && /* @__PURE__ */ jsx(
+    CustomSelectControl,
+    {
+      ...otherProps,
+      className: "components-font-appearance-control",
+      __next40pxDefaultSize,
+      __shouldNotWarnDeprecated36pxSize: true,
+      label,
+      describedBy: getDescribedBy(),
+      options: selectOptions,
+      value: currentSelection,
+      onChange: ({ selectedItem }) => onChange(selectedItem.style)
+    }
+  );
+}
+export {
+  FontAppearanceControl as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/font-family/index.mjs

@@ -0,0 +1,63 @@
+// packages/block-editor/src/components/font-family/index.js
+import clsx from "clsx";
+import { CustomSelectControl } from "@wordpress/components";
+import deprecated from "@wordpress/deprecated";
+import { __ } from "@wordpress/i18n";
+import { useSettings } from "../use-settings/index.mjs";
+import { jsx } from "react/jsx-runtime";
+function FontFamilyControl({
+  /** Start opting into the larger default height that will become the default size in a future version. */
+  __next40pxDefaultSize = false,
+  value = "",
+  onChange,
+  fontFamilies,
+  className,
+  ...props
+}) {
+  const [blockLevelFontFamilies] = useSettings("typography.fontFamilies");
+  if (!fontFamilies) {
+    fontFamilies = blockLevelFontFamilies;
+  }
+  if (!fontFamilies || fontFamilies.length === 0) {
+    return null;
+  }
+  const options = [
+    {
+      key: "",
+      name: __("Default")
+    },
+    ...fontFamilies.map(({ fontFamily, name }) => ({
+      key: fontFamily,
+      name: name || fontFamily,
+      style: { fontFamily }
+    }))
+  ];
+  if (!__next40pxDefaultSize && (props.size === void 0 || props.size === "default")) {
+    deprecated(
+      `36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
+      {
+        since: "6.8",
+        version: "7.1",
+        hint: "Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version."
+      }
+    );
+  }
+  const selectedValue = options.find((option) => option.key === value) ?? "";
+  return /* @__PURE__ */ jsx(
+    CustomSelectControl,
+    {
+      __next40pxDefaultSize,
+      __shouldNotWarnDeprecated36pxSize: true,
+      label: __("Font"),
+      value: selectedValue,
+      onChange: ({ selectedItem }) => onChange(selectedItem.key),
+      options,
+      className: clsx("block-editor-font-family-control", className),
+      ...props
+    }
+  );
+}
+export {
+  FontFamilyControl as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/font-sizes/fluid-utils.mjs

@@ -0,0 +1,145 @@
+// packages/block-editor/src/components/font-sizes/fluid-utils.js
+var DEFAULT_MAXIMUM_VIEWPORT_WIDTH = "1600px";
+var DEFAULT_MINIMUM_VIEWPORT_WIDTH = "320px";
+var DEFAULT_SCALE_FACTOR = 1;
+var DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;
+var DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;
+var DEFAULT_MINIMUM_FONT_SIZE_LIMIT = "14px";
+function getComputedFluidTypographyValue({
+  minimumFontSize,
+  maximumFontSize,
+  fontSize,
+  minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+  maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  minimumFontSizeLimit
+}) {
+  minimumFontSizeLimit = !!getTypographyValueAndUnit(minimumFontSizeLimit) ? minimumFontSizeLimit : DEFAULT_MINIMUM_FONT_SIZE_LIMIT;
+  if (fontSize) {
+    const fontSizeParsed = getTypographyValueAndUnit(fontSize);
+    if (!fontSizeParsed?.unit) {
+      return null;
+    }
+    const minimumFontSizeLimitParsed = getTypographyValueAndUnit(
+      minimumFontSizeLimit,
+      {
+        coerceTo: fontSizeParsed.unit
+      }
+    );
+    if (!!minimumFontSizeLimitParsed?.value && !minimumFontSize && !maximumFontSize) {
+      if (fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value) {
+        return null;
+      }
+    }
+    if (!maximumFontSize) {
+      maximumFontSize = `${fontSizeParsed.value}${fontSizeParsed.unit}`;
+    }
+    if (!minimumFontSize) {
+      const fontSizeValueInPx = fontSizeParsed.unit === "px" ? fontSizeParsed.value : fontSizeParsed.value * 16;
+      const minimumFontSizeFactor = Math.min(
+        Math.max(
+          1 - 0.075 * Math.log2(fontSizeValueInPx),
+          DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
+        ),
+        DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
+      );
+      const calculatedMinimumFontSize = roundToPrecision(
+        fontSizeParsed.value * minimumFontSizeFactor,
+        3
+      );
+      if (!!minimumFontSizeLimitParsed?.value && calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value) {
+        minimumFontSize = `${minimumFontSizeLimitParsed.value}${minimumFontSizeLimitParsed.unit}`;
+      } else {
+        minimumFontSize = `${calculatedMinimumFontSize}${fontSizeParsed.unit}`;
+      }
+    }
+  }
+  const minimumFontSizeParsed = getTypographyValueAndUnit(minimumFontSize);
+  const fontSizeUnit = minimumFontSizeParsed?.unit || "rem";
+  const maximumFontSizeParsed = getTypographyValueAndUnit(maximumFontSize, {
+    coerceTo: fontSizeUnit
+  });
+  if (!minimumFontSizeParsed || !maximumFontSizeParsed) {
+    return null;
+  }
+  const minimumFontSizeRem = getTypographyValueAndUnit(minimumFontSize, {
+    coerceTo: "rem"
+  });
+  const maximumViewportWidthParsed = getTypographyValueAndUnit(
+    maximumViewportWidth,
+    { coerceTo: fontSizeUnit }
+  );
+  const minimumViewportWidthParsed = getTypographyValueAndUnit(
+    minimumViewportWidth,
+    { coerceTo: fontSizeUnit }
+  );
+  if (!maximumViewportWidthParsed || !minimumViewportWidthParsed || !minimumFontSizeRem) {
+    return null;
+  }
+  const linearDenominator = maximumViewportWidthParsed.value - minimumViewportWidthParsed.value;
+  if (!linearDenominator) {
+    return null;
+  }
+  const minViewportWidthOffsetValue = roundToPrecision(
+    minimumViewportWidthParsed.value / 100,
+    3
+  );
+  const viewportWidthOffset = roundToPrecision(minViewportWidthOffsetValue, 3) + fontSizeUnit;
+  const linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / linearDenominator);
+  const linearFactorScaled = roundToPrecision(
+    (linearFactor || 1) * scaleFactor,
+    3
+  );
+  const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewportWidthOffset}) * ${linearFactorScaled})`;
+  return `clamp(${minimumFontSize}, ${fluidTargetFontSize}, ${maximumFontSize})`;
+}
+function getTypographyValueAndUnit(rawValue, options = {}) {
+  if (typeof rawValue !== "string" && typeof rawValue !== "number") {
+    return null;
+  }
+  if (isFinite(rawValue)) {
+    rawValue = `${rawValue}px`;
+  }
+  const { coerceTo, rootSizeValue, acceptableUnits } = {
+    coerceTo: "",
+    // Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+    rootSizeValue: 16,
+    acceptableUnits: ["rem", "px", "em"],
+    ...options
+  };
+  const acceptableUnitsGroup = acceptableUnits?.join("|");
+  const regexUnits = new RegExp(
+    `^(\\d*\\.?\\d+)(${acceptableUnitsGroup}){1,1}$`
+  );
+  const matches = rawValue.match(regexUnits);
+  if (!matches || matches.length < 3) {
+    return null;
+  }
+  let [, value, unit] = matches;
+  let returnValue = parseFloat(value);
+  if ("px" === coerceTo && ("em" === unit || "rem" === unit)) {
+    returnValue = returnValue * rootSizeValue;
+    unit = coerceTo;
+  }
+  if ("px" === unit && ("em" === coerceTo || "rem" === coerceTo)) {
+    returnValue = returnValue / rootSizeValue;
+    unit = coerceTo;
+  }
+  if (("em" === coerceTo || "rem" === coerceTo) && ("em" === unit || "rem" === unit)) {
+    unit = coerceTo;
+  }
+  return {
+    value: roundToPrecision(returnValue, 3),
+    unit
+  };
+}
+function roundToPrecision(value, digits = 3) {
+  const base = Math.pow(10, digits);
+  return Number.isFinite(value) ? parseFloat(Math.round(value * base) / base) : void 0;
+}
+export {
+  getComputedFluidTypographyValue,
+  getTypographyValueAndUnit,
+  roundToPrecision
+};
+//# sourceMappingURL=fluid-utils.mjs.map