import { jsx as e, jsxs as l, Fragment as Z } from "react/jsx-runtime";
import { a as F, u as E, p as De, f as Q, q as Ie, c as Fe, b as ve, e as Ee, r as He } from "./use-editor.CLs27I-R.js";
import { u as se, G as we, x as Pe, w as xe, aa as le, q as Ke, ab as je, m as K, n as ke, a8 as Ce, ac as he, p as Ue, ad as me, Y as q, ae as Ve, af as ze, a5 as ee, ag as Je, ah as Se, t as qe, ai as We } from "./use-page-data.BYLN5MSa.js";
import { c as $e, d as Ye } from "./index.BaGzuqMO.js";
import { a as u, c as H } from "./twind.Cg2g8xBZ.js";
import { useState as A, useMemo as O, useCallback as G, useRef as V, useEffect as D, createContext as Ze, useContext as Qe } from "react";
import { p as _e, s as Xe } from "./attributes.C0ljq_Tf.js";
import { f as ea } from "./index.D1n9HtNk.js";
import { f as aa, O as ta, m as _, b as X, P as B, u as na, S as ia, c as oa, n as W, a as $, C as ra, g as sa, d as te, e as ne, h as ie, v as oe, y as pe, i as ge, H as la, D as ca, j as ae, k as fe } from "./field-factory.Dn_89dan.js";
import { F as da, a as ua } from "./index.svJU_5da.js";
import { Type as ha } from "typebox";
import { merge as re, set as Y, get as ma } from "lodash-es";
import { u as Sa } from "./use-datarecord.B3zMFYnX.js";
import { f as Me, t as J, u as ce } from "./use-brick-manifest.CKrAfjO8.js";
import pa from "chroma-js";
import { b as ga, g as fa } from "./color-system.DmbQ-PqB.js";
import { T as ba } from "./ThemePreview.DFB-KRuT.js";
import { p as be } from "./text.C0pIfwOf.js";
import { a as Ae } from "./index.CbebiNuJ.js";
import { o as Be } from "./Editor.Dux-10a7.js";
import { u as ya } from "./sortable.psjpNshi.js";
import { e as Na } from "./tooltip.C45WcX50.js";
function va(a) {
  const [t, o] = A(), s = O(() => a, []), n = G((r) => {
    r instanceof HTMLElement ? o(ea(r, s)) : o(void 0);
  }, [s]), c = G((r) => {
    t && (r ? t.enable() : t.disable());
  }, [t]);
  return [n, c];
}
const wa = H({
  scrollbarColor: "var(--violet-4) var(--violet-2)",
  "&:hover": {
    scrollbarColor: "var(--violet-6) var(--violet-3)"
  }
});
function T({ children: a, tab: t, className: o }) {
  return /* @__PURE__ */ e(aa, { value: t, className: u("h-[calc(100%-32px)]", "@container/tab", wa, o), children: a });
}
const Te = Ze(null), Oe = () => {
  const a = Qe(Te);
  if (!a)
    throw new Error("useNavigation must be used within a FormNavigatorContext");
  return a;
}, ye = ({ items: a }) => {
  const { navigateTo: t } = Oe();
  return /* @__PURE__ */ e("ul", { className: "list-none p-0 m-0", children: a.map((o) => /* @__PURE__ */ l(
    "li",
    {
      className: u(
        `select-none px-2.5 py-3 flex items-center text-[0.85rem]
              justify-between border-b last:border-b-0 border-gray-100
            dark:border-dark-800 transition-colors duration-200 flex-wrap`,
        // if empty, hide
        "[&:not(:has(*))]:!hidden",
        o.children && "cursor-pointer hover:bg-upstart-50 dark:hover:bg-dark-600 font-medium"
      ),
      onClick: () => {
        o.children && t(o);
      },
      children: [
        o.schema ? /* @__PURE__ */ e(Pa, { item: o }) : o.label,
        o.children && /* @__PURE__ */ e(ua, { className: "text-gray-400 dark:text-inherit" })
      ]
    },
    o.id
  )) });
};
function Pa({ item: a }) {
  const { onChange: t, formData: o, formSchema: s, brickId: n } = Oe();
  return /* @__PURE__ */ e(
    ta,
    {
      schema: ha.Object({ [a.id]: a.schema }, a.schema),
      formData: o,
      formSchema: s,
      onChange: t,
      options: {
        brickId: n,
        parents: a.path.split(".").slice(0, -1)
      }
    }
  );
}
const de = ({
  title: a,
  navItems: t,
  className: o,
  onNavigate: s,
  // style,
  onChange: n,
  formData: c,
  formSchema: r,
  initialGroup: i,
  brickId: g
}) => {
  const [d, p] = A([
    {
      content: /* @__PURE__ */ e(ye, { items: t }),
      title: a
    }
  ]), h = V(null), m = V(!1), S = t.some((v) => v.children && v.children.length > 0), [w, C] = A(null), y = G((v, M = "forward") => {
    s?.(v), C(M);
    const P = v.children ? /* @__PURE__ */ e(ye, { items: v.children }) : /* @__PURE__ */ l("div", { children: [
      "content: ",
      v.label
    ] }), k = v.label ?? "Untitled";
    p((I) => [...I, { content: P, title: k }]), setTimeout(() => {
      C(null);
    }, 300);
  }, []), b = G(() => {
    d.length <= 1 || (C("backward"), p((v) => v.slice(0, -1)), s?.(null), setTimeout(() => {
      C(null);
    }, 300));
  }, [d.length]), N = d[d.length - 1], f = () => w ? w === "forward" ? "animate-slide-in" : "animate-slide-back" : "";
  return D(() => {
    if (i && !m.current) {
      m.current = !0;
      const v = t.find((M) => M.id === i);
      v && y(v, null);
    }
  }, []), /* @__PURE__ */ e(
    Te.Provider,
    {
      value: {
        navigateTo: y,
        navigateBack: b,
        onChange: n,
        formData: c,
        brickId: g,
        formSchema: r,
        isRootView: d.length === 1
      },
      children: /* @__PURE__ */ e(
        "div",
        {
          ref: h,
          className: u("navigator-view transition-all relative overflow-x-hidden scrollbar-thin", o),
          style: {
            width: "100%"
            // ...style,
          },
          children: /* @__PURE__ */ l("div", { className: u("absolute inset-0 flex flex-col ", f()), children: [
            S && /* @__PURE__ */ l("div", { className: "flex items-center p-2 border-b border-gray-200 dark:border-dark-600 bg-gray-50 dark:bg-dark-800 sticky top-0 z-10", children: [
              d.length > 1 ? /* @__PURE__ */ l(
                "button",
                {
                  type: "button",
                  className: u(
                    `flex items-center gap-1 p-0 bg-transparent text-upstart-600 dark:text-upstart-300
                  border-0 cursor-pointer font-semibold text-sm hover:opacity-90 focus:outline-none select-none`
                  ),
                  onClick: b,
                  children: [
                    /* @__PURE__ */ e(da, {}),
                    "Back"
                  ]
                }
              ) : /* @__PURE__ */ e("div", { className: "w-10" }),
              /* @__PURE__ */ e(
                "h3",
                {
                  className: u(
                    "flex-1 m-0 text-sm font-semibold text-center select-none first-letter:uppercase"
                  ),
                  children: N.title
                }
              ),
              /* @__PURE__ */ e("div", { className: "w-10" })
            ] }),
            N.content
          ] })
        }
      )
    }
  );
}, xa = () => !0;
function ue(a, t = xa, o = []) {
  const s = a["ui:groups"] ?? {}, n = /* @__PURE__ */ new Map();
  return Object.entries(a.properties).filter(([, r]) => r["ui:field"] !== "hidden").filter(([r, i]) => t(i, r)).map(([r, i]) => {
    const g = [...o, r];
    if (i["ui:group"]) {
      const d = n.get(i["ui:group"]), p = i.type === "object" && !i["ui:field"];
      if (!d) {
        n.set(
          // @ts-ignore
          i["ui:group"],
          p ? [] : [
            {
              id: r,
              // @ts-ignore
              label: i.title,
              path: g.join("."),
              // @ts-ignore
              ...i.metadata && { metadata: i.metadata },
              // @ts-ignore
              ...i.description ? { description: i.description } : {},
              schema: i
            }
          ]
        );
        const h = [];
        if (p)
          for (const [m, S] of Object.entries(i.properties)) {
            const w = [...g, m].join(".");
            h.push({
              id: m,
              // @ts-ignore
              label: S.title,
              path: w,
              // @ts-ignore
              ...S.metadata && { metadata: S.metadata },
              // @ts-ignore
              ...S.description ? { description: S.description } : {},
              schema: S
            });
          }
        return {
          // @ts-ignore
          id: i["ui:group"],
          // @ts-ignore
          label: s[i["ui:group"]] ?? i["ui:group"],
          // @ts-ignore
          ...i.metadata && { metadata: i.metadata },
          // @ts-ignore
          ...i.description ? { description: i.description } : {},
          path: g.join("."),
          // @ts-ignore
          groupId: i["ui:group"],
          children: h
        };
      }
      return d.push({
        id: r,
        // @ts-ignore
        label: i.title,
        path: g.join("."),
        // @ts-ignore
        ...i.metadata && { metadata: i.metadata },
        // @ts-ignore
        ...i.description ? { description: i.description } : {},
        schema: i
      }), null;
    }
    return {
      id: r,
      // @ts-ignore
      label: i.title,
      path: g.join("."),
      // @ts-ignore
      ...i.metadata && { metadata: i.metadata },
      // @ts-ignore
      ...i.description ? { description: i.description } : {},
      schema: i
    };
  }).filter((r) => r !== null).map((r) => {
    if (r.groupId) {
      const i = n.get(r.groupId);
      i?.length && (r.children = i);
    }
    return r;
  }).flat();
}
function Ne({
  attributes: a,
  attributesSchema: t,
  title: o,
  group: s,
  type: n
}) {
  const c = F(), r = E(), i = se(), d = ue(t, (S) => (
    // @ts-ignore
    (typeof S.metadata?.["ui:responsive"] > "u" || // @ts-ignore
    S.metadata?.["ui:responsive"] === !0 || // @ts-ignore
    S.metadata?.["ui:responsive"] === c) && // @ts-ignore
    (typeof S["ui:responsive"] > "u" || // @ts-ignore
    S["ui:responsive"] === !0 || // @ts-ignore
    S["ui:responsive"] === c)
  )), p = O(() => {
    const S = we(t);
    return re({}, S, a ?? {});
  }, [a, t]), h = G(
    (S, w) => {
      if (console.log("attributes -> propertyChanged", w), n === "page")
        if (S[w] === null)
          i.deletePageAttribute(w);
        else {
          const C = {};
          Y(C, w, S[w]), i.updatePageAttributes(C);
        }
      else if (S[w] === null)
        i.deleteSiteAttribute(w);
      else {
        const C = {};
        Y(C, w, S[w]), i.updateSiteAttributes(C);
      }
    },
    [a]
  );
  return /* @__PURE__ */ e(
    de,
    {
      onNavigate: (S) => {
        S || r.setAttributesGroup(void 0);
      },
      brickId: "none",
      title: o,
      initialGroup: s,
      navItems: d,
      formSchema: t,
      className: "h-full",
      formData: p,
      onChange: h
    },
    `${n}-attributes-form-${s || "all"}`
  );
}
function x({ children: a, className: t }) {
  return /* @__PURE__ */ e(
    "h3",
    {
      className: u(
        `text-[0.9rem] font-medium bg-gradient-to-tr
         from-upstart-100 to-upstart-50 flex items-center justify-between
         dark:from-dark-800 dark:to-dark-700
         px-2 py-1.5 sticky top-0 z-[999] border-b border-upstart-200 dark:border-dark-500 select-none`,
        t
      ),
      children: a
    }
  );
}
function ka() {
  const a = De(), t = a === "page" ? _e : Xe, o = E(), s = Pe(), n = xe(), c = Q(), r = Ie(), i = O(() => ({
    ...t,
    properties: Object.fromEntries(
      Object.entries(t.properties).filter(([d, p]) => !p["ui:hidden"])
    )
  }), [t]);
  return /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ e(x, { children: "Settings" }),
    /* @__PURE__ */ l(
      _,
      {
        value: a,
        onValueChange: (g) => o.setAttributesTab(g),
        className: "flex-grow flex flex-col h-dvh",
        children: [
          /* @__PURE__ */ l(X, { size: "1", className: "sticky top-0 z-50 bg-gray-100", children: [
            /* @__PURE__ */ e(B, { value: "site", className: u("!flex-1"), children: "Site" }),
            /* @__PURE__ */ e(B, { value: "page", className: u("!flex-1"), children: "Page" }),
            c && /* @__PURE__ */ e(B, { value: "debug", className: u("!flex-1"), children: "Debug" })
          ] }),
          /* @__PURE__ */ e(T, { tab: "page", children: /* @__PURE__ */ e(
            Ne,
            {
              type: "page",
              attributes: s,
              attributesSchema: i,
              title: "Page settings",
              group: r
            }
          ) }),
          /* @__PURE__ */ e(T, { tab: "site", children: /* @__PURE__ */ e(
            Ne,
            {
              type: "site",
              attributes: n,
              attributesSchema: i,
              title: "Site settings",
              group: r
            }
          ) }),
          /* @__PURE__ */ e(T, { tab: "debug", children: /* @__PURE__ */ e(Ca, {}) })
        ]
      }
    )
  ] });
}
function Ca() {
  const a = u(
    H({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  ), t = xe(), o = Pe(), s = na(), n = Sa();
  return /* @__PURE__ */ l("div", { className: "flex flex-col h-[calc(100dvh-70px)] overflow-y-auto scrollbar-thin", children: [
    /* @__PURE__ */ e(x, { children: "Page Attributes" }),
    /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(o, null, 2) }) }) }),
    /* @__PURE__ */ e(x, { children: "Site Attributes" }),
    /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(t, null, 2) }) }) }),
    /* @__PURE__ */ l(x, { children: [
      "Datasources (",
      s.length,
      ")"
    ] }),
    /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(s, null, 2) }) }) }),
    /* @__PURE__ */ l(x, { children: [
      "Datarecords (",
      n.length,
      ")"
    ] }),
    /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(n, null, 2) }) }) })
  ] });
}
const Ma = /* @__PURE__ */ JSON.parse('["42dot Sans","ABeeZee","ADLaM Display","AR One Sans","Abel","Abhaya Libre","Aboreto","Abril Fatface","Abyssinica SIL","Aclonica","Acme","Actor","Adamina","Advent Pro","Afacad","Afacad Flux","Agbalumo","Agdasima","Agu Display","Aguafina Script","Akatab","Akaya Kanadaka","Akaya Telivigala","Akronim","Akshar","Aladin","Alata","Alatsi","Albert Sans","Aldrich","Alef","Alegreya","Alegreya SC","Alegreya Sans","Alegreya Sans SC","Aleo","Alex Brush","Alexandria","Alfa Slab One","Alice","Alike","Alike Angular","Alkalami","Alkatra","Allan","Allerta","Allerta Stencil","Allison","Allura","Almarai","Almendra","Almendra Display","Almendra SC","Alumni Sans","Alumni Sans Collegiate One","Alumni Sans Inline One","Alumni Sans Pinstripe","Amarante","Amaranth","Amatic SC","Amethysta","Amiko","Amiri","Amiri Quran","Amita","Anaheim","Andada Pro","Andika","Anek Bangla","Anek Devanagari","Anek Gujarati","Anek Gurmukhi","Anek Kannada","Anek Latin","Anek Malayalam","Anek Odia","Anek Tamil","Anek Telugu","Angkor","Annapurna SIL","Annie Use Your Telescope","Anonymous Pro","Anta","Antic","Antic Didone","Antic Slab","Anton","Anton SC","Antonio","Anuphan","Anybody","Aoboshi One","Arapey","Arbutus","Arbutus Slab","Architects Daughter","Archivo","Archivo Black","Archivo Narrow","Are You Serious","Aref Ruqaa","Aref Ruqaa Ink","Arima","Arimo","Arizonia","Armata","Arsenal","Arsenal SC","Artifika","Arvo","Arya","Asap","Asap Condensed","Asar","Asset","Assistant","Astloch","Asul","Athiti","Atkinson Hyperlegible","Atma","Atomic Age","Aubrey","Audiowide","Autour One","Average","Average Sans","Averia Gruesa Libre","Averia Libre","Averia Sans Libre","Averia Serif Libre","Azeret Mono","B612","B612 Mono","BIZ UDGothic","BIZ UDMincho","BIZ UDPGothic","BIZ UDPMincho","Babylonica","Bacasime Antique","Bad Script","Badeen Display","Bagel Fat One","Bahiana","Bahianita","Bai Jamjuree","Bakbak One","Ballet","Baloo 2","Baloo Bhai 2","Baloo Bhaijaan 2","Baloo Bhaina 2","Baloo Chettan 2","Baloo Da 2","Baloo Paaji 2","Baloo Tamma 2","Baloo Tammudu 2","Baloo Thambi 2","Balsamiq Sans","Balthazar","Bangers","Barlow","Barlow Condensed","Barlow Semi Condensed","Barriecito","Barrio","Basic","Baskervville","Baskervville SC","Battambang","Baumans","Bayon","Be Vietnam Pro","Beau Rivage","Bebas Neue","Beiruti","Belanosima","Belgrano","Bellefair","Belleza","Bellota","Bellota Text","BenchNine","Benne","Bentham","Berkshire Swash","Besley","Beth Ellen","Bevan","BhuTuka Expanded One","Big Shoulders Display","Big Shoulders Inline Display","Big Shoulders Inline Text","Big Shoulders Stencil Display","Big Shoulders Stencil Text","Big Shoulders Text","Bigelow Rules","Bigshot One","Bilbo","Bilbo Swash Caps","BioRhyme","BioRhyme Expanded","Birthstone","Birthstone Bounce","Biryani","Bitter","Black And White Picture","Black Han Sans","Black Ops One","Blaka","Blaka Hollow","Blaka Ink","Blinker","Bodoni Moda","Bodoni Moda SC","Bokor","Bona Nova","Bona Nova SC","Bonbon","Bonheur Royale","Boogaloo","Borel","Bowlby One","Bowlby One SC","Braah One","Brawler","Bree Serif","Bricolage Grotesque","Bruno Ace","Bruno Ace SC","Brygada 1918","Bubblegum Sans","Bubbler One","Buda","Buenard","Bungee","Bungee Hairline","Bungee Inline","Bungee Outline","Bungee Shade","Bungee Spice","Bungee Tint","Butcherman","Butterfly Kids","Cabin","Cabin Condensed","Cabin Sketch","Cactus Classical Serif","Caesar Dressing","Cagliostro","Cairo","Cairo Play","Caladea","Calistoga","Calligraffitti","Cambay","Cambo","Candal","Cantarell","Cantata One","Cantora One","Caprasimo","Capriola","Caramel","Carattere","Cardo","Carlito","Carme","Carrois Gothic","Carrois Gothic SC","Carter One","Castoro","Castoro Titling","Catamaran","Caudex","Caveat","Caveat Brush","Cedarville Cursive","Ceviche One","Chakra Petch","Changa","Changa One","Chango","Charis SIL","Charm","Charmonman","Chathura","Chau Philomene One","Chela One","Chelsea Market","Chenla","Cherish","Cherry Bomb One","Cherry Cream Soda","Cherry Swash","Chewy","Chicle","Chilanka","Chivo","Chivo Mono","Chocolate Classical Sans","Chokokutai","Chonburi","Cinzel","Cinzel Decorative","Clicker Script","Climate Crisis","Coda","Codystar","Coiny","Combo","Comfortaa","Comforter","Comforter Brush","Comic Neue","Coming Soon","Comme","Commissioner","Concert One","Condiment","Content","Contrail One","Convergence","Cookie","Copse","Corben","Corinthia","Cormorant","Cormorant Garamond","Cormorant Infant","Cormorant SC","Cormorant Unicase","Cormorant Upright","Courgette","Courier Prime","Cousine","Coustard","Covered By Your Grace","Crafty Girls","Creepster","Crete Round","Crimson Pro","Crimson Text","Croissant One","Crushed","Cuprum","Cute Font","Cutive","Cutive Mono","DM Mono","DM Sans","DM Serif Display","DM Serif Text","Dai Banna SIL","Damion","Dancing Script","Danfo","Dangrek","Darker Grotesque","Darumadrop One","David Libre","Dawning of a New Day","Days One","Dekko","Dela Gothic One","Delicious Handrawn","Delius","Delius Swash Caps","Delius Unicase","Della Respira","Denk One","Devonshire","Dhurjati","Didact Gothic","Diphylleia","Diplomata","Diplomata SC","Do Hyeon","Dokdo","Domine","Donegal One","Dongle","Doppio One","Dorsa","Dosis","DotGothic16","Doto","Dr Sugiyama","Duru Sans","DynaPuff","Dynalight","EB Garamond","Eagle Lake","East Sea Dokdo","Eater","Economica","Eczar","Edu AU VIC WA NT Arrows","Edu AU VIC WA NT Dots","Edu AU VIC WA NT Guides","Edu AU VIC WA NT Hand","Edu AU VIC WA NT Pre","Edu NSW ACT Foundation","Edu QLD Beginner","Edu SA Beginner","Edu TAS Beginner","Edu VIC WA NT Beginner","El Messiri","Electrolize","Elsie","Elsie Swash Caps","Emblema One","Emilys Candy","Encode Sans","Encode Sans Condensed","Encode Sans Expanded","Encode Sans SC","Encode Sans Semi Condensed","Encode Sans Semi Expanded","Engagement","Englebert","Enriqueta","Ephesis","Epilogue","Erica One","Esteban","Estonia","Euphoria Script","Ewert","Exo","Exo 2","Expletus Sans","Explora","Faculty Glyphic","Fahkwang","Familjen Grotesk","Fanwood Text","Farro","Farsan","Fascinate","Fascinate Inline","Faster One","Fasthand","Fauna One","Faustina","Federant","Federo","Felipa","Fenix","Festive","Figtree","Finger Paint","Finlandica","Fira Code","Fira Mono","Fira Sans","Fira Sans Condensed","Fira Sans Extra Condensed","Fjalla One","Fjord One","Flamenco","Flavors","Fleur De Leah","Flow Block","Flow Circular","Flow Rounded","Foldit","Fondamento","Fontdiner Swanky","Forum","Fragment Mono","Francois One","Frank Ruhl Libre","Fraunces","Freckle Face","Fredericka the Great","Fredoka","Freehand","Freeman","Fresca","Frijole","Fruktur","Fugaz One","Fuggles","Funnel Display","Funnel Sans","Fustat","Fuzzy Bubbles","GFS Didot","GFS Neohellenic","Ga Maamli","Gabarito","Gabriela","Gaegu","Gafata","Gajraj One","Galada","Galdeano","Galindo","Gamja Flower","Gantari","Gasoek One","Gayathri","Geist","Geist Mono","Gelasio","Gemunu Libre","Genos","Gentium Book Plus","Gentium Plus","Geo","Geologica","Georama","Geostar","Geostar Fill","Germania One","Gideon Roman","Gidugu","Gilda Display","Girassol","Give You Glory","Glass Antiqua","Glegoo","Gloock","Gloria Hallelujah","Glory","Gluten","Goblin One","Gochi Hand","Goldman","Golos Text","Gorditas","Gothic A1","Gotu","Goudy Bookletter 1911","Gowun Batang","Gowun Dodum","Graduate","Grand Hotel","Grandiflora One","Grandstander","Grape Nuts","Gravitas One","Great Vibes","Grechen Fuemen","Grenze","Grenze Gotisch","Grey Qo","Griffy","Gruppo","Gudea","Gugi","Gulzar","Gupter","Gurajada","Gwendolyn","Habibi","Hachi Maru Pop","Hahmlet","Halant","Hammersmith One","Hanalei","Hanalei Fill","Handjet","Handlee","Hanken Grotesk","Hanuman","Happy Monkey","Harmattan","Headland One","Hedvig Letters Sans","Hedvig Letters Serif","Heebo","Henny Penny","Hepta Slab","Herr Von Muellerhoff","Hi Melody","Hina Mincho","Hind","Hind Guntur","Hind Madurai","Hind Mysuru","Hind Siliguri","Hind Vadodara","Holtwood One SC","Homemade Apple","Homenaje","Honk","Host Grotesk","Hubballi","Hubot Sans","Hurricane","IBM Plex Mono","IBM Plex Sans","IBM Plex Sans Arabic","IBM Plex Sans Condensed","IBM Plex Sans Devanagari","IBM Plex Sans Hebrew","IBM Plex Sans JP","IBM Plex Sans KR","IBM Plex Sans Thai","IBM Plex Sans Thai Looped","IBM Plex Serif","IM Fell DW Pica","IM Fell DW Pica SC","IM Fell Double Pica","IM Fell Double Pica SC","IM Fell English","IM Fell English SC","IM Fell French Canon","IM Fell French Canon SC","IM Fell Great Primer","IM Fell Great Primer SC","Ibarra Real Nova","Iceberg","Iceland","Imbue","Imperial Script","Imprima","Inclusive Sans","Inconsolata","Inder","Indie Flower","Ingrid Darling","Inika","Inknut Antiqua","Inria Sans","Inria Serif","Inspiration","Instrument Sans","Instrument Serif","Inter","Inter Tight","Irish Grover","Island Moments","Istok Web","Italiana","Italianno","Itim","Jacquard 12","Jacquard 12 Charted","Jacquard 24","Jacquard 24 Charted","Jacquarda Bastarda 9","Jacquarda Bastarda 9 Charted","Jacques Francois","Jacques Francois Shadow","Jaini","Jaini Purva","Jaldi","Jaro","Jersey 10","Jersey 10 Charted","Jersey 15","Jersey 15 Charted","Jersey 20","Jersey 20 Charted","Jersey 25","Jersey 25 Charted","JetBrains Mono","Jim Nightshade","Joan","Jockey One","Jolly Lodger","Jomhuria","Jomolhari","Josefin Sans","Josefin Slab","Jost","Joti One","Jua","Judson","Julee","Julius Sans One","Junge","Jura","Just Another Hand","Just Me Again Down Here","K2D","Kablammo","Kadwa","Kaisei Decol","Kaisei HarunoUmi","Kaisei Opti","Kaisei Tokumin","Kalam","Kalnia","Kalnia Glaze","Kameron","Kanit","Kantumruy Pro","Karantina","Karla","Karla Tamil Inclined","Karla Tamil Upright","Karma","Katibeh","Kaushan Script","Kavivanar","Kavoon","Kay Pho Du","Kdam Thmor Pro","Keania One","Kelly Slab","Kenia","Khand","Khmer","Khula","Kings","Kirang Haerang","Kite One","Kiwi Maru","Klee One","Knewave","KoHo","Kodchasan","Kode Mono","Koh Santepheap","Kolker Brush","Konkhmer Sleokchher","Kosugi","Kosugi Maru","Kotta One","Koulen","Kranky","Kreon","Kristi","Krona One","Krub","Kufam","Kulim Park","Kumar One","Kumar One Outline","Kumbh Sans","Kurale","LXGW WenKai Mono TC","LXGW WenKai TC","La Belle Aurore","Labrada","Lacquer","Laila","Lakki Reddy","Lalezar","Lancelot","Langar","Lateef","Lato","Lavishly Yours","League Gothic","League Script","League Spartan","Leckerli One","Ledger","Lekton","Lemon","Lemonada","Lexend","Lexend Deca","Lexend Exa","Lexend Giga","Lexend Mega","Lexend Peta","Lexend Tera","Lexend Zetta","Libre Barcode 128","Libre Barcode 128 Text","Libre Barcode 39","Libre Barcode 39 Extended","Libre Barcode 39 Extended Text","Libre Barcode 39 Text","Libre Barcode EAN13 Text","Libre Baskerville","Libre Bodoni","Libre Caslon Display","Libre Caslon Text","Libre Franklin","Licorice","Life Savers","Lilita One","Lily Script One","Limelight","Linden Hill","Linefont","Lisu Bosa","Liter","Literata","Liu Jian Mao Cao","Livvic","Lobster","Lobster Two","Londrina Outline","Londrina Shadow","Londrina Sketch","Londrina Solid","Long Cang","Lora","Love Light","Love Ya Like A Sister","Loved by the King","Lovers Quarrel","Luckiest Guy","Lugrasimo","Lumanosimo","Lunasima","Lusitana","Lustria","Luxurious Roman","Luxurious Script","M PLUS 1","M PLUS 1 Code","M PLUS 1p","M PLUS 2","M PLUS Code Latin","M PLUS Rounded 1c","Ma Shan Zheng","Macondo","Macondo Swash Caps","Mada","Madimi One","Magra","Maiden Orange","Maitree","Major Mono Display","Mako","Mali","Mallanna","Maname","Mandali","Manjari","Manrope","Mansalva","Manuale","Marcellus","Marcellus SC","Marck Script","Margarine","Marhey","Markazi Text","Marko One","Marmelad","Martel","Martel Sans","Martian Mono","Marvel","Mate","Mate SC","Matemasie","Material Icons","Material Icons Outlined","Material Icons Round","Material Icons Sharp","Material Icons Two Tone","Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Maven Pro","McLaren","Mea Culpa","Meddon","MedievalSharp","Medula One","Meera Inimai","Megrim","Meie Script","Meow Script","Merienda","Merriweather","Merriweather Sans","Metal","Metal Mania","Metamorphous","Metrophobic","Michroma","Micro 5","Micro 5 Charted","Milonga","Miltonian","Miltonian Tattoo","Mina","Mingzat","Miniver","Miriam Libre","Mirza","Miss Fajardose","Mitr","Mochiy Pop One","Mochiy Pop P One","Modak","Modern Antiqua","Moderustic","Mogra","Mohave","Moirai One","Molengo","Molle","Mona Sans","Monda","Monofett","Monomaniac One","Monoton","Monsieur La Doulaise","Montaga","Montagu Slab","MonteCarlo","Montez","Montserrat","Montserrat Alternates","Montserrat Subrayada","Montserrat Underline","Moo Lah Lah","Mooli","Moon Dance","Moul","Moulpali","Mountains of Christmas","Mouse Memoirs","Mr Bedfort","Mr Dafoe","Mr De Haviland","Mrs Saint Delafield","Mrs Sheppards","Ms Madi","Mukta","Mukta Mahee","Mukta Malar","Mukta Vaani","Mulish","Murecho","MuseoModerno","My Soul","Mynerve","Mystery Quest","NTR","Nabla","Namdhinggo","Nanum Brush Script","Nanum Gothic","Nanum Gothic Coding","Nanum Myeongjo","Nanum Pen Script","Narnoor","Neonderthaw","Nerko One","Neucha","Neuton","New Amsterdam","New Rocker","New Tegomin","News Cycle","Newsreader","Niconne","Niramit","Nixie One","Nobile","Nokora","Norican","Nosifer","Notable","Nothing You Could Do","Noticia Text","Noto Color Emoji","Noto Emoji","Noto Kufi Arabic","Noto Music","Noto Naskh Arabic","Noto Nastaliq Urdu","Noto Rashi Hebrew","Noto Sans","Noto Sans Adlam","Noto Sans Adlam Unjoined","Noto Sans Anatolian Hieroglyphs","Noto Sans Arabic","Noto Sans Armenian","Noto Sans Avestan","Noto Sans Balinese","Noto Sans Bamum","Noto Sans Bassa Vah","Noto Sans Batak","Noto Sans Bengali","Noto Sans Bhaiksuki","Noto Sans Brahmi","Noto Sans Buginese","Noto Sans Buhid","Noto Sans Canadian Aboriginal","Noto Sans Carian","Noto Sans Caucasian Albanian","Noto Sans Chakma","Noto Sans Cham","Noto Sans Cherokee","Noto Sans Chorasmian","Noto Sans Coptic","Noto Sans Cuneiform","Noto Sans Cypriot","Noto Sans Cypro Minoan","Noto Sans Deseret","Noto Sans Devanagari","Noto Sans Display","Noto Sans Duployan","Noto Sans Egyptian Hieroglyphs","Noto Sans Elbasan","Noto Sans Elymaic","Noto Sans Ethiopic","Noto Sans Georgian","Noto Sans Glagolitic","Noto Sans Gothic","Noto Sans Grantha","Noto Sans Gujarati","Noto Sans Gunjala Gondi","Noto Sans Gurmukhi","Noto Sans HK","Noto Sans Hanifi Rohingya","Noto Sans Hanunoo","Noto Sans Hatran","Noto Sans Hebrew","Noto Sans Imperial Aramaic","Noto Sans Indic Siyaq Numbers","Noto Sans Inscriptional Pahlavi","Noto Sans Inscriptional Parthian","Noto Sans JP","Noto Sans Javanese","Noto Sans KR","Noto Sans Kaithi","Noto Sans Kannada","Noto Sans Kawi","Noto Sans Kayah Li","Noto Sans Kharoshthi","Noto Sans Khmer","Noto Sans Khojki","Noto Sans Khudawadi","Noto Sans Lao","Noto Sans Lao Looped","Noto Sans Lepcha","Noto Sans Limbu","Noto Sans Linear A","Noto Sans Linear B","Noto Sans Lisu","Noto Sans Lycian","Noto Sans Lydian","Noto Sans Mahajani","Noto Sans Malayalam","Noto Sans Mandaic","Noto Sans Manichaean","Noto Sans Marchen","Noto Sans Masaram Gondi","Noto Sans Math","Noto Sans Mayan Numerals","Noto Sans Medefaidrin","Noto Sans Meetei Mayek","Noto Sans Mende Kikakui","Noto Sans Meroitic","Noto Sans Miao","Noto Sans Modi","Noto Sans Mongolian","Noto Sans Mono","Noto Sans Mro","Noto Sans Multani","Noto Sans Myanmar","Noto Sans NKo","Noto Sans NKo Unjoined","Noto Sans Nabataean","Noto Sans Nag Mundari","Noto Sans Nandinagari","Noto Sans New Tai Lue","Noto Sans Newa","Noto Sans Nushu","Noto Sans Ogham","Noto Sans Ol Chiki","Noto Sans Old Hungarian","Noto Sans Old Italic","Noto Sans Old North Arabian","Noto Sans Old Permic","Noto Sans Old Persian","Noto Sans Old Sogdian","Noto Sans Old South Arabian","Noto Sans Old Turkic","Noto Sans Oriya","Noto Sans Osage","Noto Sans Osmanya","Noto Sans Pahawh Hmong","Noto Sans Palmyrene","Noto Sans Pau Cin Hau","Noto Sans PhagsPa","Noto Sans Phoenician","Noto Sans Psalter Pahlavi","Noto Sans Rejang","Noto Sans Runic","Noto Sans SC","Noto Sans Samaritan","Noto Sans Saurashtra","Noto Sans Sharada","Noto Sans Shavian","Noto Sans Siddham","Noto Sans SignWriting","Noto Sans Sinhala","Noto Sans Sogdian","Noto Sans Sora Sompeng","Noto Sans Soyombo","Noto Sans Sundanese","Noto Sans Syloti Nagri","Noto Sans Symbols","Noto Sans Symbols 2","Noto Sans Syriac","Noto Sans Syriac Eastern","Noto Sans TC","Noto Sans Tagalog","Noto Sans Tagbanwa","Noto Sans Tai Le","Noto Sans Tai Tham","Noto Sans Tai Viet","Noto Sans Takri","Noto Sans Tamil","Noto Sans Tamil Supplement","Noto Sans Tangsa","Noto Sans Telugu","Noto Sans Thaana","Noto Sans Thai","Noto Sans Thai Looped","Noto Sans Tifinagh","Noto Sans Tirhuta","Noto Sans Ugaritic","Noto Sans Vai","Noto Sans Vithkuqi","Noto Sans Wancho","Noto Sans Warang Citi","Noto Sans Yi","Noto Sans Zanabazar Square","Noto Serif","Noto Serif Ahom","Noto Serif Armenian","Noto Serif Balinese","Noto Serif Bengali","Noto Serif Devanagari","Noto Serif Display","Noto Serif Dogra","Noto Serif Ethiopic","Noto Serif Georgian","Noto Serif Grantha","Noto Serif Gujarati","Noto Serif Gurmukhi","Noto Serif HK","Noto Serif Hebrew","Noto Serif Hentaigana","Noto Serif JP","Noto Serif KR","Noto Serif Kannada","Noto Serif Khitan Small Script","Noto Serif Khmer","Noto Serif Khojki","Noto Serif Lao","Noto Serif Makasar","Noto Serif Malayalam","Noto Serif Myanmar","Noto Serif NP Hmong","Noto Serif Old Uyghur","Noto Serif Oriya","Noto Serif Ottoman Siyaq","Noto Serif SC","Noto Serif Sinhala","Noto Serif TC","Noto Serif Tamil","Noto Serif Tangut","Noto Serif Telugu","Noto Serif Thai","Noto Serif Tibetan","Noto Serif Todhri","Noto Serif Toto","Noto Serif Vithkuqi","Noto Serif Yezidi","Noto Traditional Nushu","Noto Znamenny Musical Notation","Nova Cut","Nova Flat","Nova Mono","Nova Oval","Nova Round","Nova Script","Nova Slim","Nova Square","Numans","Nunito","Nunito Sans","Nuosu SIL","Odibee Sans","Odor Mean Chey","Offside","Oi","Ojuju","Old Standard TT","Oldenburg","Ole","Oleo Script","Oleo Script Swash Caps","Onest","Oooh Baby","Open Sans","Oranienbaum","Orbit","Orbitron","Oregano","Orelega One","Orienta","Original Surfer","Oswald","Outfit","Over the Rainbow","Overlock","Overlock SC","Overpass","Overpass Mono","Ovo","Oxanium","Oxygen","Oxygen Mono","PT Mono","PT Sans","PT Sans Caption","PT Sans Narrow","PT Serif","PT Serif Caption","Pacifico","Padauk","Padyakke Expanded One","Palanquin","Palanquin Dark","Palette Mosaic","Pangolin","Paprika","Parisienne","Parkinsans","Passero One","Passion One","Passions Conflict","Pathway Extreme","Pathway Gothic One","Patrick Hand","Patrick Hand SC","Pattaya","Patua One","Pavanam","Paytone One","Peddana","Peralta","Permanent Marker","Petemoss","Petit Formal Script","Petrona","Phetsarath","Philosopher","Phudu","Piazzolla","Piedra","Pinyon Script","Pirata One","Pixelify Sans","Plaster","Platypi","Play","Playball","Playfair","Playfair Display","Playfair Display SC","Playpen Sans","Playwrite AR","Playwrite AR Guides","Playwrite AT","Playwrite AT Guides","Playwrite AU NSW","Playwrite AU NSW Guides","Playwrite AU QLD","Playwrite AU QLD Guides","Playwrite AU SA","Playwrite AU SA Guides","Playwrite AU TAS","Playwrite AU TAS Guides","Playwrite AU VIC","Playwrite AU VIC Guides","Playwrite BE VLG","Playwrite BE VLG Guides","Playwrite BE WAL","Playwrite BE WAL Guides","Playwrite BR","Playwrite BR Guides","Playwrite CA","Playwrite CA Guides","Playwrite CL","Playwrite CL Guides","Playwrite CO","Playwrite CO Guides","Playwrite CU","Playwrite CU Guides","Playwrite CZ","Playwrite CZ Guides","Playwrite DE Grund","Playwrite DE Grund Guides","Playwrite DE LA","Playwrite DE LA Guides","Playwrite DE SAS","Playwrite DE SAS Guides","Playwrite DE VA","Playwrite DE VA Guides","Playwrite DK Loopet","Playwrite DK Loopet Guides","Playwrite DK Uloopet","Playwrite DK Uloopet Guides","Playwrite ES","Playwrite ES Deco","Playwrite ES Deco Guides","Playwrite ES Guides","Playwrite FR Moderne","Playwrite FR Moderne Guides","Playwrite FR Trad","Playwrite FR Trad Guides","Playwrite GB J","Playwrite GB J Guides","Playwrite GB S","Playwrite GB S Guides","Playwrite HR","Playwrite HR Guides","Playwrite HR Lijeva","Playwrite HR Lijeva Guides","Playwrite HU","Playwrite HU Guides","Playwrite ID","Playwrite ID Guides","Playwrite IE","Playwrite IE Guides","Playwrite IN","Playwrite IN Guides","Playwrite IS","Playwrite IS Guides","Playwrite IT Moderna","Playwrite IT Moderna Guides","Playwrite IT Trad","Playwrite IT Trad Guides","Playwrite MX","Playwrite MX Guides","Playwrite NG Modern","Playwrite NG Modern Guides","Playwrite NL","Playwrite NL Guides","Playwrite NO","Playwrite NO Guides","Playwrite NZ","Playwrite NZ Guides","Playwrite PE","Playwrite PE Guides","Playwrite PL","Playwrite PL Guides","Playwrite PT","Playwrite PT Guides","Playwrite RO","Playwrite RO Guides","Playwrite SK","Playwrite SK Guides","Playwrite TZ","Playwrite TZ Guides","Playwrite US Modern","Playwrite US Modern Guides","Playwrite US Trad","Playwrite US Trad Guides","Playwrite VN","Playwrite VN Guides","Playwrite ZA","Playwrite ZA Guides","Plus Jakarta Sans","Pochaevsk","Podkova","Poetsen One","Poiret One","Poller One","Poltawski Nowy","Poly","Pompiere","Ponnala","Pontano Sans","Poor Story","Poppins","Port Lligat Sans","Port Lligat Slab","Potta One","Pragati Narrow","Praise","Prata","Preahvihear","Press Start 2P","Pridi","Princess Sofia","Prociono","Prompt","Prosto One","Protest Guerrilla","Protest Revolution","Protest Riot","Protest Strike","Proza Libre","Public Sans","Puppies Play","Puritan","Purple Purse","Qahiri","Quando","Quantico","Quattrocento","Quattrocento Sans","Questrial","Quicksand","Quintessential","Qwigley","Qwitcher Grypen","REM","Racing Sans One","Radio Canada","Radio Canada Big","Radley","Rajdhani","Rakkas","Raleway","Raleway Dots","Ramabhadra","Ramaraja","Rambla","Rammetto One","Rampart One","Ranchers","Rancho","Ranga","Rasa","Rationale","Ravi Prakash","Readex Pro","Recursive","Red Hat Display","Red Hat Mono","Red Hat Text","Red Rose","Redacted","Redacted Script","Reddit Mono","Reddit Sans","Reddit Sans Condensed","Redressed","Reem Kufi","Reem Kufi Fun","Reem Kufi Ink","Reenie Beanie","Reggae One","Rethink Sans","Revalia","Rhodium Libre","Ribeye","Ribeye Marrow","Righteous","Risque","Road Rage","Roboto","Roboto Condensed","Roboto Flex","Roboto Mono","Roboto Serif","Roboto Slab","Rochester","Rock 3D","Rock Salt","RocknRoll One","Rokkitt","Romanesco","Ropa Sans","Rosario","Rosarivo","Rouge Script","Rowdies","Rozha One","Rubik","Rubik 80s Fade","Rubik Beastly","Rubik Broken Fax","Rubik Bubbles","Rubik Burned","Rubik Dirt","Rubik Distressed","Rubik Doodle Shadow","Rubik Doodle Triangles","Rubik Gemstones","Rubik Glitch","Rubik Glitch Pop","Rubik Iso","Rubik Lines","Rubik Maps","Rubik Marker Hatch","Rubik Maze","Rubik Microbe","Rubik Mono One","Rubik Moonrocks","Rubik Pixels","Rubik Puddles","Rubik Scribble","Rubik Spray Paint","Rubik Storm","Rubik Vinyl","Rubik Wet Paint","Ruda","Rufina","Ruge Boogie","Ruluko","Rum Raisin","Ruslan Display","Russo One","Ruthie","Ruwudu","Rye","STIX Two Text","SUSE","Sacramento","Sahitya","Sail","Saira","Saira Condensed","Saira Extra Condensed","Saira Semi Condensed","Saira Stencil One","Salsa","Sanchez","Sancreek","Sankofa Display","Sansita","Sansita Swashed","Sarabun","Sarala","Sarina","Sarpanch","Sassy Frass","Satisfy","Sawarabi Gothic","Sawarabi Mincho","Scada","Scheherazade New","Schibsted Grotesk","Schoolbell","Scope One","Seaweed Script","Secular One","Sedan","Sedan SC","Sedgwick Ave","Sedgwick Ave Display","Sen","Send Flowers","Sevillana","Seymour One","Shadows Into Light","Shadows Into Light Two","Shalimar","Shantell Sans","Shanti","Share","Share Tech","Share Tech Mono","Shippori Antique","Shippori Antique B1","Shippori Mincho","Shippori Mincho B1","Shizuru","Shojumaru","Short Stack","Shrikhand","Siemreap","Sigmar","Sigmar One","Signika","Signika Negative","Silkscreen","Simonetta","Single Day","Sintony","Sirin Stencil","Six Caps","Sixtyfour","Sixtyfour Convergence","Skranji","Slabo 13px","Slabo 27px","Slackey","Slackside One","Smokum","Smooch","Smooch Sans","Smythe","Sniglet","Snippet","Snowburst One","Sofadi One","Sofia","Sofia Sans","Sofia Sans Condensed","Sofia Sans Extra Condensed","Sofia Sans Semi Condensed","Solitreo","Solway","Sometype Mono","Song Myung","Sono","Sonsie One","Sora","Sorts Mill Goudy","Sour Gummy","Source Code Pro","Source Sans 3","Source Serif 4","Space Grotesk","Space Mono","Special Elite","Spectral","Spectral SC","Spicy Rice","Spinnaker","Spirax","Splash","Spline Sans","Spline Sans Mono","Squada One","Square Peg","Sree Krushnadevaraya","Sriracha","Srisakdi","Staatliches","Stalemate","Stalinist One","Stardos Stencil","Stick","Stick No Bills","Stint Ultra Condensed","Stint Ultra Expanded","Stoke","Strait","Style Script","Stylish","Sue Ellen Francisco","Suez One","Sulphur Point","Sumana","Sunflower","Sunshiney","Supermercado One","Sura","Suranna","Suravaram","Suwannaphum","Swanky and Moo Moo","Syncopate","Syne","Syne Mono","Syne Tactile","Tac One","Tai Heritage Pro","Tajawal","Tangerine","Tapestry","Taprom","Tauri","Taviraj","Teachers","Teko","Tektur","Telex","Tenali Ramakrishna","Tenor Sans","Text Me One","Texturina","Thasadith","The Girl Next Door","The Nautigal","Tienne","Tillana","Tilt Neon","Tilt Prism","Tilt Warp","Timmana","Tinos","Tiny5","Tiro Bangla","Tiro Devanagari Hindi","Tiro Devanagari Marathi","Tiro Devanagari Sanskrit","Tiro Gurmukhi","Tiro Kannada","Tiro Tamil","Tiro Telugu","Titan One","Titillium Web","Tomorrow","Tourney","Trade Winds","Train One","Triodion","Trirong","Trispace","Trocchi","Trochut","Truculenta","Trykker","Tsukimi Rounded","Tulpen One","Turret Road","Twinkle Star","Ubuntu","Ubuntu Condensed","Ubuntu Mono","Ubuntu Sans","Ubuntu Sans Mono","Uchen","Ultra","Unbounded","Uncial Antiqua","Underdog","Unica One","UnifrakturCook","UnifrakturMaguntia","Unkempt","Unlock","Unna","Updock","Urbanist","VT323","Vampiro One","Varela","Varela Round","Varta","Vast Shadow","Vazirmatn","Vesper Libre","Viaoda Libre","Vibes","Vibur","Victor Mono","Vidaloka","Viga","Vina Sans","Voces","Volkhov","Vollkorn","Vollkorn SC","Voltaire","Vujahday Script","Waiting for the Sunrise","Wallpoet","Walter Turncoat","Warnes","Water Brush","Waterfall","Wavefont","Wellfleet","Wendy One","Whisper","WindSong","Wire One","Wittgenstein","Wix Madefor Display","Wix Madefor Text","Work Sans","Workbench","Xanh Mono","Yaldevi","Yanone Kaffeesatz","Yantramanav","Yarndings 12","Yarndings 12 Charted","Yarndings 20","Yarndings 20 Charted","Yatra One","Yellowtail","Yeon Sung","Yeseva One","Yesteryear","Yomogi","Young Serif","Yrsa","Ysabeau","Ysabeau Infant","Ysabeau Office","Ysabeau SC","Yuji Boku","Yuji Hentaigana Akari","Yuji Hentaigana Akebono","Yuji Mai","Yuji Syuku","Yusei Magic","ZCOOL KuaiLe","ZCOOL QingKe HuangYou","ZCOOL XiaoWei","Zain","Zen Antique","Zen Antique Soft","Zen Dots","Zen Kaku Gothic Antique","Zen Kaku Gothic New","Zen Kurenaido","Zen Loop","Zen Maru Gothic","Zen Old Mincho","Zen Tokyo Zoo","Zeyada","Zhi Mang Xing","Zilla Slab","Zilla Slab Highlight"]');
function Ge(a) {
  return a.type === "stack" ? Me.find((t) => t.value === a.family)?.label ?? a.family : a.family;
}
function Aa(a) {
  const t = O(
    () => Ma.map((r) => ({ value: { type: "google", family: r }, label: r })),
    []
  ), o = le(), s = Me.map((r) => ({
    value: { type: "stack", family: r.value },
    label: r.label
  })), n = o.typography.alternatives?.map((r) => ({
    label: Ge(r[a]),
    value: r[a]
  })) ?? [];
  return O(
    () => [
      ...n.length ? [{ group: "Suggested Fonts", options: n }] : [],
      {
        group: "Generic Fonts",
        options: s
      },
      {
        group: "Google Fonts",
        options: t
      }
    ],
    [n, s, t]
  );
}
const Ba = ({ data: a }) => /* @__PURE__ */ e("div", { className: "px-2 py-1 text-xs bg-gray-200 text-gray-600", children: a.group });
function Ta({ initialValue: a, onChange: t, fontType: o }) {
  const [s, n] = A(a), c = Aa(o), r = {
    control: (i) => (i.isFocused, "outline-none bg-white rounded !min-h-full border border-gray-300"),
    valueContainer: () => "bg-white px-2.5",
    placeholder: () => "text-sm bg-white",
    input: () => "text-sm outline-none !focus:outline-none !focus-within:outline-none [&>input]:focus:ring-0 [&>input]:focus-within:ring-0",
    container: () => "text-sm h-8",
    menu: () => "text-sm bg-white shadow-2xl rounded py-1",
    menuList: () => H({
      scrollbarColor: "var(--violet-4) var(--violet-2)",
      scrollBehavior: "smooth",
      scrollbarWidth: "thin",
      "&:hover": {
        scrollbarColor: "var(--violet-7) var(--violet-3)"
      }
    }),
    loadingMessage(i) {
      return u("text-sm py-2");
    },
    indicatorsContainer: () => "text-sm pr-1.5 font-normal scale-75",
    option: (i) => i.isSelected ? u("bg-upstart-100 px-2 py-1.5") : u("bg-white px-2 py-1.5 hover:(bg-upstart-600 text-white)")
  };
  return /* @__PURE__ */ e(
    ia,
    {
      unstyled: !0,
      filterOption: oa({ ignoreAccents: !1, matchFrom: "start", ignoreCase: !0 }),
      defaultValue: { ...s, label: Ge(s) },
      onChange: (i) => {
        i !== null && (n(i.value), t(i.value));
      },
      classNames: r,
      components: {
        // @ts-ignore
        GroupHeading: Ba
        // Uncomment this to use react-window
        // MenuList, Option
      },
      options: c
    }
  );
}
function Oa() {
  const a = se();
  va(
    /* optional config */
  );
  const t = [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22], o = le(), s = Q();
  return /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ e(x, { children: "Theme" }),
    /* @__PURE__ */ l(_, { defaultValue: "current", className: "flex-1 flex flex-col h-full", children: [
      /* @__PURE__ */ l(X, { size: "1", className: "sticky top-0 z-50 bg-gray-100", children: [
        /* @__PURE__ */ e(B, { value: "current", className: "!flex-1", children: "Current Theme" }),
        /* @__PURE__ */ e(B, { value: "list", className: "!flex-1", children: "Themes library" }),
        s && /* @__PURE__ */ e(B, { value: "debug", className: "!flex-1", children: "Debug" })
      ] }),
      /* @__PURE__ */ l(T, { tab: "current", className: "px-2 overflow-auto", children: [
        /* @__PURE__ */ e(W, { className: "-mx-2 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ e($, { size: "1", className: u("text-pretty"), children: "Customize your theme colors and typography to match your brand. Theme is applied to your entire site, not just the current page." }) }),
        /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
          /* @__PURE__ */ e(x, { className: "-mx-2 my-2", children: "Colors" }),
          /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-x-3 text-sm flex-col gap-y-3 pb-2", children: Object.entries(o.colors).filter(
            ([n]) => ["base200", "base300"].includes(n) === !1 && n.endsWith("Content") === !1
          ).map(([n, c]) => /* @__PURE__ */ e(
            ra,
            {
              hideColorLabel: !0,
              labelPlacement: "right",
              name: J.properties.colors.properties[n].title,
              description: J.properties.colors.properties[n].description,
              color: c,
              labelClassName: "font-medium",
              colorType: n,
              onChange: (r) => {
                const i = { [n]: r };
                let g = o.browserColorScheme;
                if ([
                  "primary",
                  "secondary",
                  "accent",
                  "neutral",
                  "base100",
                  "base200",
                  "base300"
                ].includes(n)) {
                  const d = pa(r), p = ga(r);
                  if (!n.startsWith("base"))
                    i[`${n}Content`] = p, n === "primary" && (i.neutral = sa(
                      // @ts-ignore oklch is a valid color format
                      d.css("oklch")
                    ));
                  else if (n === "base100") {
                    const h = d.luminance() < 0.5;
                    g = h ? "dark" : "light", i.baseContent = p;
                    const [m] = d.lch(), S = h ? d.set("lch.l", m + 10) : d.set("lch.l", m - 4), w = h ? d.set("lch.l", m + 20) : d.set("lch.l", m - 8);
                    i.base200 = S.css("oklch"), i.base300 = w.css("oklch");
                  }
                }
                a.setTheme({
                  ...o,
                  browserColorScheme: g,
                  colors: {
                    ...o.colors,
                    ...i
                  }
                });
              }
            },
            n
          )) }),
          /* @__PURE__ */ e(x, { className: "-mx-2 my-2", children: "Typography" }),
          /* @__PURE__ */ l("div", { className: "text-sm flex flex-col gap-y-4 p-2", children: [
            Object.entries(o.typography).filter((n) => n[0] === "body" || n[0] === "heading").map(([n, c]) => /* @__PURE__ */ l("div", { children: [
              /* @__PURE__ */ e("label", { className: "font-medium", children: J.properties.typography.properties[n].title }),
              /* @__PURE__ */ e(be, { color: "gray", as: "p", size: "1", className: "mb-1.5", children: J.properties.typography.properties[n].description }),
              /* @__PURE__ */ e(
                Ta,
                {
                  fontType: n,
                  initialValue: c,
                  onChange: (r) => {
                    a.setTheme({
                      ...o,
                      typography: {
                        ...o.typography,
                        [n]: r
                      }
                    });
                  }
                }
              )
            ] }, n)),
            /* @__PURE__ */ l("div", { children: [
              /* @__PURE__ */ e("label", { className: "font-medium", children: "Base Font size" }),
              /* @__PURE__ */ e(be, { color: "gray", as: "p", size: "1", className: "mb-2", children: "Can be changed for fonts that are too small or too big" }),
              /* @__PURE__ */ l(
                te,
                {
                  defaultValue: `${o.typography.base}`,
                  size: "2",
                  onValueChange: (n) => {
                    a.setTheme({
                      ...o,
                      typography: {
                        ...o.typography,
                        base: parseInt(n)
                      }
                    });
                  },
                  children: [
                    /* @__PURE__ */ e(ne, { className: "!w-full", radius: "large", variant: "surface" }),
                    /* @__PURE__ */ e(ie, { position: "popper", children: t.map((n) => /* @__PURE__ */ l(oe, { value: `${n}`, children: [
                      n,
                      " px"
                    ] }, `base-${n}`)) })
                  ]
                }
              )
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ l(T, { tab: "list", className: "px-2 overflow-auto !h-[calc(100dvh-66px)]", children: [
        /* @__PURE__ */ e(W, { className: "-mx-2 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ e($, { size: "1", className: u("text-pretty"), children: "Here are some pre-made color themes. Click on a theme to preview it. Also feel free to use the Upstart AI chat to ask for a specific theme!" }) }),
        /* @__PURE__ */ e(La, {})
      ] }),
      s && /* @__PURE__ */ e(T, { tab: "debug", className: "h-full", children: /* @__PURE__ */ e(Ra, {}) })
    ] })
  ] });
}
const Ga = [
  "modern",
  "rustic",
  "playful",
  "vibrant",
  "professional",
  "neutral",
  "pastel",
  "tech",
  "elegant",
  "classic",
  "organic",
  "luxurious",
  "warm",
  "serene",
  "bold",
  "minimalist",
  "fresh",
  "calming",
  "energetic",
  "earthy"
].toSorted();
function La() {
  const a = Ke(), t = se(), [o, s] = A(!1), [n, c] = A("bold"), [r, i] = A("light"), [g, d] = A([]);
  D(() => {
    (async () => {
      const S = await (await fetch(
        `/editor/themes?colorScheme=${n}&browserColorScheme=${r}`
      )).json();
      d(S), s(!0);
    })();
  }, [n, r]);
  const p = [...a, ...g];
  return o ? /* @__PURE__ */ l(Z, { children: [
    /* @__PURE__ */ l("div", { className: "flex gap-2 items-center mt-3 mx-w-full", children: [
      /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Style" }),
      /* @__PURE__ */ l(te, { value: n, onValueChange: c, children: [
        /* @__PURE__ */ e(ne, { className: "!flex-grow !capitalize", radius: "large", variant: "surface" }),
        /* @__PURE__ */ e(ie, { position: "popper", children: /* @__PURE__ */ l(pe, { children: [
          /* @__PURE__ */ e(ge, { children: "Category" }),
          Ga.map((h) => /* @__PURE__ */ e(oe, { value: h, className: "capitalize", children: h }, h))
        ] }) })
      ] }),
      /* @__PURE__ */ l(
        te,
        {
          defaultValue: r,
          onValueChange: (h) => i(h),
          children: [
            /* @__PURE__ */ e(ne, { className: "!flex-grow !capitalize pr-0.5", radius: "large", variant: "surface" }),
            /* @__PURE__ */ e(ie, { position: "popper", children: /* @__PURE__ */ l(pe, { children: [
              /* @__PURE__ */ e(ge, { children: "Lightness" }),
              ["light", "dark"].map((h) => /* @__PURE__ */ e(oe, { value: h, className: "capitalize", children: h }, h))
            ] }) })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: u("grid grid-cols-2 gap-3 pt-3 pb-2 relative pr-1.5"), children: p.map((h) => /* @__PURE__ */ e(
      ba,
      {
        selected: t.previewTheme?.id === h.id,
        theme: h,
        onClick: () => t.setPreviewTheme(h)
      },
      h.id
    )) }),
    p.length === 0 && /* @__PURE__ */ e("div", { className: "absolute inset-0 text-center text-gray-500 h-full flex-1 flex items-center justify-center pointer-events-none", children: "No themes found for specified filters." })
  ] }) : /* @__PURE__ */ e("div", { className: "absolute inset-0 text-center text-gray-500 h-full flex-1 flex items-center justify-center", children: "Loading themes..." });
}
function Ra() {
  const a = u(
    H({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  ), t = je(), o = le();
  return /* @__PURE__ */ l("div", { className: "overflow-y-auto scrollbar-thin grow-0 max-h-[92cqh]", children: [
    t && /* @__PURE__ */ l(Z, { children: [
      /* @__PURE__ */ e(x, { children: "Preview theme" }),
      /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(t, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ e(x, { children: "Theme" }),
    /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(o, null, 2) }) }) }),
    /* @__PURE__ */ e(x, { children: "Theme colors vars" }),
    /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: a, children: JSON.stringify(fa(o), null, 2) }) }) })
  ] });
}
const Da = (a) => a === "settings" || !a;
function Le({
  brick: a,
  label: t,
  group: o,
  categoryFilter: s = Da
}) {
  const { updateBrickProps: n } = K(), c = ce(a.type), r = F(), i = ke(a.id), g = G(
    (m) => (
      // @ts-ignore
      (typeof m.metadata?.["ui:responsive"] > "u" || // @ts-ignore
      m.metadata?.["ui:responsive"] === !0 || // @ts-ignore
      m.metadata?.["ui:responsive"] === r) && // @ts-ignore
      (typeof m["ui:responsive"] > "u" || // @ts-ignore
      m["ui:responsive"] === !0 || // @ts-ignore
      m["ui:responsive"] === r) && // @ts-ignore
      s(m.metadata?.category)
    ),
    [r, s]
  ), d = O(() => ue(c.props, g), [g, c.props]), p = O(() => {
    const m = Ce[a.type].props;
    return r === "mobile" ? he({}, m, a.props, a.mobileProps ?? {}) : he({}, m, a.props ?? {});
  }, [a, r]), h = G(
    (m, S) => {
      if (!S) {
        console.warn("propertyChangedPath is missing in onChange");
        return;
      }
      if (c.isGlobalBrick) {
        console.log("Updating global brick, mutating site attributes instead of brick props");
        return;
      }
      const w = ma(c.props.properties, S), C = r === "mobile" && w?.metadata?.category !== "content", y = structuredClone(
        C ? i?.mobileProps ?? {} : i?.props ?? {}
      );
      Y(y, S, m[S]), console.debug("Props update for brick %s: %o", a.id, y), n(a.id, y, C);
    },
    [a.id, c, r, n, i]
  );
  return /* @__PURE__ */ e(
    de,
    {
      title: `${c.name} ${t ?? "settings"}`,
      initialGroup: o,
      navItems: d,
      formSchema: c.props,
      className: u("flex-grow"),
      formData: p,
      onChange: h,
      brickId: a.id
    },
    `brick-nav-${a.id}-${r}`
  );
}
function z({
  brick: a,
  className: t = "h-[calc(50cqh-58px)]"
}) {
  const { setSelectedBrickId: o, setSelectedSectionId: s } = E(), n = Ue(), c = Fe(), r = ve(), i = K(), [g, d] = A(), p = V(null), h = V(null), m = V(null);
  D(() => {
    const y = c ?? r;
    if (y) {
      const b = document.getElementById(`hierarchy_${y}`);
      b && "scrollIntoViewIfNeeded" in b && typeof b?.scrollIntoViewIfNeeded == "function" ? b.scrollIntoViewIfNeeded({ behavior: "smooth", block: "center" }) : b && b.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
    }
  }, [c, r]), D(() => {
    h.current = document.getElementById("page-container");
  }, []), D(() => {
    p.current && p.current.classList.remove(u("outline-upstart-400")), g && (p.current = document.getElementById(g.id), p.current && (p.current.classList.add(u("outline-upstart-400")), h.current && !Ia(p.current, h.current) && p.current.scrollIntoView({ behavior: "smooth", block: "nearest" })));
  }, [g]);
  function S({
    bricks: y,
    level: b = 0,
    // currentIndex = -1,
    isChild: N = !1
  }) {
    return y.map((f, v) => {
      const M = "$children" in f.props ? f.props.$children : [], P = M.length > 0, k = q[f.type].isContainer, I = q[f.type].icon, j = q[f.type].name;
      return /* @__PURE__ */ e(fe, { draggableId: `hierarchy_${f.id}`, index: v, children: (L, U) => /* @__PURE__ */ e(
        "div",
        {
          ref: L.innerRef,
          ...L.draggableProps,
          className: u("min-h-fit flex flex-col gap-2", k && "mt-1 mr-1 ml-1 last:mb-1"),
          children: /* @__PURE__ */ l(
            "div",
            {
              id: `hierarchy_${f.id}`,
              "data-element-type": "brick",
              "data-brick-type": f.type,
              "data-level": b,
              "data-has-children": P,
              className: u(
                "select-none cursor-pointer flex flex-col ",
                // level > 0 || (hasChildren && "ml-1.5"),
                k && "rounded outline outline-2 min-h-fit",
                k ? a?.id === f.id ? "outline-orange-300 " : "outline-transparent hover:(outline-orange-200)" : a?.id === f.id ? "outline-upstart-400 " : "outline-transparent hover:(outline-upstart-100)",
                U.isDragging && "outline outline-2 outline-upstart-400 bg-upstart-100"
              ),
              children: [
                /* @__PURE__ */ l(
                  "div",
                  {
                    className: u(
                      `flex items-center justify-between group/${f.id} transition-all py-1 px-1.5`,
                      (N || b === 0) && H({
                        paddingLeft: `${(b + 1) * 10}px`
                      }),
                      k ? a?.id === f.id ? "bg-orange-300 text-white font-bold" : "hover:bg-orange-50" : a?.id === f.id ? "bg-upstart-500 text-white font-bold" : "hover:bg-upstart-50"
                    ),
                    onClick: (R) => {
                      R.stopPropagation(), R.preventDefault(), o(f.id), s(), document.getElementById(f.id)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
                    },
                    children: [
                      /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-1.5 select-none", children: [
                        /* @__PURE__ */ e(I, { className: "w-4 h-4" }),
                        " ",
                        j
                      ] }),
                      /* @__PURE__ */ e("div", { ...L.dragHandleProps, children: /* @__PURE__ */ e(
                        me,
                        {
                          className: `w-5 h-5 cursor-row-resize opacity-0 group-hover/${f.id}:opacity-80 transition-opacity`
                        }
                      ) })
                    ]
                  }
                ),
                M.length > 0 && /* @__PURE__ */ e(
                  ae,
                  {
                    droppableId: `hierarchy_${f.id}`,
                    direction: "vertical",
                    children: (R) => /* @__PURE__ */ l(
                      "div",
                      {
                        ref: R.innerRef,
                        ...R.droppableProps,
                        className: u("hierarchy-container"),
                        children: [
                          /* @__PURE__ */ e(S, { bricks: M, level: b + 1, isChild: !0 }),
                          R.placeholder
                        ]
                      }
                    )
                  }
                )
              ]
            }
          )
        },
        f.id
      ) }, `hierarchy_${f.id}`);
    });
  }
  const w = (y) => {
    const { source: b, destination: N, type: f, draggableId: v } = y;
    if (m.current = null, N) {
      const P = y.draggableId.replace(/^hierarchy_/, "");
      let { droppableId: k, index: I } = N;
      k = k.replace(/^hierarchy_/, "");
      let { droppableId: j } = b;
      if (j = j.replace(/^hierarchy_/, ""), k === "main-hierarchy") {
        const L = Array.from(n), [U] = L.splice(b.index, 1);
        L.splice(N.index, 0, U), i.reorderSections(L.map((R) => R.id));
      } else f === "brick-hierarchy" || f === "DEFAULT" ? j === k ? (console.log("Reordering brick within the same section/parent", y), i.reorderBrickWithin(P, I)) : n.some((U) => U.id === k) ? i.moveBrickToSection(P, k, I) : i.moveBrickToContainerBrick(P, k, I) : (console.warn("Unhandled drag type:", f), console.warn("Result:", y));
    }
    const M = document.getElementById(v);
    if (M?.style.removeProperty("z-index"), M?.dataset.elementType === "section")
      M.querySelectorAll(".hierarchy-container").forEach((k) => {
        k.style.removeProperty("display"), k.style.removeProperty("z-index");
      });
    else if (M?.dataset.hasChildren === "true") {
      const P = M.lastElementChild;
      P && (P.style.removeProperty("display"), P.style.removeProperty("z-index"));
    }
  }, C = (y) => {
    m.current = y.draggableId;
    const b = document.getElementById(y.draggableId);
    console.log("BEFORE CAPTURE", { cap: y, dataset: b?.dataset }), b?.style.setProperty("z-index", "9999"), b?.dataset.elementType === "section" ? b.querySelectorAll(".hierarchy-container").forEach((f) => {
      f.style.setProperty("display", "none", "important");
    }) : b?.dataset.hasChildren === "true" && b.lastElementChild?.style.setProperty("display", "none", "important");
  };
  return /* @__PURE__ */ l("div", { className: u("grow shrink-0 bg-red", t), onMouseLeave: () => d(void 0), children: [
    /* @__PURE__ */ l(x, { className: "border-t", children: [
      /* @__PURE__ */ e("span", { children: "Hierarchy" }),
      /* @__PURE__ */ e(
        la,
        {
          help: `View and manage the hierarchy of sections and bricks on this page. Click on a section or brick to select it.
Drag and drop sections and bricks to reorder them.
          `
        }
      )
    ] }),
    /* @__PURE__ */ e(ca, { onDragEnd: w, onBeforeCapture: C, children: /* @__PURE__ */ e(ae, { droppableId: "main-hierarchy", type: "hierarchy-section", direction: "vertical", children: (y, b) => /* @__PURE__ */ l(
      "div",
      {
        ref: y.innerRef,
        className: u(
          "flex flex-col gap-1 py-2 pt-1 px-1 text-sm text-[80%] scrollbar-thin max-h-[calc(100%-38px)] overflow-y-auto"
        ),
        ...y.droppableProps,
        children: [
          n.map((N, f) => /* @__PURE__ */ e(
            fe,
            {
              draggableId: `hierarchy_${N.id}`,
              index: f,
              children: (v, M) => /* @__PURE__ */ l(
                "div",
                {
                  id: `hierarchy_${N.id}`,
                  "data-element-type": "section",
                  ref: v.innerRef,
                  ...v.draggableProps,
                  className: u(
                    "rounded group mt-1 outline outline-2 outline-transparent",
                    M.isDragging && "outline-upstart-400 bg-upstart-100",
                    N.id === c ? "outline-upstart-400" : "hover:(outline-upstart-100)"
                  ),
                  children: [
                    /* @__PURE__ */ l(
                      "div",
                      {
                        className: u(
                          "py-1 px-1.5 rounded-t select-none flex justify-between items-center group min-h-fit",
                          N.id === c ? "bg-upstart-500 text-white font-bold cursor-default" : "hover:bg-upstart-50 cursor-pointer"
                        ),
                        onClick: (P) => {
                          if (P.defaultPrevented) {
                            console.log(
                              "Event was already handled, skipping click action on section hierarchy"
                            );
                            return;
                          }
                          P.preventDefault(), o(), s(N.id), document.getElementById(N.id)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
                        },
                        children: [
                          /* @__PURE__ */ l("span", { children: [
                            "Section ",
                            N.label ?? "Unnamed"
                          ] }),
                          /* @__PURE__ */ e("div", { ...v.dragHandleProps, children: /* @__PURE__ */ e(me, { className: "w-5 h-5 cursor-row-resize opacity-0 group-hover:opacity-80 transition-opacity" }) })
                        ]
                      }
                    ),
                    /* @__PURE__ */ e(ae, { droppableId: `hierarchy_${N.id}`, type: "brick-hierarchy", children: (P) => /* @__PURE__ */ l(
                      "div",
                      {
                        ref: P.innerRef,
                        ...P.droppableProps,
                        className: u("hierarchy-container"),
                        children: [
                          /* @__PURE__ */ e(S, { bricks: N.bricks }),
                          N.bricks.length === 0 && /* @__PURE__ */ e(
                            "div",
                            {
                              className: u(
                                "w-full h-full px-2 py-1.5 flex items-center text-gray-500 font-normal"
                              ),
                              children: "No bricks in this section."
                            }
                          ),
                          P.placeholder
                        ]
                      }
                    ) })
                  ]
                },
                N.id
              )
            },
            `hierarchy_${N.id}`
          )),
          y.placeholder
        ]
      }
    ) }) })
  ] });
}
function Ia(a, t) {
  const o = a.getBoundingClientRect(), s = t.getBoundingClientRect(), n = o.top - s.top + t.scrollTop, c = o.left - s.left + t.scrollLeft, r = n + a.offsetHeight, i = c + a.offsetWidth, g = t.scrollTop, d = t.scrollLeft, p = g + t.clientHeight, h = d + t.clientWidth;
  return r > g && n < p && i > d && c < h;
}
function Re({ manifest: a, className: t }) {
  return typeof a.icon == "string" ? /* @__PURE__ */ e(
    "span",
    {
      className: u(
        t,
        "w-7 h-7 text-upstart-600 dark:text-upstart-400 [&>svg]:w-auto [&>svg]:h-7 inline-block"
      ),
      dangerouslySetInnerHTML: { __html: a.icon }
    }
  ) : /* @__PURE__ */ e(
    a.icon,
    {
      className: u(
        t,
        "w-6 h-6 text-upstart-600/90 group-hovertext-upstart-700",
        a.iconClassName
      )
    }
  );
}
function Fa({ brick: a }) {
  const t = F(), [o, s] = Ae("inspector_tabs_map", {}), n = Ve(a.id), c = Q(), r = ce(a.type), i = [], g = ze(r.props, (m) => (
    // @ts-ignore
    m.metadata?.category === "content" && // @ts-ignore
    m["ui:field"] !== "hidden" && // @ts-ignore
    (typeof m["ui:hidden-if"] > "u" || // @ts-ignore
    m["ui:hidden-if"] === "no-page-queries" && i.length > 0) && // @ts-ignore
    (typeof m.metadata?.["ui:responsive"] > "u" || // @ts-ignore
    m.metadata?.["ui:responsive"] === !0 || // @ts-ignore
    m.metadata?.["ui:responsive"] === t) && // @ts-ignore
    (typeof m["ui:responsive"] > "u" || // @ts-ignore
    m["ui:responsive"] === !0 || // @ts-ignore
    m["ui:responsive"] === t)
  )), d = Object.keys(g).length > 0, p = d || c, h = o[a.type] ?? (d ? "content" : "settings");
  return D(() => {
    (!d && h === "content" || h === "debug" && !c) && s((m) => ({ ...m, [a.type]: "settings" }));
  }, [a.type, h, d]), n ? (console.dir({ brick: a, section: n, tabsMapping: o }), /* @__PURE__ */ l("div", { className: "flex flex-col flex-grow h-full", children: [
    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ l("div", { className: "flex flex-1 justify-between items-center group", children: [
      /* @__PURE__ */ l("span", { className: "flex items-center", children: [
        /* @__PURE__ */ e(Re, { manifest: r, className: "inline-block mr-2 !h-4 !w-4 " }),
        r.name
      ] }),
      /* @__PURE__ */ e(
        "span",
        {
          className: u(
            "text-xs font-mono lowercase opacity-0 group-hover:opacity-70 transition-opacity delay-1000"
          ),
          onClick: () => {
            navigator.clipboard.writeText(a.id);
          },
          children: a.id
        }
      )
    ] }) }),
    /* @__PURE__ */ l(
      _,
      {
        value: h,
        onValueChange: (m) => {
          s((S) => ({ ...S, [a.type]: m }));
        },
        className: "flex-1 flex flex-col",
        children: [
          p && /* @__PURE__ */ l(X, { className: "sticky top-0 z-50 bg-gray-100 dark:bg-dark-900", size: "1", children: [
            d && /* @__PURE__ */ e(B, { value: "content", className: "!flex-1", children: "Content" }),
            /* @__PURE__ */ e(B, { value: "settings", className: "!flex-1", children: t === "mobile" ? "Mobile settings" : "Settings" }),
            c && /* @__PURE__ */ e(B, { value: "debug", className: "!flex-1", children: "Debug" })
          ] }),
          /* @__PURE__ */ e(T, { tab: "settings", children: /* @__PURE__ */ e(Ha, { brick: a, section: n, hasTabs: p }) }),
          d && /* @__PURE__ */ e(T, { tab: "content", children: /* @__PURE__ */ e(Ka, { brick: a, section: n, hasTabs: p }) }),
          c && /* @__PURE__ */ e(T, { tab: "debug", children: /* @__PURE__ */ e(Ea, { brick: a, section: n, hasTabs: p }) })
        ]
      }
    )
  ] }, `brick-inspector-${a.id}`)) : (console.warn(`No section found for brick: ${a.id}`), console.log({ brick: a }), null);
}
function Ea({ brick: a, section: t, hasTabs: o }) {
  const s = u(
    H({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  ), { getParentBrick: n } = K(), c = n(a.id);
  return /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ l("div", { className: "h-[50cqh] grow-0 overflow-y-auto scrollbar-thin", children: [
      /* @__PURE__ */ l(x, { children: [
        "Brick ",
        /* @__PURE__ */ e("code", { className: "text-xs cursor-text select-all", children: a.id })
      ] }),
      /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: s, children: JSON.stringify(a, null, 2) }) }) }),
      c && /* @__PURE__ */ l(Z, { children: [
        /* @__PURE__ */ l(x, { children: [
          "Parent Brick ",
          /* @__PURE__ */ e("code", { className: "text-xs", children: c.id })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: s, children: JSON.stringify(c, null, 2) }) }) })
      ] }),
      /* @__PURE__ */ l(x, { children: [
        "Section ",
        /* @__PURE__ */ e("code", { className: "text-xs", children: t.id })
      ] }),
      /* @__PURE__ */ e("div", { className: "flex-1 ", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: s, children: JSON.stringify(t, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ e(
      z,
      {
        brick: a,
        section: t,
        className: u(o ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function Ha({ brick: a, section: t, hasTabs: o }) {
  const s = F();
  ce(a.type);
  const { deleteBrick: n } = K(), { deselectBrick: c, hidePanel: r } = E();
  return /* @__PURE__ */ l("form", { className: u("flex flex-col h-full"), onSubmit: (i) => i.preventDefault(), children: [
    s === "mobile" && /* @__PURE__ */ e(W, { size: "1", children: /* @__PURE__ */ l($, { size: "1", children: [
      /* @__PURE__ */ e("strong", { children: "Note" }),
      ": You are editing mobile-only styles. Any changes here will only affect how the brick appears on mobile devices."
    ] }) }),
    /* @__PURE__ */ l("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: [
      /* @__PURE__ */ e(Le, { brick: a }),
      /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-2 border-t border-gray-200", children: /* @__PURE__ */ e(
        Be,
        {
          type: "button",
          size: "1",
          color: "red",
          radius: "medium",
          variant: "soft",
          onClick: () => {
            n(a.id), c(a.id), r("inspector");
          },
          children: "Delete brick"
        }
      ) })
    ] }),
    /* @__PURE__ */ e(
      z,
      {
        brick: a,
        section: t,
        className: u(o ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function Ka({ brick: a, section: t, hasTabs: o }) {
  const { deleteBrick: s } = K(), { deselectBrick: n, hidePanel: c } = E();
  return /* @__PURE__ */ l("div", { className: u("flex flex-col h-full"), children: [
    /* @__PURE__ */ l("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: [
      /* @__PURE__ */ e(
        Le,
        {
          brick: a,
          label: "content",
          categoryFilter: (r) => r === "content"
        }
      ),
      /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-2", children: /* @__PURE__ */ e(
        Be,
        {
          type: "button",
          size: "1",
          color: "red",
          variant: "soft",
          radius: "medium",
          onClick: () => {
            s(a.id), n(a.id), c("inspector");
          },
          children: "Delete brick"
        }
      ) })
    ] }),
    /* @__PURE__ */ e(
      z,
      {
        brick: a,
        section: t,
        className: u(o ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function ja({ section: a, group: t }) {
  const { updateSectionProps: o } = K(), s = F(), [n] = Ae("upstart:editor:show-advanced", !1), c = G(
    (d) => (
      // @ts-ignore
      (typeof d.metadata?.["ui:responsive"] > "u" || // @ts-ignore
      d.metadata?.["ui:responsive"] === !0 || // @ts-ignore
      d.metadata?.["ui:responsive"] === s) && // @ts-ignore
      (typeof d["ui:responsive"] > "u" || // @ts-ignore
      d["ui:responsive"] === !0 || // @ts-ignore
      d["ui:responsive"] === s) && // @ts-ignore
      (!d.metadata?.category || d.metadata?.category === "settings") && // @ts-ignore
      (!d["ui:advanced"] || n)
    ),
    [s, n]
  ), r = O(() => ue(ee.properties.props, c), [c]), i = O(() => {
    const d = we(ee.properties.props, s);
    return s === "mobile" ? re({}, d, a.props, a.mobileProps) : re({}, d, a.props ?? {});
  }, [s, a.props, a.mobileProps]), g = G(
    (d, p) => {
      if (!p) {
        console.warn("propertyChangedPath is missing in style tab");
        return;
      }
      const h = structuredClone(a?.props ?? {});
      Y(h, p, d[p]), console.log("SectionSettingsView onChange", {
        props: h
      }), o(a.id, h, s === "mobile");
    },
    [a.id, s, o, a.props]
  );
  return /* @__PURE__ */ e(
    de,
    {
      title: "Section settings",
      initialGroup: t,
      navItems: r,
      formSchema: ee.properties.props,
      className: "flex-grow",
      formData: i,
      onChange: g,
      brickId: a.id
    },
    `section-settings-${a.id}-${s}`
  );
}
function Ua({ section: a }) {
  const t = Q(), [o, s] = A(t ? "debug" : "settings"), n = t;
  return D(() => {
    o === "debug" && !t && s("settings");
  }, [o, t]), /* @__PURE__ */ l("div", { className: "flex flex-col flex-grow h-full", children: [
    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ l("div", { className: "flex justify-between items-center group", children: [
      /* @__PURE__ */ l("span", { className: "flex items-center", children: [
        /* @__PURE__ */ e(Je, { className: "inline-block mr-2 w-5 h-5 text-upstart-600" }),
        "Section ",
        a.label ?? "unnamed"
      ] }),
      /* @__PURE__ */ e(
        "span",
        {
          className: u(
            "text-xs font-mono lowercase opacity-0 group-hover:opacity-70 transition-opacity delay-1000"
          ),
          onClick: () => {
            navigator.clipboard.writeText(a.id);
          },
          children: a.id
        }
      )
    ] }) }),
    /* @__PURE__ */ l(
      _,
      {
        value: o,
        onValueChange: (c) => {
          s(c);
        },
        className: "flex-1 flex flex-col",
        children: [
          n && /* @__PURE__ */ l(X, { className: "sticky top-0 z-50 bg-gray-100 dark:bg-dark-900", size: "1", children: [
            /* @__PURE__ */ e(B, { value: "settings", className: "!flex-1", children: "Settings" }),
            t && /* @__PURE__ */ e(B, { value: "debug", className: "!flex-1", children: "Debug" })
          ] }),
          /* @__PURE__ */ e(T, { tab: "settings", children: /* @__PURE__ */ e(Va, { section: a, hasTabs: n }) }),
          t && /* @__PURE__ */ e(T, { tab: "debug", children: /* @__PURE__ */ e(za, { section: a, hasTabs: n }) })
        ]
      }
    )
  ] }, `section-inspector-${a.id}`);
}
function Va({ section: a, hasTabs: t }) {
  const o = F();
  return /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
    o === "mobile" && /* @__PURE__ */ e(W, { size: "1", children: /* @__PURE__ */ l($, { size: "1", children: [
      /* @__PURE__ */ e("strong", { children: "Note" }),
      ": You are editing mobile-only styles. Any changes here will only affect how the brick appears on mobile devices."
    ] }) }),
    /* @__PURE__ */ e("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: /* @__PURE__ */ e(ja, { section: a }) }),
    /* @__PURE__ */ e(z, { section: a, className: u(t ? "h-[calc(50cqh-58px)]" : "h-[50cqh]") })
  ] });
}
function za({ section: a, hasTabs: t }) {
  const o = u(
    H({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  );
  return /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ l("div", { className: "h-[50cqh] grow-0 overflow-y-auto scrollbar-thin", children: [
      /* @__PURE__ */ l(x, { children: [
        "Section ",
        /* @__PURE__ */ e("code", { className: "text-xs cursor-text select-all", children: a.id })
      ] }),
      /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e("pre", { className: "p-1", children: /* @__PURE__ */ e("code", { className: o, children: JSON.stringify(a, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ e(z, { section: a, className: u(t ? "h-[calc(50cqh-58px)]" : "h-[50cqh]") })
  ] });
}
const Ja = {
  basic: "Basic elements",
  widgets: "Widgets",
  media: "Media",
  container: "Containers & utilities"
  // layout: "Layout",
};
function qa() {
  const { setMouseOverPanel: a } = E(), [t, o] = A(null);
  return /* @__PURE__ */ l(
    "div",
    {
      onMouseEnter: () => a(!0),
      onMouseLeave: () => a(!1),
      className: "flex flex-col h-full",
      children: [
        /* @__PURE__ */ e(x, { children: "Library" }),
        /* @__PURE__ */ e("div", { className: "flex flex-col gap-3 flex-1", children: Object.entries(Ja).map(([s, n]) => /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
          /* @__PURE__ */ e("div", { className: "text-xs font-bold uppercase text-gray-600 bg-upstart-50 px-3 py-2", children: n }),
          /* @__PURE__ */ e(
            "div",
            {
              className: u("grid gap-1.5 mx-2"),
              style: {
                gridTemplateColumns: "repeat(auto-fill, minmax(66px, 1fr))"
              },
              children: Object.values(q).filter((c) => c.category === s && !c.hideInLibrary).filter((c) => !c.inlineDragDisabled).map((c, r) => /* @__PURE__ */ e(
                Wa,
                {
                  defaults: Ce[c.type],
                  index: r,
                  onMouseOver: (i) => {
                    o(c);
                  },
                  onMouseLeave: () => o(null)
                },
                c.type
              ))
            }
          )
        ] }, s)) }),
        /* @__PURE__ */ e(
          "div",
          {
            className: u(
              "mt-auto p-2 bg-upstart-50 font-normal text-upstart-700 text-xs rounded transition-opacity",
              t ? "opacity-100" : "opacity-0"
            ),
            children: t?.description
          }
        )
      ]
    }
  );
}
function Wa(a) {
  const {
    defaults: { manifest: t },
    index: o,
    ...s
  } = a, [n, c] = A(Se()), r = O(() => qe(t.type), [n]), i = ya({
    // const draggable = useDraggable({
    id: r.id,
    type: "library",
    data: { manifest: t, brick: r, fromLibrary: !0 },
    feedback: "clone",
    index: 0
  });
  return D(() => {
    i.isDragging || c(Se());
  }, [i.isDragging]), /* @__PURE__ */ e(
    "div",
    {
      "data-brick-template-type": r.type,
      "data-brick-min-w": t.minWidth?.desktop,
      "data-brick-min-h": t.minHeight?.desktop,
      "data-brick-default-w": t.defaultWidth?.desktop,
      "data-brick-default-h": t.defaultHeight?.desktop,
      ref: i.ref,
      ...s,
      className: u(
        `rounded border border-upstart-100 hover:border-upstart-600 hover:bg-upstart-50 bg-white dark:bg-dark-700 !cursor-grab
        active:!cursor-grabbing touch-none select-none pointer-events-auto draggable-brick group aspect-square
        z-[99999] flex flex-col items-center justify-center`,
        i.isDragging && "shadow-2xl border-upstart-600 scale-110"
      ),
      ...a,
      children: /* @__PURE__ */ l(
        "div",
        {
          className: u(
            "flex-1 flex flex-col justify-center text-upstart-700 dark:text-upstart-400 items-center gap-1 rounded-[inherit]"
          ),
          children: [
            /* @__PURE__ */ e(Re, { manifest: t }),
            /* @__PURE__ */ e("span", { className: u("text-center text-xs"), children: t.name })
          ]
        }
      )
    }
  );
}
function gt({ className: a, ...t }) {
  const { panel: o, panelPosition: s } = Ee(), n = F(), c = ve(), r = He(), { togglePanelPosition: i, hidePanel: g } = E(), d = ke(c);
  return c && !d && console.warn(`[Panel] No brick found with id ${c}`), !o || o === "inspector" && !d && !r ? null : /* @__PURE__ */ e(
    "aside",
    {
      id: "floating-panel",
      className: u(
        `z-[9999] fixed top-0 bottom-0 flex shadow-2xl overscroll-none         min-w-[360px] w-[360px] opacity-100
        bg-white dark:bg-dark-900 border-upstart-300 dark:border-dark-700 overflow-visible`,
        {
          // "transition-transform duration-150": !!panel,
          "transition-all duration-100": !o,
          "left-0 border-r": s === "left",
          "right-0 border-l": s === "right",
          "-translate-x-full opacity-0": !o && s === "left",
          "translate-x-full": !o && s === "right"
        }
      ),
      ...t,
      children: /* @__PURE__ */ l("div", { className: "flex-grow relative flex-col", children: [
        n === "desktop" && o === "library" && /* @__PURE__ */ e(qa, {}),
        o === "inspector" && d && /* @__PURE__ */ e(Fa, { brick: d }),
        o === "inspector" && !d && r && /* @__PURE__ */ e(Ua, { section: r }),
        o === "theme" && /* @__PURE__ */ e(Oa, {}),
        o === "settings" && /* @__PURE__ */ e(ka, {}),
        o && /* @__PURE__ */ l(Z, { children: [
          /* @__PURE__ */ e(Na, { content: "Close panel", delayDuration: 500, children: /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              className: u(
                "absolute z-[9999] aspect-square h-7 w-7 top-0 flex justify-center items-center bg-gradient-to-tr from-red-800 to-red-700 hover:(opacity-80 text-white) border border-t-0 border-red-900 text-white/90",
                s === "right" ? "-left-7 rounded-bl" : "-right-7 rounded-br"
              ),
              onClick: () => {
                g();
              },
              children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
            }
          ) }),
          /* @__PURE__ */ l(
            "button",
            {
              type: "button",
              className: u(
                "absolute z-[9999] aspect-square h-8 w-8 bottom-0 flex justify-center items-center bg-gray-100 hover:(bg-upstart-100 text-upstart-800) backdrop-blur-md border border-b-0 border-upstart-200 text-black/50",
                s === "right" ? "-left-8 rounded-tl border-r-0" : "-right-8 rounded-tr border-l-0"
              ),
              onClick: () => {
                i();
              },
              children: [
                s === "right" && /* @__PURE__ */ e($e, { className: "h-5 w-5" }),
                s === "left" && /* @__PURE__ */ e(Ye, { className: "h-5 w-5" })
              ]
            }
          )
        ] })
      ] })
    }
  );
}
export {
  gt as default
};
