react-fontpicker-ts 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -1,6 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -17,9 +18,50 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// font-preview/font-previews.css
+var init_ = __esm({
+  "font-preview/font-previews.css"() {
+  }
+});
+
+// src/components/FontPreviews.tsx
+var FontPreviews_exports = {};
+__export(FontPreviews_exports, {
+  default: () => FontPreviews_default
+});
+import { Fragment, jsx } from "react/jsx-runtime";
+var FontPreviews, FontPreviews_default;
+var init_FontPreviews = __esm({
+  "src/components/FontPreviews.tsx"() {
+    "use strict";
+    init_();
+    FontPreviews = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+    FontPreviews_default = FontPreviews;
+  }
+});
 
 // src/components/FontPicker.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // font-preview/fontInfo.json
 var fontInfo_default = [
@@ -263,10 +305,14 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "serif",
-    name: "Alegreya SC",
-    sane: "alegreya_sc",
+    category: "sans-serif",
+    name: "Alegreya Sans",
+    sane: "alegreya_sans",
     variants: [
+      "0,100",
+      "1,100",
+      "0,300",
+      "1,300",
       "0,400",
       "1,400",
       "0,500",
@@ -281,8 +327,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Alegreya Sans",
-    sane: "alegreya_sans",
+    name: "Alegreya Sans SC",
+    sane: "alegreya_sans_sc",
     variants: [
       "0,100",
       "1,100",
@@ -301,14 +347,10 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "sans-serif",
-    name: "Alegreya Sans SC",
-    sane: "alegreya_sans_sc",
+    category: "serif",
+    name: "Alegreya SC",
+    sane: "alegreya_sc",
     variants: [
-      "0,100",
-      "1,100",
-      "0,300",
-      "1,300",
       "0,400",
       "1,400",
       "0,500",
@@ -334,14 +376,6 @@ var fontInfo_default = [
       "1,700"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Alex Brush",
-    sane: "alex_brush",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "sans-serif",
     name: "Alexandria",
@@ -358,6 +392,14 @@ var fontInfo_default = [
       "0,900"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Alex Brush",
+    sane: "alex_brush",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Alfa Slab One",
@@ -398,6 +440,17 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Alkatra",
+    sane: "alkatra",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
   {
     category: "display",
     name: "Allan",
@@ -851,6 +904,20 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Anuphan",
+    sane: "anuphan",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
   {
     category: "display",
     name: "Anybody",
@@ -957,14 +1024,6 @@ var fontInfo_default = [
       "1,700"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Are You Serious",
-    sane: "are_you_serious",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "serif",
     name: "Aref Ruqaa",
@@ -984,32 +1043,25 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "display",
-    name: "Arima",
-    sane: "arima",
+    category: "handwriting",
+    name: "Are You Serious",
+    sane: "are_you_serious",
     variants: [
-      "0,100",
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700"
+      "0,400"
     ]
   },
   {
     category: "display",
-    name: "Arima Madurai",
-    sane: "arima_madurai",
+    name: "Arima",
+    sane: "arima",
     variants: [
       "0,100",
       "0,200",
       "0,300",
       "0,400",
       "0,500",
-      "0,700",
-      "0,800",
-      "0,900"
+      "0,600",
+      "0,700"
     ]
   },
   {
@@ -1356,42 +1408,6 @@ var fontInfo_default = [
       "1,700"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "BIZ UDGothic",
-    sane: "biz_udgothic",
-    variants: [
-      "0,400",
-      "0,700"
-    ]
-  },
-  {
-    category: "serif",
-    name: "BIZ UDMincho",
-    sane: "biz_udmincho",
-    variants: [
-      "0,400",
-      "0,700"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "BIZ UDPGothic",
-    sane: "biz_udpgothic",
-    variants: [
-      "0,400",
-      "0,700"
-    ]
-  },
-  {
-    category: "serif",
-    name: "BIZ UDPMincho",
-    sane: "biz_udpmincho",
-    variants: [
-      "0,400",
-      "0,700"
-    ]
-  },
   {
     category: "handwriting",
     name: "Babylonica",
@@ -1742,31 +1758,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "Be Vietnam Pro",
-    sane: "be_vietnam_pro",
-    variants: [
-      "0,100",
-      "1,100",
-      "0,200",
-      "1,200",
-      "0,300",
-      "1,300",
-      "0,400",
-      "1,400",
-      "0,500",
-      "1,500",
-      "0,600",
-      "1,600",
-      "0,700",
-      "1,700",
-      "0,800",
-      "1,800",
-      "0,900",
-      "1,900"
-    ]
-  },
   {
     category: "handwriting",
     name: "Beau Rivage",
@@ -1903,6 +1894,31 @@ var fontInfo_default = [
       "1,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Be Vietnam Pro",
+    sane: "be_vietnam_pro",
+    variants: [
+      "0,100",
+      "1,100",
+      "0,200",
+      "1,200",
+      "0,300",
+      "1,300",
+      "0,400",
+      "1,400",
+      "0,500",
+      "1,500",
+      "0,600",
+      "1,600",
+      "0,700",
+      "1,700",
+      "0,800",
+      "1,800",
+      "0,900",
+      "1,900"
+    ]
+  },
   {
     category: "display",
     name: "BhuTuka Expanded One",
@@ -1911,6 +1927,22 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Bigelow Rules",
+    sane: "bigelow_rules",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Bigshot One",
+    sane: "bigshot_one",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Big Shoulders Display",
@@ -2007,22 +2039,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "display",
-    name: "Bigelow Rules",
-    sane: "bigelow_rules",
-    variants: [
-      "0,400"
-    ]
-  },
-  {
-    category: "display",
-    name: "Bigshot One",
-    sane: "bigshot_one",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "handwriting",
     name: "Bilbo",
@@ -2119,6 +2135,42 @@ var fontInfo_default = [
       "1,900"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "BIZ UDGothic",
+    sane: "biz_udgothic",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
+  {
+    category: "serif",
+    name: "BIZ UDMincho",
+    sane: "biz_udmincho",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "BIZ UDPGothic",
+    sane: "biz_udpgothic",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
+  {
+    category: "serif",
+    name: "BIZ UDPMincho",
+    sane: "biz_udpmincho",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Black And White Picture",
@@ -3370,50 +3422,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "monospace",
-    name: "DM Mono",
-    sane: "dm_mono",
-    variants: [
-      "0,300",
-      "1,300",
-      "0,400",
-      "1,400",
-      "0,500",
-      "1,500"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "DM Sans",
-    sane: "dm_sans",
-    variants: [
-      "0,400",
-      "1,400",
-      "0,500",
-      "1,500",
-      "0,700",
-      "1,700"
-    ]
-  },
-  {
-    category: "serif",
-    name: "DM Serif Display",
-    sane: "dm_serif_display",
-    variants: [
-      "0,400",
-      "1,400"
-    ]
-  },
-  {
-    category: "serif",
-    name: "DM Serif Text",
-    sane: "dm_serif_text",
-    variants: [
-      "0,400",
-      "1,400"
-    ]
-  },
   {
     category: "handwriting",
     name: "Damion",
@@ -3497,6 +3505,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Delicious Handrawn",
+    sane: "delicious_handrawn",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Delius",
@@ -3578,6 +3594,50 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "monospace",
+    name: "DM Mono",
+    sane: "dm_mono",
+    variants: [
+      "0,300",
+      "1,300",
+      "0,400",
+      "1,400",
+      "0,500",
+      "1,500"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "DM Sans",
+    sane: "dm_sans",
+    variants: [
+      "0,400",
+      "1,400",
+      "0,500",
+      "1,500",
+      "0,700",
+      "1,700"
+    ]
+  },
+  {
+    category: "serif",
+    name: "DM Serif Display",
+    sane: "dm_serif_display",
+    variants: [
+      "0,400",
+      "1,400"
+    ]
+  },
+  {
+    category: "serif",
+    name: "DM Serif Text",
+    sane: "dm_serif_text",
+    variants: [
+      "0,400",
+      "1,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Do Hyeon",
@@ -3677,17 +3737,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "display",
-    name: "DynaPuff",
-    sane: "dynapuff",
-    variants: [
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700"
-    ]
-  },
   {
     category: "display",
     name: "Dynalight",
@@ -3697,20 +3746,14 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "serif",
-    name: "EB Garamond",
-    sane: "eb_garamond",
+    category: "display",
+    name: "DynaPuff",
+    sane: "dynapuff",
     variants: [
       "0,400",
       "0,500",
       "0,600",
-      "0,700",
-      "0,800",
-      "1,400",
-      "1,500",
-      "1,600",
-      "1,700",
-      "1,800"
+      "0,700"
     ]
   },
   {
@@ -3737,6 +3780,23 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "EB Garamond",
+    sane: "eb_garamond",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700",
+      "1,800"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Economica",
@@ -3815,6 +3875,14 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Electrolize",
+    sane: "electrolize",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "El Messiri",
@@ -3826,14 +3894,6 @@ var fontInfo_default = [
       "0,700"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "Electrolize",
-    sane: "electrolize",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Elsie",
@@ -4613,14 +4673,6 @@ var fontInfo_default = [
       "0,700"
     ]
   },
-  {
-    category: "display",
-    name: "Fredoka One",
-    sane: "fredoka_one",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Freehand",
@@ -4834,17 +4886,6 @@ var fontInfo_default = [
       "1,900"
     ]
   },
-  {
-    category: "serif",
-    name: "Gentium Book Basic",
-    sane: "gentium_book_basic",
-    variants: [
-      "0,400",
-      "1,400",
-      "0,700",
-      "1,700"
-    ]
-  },
   {
     category: "serif",
     name: "Gentium Book Plus",
@@ -5626,6 +5667,21 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Ibarra Real Nova",
+    sane: "ibarra_real_nova",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700"
+    ]
+  },
   {
     category: "monospace",
     name: "IBM Plex Mono",
@@ -5809,22 +5865,37 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "serif",
-    name: "IM Fell DW Pica",
-    sane: "im_fell_dw_pica",
+    category: "display",
+    name: "Iceberg",
+    sane: "iceberg",
     variants: [
-      "0,400",
-      "1,400"
+      "0,400"
     ]
   },
   {
-    category: "serif",
-    name: "IM Fell DW Pica SC",
-    sane: "im_fell_dw_pica_sc",
+    category: "display",
+    name: "Iceland",
+    sane: "iceland",
     variants: [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Imbue",
+    sane: "imbue",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "0,900"
+    ]
+  },
   {
     category: "serif",
     name: "IM Fell Double Pica",
@@ -5842,6 +5913,23 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "IM Fell DW Pica",
+    sane: "im_fell_dw_pica",
+    variants: [
+      "0,400",
+      "1,400"
+    ]
+  },
+  {
+    category: "serif",
+    name: "IM Fell DW Pica SC",
+    sane: "im_fell_dw_pica_sc",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "IM Fell English",
@@ -5894,64 +5982,17 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "serif",
-    name: "Ibarra Real Nova",
-    sane: "ibarra_real_nova",
-    variants: [
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "1,400",
-      "1,500",
-      "1,600",
-      "1,700"
-    ]
-  },
-  {
-    category: "display",
-    name: "Iceberg",
-    sane: "iceberg",
+    category: "handwriting",
+    name: "Imperial Script",
+    sane: "imperial_script",
     variants: [
       "0,400"
     ]
   },
   {
-    category: "display",
-    name: "Iceland",
-    sane: "iceland",
-    variants: [
-      "0,400"
-    ]
-  },
-  {
-    category: "serif",
-    name: "Imbue",
-    sane: "imbue",
-    variants: [
-      "0,100",
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "0,800",
-      "0,900"
-    ]
-  },
-  {
-    category: "handwriting",
-    name: "Imperial Script",
-    sane: "imperial_script",
-    variants: [
-      "0,400"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "Imprima",
-    sane: "imprima",
+    category: "sans-serif",
+    name: "Imprima",
+    sane: "imprima",
     variants: [
       "0,400"
     ]
@@ -6707,8 +6748,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "KoHo",
-    sane: "koho",
+    name: "Kodchasan",
+    sane: "kodchasan",
     variants: [
       "0,200",
       "1,200",
@@ -6726,8 +6767,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Kodchasan",
-    sane: "kodchasan",
+    name: "KoHo",
+    sane: "koho",
     variants: [
       "0,200",
       "1,200",
@@ -7242,48 +7283,48 @@ var fontInfo_default = [
   },
   {
     category: "display",
-    name: "Libre Barcode 128",
-    sane: "libre_barcode_128",
+    name: "Libre Barcode 39",
+    sane: "libre_barcode_39",
     variants: [
       "0,400"
     ]
   },
   {
     category: "display",
-    name: "Libre Barcode 128 Text",
-    sane: "libre_barcode_128_text",
+    name: "Libre Barcode 39 Extended",
+    sane: "libre_barcode_39_extended",
     variants: [
       "0,400"
     ]
   },
   {
     category: "display",
-    name: "Libre Barcode 39",
-    sane: "libre_barcode_39",
+    name: "Libre Barcode 39 Extended Text",
+    sane: "libre_barcode_39_extended_text",
     variants: [
       "0,400"
     ]
   },
   {
     category: "display",
-    name: "Libre Barcode 39 Extended",
-    sane: "libre_barcode_39_extended",
+    name: "Libre Barcode 39 Text",
+    sane: "libre_barcode_39_text",
     variants: [
       "0,400"
     ]
   },
   {
     category: "display",
-    name: "Libre Barcode 39 Extended Text",
-    sane: "libre_barcode_39_extended_text",
+    name: "Libre Barcode 128",
+    sane: "libre_barcode_128",
     variants: [
       "0,400"
     ]
   },
   {
     category: "display",
-    name: "Libre Barcode 39 Text",
-    sane: "libre_barcode_39_text",
+    name: "Libre Barcode 128 Text",
+    sane: "libre_barcode_128_text",
     variants: [
       "0,400"
     ]
@@ -7548,32 +7589,32 @@ var fontInfo_default = [
   },
   {
     category: "handwriting",
-    name: "Love Light",
-    sane: "love_light",
+    name: "Loved by the King",
+    sane: "loved_by_the_king",
     variants: [
       "0,400"
     ]
   },
   {
-    category: "display",
-    name: "Love Ya Like A Sister",
-    sane: "love_ya_like_a_sister",
+    category: "handwriting",
+    name: "Love Light",
+    sane: "love_light",
     variants: [
       "0,400"
     ]
   },
   {
     category: "handwriting",
-    name: "Loved by the King",
-    sane: "loved_by_the_king",
+    name: "Lovers Quarrel",
+    sane: "lovers_quarrel",
     variants: [
       "0,400"
     ]
   },
   {
-    category: "handwriting",
-    name: "Lovers Quarrel",
-    sane: "lovers_quarrel",
+    category: "display",
+    name: "Love Ya Like A Sister",
+    sane: "love_ya_like_a_sister",
     variants: [
       "0,400"
     ]
@@ -7619,102 +7660,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "M PLUS 1",
-    sane: "m_plus_1",
-    variants: [
-      "0,100",
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "0,800",
-      "0,900"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "M PLUS 1 Code",
-    sane: "m_plus_1_code",
-    variants: [
-      "0,100",
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "M PLUS 1p",
-    sane: "m_plus_1p",
-    variants: [
-      "0,100",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,700",
-      "0,800",
-      "0,900"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "M PLUS 2",
-    sane: "m_plus_2",
-    variants: [
-      "0,100",
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "0,800",
-      "0,900"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "M PLUS Code Latin",
-    sane: "m_plus_code_latin",
-    variants: [
-      "0,100",
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "M PLUS Rounded 1c",
-    sane: "m_plus_rounded_1c",
-    variants: [
-      "0,100",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,700",
-      "0,800",
-      "0,900"
-    ]
-  },
-  {
-    category: "handwriting",
-    name: "Ma Shan Zheng",
-    sane: "ma_shan_zheng",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Macondo",
@@ -8002,6 +7947,14 @@ var fontInfo_default = [
       "1,700"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Ma Shan Zheng",
+    sane: "ma_shan_zheng",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Mate",
@@ -8011,6 +7964,88 @@ var fontInfo_default = [
       "1,400"
     ]
   },
+  {
+    category: "monospace",
+    name: "Material Icons",
+    sane: "material_icons",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Icons Outlined",
+    sane: "material_icons_outlined",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Icons Round",
+    sane: "material_icons_round",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Icons Sharp",
+    sane: "material_icons_sharp",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Icons Two Tone",
+    sane: "material_icons_two_tone",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Symbols Outlined",
+    sane: "material_symbols_outlined",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Symbols Rounded",
+    sane: "material_symbols_rounded",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
+  {
+    category: "monospace",
+    name: "Material Symbols Sharp",
+    sane: "material_symbols_sharp",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
   {
     category: "serif",
     name: "Mate SC",
@@ -8118,14 +8153,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Merienda One",
-    sane: "merienda_one",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "serif",
     name: "Merriweather",
@@ -8518,28 +8545,116 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "display",
-    name: "Moulpali",
-    sane: "moulpali",
+    category: "display",
+    name: "Moulpali",
+    sane: "moulpali",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Mountains of Christmas",
+    sane: "mountains_of_christmas",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "Mouse Memoirs",
+    sane: "mouse_memoirs",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "M PLUS 1",
+    sane: "m_plus_1",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "0,900"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "M PLUS 1 Code",
+    sane: "m_plus_1_code",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "M PLUS 1p",
+    sane: "m_plus_1p",
+    variants: [
+      "0,100",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,700",
+      "0,800",
+      "0,900"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "M PLUS 2",
+    sane: "m_plus_2",
     variants: [
-      "0,400"
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "0,900"
     ]
   },
   {
-    category: "display",
-    name: "Mountains of Christmas",
-    sane: "mountains_of_christmas",
+    category: "sans-serif",
+    name: "M PLUS Code Latin",
+    sane: "m_plus_code_latin",
     variants: [
+      "0,100",
+      "0,200",
+      "0,300",
       "0,400",
+      "0,500",
+      "0,600",
       "0,700"
     ]
   },
   {
     category: "sans-serif",
-    name: "Mouse Memoirs",
-    sane: "mouse_memoirs",
+    name: "M PLUS Rounded 1c",
+    sane: "m_plus_rounded_1c",
     variants: [
-      "0,400"
+      "0,100",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,700",
+      "0,800",
+      "0,900"
     ]
   },
   {
@@ -8712,16 +8827,16 @@ var fontInfo_default = [
   },
   {
     category: "handwriting",
-    name: "My Soul",
-    sane: "my_soul",
+    name: "Mynerve",
+    sane: "mynerve",
     variants: [
       "0,400"
     ]
   },
   {
     category: "handwriting",
-    name: "Mynerve",
-    sane: "mynerve",
+    name: "My Soul",
+    sane: "my_soul",
     variants: [
       "0,400"
     ]
@@ -8734,14 +8849,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "NTR",
-    sane: "ntr",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Nabla",
@@ -8840,14 +8947,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "serif",
-    name: "New Tegomin",
-    sane: "new_tegomin",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "sans-serif",
     name: "News Cycle",
@@ -8878,6 +8977,14 @@ var fontInfo_default = [
       "1,800"
     ]
   },
+  {
+    category: "serif",
+    name: "New Tegomin",
+    sane: "new_tegomin",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Niconne",
@@ -9348,19 +9455,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "Noto Sans HK",
-    sane: "noto_sans_hk",
-    variants: [
-      "0,100",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,700",
-      "0,900"
-    ]
-  },
   {
     category: "sans-serif",
     name: "Noto Sans Hanifi Rohingya",
@@ -9398,8 +9492,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Noto Sans JP",
-    sane: "noto_sans_jp",
+    name: "Noto Sans HK",
+    sane: "noto_sans_hk",
     variants: [
       "0,100",
       "0,300",
@@ -9422,8 +9516,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Noto Sans KR",
-    sane: "noto_sans_kr",
+    name: "Noto Sans JP",
+    sane: "noto_sans_jp",
     variants: [
       "0,100",
       "0,300",
@@ -9484,6 +9578,19 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Noto Sans KR",
+    sane: "noto_sans_kr",
+    variants: [
+      "0,100",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,700",
+      "0,900"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Noto Sans Lao",
@@ -9660,8 +9767,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Noto Sans NKo",
-    sane: "noto_sans_nko",
+    name: "Noto Sans Newa",
+    sane: "noto_sans_newa",
     variants: [
       "0,400"
     ]
@@ -9679,8 +9786,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Noto Sans Newa",
-    sane: "noto_sans_newa",
+    name: "Noto Sans NKo",
+    sane: "noto_sans_nko",
     variants: [
       "0,400"
     ]
@@ -9752,6 +9859,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Noto Sans Saurashtra",
+    sane: "noto_sans_saurashtra",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Noto Sans SC",
@@ -9765,14 +9880,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "Noto Sans Saurashtra",
-    sane: "noto_sans_saurashtra",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "sans-serif",
     name: "Noto Sans Sharada",
@@ -9867,19 +9974,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "Noto Sans TC",
-    sane: "noto_sans_tc",
-    variants: [
-      "0,100",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,700",
-      "0,900"
-    ]
-  },
   {
     category: "sans-serif",
     name: "Noto Sans Tagalog",
@@ -9958,6 +10052,19 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Noto Sans TC",
+    sane: "noto_sans_tc",
+    variants: [
+      "0,100",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,700",
+      "0,900"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Noto Sans Telugu",
@@ -10226,21 +10333,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "serif",
-    name: "Noto Serif HK",
-    sane: "noto_serif_hk",
-    variants: [
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "0,800",
-      "0,900"
-    ]
-  },
   {
     category: "serif",
     name: "Noto Serif Hebrew",
@@ -10259,8 +10351,8 @@ var fontInfo_default = [
   },
   {
     category: "serif",
-    name: "Noto Serif JP",
-    sane: "noto_serif_jp",
+    name: "Noto Serif HK",
+    sane: "noto_serif_hk",
     variants: [
       "0,200",
       "0,300",
@@ -10268,13 +10360,14 @@ var fontInfo_default = [
       "0,500",
       "0,600",
       "0,700",
+      "0,800",
       "0,900"
     ]
   },
   {
     category: "serif",
-    name: "Noto Serif KR",
-    sane: "noto_serif_kr",
+    name: "Noto Serif JP",
+    sane: "noto_serif_jp",
     variants: [
       "0,200",
       "0,300",
@@ -10328,6 +10421,20 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "serif",
+    name: "Noto Serif KR",
+    sane: "noto_serif_kr",
+    variants: [
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,900"
+    ]
+  },
   {
     category: "serif",
     name: "Noto Serif Lao",
@@ -10412,20 +10519,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "serif",
-    name: "Noto Serif TC",
-    sane: "noto_serif_tc",
-    variants: [
-      "0,200",
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "0,900"
-    ]
-  },
   {
     category: "serif",
     name: "Noto Serif Tamil",
@@ -10451,6 +10544,20 @@ var fontInfo_default = [
       "1,900"
     ]
   },
+  {
+    category: "serif",
+    name: "Noto Serif TC",
+    sane: "noto_serif_tc",
+    variants: [
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,900"
+    ]
+  },
   {
     category: "serif",
     name: "Noto Serif Telugu",
@@ -10574,6 +10681,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "NTR",
+    sane: "ntr",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Numans",
@@ -10666,6 +10781,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Oldenburg",
+    sane: "oldenburg",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Old Standard TT",
@@ -10676,14 +10799,6 @@ var fontInfo_default = [
       "0,700"
     ]
   },
-  {
-    category: "display",
-    name: "Oldenburg",
-    sane: "oldenburg",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "handwriting",
     name: "Ole",
@@ -10820,14 +10935,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Over the Rainbow",
-    sane: "over_the_rainbow",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Overlock",
@@ -10886,6 +10993,14 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Over the Rainbow",
+    sane: "over_the_rainbow",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Ovo",
@@ -10926,63 +11041,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "monospace",
-    name: "PT Mono",
-    sane: "pt_mono",
-    variants: [
-      "0,400"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "PT Sans",
-    sane: "pt_sans",
-    variants: [
-      "0,400",
-      "1,400",
-      "0,700",
-      "1,700"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "PT Sans Caption",
-    sane: "pt_sans_caption",
-    variants: [
-      "0,400",
-      "0,700"
-    ]
-  },
-  {
-    category: "sans-serif",
-    name: "PT Sans Narrow",
-    sane: "pt_sans_narrow",
-    variants: [
-      "0,400",
-      "0,700"
-    ]
-  },
-  {
-    category: "serif",
-    name: "PT Serif",
-    sane: "pt_serif",
-    variants: [
-      "0,400",
-      "1,400",
-      "0,700",
-      "1,700"
-    ]
-  },
-  {
-    category: "serif",
-    name: "PT Serif Caption",
-    sane: "pt_serif_caption",
-    variants: [
-      "0,400",
-      "1,400"
-    ]
-  },
   {
     category: "handwriting",
     name: "Pacifico",
@@ -11406,7 +11464,11 @@ var fontInfo_default = [
     name: "Pontano Sans",
     sane: "pontano_sans",
     variants: [
-      "0,400"
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
     ]
   },
   {
@@ -11586,6 +11648,63 @@ var fontInfo_default = [
       "1,800"
     ]
   },
+  {
+    category: "monospace",
+    name: "PT Mono",
+    sane: "pt_mono",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "PT Sans",
+    sane: "pt_sans",
+    variants: [
+      "0,400",
+      "1,400",
+      "0,700",
+      "1,700"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "PT Sans Caption",
+    sane: "pt_sans_caption",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
+  {
+    category: "sans-serif",
+    name: "PT Sans Narrow",
+    sane: "pt_sans_narrow",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
+  {
+    category: "serif",
+    name: "PT Serif",
+    sane: "pt_serif",
+    variants: [
+      "0,400",
+      "1,400",
+      "0,700",
+      "1,700"
+    ]
+  },
+  {
+    category: "serif",
+    name: "PT Serif Caption",
+    sane: "pt_serif_caption",
+    variants: [
+      "0,400",
+      "1,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Public Sans",
@@ -11945,6 +12064,24 @@ var fontInfo_default = [
       "0,900"
     ]
   },
+  {
+    category: "display",
+    name: "Redacted",
+    sane: "redacted",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Redacted Script",
+    sane: "redacted_script",
+    variants: [
+      "0,300",
+      "0,400",
+      "0,700"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Red Hat Display",
@@ -12001,43 +12138,25 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "display",
-    name: "Red Rose",
-    sane: "red_rose",
-    variants: [
-      "0,300",
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700"
-    ]
-  },
-  {
-    category: "display",
-    name: "Redacted",
-    sane: "redacted",
+    category: "handwriting",
+    name: "Redressed",
+    sane: "redressed",
     variants: [
       "0,400"
     ]
   },
   {
     category: "display",
-    name: "Redacted Script",
-    sane: "redacted_script",
+    name: "Red Rose",
+    sane: "red_rose",
     variants: [
       "0,300",
       "0,400",
+      "0,500",
+      "0,600",
       "0,700"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Redressed",
-    sane: "redressed",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "sans-serif",
     name: "Reem Kufi",
@@ -12251,17 +12370,17 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "handwriting",
-    name: "Rock Salt",
-    sane: "rock_salt",
+    category: "sans-serif",
+    name: "RocknRoll One",
+    sane: "rocknroll_one",
     variants: [
       "0,400"
     ]
   },
   {
-    category: "sans-serif",
-    name: "RocknRoll One",
-    sane: "rocknroll_one",
+    category: "handwriting",
+    name: "Rock Salt",
+    sane: "rock_salt",
     variants: [
       "0,400"
     ]
@@ -12493,6 +12612,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Pixels",
+    sane: "rubik_pixels",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Puddles",
@@ -12611,21 +12738,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "serif",
-    name: "STIX Two Text",
-    sane: "stix_two_text",
-    variants: [
-      "0,400",
-      "0,500",
-      "0,600",
-      "0,700",
-      "1,400",
-      "1,500",
-      "1,600",
-      "1,700"
-    ]
-  },
   {
     category: "handwriting",
     name: "Sacramento",
@@ -12891,6 +13003,25 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Schibsted Grotesk",
+    sane: "schibsted_grotesk",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "0,900",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700",
+      "1,800",
+      "1,900"
+    ]
+  },
   {
     category: "handwriting",
     name: "Schoolbell",
@@ -13833,6 +13964,21 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "STIX Two Text",
+    sane: "stix_two_text",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700"
+    ]
+  },
   {
     category: "serif",
     name: "Stoke",
@@ -14669,14 +14815,6 @@ var fontInfo_default = [
       "1,900"
     ]
   },
-  {
-    category: "monospace",
-    name: "VT323",
-    sane: "vt323",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Vampiro One",
@@ -14845,6 +14983,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "monospace",
+    name: "VT323",
+    sane: "vt323",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Vujahday Script",
@@ -15278,7 +15424,8 @@ var fontInfo_default = [
 ];
 
 // src/components/FontPicker.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var FontPreviews2 = lazy(() => Promise.resolve().then(() => (init_FontPreviews(), FontPreviews_exports)));
 function toString(v) {
   if (typeof v === "string") {
     return v;
@@ -15305,20 +15452,37 @@ var defaultFont = {
     "1,800"
   ]
 };
-function FontPicker({
-  defaultValue = "Open Sans",
-  noMatches = "No matches",
-  autoLoad = false,
-  loaderOnly = false,
-  loadAllVariants = false,
-  loadFonts = "",
-  googleFonts = "all",
-  fontCategories = "all",
-  localFonts = [],
-  fontVariants,
-  value
-}) {
-  var _a, _b, _c;
+function FontPicker(_a) {
+  var _b = _a, {
+    defaultValue = "Open Sans",
+    noMatches = "No matches",
+    autoLoad = false,
+    loaderOnly = false,
+    loadAllVariants = false,
+    loadFonts = "",
+    googleFonts = "all",
+    fontCategories = "all",
+    localFonts = [],
+    fontVariants,
+    value,
+    loading = /* @__PURE__ */ jsx2("div", { children: "Font previews loading ..." }),
+    inputId
+  } = _b, rest = __objRest(_b, [
+    "defaultValue",
+    "noMatches",
+    "autoLoad",
+    "loaderOnly",
+    "loadAllVariants",
+    "loadFonts",
+    "googleFonts",
+    "fontCategories",
+    "localFonts",
+    "fontVariants",
+    "value",
+    "loading",
+    "inputId"
+  ]);
+  var _a2, _b2, _c;
   const [focused, setFocused] = useState(false);
   const [typedSearch, setTypedSearch] = useState(defaultValue);
   const [searchContent, setSearchContent] = useState(defaultValue);
@@ -15443,11 +15607,11 @@ function FontPicker({
     e.preventDefault();
   };
   const searchChanged = (e) => {
-    var _a2, _b2;
-    if ((_a2 = popoutRef == null ? void 0 : popoutRef.current) == null ? void 0 : _a2.scrollTop) {
+    var _a3, _b3;
+    if ((_a3 = popoutRef == null ? void 0 : popoutRef.current) == null ? void 0 : _a3.scrollTop) {
       popoutRef.current.scrollTop = 0;
     }
-    const newValue = (_b2 = e.currentTarget) == null ? void 0 : _b2.value;
+    const newValue = (_b3 = e.currentTarget) == null ? void 0 : _b3.value;
     setSelectedFontIndex(-1);
     const isLonger = typedSearch.length < (newValue == null ? void 0 : newValue.length);
     setTypedSearch(newValue);
@@ -15507,7 +15671,7 @@ function FontPicker({
     }
   };
   const showSelectedFont = (why = "key", index = selectedFontIndex) => {
-    var _a2, _b2;
+    var _a3, _b3;
     const popout = popoutRef == null ? void 0 : popoutRef.current;
     if (popout && index >= 0) {
       const selectedFont = matchingFonts[index];
@@ -15520,8 +15684,8 @@ function FontPicker({
           const popBottom = popTop + popout.clientHeight;
           if (why === "opening" || fontTop <= popTop) {
             popout.scrollTop = fontTop;
-            (_a2 = fontElement.parentElement) == null ? void 0 : _a2.classList.add("selected");
-            const optionRef = (_b2 = getOptionsRef()) == null ? void 0 : _b2.get(selectedFont.sane);
+            (_a3 = fontElement.parentElement) == null ? void 0 : _a3.classList.add("selected");
+            const optionRef = (_b3 = getOptionsRef()) == null ? void 0 : _b3.get(selectedFont.sane);
             optionRef == null ? void 0 : optionRef.classList.add("selected");
           } else if (fontBottom >= popBottom) {
             popout.scrollTop = fontBottom - popout.clientHeight - 1;
@@ -15531,8 +15695,8 @@ function FontPicker({
     }
   };
   const onFocus = () => {
-    var _a2;
-    (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.select();
+    var _a3;
+    (_a3 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a3.select();
     setTypedSearch("");
     show();
   };
@@ -15558,8 +15722,8 @@ function FontPicker({
     }
   };
   const hide = () => {
-    var _a2;
-    (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.blur();
+    var _a3;
+    (_a3 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a3.blur();
     setFocused(false);
   };
   const getFontByName = useCallback(
@@ -15575,11 +15739,11 @@ function FontPicker({
     [fonts]
   );
   const setCurrent = (font) => {
-    var _a2;
+    var _a3;
     setCurrentState(font);
     setTypedSearch(font.name);
     setSearchContent(font.name);
-    (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.blur();
+    (_a3 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a3.blur();
     autoLoadFont(font);
     emitFontVariants(font);
     emitValue(font);
@@ -15626,6 +15790,7 @@ function FontPicker({
         link.rel = "stylesheet";
         link.id = cssId;
         link.href = "https://fonts.googleapis.com/css2?family=" + font.name + ":ital,wght@" + variants.sort().join(";") + "&display=swap";
+        link.setAttribute("data-testid", cssId);
         document.getElementsByTagName("head")[0].appendChild(link);
       }
     },
@@ -15686,11 +15851,13 @@ function FontPicker({
     emitFontVariants(defaultCurrent);
     emitValue(defaultCurrent);
   }, [defaultCurrent]);
-  return /* @__PURE__ */ jsx(Fragment, { children: !loaderOnly && /* @__PURE__ */ jsxs("div", { className: (_a = outerClasses()) == null ? void 0 : _a.join(" "), children: [
-    /* @__PURE__ */ jsx("div", { ref: previewRef, className: (_b = previewClasses()) == null ? void 0 : _b.join(" ") }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(Fragment2, { children: !loaderOnly && /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({ className: (_a2 = outerClasses()) == null ? void 0 : _a2.join(" ") }, rest), { children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx2(Fragment2, { children: loading }), children: [
+    /* @__PURE__ */ jsx2(FontPreviews2, {}),
+    /* @__PURE__ */ jsx2("div", { ref: previewRef, className: (_b2 = previewClasses()) == null ? void 0 : _b2.join(" ") }),
+    /* @__PURE__ */ jsx2(
       "input",
       {
+        id: inputId,
         className: "fontpicker__search",
         ref: inputRef,
         type: "text",
@@ -15709,7 +15876,7 @@ function FontPicker({
         className: (_c = popoutClasses()) == null ? void 0 : _c.join(" "),
         onMouseDown: cancelBlur,
         children: [
-          matchingFonts.map((font, i) => /* @__PURE__ */ jsx(
+          matchingFonts.map((font, i) => /* @__PURE__ */ jsx2(
             "div",
             {
               ref: saveOptionsRef(font.sane),
@@ -15718,15 +15885,15 @@ function FontPicker({
               onMouseMove: () => {
                 setSelectedFontIndex(i);
               },
-              children: /* @__PURE__ */ jsx("div", { className: "font-preview-" + font.sane })
+              children: /* @__PURE__ */ jsx2("div", { className: "font-preview-" + font.sane })
             },
             font.sane + i
           )),
-          matchingFonts.length === 0 && /* @__PURE__ */ jsx("div", { className: "fontpicker__nomatches", children: noMatches })
+          matchingFonts.length === 0 && /* @__PURE__ */ jsx2("div", { className: "fontpicker__nomatches", children: noMatches })
         ]
       }
     )
-  ] }) });
+  ] }) })) });
 }
 export {
   FontPicker as default,