react-fontpicker-ts 0.1.0 → 0.3.0

package/dist/index.js

@@ -20,6 +20,21 @@ 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 });
@@ -34,13 +49,35 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// 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
+});
+var import_jsx_runtime, FontPreviews, FontPreviews_default;
+var init_FontPreviews = __esm({
+  "src/components/FontPreviews.tsx"() {
+    "use strict";
+    init_();
+    import_jsx_runtime = require("react/jsx-runtime");
+    FontPreviews = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+    FontPreviews_default = FontPreviews;
+  }
+});
+
 // index.ts
-var react_fontpicker_exports = {};
-__export(react_fontpicker_exports, {
+var fontpicker_exports = {};
+__export(fontpicker_exports, {
   default: () => FontPicker,
   toString: () => toString
 });
-module.exports = __toCommonJS(react_fontpicker_exports);
+module.exports = __toCommonJS(fontpicker_exports);
 
 // src/components/FontPicker.tsx
 var import_react = require("react");
@@ -287,10 +324,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",
@@ -305,8 +346,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",
@@ -325,14 +366,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",
@@ -358,14 +395,6 @@ var fontInfo_default = [
       "1,700"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Alex Brush",
-    sane: "alex_brush",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "sans-serif",
     name: "Alexandria",
@@ -382,6 +411,14 @@ var fontInfo_default = [
       "0,900"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Alex Brush",
+    sane: "alex_brush",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Alfa Slab One",
@@ -422,6 +459,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",
@@ -875,6 +923,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",
@@ -981,14 +1043,6 @@ var fontInfo_default = [
       "1,700"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Are You Serious",
-    sane: "are_you_serious",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "serif",
     name: "Aref Ruqaa",
@@ -1008,32 +1062,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"
     ]
   },
   {
@@ -1380,42 +1427,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",
@@ -1766,31 +1777,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",
@@ -1927,6 +1913,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",
@@ -1935,6 +1946,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",
@@ -2031,22 +2058,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",
@@ -2143,6 +2154,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",
@@ -3394,50 +3441,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",
@@ -3521,6 +3524,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Delicious Handrawn",
+    sane: "delicious_handrawn",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Delius",
@@ -3602,6 +3613,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",
@@ -3701,17 +3756,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",
@@ -3721,20 +3765,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"
     ]
   },
   {
@@ -3761,6 +3799,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",
@@ -3839,6 +3894,14 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Electrolize",
+    sane: "electrolize",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "El Messiri",
@@ -3850,14 +3913,6 @@ var fontInfo_default = [
       "0,700"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "Electrolize",
-    sane: "electrolize",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Elsie",
@@ -4637,14 +4692,6 @@ var fontInfo_default = [
       "0,700"
     ]
   },
-  {
-    category: "display",
-    name: "Fredoka One",
-    sane: "fredoka_one",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Freehand",
@@ -4858,17 +4905,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",
@@ -5650,6 +5686,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",
@@ -5833,22 +5884,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",
@@ -5866,6 +5932,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",
@@ -5918,64 +6001,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"
     ]
@@ -6731,8 +6767,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "KoHo",
-    sane: "koho",
+    name: "Kodchasan",
+    sane: "kodchasan",
     variants: [
       "0,200",
       "1,200",
@@ -6750,8 +6786,8 @@ var fontInfo_default = [
   },
   {
     category: "sans-serif",
-    name: "Kodchasan",
-    sane: "kodchasan",
+    name: "KoHo",
+    sane: "koho",
     variants: [
       "0,200",
       "1,200",
@@ -7266,48 +7302,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"
     ]
@@ -7572,32 +7608,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"
     ]
@@ -7643,102 +7679,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",
@@ -8026,6 +7966,14 @@ var fontInfo_default = [
       "1,700"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Ma Shan Zheng",
+    sane: "ma_shan_zheng",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Mate",
@@ -8035,6 +7983,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",
@@ -8142,14 +8172,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Merienda One",
-    sane: "merienda_one",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "serif",
     name: "Merriweather",
@@ -8542,28 +8564,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"
     ]
   },
   {
@@ -8736,16 +8846,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"
     ]
@@ -8758,14 +8868,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "sans-serif",
-    name: "NTR",
-    sane: "ntr",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Nabla",
@@ -8864,14 +8966,6 @@ var fontInfo_default = [
       "0,400"
     ]
   },
-  {
-    category: "serif",
-    name: "New Tegomin",
-    sane: "new_tegomin",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "sans-serif",
     name: "News Cycle",
@@ -8902,6 +8996,14 @@ var fontInfo_default = [
       "1,800"
     ]
   },
+  {
+    category: "serif",
+    name: "New Tegomin",
+    sane: "new_tegomin",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Niconne",
@@ -9372,19 +9474,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",
@@ -9422,8 +9511,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",
@@ -9446,8 +9535,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",
@@ -9508,6 +9597,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",
@@ -9684,8 +9786,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"
     ]
@@ -9703,8 +9805,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"
     ]
@@ -9776,6 +9878,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",
@@ -9789,14 +9899,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",
@@ -9891,19 +9993,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",
@@ -9982,6 +10071,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",
@@ -10250,21 +10352,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",
@@ -10283,8 +10370,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",
@@ -10292,13 +10379,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",
@@ -10352,6 +10440,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",
@@ -10436,20 +10538,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",
@@ -10475,6 +10563,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",
@@ -10598,6 +10700,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "NTR",
+    sane: "ntr",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Numans",
@@ -10690,6 +10800,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Oldenburg",
+    sane: "oldenburg",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Old Standard TT",
@@ -10700,14 +10818,6 @@ var fontInfo_default = [
       "0,700"
     ]
   },
