// packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
import { __ } from "@wordpress/i18n";
import { ToggleGroupControl, ToggleGroupControlOption } from "../toggle-group-control/index.js";
import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from "./constants.js";
import { jsx as _jsx } from "react/jsx-runtime";
var FontSizePickerToggleGroup = (props) => {
  const {
    fontSizes,
    value,
    valueMode = "literal",
    __next40pxDefaultSize,
    size,
    onChange
  } = props;
  const currentValue = (() => {
    if (!value) {
      return void 0;
    }
    if (valueMode === "slug") {
      return String(value);
    }
    const matchingFontSizes = fontSizes.filter((fontSize) => fontSize.size === value);
    if (matchingFontSizes.length > 1) {
      return void 0;
    }
    const fontSizeBySize = fontSizes.find((fontSize) => fontSize.size === value);
    return fontSizeBySize?.slug;
  })();
  return /* @__PURE__ */ _jsx(ToggleGroupControl, {
    __next40pxDefaultSize,
    __shouldNotWarnDeprecated36pxSize: true,
    label: __("Font size"),
    hideLabelFromVision: true,
    value: currentValue,
    onChange: (newSlug) => {
      if (newSlug === void 0) {
        onChange(void 0);
      } else {
        const selectedFontSize = fontSizes.find((fontSize) => fontSize.slug === String(newSlug));
        if (selectedFontSize) {
          onChange(selectedFontSize.size, selectedFontSize);
        }
      }
    },
    isBlock: true,
    size,
    children: fontSizes.map((fontSize, index) => /* @__PURE__ */ _jsx(ToggleGroupControlOption, {
      value: fontSize.slug,
      label: T_SHIRT_ABBREVIATIONS[index],
      "aria-label": fontSize.name || T_SHIRT_NAMES[index],
      showTooltip: true
    }, fontSize.slug))
  });
};
var font_size_picker_toggle_group_default = FontSizePickerToggleGroup;
export {
  font_size_picker_toggle_group_default as default
};
//# sourceMappingURL=font-size-picker-toggle-group.js.map
