@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

package/build/components/global-styles/typography-panel.js

@@ -1,34 +1,52 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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_panel_exports = {};
+__export(typography_panel_exports, {
+  default: () => TypographyPanel,
+  useHasTypographyPanel: () => useHasTypographyPanel
 });
-exports.default = TypographyPanel;
-exports.useHasTypographyPanel = useHasTypographyPanel;
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _fontFamily = _interopRequireDefault(require("../font-family"));
-var _fontAppearanceControl = _interopRequireDefault(require("../font-appearance-control"));
-var _lineHeightControl = _interopRequireDefault(require("../line-height-control"));
-var _letterSpacingControl = _interopRequireDefault(require("../letter-spacing-control"));
-var _textAlignmentControl = _interopRequireDefault(require("../text-alignment-control"));
-var _textTransformControl = _interopRequireDefault(require("../text-transform-control"));
-var _textDecorationControl = _interopRequireDefault(require("../text-decoration-control"));
-var _writingModeControl = _interopRequireDefault(require("../writing-mode-control"));
-var _utils = require("./utils");
-var _object = require("../../utils/object");
-var _typographyUtils = require("./typography-utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(typography_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_font_family = __toESM(require("../font-family"));
+var import_font_appearance_control = __toESM(require("../font-appearance-control"));
+var import_line_height_control = __toESM(require("../line-height-control"));
+var import_letter_spacing_control = __toESM(require("../letter-spacing-control"));
+var import_text_alignment_control = __toESM(require("../text-alignment-control"));
+var import_text_transform_control = __toESM(require("../text-transform-control"));
+var import_text_decoration_control = __toESM(require("../text-decoration-control"));
+var import_writing_mode_control = __toESM(require("../writing-mode-control"));
+var import_utils = require("./utils");
+var import_object = require("../../utils/object");
+var import_typography_utils = require("./typography-utils");
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
 function useHasTypographyPanel(settings) {
@@ -48,7 +66,9 @@ function useHasFontSizeControl(settings) {
   return settings?.typography?.defaultFontSizes !== false && settings?.typography?.fontSizes?.default?.length || settings?.typography?.fontSizes?.theme?.length || settings?.typography?.fontSizes?.custom?.length || settings?.typography?.customFontSize;
 }
 function useHasFontFamilyControl(settings) {
-  return ['default', 'theme', 'custom'].some(key => settings?.typography?.fontFamilies?.[key]?.length);
+  return ["default", "theme", "custom"].some(
+    (key) => settings?.typography?.fontFamilies?.[key]?.length
+  );
 }
 function useHasLineHeightControl(settings) {
   return settings?.typography?.lineHeight;
@@ -58,12 +78,12 @@ function useHasAppearanceControl(settings) {
 }
 function useAppearanceControlLabel(settings) {
   if (!settings?.typography?.fontStyle) {
-    return (0, _i18n.__)('Font weight');
+    return (0, import_i18n.__)("Font weight");
   }
   if (!settings?.typography?.fontWeight) {
-    return (0, _i18n.__)('Font style');
+    return (0, import_i18n.__)("Font style");
   }
-  return (0, _i18n.__)('Appearance');
+  return (0, import_i18n.__)("Appearance");
 }
 function useHasLetterSpacingControl(settings) {
   return settings?.typography?.letterSpacing;
@@ -83,19 +103,14 @@ function useHasWritingModeControl(settings) {
 function useHasTextColumnsControl(settings) {
   return settings?.typography?.textColumns;
 }
-
-/**
- * Concatenate all the font sizes into a single list for the font size picker.
- *
- * @param {Object} settings The global styles settings.
- *
- * @return {Array} The merged font sizes.
- */
 function getMergedFontSizes(settings) {
-  var _fontSizes$custom, _fontSizes$theme, _fontSizes$default;
   const fontSizes = settings?.typography?.fontSizes;
   const defaultFontSizesEnabled = !!settings?.typography?.defaultFontSizes;
-  return [...((_fontSizes$custom = fontSizes?.custom) !== null && _fontSizes$custom !== void 0 ? _fontSizes$custom : []), ...((_fontSizes$theme = fontSizes?.theme) !== null && _fontSizes$theme !== void 0 ? _fontSizes$theme : []), ...(defaultFontSizesEnabled ? (_fontSizes$default = fontSizes?.default) !== null && _fontSizes$default !== void 0 ? _fontSizes$default : [] : [])];
+  return [
+    ...fontSizes?.custom ?? [],
+    ...fontSizes?.theme ?? [],
+    ...defaultFontSizesEnabled ? fontSizes?.default ?? [] : []
+  ];
 }
 function TypographyToolsPanel({
   resetAllFilter,
@@ -104,18 +119,21 @@ function TypographyToolsPanel({
   panelId,
   children
 }) {
-  const dropdownMenuProps = (0, _utils.useToolsPanelDropdownMenuProps)();
+  const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
   const resetAll = () => {
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Typography'),
-    resetAll: resetAll,
-    panelId: panelId,
-    dropdownMenuProps: dropdownMenuProps,
-    children: children
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanel,
+    {
+      label: (0, import_i18n.__)("Typography"),
+      resetAll,
+      panelId,
+      dropdownMenuProps,
+      children
+    }
+  );
 }
 const DEFAULT_CONTROLS = {
   fontFamily: true,
@@ -138,300 +156,415 @@ function TypographyPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS
 }) {
-  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
-    settings
-  }, '', rawValue);
-
-  // Font Family
+  const decodeValue = (rawValue) => (0, import_utils.getValueFromVariable)({ settings }, "", rawValue);
   const hasFontFamilyEnabled = useHasFontFamilyControl(settings);
   const fontFamily = decodeValue(inheritedValue?.typography?.fontFamily);
-  const {
-    fontFamilies,
-    fontFamilyFaces
-  } = (0, _element.useMemo)(() => {
-    return (0, _typographyUtils.getMergedFontFamiliesAndFontFamilyFaces)(settings, fontFamily);
+  const { fontFamilies, fontFamilyFaces } = (0, import_element.useMemo)(() => {
+    return (0, import_typography_utils.getMergedFontFamiliesAndFontFamilyFaces)(settings, fontFamily);
   }, [settings, fontFamily]);
-  const setFontFamily = newValue => {
-    const slug = fontFamilies?.find(({
-      fontFamily: f
-    }) => f === newValue)?.slug;
-    onChange((0, _object.setImmutably)(value, ['typography', 'fontFamily'], slug ? `var:preset|font-family|${slug}` : newValue || undefined));
+  const setFontFamily = (newValue) => {
+    const slug = fontFamilies?.find(
+      ({ fontFamily: f }) => f === newValue
+    )?.slug;
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "fontFamily"],
+        slug ? `var:preset|font-family|${slug}` : newValue || void 0
+      )
+    );
   };
   const hasFontFamily = () => !!value?.typography?.fontFamily;
-  const resetFontFamily = () => setFontFamily(undefined);
-
-  // Font Size
+  const resetFontFamily = () => setFontFamily(void 0);
   const hasFontSizeEnabled = useHasFontSizeControl(settings);
   const disableCustomFontSizes = !settings?.typography?.customFontSize;
   const mergedFontSizes = getMergedFontSizes(settings);
   const fontSize = decodeValue(inheritedValue?.typography?.fontSize);
   const setFontSize = (newValue, metadata) => {
     const actualValue = !!metadata?.slug ? `var:preset|font-size|${metadata?.slug}` : newValue;
-    onChange((0, _object.setImmutably)(value, ['typography', 'fontSize'], actualValue || undefined));
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "fontSize"],
+        actualValue || void 0
+      )
+    );
   };
   const hasFontSize = () => !!value?.typography?.fontSize;
-  const resetFontSize = () => setFontSize(undefined);
-
-  // Appearance
+  const resetFontSize = () => setFontSize(void 0);
   const hasAppearanceControl = useHasAppearanceControl(settings);
   const appearanceControlLabel = useAppearanceControlLabel(settings);
   const hasFontStyles = settings?.typography?.fontStyle;
   const hasFontWeights = settings?.typography?.fontWeight;
   const fontStyle = decodeValue(inheritedValue?.typography?.fontStyle);
   const fontWeight = decodeValue(inheritedValue?.typography?.fontWeight);
-  const {
-    nearestFontStyle,
-    nearestFontWeight
-  } = (0, _typographyUtils.findNearestStyleAndWeight)(fontFamilyFaces, fontStyle, fontWeight);
-  const setFontAppearance = (0, _element.useCallback)(({
-    fontStyle: newFontStyle,
-    fontWeight: newFontWeight
-  }) => {
-    // Only update the font style and weight if they have changed.
-    if (newFontStyle !== fontStyle || newFontWeight !== fontWeight) {
-      onChange({
-        ...value,
-        typography: {
-          ...value?.typography,
-          fontStyle: newFontStyle || undefined,
-          fontWeight: newFontWeight || undefined
-        }
-      });
-    }
-  }, [fontStyle, fontWeight, onChange, value]);
+  const { nearestFontStyle, nearestFontWeight } = (0, import_typography_utils.findNearestStyleAndWeight)(
+    fontFamilyFaces,
+    fontStyle,
+    fontWeight
+  );
+  const setFontAppearance = (0, import_element.useCallback)(
+    ({ fontStyle: newFontStyle, fontWeight: newFontWeight }) => {
+      if (newFontStyle !== fontStyle || newFontWeight !== fontWeight) {
+        onChange({
+          ...value,
+          typography: {
+            ...value?.typography,
+            fontStyle: newFontStyle || void 0,
+            fontWeight: newFontWeight || void 0
+          }
+        });
+      }
+    },
+    [fontStyle, fontWeight, onChange, value]
+  );
   const hasFontAppearance = () => !!value?.typography?.fontStyle || !!value?.typography?.fontWeight;
-  const resetFontAppearance = (0, _element.useCallback)(() => {
+  const resetFontAppearance = (0, import_element.useCallback)(() => {
     setFontAppearance({});
   }, [setFontAppearance]);
-
-  // Check if previous font style and weight values are available in the new font family.
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     if (nearestFontStyle && nearestFontWeight) {
       setFontAppearance({
         fontStyle: nearestFontStyle,
         fontWeight: nearestFontWeight
       });
     } else {
-      // Reset font appearance if there are no available styles or weights.
       resetFontAppearance();
     }
-  }, [nearestFontStyle, nearestFontWeight, resetFontAppearance, setFontAppearance]);
-
-  // Line Height
+  }, [
+    nearestFontStyle,
+    nearestFontWeight,
+    resetFontAppearance,
+    setFontAppearance
+  ]);
   const hasLineHeightEnabled = useHasLineHeightControl(settings);
   const lineHeight = decodeValue(inheritedValue?.typography?.lineHeight);
-  const setLineHeight = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'lineHeight'], newValue || undefined));
+  const setLineHeight = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "lineHeight"],
+        newValue || void 0
+      )
+    );
   };
-  const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
-  const resetLineHeight = () => setLineHeight(undefined);
-
-  // Letter Spacing
+  const hasLineHeight = () => value?.typography?.lineHeight !== void 0;
+  const resetLineHeight = () => setLineHeight(void 0);
   const hasLetterSpacingControl = useHasLetterSpacingControl(settings);
-  const letterSpacing = decodeValue(inheritedValue?.typography?.letterSpacing);
-  const setLetterSpacing = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'letterSpacing'], newValue || undefined));
+  const letterSpacing = decodeValue(
+    inheritedValue?.typography?.letterSpacing
+  );
+  const setLetterSpacing = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "letterSpacing"],
+        newValue || void 0
+      )
+    );
   };
   const hasLetterSpacing = () => !!value?.typography?.letterSpacing;
-  const resetLetterSpacing = () => setLetterSpacing(undefined);
-
-  // Text Columns
+  const resetLetterSpacing = () => setLetterSpacing(void 0);
   const hasTextColumnsControl = useHasTextColumnsControl(settings);
   const textColumns = decodeValue(inheritedValue?.typography?.textColumns);
-  const setTextColumns = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'textColumns'], newValue || undefined));
+  const setTextColumns = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "textColumns"],
+        newValue || void 0
+      )
+    );
   };
   const hasTextColumns = () => !!value?.typography?.textColumns;
-  const resetTextColumns = () => setTextColumns(undefined);
-
-  // Text Transform
+  const resetTextColumns = () => setTextColumns(void 0);
   const hasTextTransformControl = useHasTextTransformControl(settings);
-  const textTransform = decodeValue(inheritedValue?.typography?.textTransform);
-  const setTextTransform = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'textTransform'], newValue || undefined));
+  const textTransform = decodeValue(
+    inheritedValue?.typography?.textTransform
+  );
+  const setTextTransform = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "textTransform"],
+        newValue || void 0
+      )
+    );
   };
   const hasTextTransform = () => !!value?.typography?.textTransform;
-  const resetTextTransform = () => setTextTransform(undefined);
-
-  // Text Decoration
+  const resetTextTransform = () => setTextTransform(void 0);
   const hasTextDecorationControl = useHasTextDecorationControl(settings);
-  const textDecoration = decodeValue(inheritedValue?.typography?.textDecoration);
-  const setTextDecoration = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'textDecoration'], newValue || undefined));
+  const textDecoration = decodeValue(
+    inheritedValue?.typography?.textDecoration
+  );
+  const setTextDecoration = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "textDecoration"],
+        newValue || void 0
+      )
+    );
   };
   const hasTextDecoration = () => !!value?.typography?.textDecoration;
-  const resetTextDecoration = () => setTextDecoration(undefined);
-
-  // Text Orientation
+  const resetTextDecoration = () => setTextDecoration(void 0);
   const hasWritingModeControl = useHasWritingModeControl(settings);
   const writingMode = decodeValue(inheritedValue?.typography?.writingMode);
-  const setWritingMode = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'writingMode'], newValue || undefined));
+  const setWritingMode = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "writingMode"],
+        newValue || void 0
+      )
+    );
   };
   const hasWritingMode = () => !!value?.typography?.writingMode;
-  const resetWritingMode = () => setWritingMode(undefined);
-
-  // Text Alignment
+  const resetWritingMode = () => setWritingMode(void 0);
   const hasTextAlignmentControl = useHasTextAlignmentControl(settings);
   const textAlign = decodeValue(inheritedValue?.typography?.textAlign);
-  const setTextAlign = newValue => {
-    onChange((0, _object.setImmutably)(value, ['typography', 'textAlign'], newValue || undefined));
+  const setTextAlign = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "textAlign"],
+        newValue || void 0
+      )
+    );
   };
   const hasTextAlign = () => !!value?.typography?.textAlign;
-  const resetTextAlign = () => setTextAlign(undefined);
-  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+  const resetTextAlign = () => setTextAlign(void 0);
+  const resetAllFilter = (0, import_element.useCallback)((previousValue) => {
     return {
       ...previousValue,
       typography: {}
     };
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    resetAllFilter: resetAllFilter,
-    value: value,
-    onChange: onChange,
-    panelId: panelId,
-    children: [hasFontFamilyEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      label: (0, _i18n.__)('Font'),
-      hasValue: hasFontFamily,
-      onDeselect: resetFontFamily,
-      isShownByDefault: defaultControls.fontFamily,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontFamily.default, {
-        fontFamilies: fontFamilies,
-        value: fontFamily,
-        onChange: setFontFamily,
-        size: "__unstable-large",
-        __nextHasNoMarginBottom: true
-      })
-    }), hasFontSizeEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      label: (0, _i18n.__)('Size'),
-      hasValue: hasFontSize,
-      onDeselect: resetFontSize,
-      isShownByDefault: defaultControls.fontSize,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FontSizePicker, {
-        value: fontSize,
-        onChange: setFontSize,
-        fontSizes: mergedFontSizes,
-        disableCustomFontSizes: disableCustomFontSizes,
-        withReset: false,
-        withSlider: true,
-        size: "__unstable-large"
-      })
-    }), hasAppearanceControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      className: "single-column",
-      label: appearanceControlLabel,
-      hasValue: hasFontAppearance,
-      onDeselect: resetFontAppearance,
-      isShownByDefault: defaultControls.fontAppearance,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAppearanceControl.default, {
-        value: {
-          fontStyle,
-          fontWeight
-        },
-        onChange: setFontAppearance,
-        hasFontStyles: hasFontStyles,
-        hasFontWeights: hasFontWeights,
-        fontFamilyFaces: fontFamilyFaces,
-        size: "__unstable-large"
-      })
-    }), hasLineHeightEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      className: "single-column",
-      label: (0, _i18n.__)('Line height'),
-      hasValue: hasLineHeight,
-      onDeselect: resetLineHeight,
-      isShownByDefault: defaultControls.lineHeight,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lineHeightControl.default, {
-        __unstableInputWidth: "auto",
-        value: lineHeight,
-        onChange: setLineHeight,
-        size: "__unstable-large"
-      })
-    }), hasLetterSpacingControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      className: "single-column",
-      label: (0, _i18n.__)('Letter spacing'),
-      hasValue: hasLetterSpacing,
-      onDeselect: resetLetterSpacing,
-      isShownByDefault: defaultControls.letterSpacing,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_letterSpacingControl.default, {
-        value: letterSpacing,
-        onChange: setLetterSpacing,
-        size: "__unstable-large",
-        __unstableInputWidth: "auto"
-      })
-    }), hasTextColumnsControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      className: "single-column",
-      label: (0, _i18n.__)('Columns'),
-      hasValue: hasTextColumns,
-      onDeselect: resetTextColumns,
-      isShownByDefault: defaultControls.textColumns,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
-        label: (0, _i18n.__)('Columns'),
-        max: MAX_TEXT_COLUMNS,
-        min: MIN_TEXT_COLUMNS,
-        onChange: setTextColumns,
-        size: "__unstable-large",
-        spinControls: "custom",
-        value: textColumns,
-        initialPosition: 1
-      })
-    }), hasTextDecorationControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      className: "single-column",
-      label: (0, _i18n.__)('Decoration'),
-      hasValue: hasTextDecoration,
-      onDeselect: resetTextDecoration,
-      isShownByDefault: defaultControls.textDecoration,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textDecorationControl.default, {
-        value: textDecoration,
-        onChange: setTextDecoration,
-        size: "__unstable-large",
-        __unstableInputWidth: "auto"
-      })
-    }), hasWritingModeControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      className: "single-column",
-      label: (0, _i18n.__)('Orientation'),
-      hasValue: hasWritingMode,
-      onDeselect: resetWritingMode,
-      isShownByDefault: defaultControls.writingMode,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_writingModeControl.default, {
-        value: writingMode,
-        onChange: setWritingMode,
-        size: "__unstable-large",
-        __nextHasNoMarginBottom: true
-      })
-    }), hasTextTransformControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      label: (0, _i18n.__)('Letter case'),
-      hasValue: hasTextTransform,
-      onDeselect: resetTextTransform,
-      isShownByDefault: defaultControls.textTransform,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textTransformControl.default, {
-        value: textTransform,
-        onChange: setTextTransform,
-        showNone: true,
-        isBlock: true,
-        size: "__unstable-large",
-        __nextHasNoMarginBottom: true
-      })
-    }), hasTextAlignmentControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-      label: (0, _i18n.__)('Text alignment'),
-      hasValue: hasTextAlign,
-      onDeselect: resetTextAlign,
-      isShownByDefault: defaultControls.textAlign,
-      panelId: panelId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textAlignmentControl.default, {
-        value: textAlign,
-        onChange: setTextAlign,
-        size: "__unstable-large",
-        __nextHasNoMarginBottom: true
-      })
-    })]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Wrapper,
+    {
+      resetAllFilter,
+      value,
+      onChange,
+      panelId,
+      children: [
+        hasFontFamilyEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            label: (0, import_i18n.__)("Font"),
+            hasValue: hasFontFamily,
+            onDeselect: resetFontFamily,
+            isShownByDefault: defaultControls.fontFamily,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_font_family.default,
+              {
+                fontFamilies,
+                value: fontFamily,
+                onChange: setFontFamily,
+                size: "__unstable-large",
+                __nextHasNoMarginBottom: true
+              }
+            )
+          }
+        ),
+        hasFontSizeEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            label: (0, import_i18n.__)("Size"),
+            hasValue: hasFontSize,
+            onDeselect: resetFontSize,
+            isShownByDefault: defaultControls.fontSize,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.FontSizePicker,
+              {
+                value: fontSize,
+                onChange: setFontSize,
+                fontSizes: mergedFontSizes,
+                disableCustomFontSizes,
+                withReset: false,
+                withSlider: true,
+                size: "__unstable-large"
+              }
+            )
+          }
+        ),
+        hasAppearanceControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            className: "single-column",
+            label: appearanceControlLabel,
+            hasValue: hasFontAppearance,
+            onDeselect: resetFontAppearance,
+            isShownByDefault: defaultControls.fontAppearance,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_font_appearance_control.default,
+              {
+                value: {
+                  fontStyle,
+                  fontWeight
+                },
+                onChange: setFontAppearance,
+                hasFontStyles,
+                hasFontWeights,
+                fontFamilyFaces,
+                size: "__unstable-large"
+              }
+            )
+          }
+        ),
+        hasLineHeightEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            className: "single-column",
+            label: (0, import_i18n.__)("Line height"),
+            hasValue: hasLineHeight,
+            onDeselect: resetLineHeight,
+            isShownByDefault: defaultControls.lineHeight,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_line_height_control.default,
+              {
+                __unstableInputWidth: "auto",
+                value: lineHeight,
+                onChange: setLineHeight,
+                size: "__unstable-large"
+              }
+            )
+          }
+        ),
+        hasLetterSpacingControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            className: "single-column",
+            label: (0, import_i18n.__)("Letter spacing"),
+            hasValue: hasLetterSpacing,
+            onDeselect: resetLetterSpacing,
+            isShownByDefault: defaultControls.letterSpacing,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_letter_spacing_control.default,
+              {
+                value: letterSpacing,
+                onChange: setLetterSpacing,
+                size: "__unstable-large",
+                __unstableInputWidth: "auto"
+              }
+            )
+          }
+        ),
+        hasTextColumnsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            className: "single-column",
+            label: (0, import_i18n.__)("Columns"),
+            hasValue: hasTextColumns,
+            onDeselect: resetTextColumns,
+            isShownByDefault: defaultControls.textColumns,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalNumberControl,
+              {
+                label: (0, import_i18n.__)("Columns"),
+                max: MAX_TEXT_COLUMNS,
+                min: MIN_TEXT_COLUMNS,
+                onChange: setTextColumns,
+                size: "__unstable-large",
+                spinControls: "custom",
+                value: textColumns,
+                initialPosition: 1
+              }
+            )
+          }
+        ),
+        hasTextDecorationControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            className: "single-column",
+            label: (0, import_i18n.__)("Decoration"),
+            hasValue: hasTextDecoration,
+            onDeselect: resetTextDecoration,
+            isShownByDefault: defaultControls.textDecoration,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_text_decoration_control.default,
+              {
+                value: textDecoration,
+                onChange: setTextDecoration,
+                size: "__unstable-large",
+                __unstableInputWidth: "auto"
+              }
+            )
+          }
+        ),
+        hasWritingModeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            className: "single-column",
+            label: (0, import_i18n.__)("Orientation"),
+            hasValue: hasWritingMode,
+            onDeselect: resetWritingMode,
+            isShownByDefault: defaultControls.writingMode,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_writing_mode_control.default,
+              {
+                value: writingMode,
+                onChange: setWritingMode,
+                size: "__unstable-large",
+                __nextHasNoMarginBottom: true
+              }
+            )
+          }
+        ),
+        hasTextTransformControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            label: (0, import_i18n.__)("Letter case"),
+            hasValue: hasTextTransform,
+            onDeselect: resetTextTransform,
+            isShownByDefault: defaultControls.textTransform,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_text_transform_control.default,
+              {
+                value: textTransform,
+                onChange: setTextTransform,
+                showNone: true,
+                isBlock: true,
+                size: "__unstable-large",
+                __nextHasNoMarginBottom: true
+              }
+            )
+          }
+        ),
+        hasTextAlignmentControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            label: (0, import_i18n.__)("Text alignment"),
+            hasValue: hasTextAlign,
+            onDeselect: resetTextAlign,
+            isShownByDefault: defaultControls.textAlign,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_text_alignment_control.default,
+              {
+                value: textAlign,
+                onChange: setTextAlign,
+                size: "__unstable-large",
+                __nextHasNoMarginBottom: true
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=typography-panel.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useHasTypographyPanel
+});
+//# sourceMappingURL=typography-panel.js.map