-  {
-    category: "display",
-    name: "Oldenburg",
-    sane: "oldenburg",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "handwriting",
     name: "Ole",
@@ -10844,14 +10954,6 @@ var fontInfo_default = [
       "0,900"
     ]
   },
-  {
-    category: "handwriting",
-    name: "Over the Rainbow",
-    sane: "over_the_rainbow",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Overlock",
@@ -10910,6 +11012,14 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "handwriting",
+    name: "Over the Rainbow",
+    sane: "over_the_rainbow",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Ovo",
@@ -10950,63 +11060,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",
@@ -11430,7 +11483,11 @@ var fontInfo_default = [
     name: "Pontano Sans",
     sane: "pontano_sans",
     variants: [
-      "0,400"
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
     ]
   },
   {
@@ -11610,6 +11667,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",
@@ -11969,6 +12083,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",
@@ -12025,43 +12157,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",
@@ -12275,17 +12389,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"
     ]
@@ -12517,6 +12631,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Pixels",
+    sane: "rubik_pixels",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Puddles",
@@ -12635,21 +12757,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",
@@ -12915,6 +13022,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",
@@ -13857,6 +13983,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",
@@ -14693,14 +14834,6 @@ var fontInfo_default = [
       "1,900"
     ]
   },
-  {
-    category: "monospace",
-    name: "VT323",
-    sane: "vt323",
-    variants: [
-      "0,400"
-    ]
-  },
   {
     category: "display",
     name: "Vampiro One",
@@ -14869,6 +15002,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "monospace",
+    name: "VT323",
+    sane: "vt323",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Vujahday Script",
@@ -15302,7 +15443,8 @@ var fontInfo_default = [
 ];
 
 // src/components/FontPicker.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FontPreviews2 = (0, import_react.lazy)(() => Promise.resolve().then(() => (init_FontPreviews(), FontPreviews_exports)));
 function toString(v) {
   if (typeof v === "string") {
     return v;
@@ -15329,20 +15471,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__ */ (0, import_jsx_runtime2.jsx)("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] = (0, import_react.useState)(false);
   const [typedSearch, setTypedSearch] = (0, import_react.useState)(defaultValue);
   const [searchContent, setSearchContent] = (0, import_react.useState)(defaultValue);
@@ -15467,11 +15626,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);
@@ -15531,7 +15690,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];
@@ -15544,8 +15703,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;
@@ -15555,8 +15714,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();
   };
@@ -15582,8 +15741,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 = (0, import_react.useCallback)(
@@ -15599,11 +15758,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);
@@ -15650,6 +15809,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);
       }
     },
@@ -15710,11 +15870,13 @@ function FontPicker({
     emitFontVariants(defaultCurrent);
     emitValue(defaultCurrent);
   }, [defaultCurrent]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !loaderOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (_a = outerClasses()) == null ? void 0 : _a.join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: previewRef, className: (_b = previewClasses()) == null ? void 0 : _b.join(" ") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !loaderOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", __spreadProps(__spreadValues({ className: (_a2 = outerClasses()) == null ? void 0 : _a2.join(" ") }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: loading }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FontPreviews2, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: previewRef, className: (_b2 = previewClasses()) == null ? void 0 : _b2.join(" ") }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
       {
+        id: inputId,
         className: "fontpicker__search",
         ref: inputRef,
         type: "text",
@@ -15725,7 +15887,7 @@ function FontPicker({
         value: searchContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         ref: popoutRef,
@@ -15733,7 +15895,7 @@ function FontPicker({
         className: (_c = popoutClasses()) == null ? void 0 : _c.join(" "),
         onMouseDown: cancelBlur,
         children: [
-          matchingFonts.map((font, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          matchingFonts.map((font, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "div",
             {
               ref: saveOptionsRef(font.sane),
@@ -15742,15 +15904,15 @@ function FontPicker({
               onMouseMove: () => {
                 setSelectedFontIndex(i);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-preview-" + font.sane })
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "font-preview-" + font.sane })
             },
             font.sane + i
           )),
-          matchingFonts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fontpicker__nomatches", children: noMatches })
+          matchingFonts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fontpicker__nomatches", children: noMatches })
         ]
       }
     )
-  ] }) });
+  ] }) })) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {